欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

Javascript上篇

程序员文章站 2022-03-27 22:09:23
本文章适合具有一定程序编程语言基础的人士阅读,最好学完Java基础再来阅读本文章更容易理解语言初学者会看起来比较费劲,不易理解 一.导入脚本 在html导入Javascript的格式是: 两个关键属性:deter,async deter:defer属性告诉浏览器要等整个页面载入以后、解析完毕才执行该 ......

本文章适合具有一定程序编程语言基础的人士阅读,最好学完Java基础再来阅读本文章更容易理解语言初学者会看起来比较费劲,不易理解

一.导入脚本

在html导入Javascript的格式是:

<script src="test.js" type="text/javascript"></script>

两个关键属性:deter,async

    deter:defer属性告诉浏览器要等整个页面载入以后、解析完毕才执行该<script.../>中的脚本。

   async:指定async属性的的<script.../>的脚本会启动新的线程,异步执行<script.../>导入的脚本文件

   语法格式如下:

<script src="test.js" type="text/javascript" defer async></script>

二.数据类型和变量

隐式定义:直接给变量赋值

显示定义:使用var关键字定义变量。显式声明变量时,变量没有初始值,声明变量的数据类型也不确定,当第一次给变量赋值时,数据类型才确定下来。

变量的作用域:

  全局变量:在全局范围(不在函数内)定义的变量(不管是否使用var),不是用var定义的变量都是全局变量,全局变量可以被所有的脚本访问。

 局部变量:在函数里定义,只在函数里有效

实例代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>事件处理中全局变量和局部变量</title>
    <script type="text/javascript">
        var x="全局变量";
    </script>
</head>
<body>
<input type="button" value="局部变量" onclick="var x = '局部变量'; alert('输出x变量的值 '+x);"/>
<input type="button" value="全局变量" onclick="alert('输出x全局变量的值 '+x)"/>
</body>
</html>

javascript的变量提升机制:所谓变量提升就是不管被不被执行,变量声明总是会被解释器提升到函数体顶部。

使用let变量和使用const定义常量

  使用let定义的全局变量不会变成window对象的属性,也不会出现变量提升的情况,弥补了var的缺陷

  使用const定义的常量只能在定义时初始化。使用const定义常量以后不允许改变常量值。

       基本数据类型

      数值类型:包括整型和浮点数,支持科学记数法

     布尔类型:只有true和false两个值

     字符串类型:字符串类型必须用双引号或单引号引起来

     undefined类型:专门用来确定一个已经创建但是没有初值的变量

     null类型:表示某个变量的值为空,很多时候,undefined和null相等

三.正则表达式

 

新建正则表达式

方式一:直接量语法

var reg = /pattern/attributes

方式二:创建 RegExp 对象的语法

 var reg = new RegExp(pattern, attributes);

参数说明:

参数 pattern 是一个字符串,指定了正则表达式的模式或其他正则表达式。
参数 attributes 是一个可选的字符串,包含属性 “g”、”i” 和 “m”,分别用于指定全局匹配、区分大小写的匹配和多行匹配。ECMAScript 标准化之前,不支持 m 属性。如果 pattern 是正则表达式,而不是字符串,则必须省略该参数。

两者区别在于:
1.采用直接量语法新建的正则表达式对象在代码编译时就会生成,是平常开发中常用的方式;
2.采用构造函数生成的正则对象要在代码运行时生成。

正则表达式使用:
正则对象的方法是指这样使用的: RegExp对象.方法(字符串)
字符串对象的方法是这样使用:字符串.方法(RegExp对象)

正则对象的属性和方法

属性

ignoreCase 返回布尔值,表示RegExp 对象是否具有标志 i
global 返回布尔值,表示RegExp对象是否具有标志g
multiline 返回布尔值,表示RegExp 对象是否具有标志 m。
lastIndex 一个整数,标识开始下一次匹配的字符位置
source 返回正则表达式的源文本(不包括反斜杠)

i 执行对大小写不敏感的匹配

g 执行全局匹配(查找所有匹配而非在找到第一个匹配后停止)。
m 执行多行匹配
正则表达式作用

通常用于两种任务:

1.验证
用于验证时,通常需要在前后分别加上^和$,以匹配整个待验证字符串;

2.搜索替换
搜索/替换时是否加上此限定则根据搜索的要求而定,此外,也有可能要在前后加上\b而不是^和$

字符类匹配

[…] 查找方括号之间的任何字符
[^…] 查找任何不在方括号之间的字符
[a-z] 查找任何从小写 a 到小写 z 的字符
[A-Z] 查找任何从大写 A 到大写 Z 的字符
[A-z] 查找任何从大写 A 到小写 z 的字符
. 查找单个字符,除了换行和行结束符
\w 查找单词字符,等价于[a-zA-Z0-9]
\W 查找非单词字符,等价于[^a-zA-Z0-9]
\s 查找空白字符
\S 查找非空白字符
\d 查找数字,等价于[0-9]
\D 查找非数字字符,等价于[^0-9]
\b 匹配单词边界
\r 查找回车符
\t 查找制表符
\0 查找 NULL 字符
\n 查找换行符

重复字符匹配

{n,m} 匹配前一项至少n次,但不能超过m次
{n,} 匹配前一项n次或更多次
{n} 匹配前一项n次
n? 匹配前一项0次或者1次,也就是说前一项是可选的,等价于{0,1}
n+ 匹配前一项1次或多次,等价于{1,}
n* 匹配前一项0次或多次,等价于{0,}
n$ 匹配任何结尾为 n 的字符串
^n 匹配任何开头为 n 的字符串
?=n 匹配任何其后紧接指定字符串 n 的字符串
?!n 匹配任何其后没有紧接指定字符串 n 的字符串

匹配特定数字

^[1-9]\d*$    匹配正整数
^-[1-9]\d*$   匹配负整数
^-?[0-9]\d*$   匹配整数
^[1-9]\d*|0$  匹配非负整数(正整数 + 0)
^-[1-9]\d*|0$   匹配非正整数(负整数 + 0)
^[1-9]\d*.\d*|0.\d*[1-9]\d*$  匹配正浮点数
^-([1-9]\d*.\d*|0.\d*[1-9]\d*)$ 匹配负浮点数
^-?([1-9]\d*.\d*|0.\d*[1-9]\d*|0?.0+|0)$  匹配浮点数
^[1-9]\d*.\d*|0.\d*[1-9]\d*|0?.0+|0$   匹配非负浮点数(正浮点数 + 0)
^(-([1-9]\d*.\d*|0.\d*[1-9]\d*))|0?.0+|0$  匹配非正浮点数(负浮点数 + 0)

匹配特定字符串

^[A-Za-z]+$  匹配由26个英文字母组成的字符串
^[A-Z]+$  匹配由26个英文字母的大写组成的字符串
^[a-z]+$  匹配由26个英文字母的小写组成的字符串
^[A-Za-z0-9]+$  匹配由数字和26个英文字母组成的字符串
^\w+$  匹配由数字、26个英文字母或者下划线组成的字符串

方法

test方法

检索字符串中指定的值。返回 true 或 false。
如果字符串 string 中含有与 RegExpObject 匹配的文本,则返回 true,否则返回 false。

示例:

<script type="text/javascript">
        alert(/^<a href=(\'|\")[a-zA-Z0-9\/:\.]*(\'|\")>.*<\/a>$/.test("<a href='http://www.crazyit.org'>疯狂Java联盟</a>"));
        function trim(s){
            return s.replace(/(^\s*)|(\s*$)/g,"");
        }
        alert(trim('   hello,JavaScript     '));
    </script>

四.数组

   数组是一系列的变量,有以下三个特征:

   1)Javascript的数组长度可变,数组长度总等于所有元素索引最大值加1.

   2)同一个数组中的元素类型可以互不相同

   3)访问数组元素时不会产生数组越界,访问并未赋值的数组元素时,该元素的值为undefined。

  Javascript数组栈使用的两个方法如下:

       push():元素入栈,返回入栈后数组的长度

       pop():元素出栈,返回出栈的数组元素

   JavaScript数组作为队列使用的两个方法如下:

       unshift(ele):元素入队列,返回入队列后的数组的长度

       shift():元素出队列,返回出队列的数组元素

  arrays对象还定义了如下方法:

      concat(value,...):为数组添加一个或多个元素,返回追加元素后的数组。

      join([separator]):将数组的多个元素拼接在一起,组成字符串后返回

示例代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>数组</title>
    <script type="text/javascript" defer async>
        var stack = [] ;
        stack.push("孙悟空");
        stack.push("猪八戒");
        stack.push("白骨精");
        arrays=stack.concat("人","动物");

      function demo1(){
           for(let i=0;i<arrays.length;i++){
               alert(arrays[i]);
           }

        return 0;
       };


        demo1();
        var queue = [];
        queue.unshift("疯狂Java讲义");
        queue.unshift("轻量级JavaEE企业应用实战");
        queue.unshift("Java前端开发讲义");

        console.log(queue.shift());
        console.log(queue.shift());
    </script>
</head>
<body>

</body>
</html>

五.函数

   函数的语法格式如下:

function functionName(param1,param2){

}

六.运算符

Javascript支持的运算符与java非常类似,还有一些独特用法的运算符:

   1)逗号运算符。逗号运算符允许多个表达式排在一起,整个表达式返回最右边表达式的值

 <script type="text/javascript">

        var a,b,c,d;
        a = (b = 5,c = 8,d = 56);
        document.write('a='+a+' b='+b+" c="+c+' d='+d);
    </script>

输出:a=56 b=5 c=8 d=56

  2)void运算符,用于强行指定表达式不会发挥值,如

a = void(b = 5,c = 8,d = 56);

输出a的值等于undefined

  3)typeof和instanceof运算符。typeof用于判断某个变量的数据类型,也可作为函数使用。instanceof用于返回某个变量是否为指定类的实例。

七.语句

 异常抛出语句

  Javascript所有的异常都是error对象,语法格式

throw new Error(errorString);

看如下实例:

 <script type="text/javascript">
        for(let i = 0 ; i < 10 ; i++){
            document.writeln(i+"<br/>");
            if( i > 4 ) throw new Error('用户自定义错误');
        }
    </script>

异常捕捉语句,语法格式如下:

try
{ staments }
catch(e)
{ staments }
finally
{ staments }

Javascript是弱类型语言,所以try块后面只有一个catch块。

 with语句

  with语句的主要作用是避免重复书写同一个对象:实例如下:

<script>

document.writeln('Hello<br/>');
document,writeln('HelloWorld<br/>');
document.writeln('javascript<br/>');

//上面语句等同于

with(document)
{
writeln('Hello<br/>');
writeln('HelloWorld<br/>');
writeln('javascript<br/>');

}

</script>

for-in循环语句

<script>

for(element in elements){
staments
}

</script>