javaScript基础语法知识

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>比较运算符</title>
    <script>
        /*
         * 逻辑运算符:
         * &&: 与（短路）
         * ||: 或 (短路)
         * !：非
         *      * 其他类型转boolean：
         *          1. number：0或NaN为假，其他为真
         *          2. string：除了空字符串("")，其他都是true
         *          3. null&undefined:都是false
         *          4. 对象：所有对象都为true
         *
         *
         */
        var flag = true;
        document.write(flag+"<br>");
        document.write(!flag+"<br>");

        document.write("<hr>");
        //number
        var num = 3;
        var num2 = 0;
        var num3 = NaN;
        document.write(!!num+"<br>");
        document.write(!!num2+"<br>");
        document.write(!!num3+"<br>");

/*while(1){

}*/

document.write("<hr>");
//string

        var str1 = "abc";
        var str2 = "";
        document.write(!!str1+"<br>");
        document.write(!!str2+"<br>");

document.write("<hr>");

        // null & undefined
        var obj = null;
        var obj2;
        document.write(!!obj+"<br>");
        document.write(!!obj2+"<br>");

document.write("<hr>");

        // null & undefined
        var date = new Date();
        document.write(!!date+"<br>");

document.write("<hr>");

    var obj2="";
  document.write(!!obj2);
          if(obj2.length ==0){//防止空指针异常
            //alert(长度为零);//是错的，字符串需要""
            //alert(12313);//是对的，number整数不要""
   alert("该变量为null");
        }

//obj.length > 0 代表的有没有被赋值
        //js中可以这样定义，简化书写。
        if(obj){//防止空指针异常
            alert(111);
        }

</script>
</head>
<body>

</body>
</html>

# 今日内容
1. JavaScript基础

## JavaScript：
* 概念：一门客户端脚本语言
* 运行在客户端浏览器中的。每一个浏览器都有JavaScript的解析引擎
* 脚本语言：不需要编译，直接就可以被浏览器解析执行了

* 功能：
  * 可以来增强用户和html页面的交互过程，可以来控制html元素，让页面有一些动态的效果，增强用户的体验。

* JavaScript发展史：
  1. 1992年，Nombase公司，开发出第一门客户端脚本语言，专门用于表单的校验。命名为： C-- ，后来更名为：ScriptEase
  2. 1995年，Netscape(网景)公司，开发了一门客户端脚本语言：LiveScript。后来，请来SUN公司的专家，修改LiveScript，命名为JavaScript
  3. 1996年，微软抄袭JavaScript开发出JScript语言
  4. 1997年，ECMA(欧洲计算机制造商协会)，制定出客户端脚本语言的标准：ECMAScript，就是统一了所有客户端脚本语言的编码方式。

* JavaScript = ECMAScript + JavaScript自己特有的东西(BOM+DOM)

* ECMAScript：客户端脚本语言的标准
  1. 基本语法：
   1. 与html结合方式
    1. 内部JS：
     * 定义<script>，标签体内容就是js代码
    2. 外部JS：
     * 定义<script>，通过src属性引入外部的js文件

    * 注意：
     1. <script>可以定义在html页面的任何地方。但是定义的位置会影响执行顺序。
     2. <script>可以定义多个。
   2. 注释
    1. 单行注释：//注释内容
    2. 多行注释：/*注释内容*/
   3. 数据类型：
    1. 原始数据类型(基本数据类型)：
     1. number：数字。整数/小数/NaN(not a number 一个不是数字的数字类型)
     2. string：字符串。字符串 "abc" "a" 'abc'
     3. boolean: true和false
     4. null：一个对象为空的占位符
     5. undefined：未定义。如果一个变量没有给初始化值，则会被默认赋值为undefined

    2. 引用数据类型：对象

   4. 变量
    * 变量：一小块存储数据的内存空间
    * Java语言是强类型语言，而JavaScript是弱类型语言。
     * 强类型：在开辟变量存储空间时，定义了空间将来存储的数据的数据类型。只能存储固定类型的数据
     * 弱类型：在开辟变量存储空间时，不定义空间将来的存储数据类型，可以存放任意类型的数据。
    * 语法：
     * var 变量名 = 初始化值;

    * typeof运算符：获取变量的类型。
     * 注：null运算后得到的是object
   5. 运算符
    1. 一元运算符：只有一个运算数的运算符
     ++，-- ， +(正号)
     * ++ --: 自增(自减)
      * ++(--) 在前，先自增(自减)，再运算
      * ++(--) 在后，先运算，再自增(自减)
     * +(-)：正负号
        * 注意：在JS中，如果运算数不是运算符所要求的类型，那么js引擎会自动的将运算数进行类型转换
                        * 其他类型转number：
                            * string转number：按照字面值转换。如果字面值不是数字，则转为NaN（不是数字的数字）
                            * boolean转number：true转为1，false转为0
    2. 算数运算符
     + - * / % ...

3. 赋值运算符
= += -+....

    4. 比较运算符
     > < >= <= == ===(全等于)
     * 比较方式
                   1. 类型相同：直接比较
                       * 字符串：按照字典顺序比较。按位逐一比较，直到得出大小为止。
                   2. 类型不同：先进行类型转换，再比较
                       * ===：全等于。在比较之前，先判断类型，如果类型不一样，则直接返回false

    5. 逻辑运算符
     && || !
     * 其他类型转boolean：
                    1. number：0或NaN为假，其他为真
                    2. string：除了空字符串("")，其他都是true
                    3. null&undefined:都是false
                    4. 对象：所有对象都为true

    6. 三元运算符
     ? : 表达式
     var a = 3;
           var b = 4;

           var c = a > b ? 1:0;
     * 语法：
      * 表达式? 值1:值2;
      * 判断表达式的值，如果是true则取值1，如果是false则取值2；

   6. 流程控制语句：
    1. if...else...
    2. switch:
     * 在java中，switch语句可以接受的数据类型： byte int shor char,枚举(1.5) ,String(1.7)
      * switch(变量):
       case 值:
     * 在JS中,switch语句可以接受任意的原始数据类型

        var a;
        switch (a){
            case 1:
                alert("number");
                break;
            case "abc":
                alert("string");
                break;
            case true:
                alert("boolean");
                break;
            case null:
                alert("null");
                break;
            case undefined:
                alert("undefined");
                break;

}

</script>

3. while

//1 ~ 100 求和 5050

var sum = 0;
var num = 1;

        while(num <= 100){
            sum += num;
            num ++;
        }
        alert(sum);

</script>

4. do...while

//1 ~ 100 求和 5050

var sum = 0;
var num = 1;

       do{
            sum += num;
            num ++;
    }while(num<=100);
        alert(sum);

</script>

5. for

       //1 ~ 100 求和 5050
        var sum = 0;
        for (var i = 1; i <= 100; i ++){
            sum += i;
        }
        alert(sum);

</script>

   7. JS特殊语法：
    1. 语句以;结尾，如果一行只有一条语句则 ;可以省略 (不建议)
    2. 变量的定义使用var关键字，也可以不使用
              * 用：定义的变量是局部变量
                 * 不用：定义的变量是全局变量(不建议)

跟java定义全局变量一样，在办法外定义，在外面用 var 变量，在到其他地方使用，一样是全局变量

8. 练习：99乘法表

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>Document</title>
</head>
<body>

<script>
for(var i=1;i<=9;i++){

for(var j=1;j<=i;j++){

document.write(i+"*"+j+"="+i*j+"     ")

}
document.write("<br>");
}

document.write("<br>");
document.write("<br>");
</script>

</body>
</html>

  2. 基本对象：
   1. Function：函数(方法)对象
                1. 创建：
                    1. var fun = new Function(形式参数列表,方法体); //忘掉吧
                    2.
                     function 方法名称(形式参数列表){
                            方法体
                        }

                    3.
                    var 方法名 = function(形式参数列表){
                            方法体
                       }
                2. 方法：

                3. 属性：
                    length:代表形参的个数
                4. 特点：
                    1. 方法定义是，形参的类型不用写,返回值类型也不写。
                    2. 方法是一个对象，如果定义名称相同的方法，会覆盖
                    3. 在JS中，方法的调用只与方法的名称有关，和参数列表无关
                    4. 在方法声明中有一个隐藏的内置对象（数组），arguments,封装所有的实际参数
                5. 调用：
                    方法名称(实际参数列表);

        /*
            Function：函数(方法)对象
                1. 创建：
                    1. var fun = new Function(形式参数列表,方法体); //忘掉吧
                    2. function 方法名称(形式参数列表){
                            方法体
                        }

                    3. var 方法名 = function(形式参数列表){
                            方法体
                       }
                2. 方法：

*
*/

        //1.创建方式1
        var fun1 = new Function("a","b","c","alert(a);");
        //调用方法
       // fun1(3,4);
       // alert(fun1.length);
       //2. 创建方式2
        function fun2(a , b){
            alert(a + b);
        }

//fun2(3,4);

        //alert(fun2.length);
        var fun3 = function(a,b){
            alert(a+b);

        }
        //alert(fun3.length);
       // fun3(3,4);

        /*fun2 = function(a , b){
            alert(a - b);
        }*/
        function fun2(a , b){
            //alert(a - b);
            alert(a);
            alert(b);
        }

//fun2(3,4);

        //方法调用
        //fun2(1,2);
        //fun2(1);
        //fun2();
        //fun2(1,2,3);

        /*
         * 求两个数的和
         */
        /*function add(a , b){
            return a + b;
        }*/
        /**
         * 求任意个数的和
         */
        function add (){
           var sum = 0;
            for (var i = 0; i < arguments.length; i++) {
                sum += arguments[i];
            }
            return sum;
        }

        var sum = add(1,2,3,4);
        alert(sum);
        //add(1,3);

</script>

   2. Array:数组对象
                1. 创建：
                    1. var arr = new Array(元素列表);
                    2. var arr = new Array(默认长度);
                    3. var arr = [元素列表];
                2. 方法
                    join(参数):将数组中的元素按照指定的分隔符拼接为字符串
                    push() 向数组的末尾添加一个或更多元素，并返回新的长度。
                3. 属性
                    length:数组的长度
                4. 特点：
                    1. JS中，数组元素的类型可变的。
                    2. JS中，数组长度可变的。

            Array:数组对象
                1. 创建：
                    1. var arr = new Array(元素列表);
                    2. var arr = new Array(默认长度);
                    3. var arr = [元素列表];
                2. 方法
                    join(参数):将数组中的元素按照指定的分隔符拼接为字符串
                    push() 向数组的末尾添加一个或更多元素，并返回新的长度。

indexOf()

返回某个指定的字符串值在字符串中首次出现的位置。

lastIndexOf()

返回一个指定的字符串值最后出现的位置，在一个字符串中的指定位置从后向前搜索。

reverse()

颠倒数组中元素的顺序。

toString()

把数组转换为字符串，并返回结果。

                3. 属性
                    length:数组的长度
                4. 特点：
                    1. JS中，数组元素的类型可变的。
                    2. JS中，数组长度可变的。

         *
         */
        //1.创建方式1
       /* var arr1 = new Array(1,2,3);
        var arr2 = new Array(5);
        var arr3 = [1,2,3,4];

var arr4 = new Array();

        document.write(arr1 +"<br>");
        document.write(arr2 +"<br>");
        document.write(arr3 +"<br>");
        document.write(arr4 +"<br>");*/

var arr = [1,"abc",true];
document.write(arr +"<br>");

        document.write(arr[0] +"<br>");
        document.write(arr[1] +"<br>");
        document.write(arr[2] +"<br>");

        //document.write(arr[10] +"<br>");
        arr[10] = "hehe";
        document.write(arr[10] +"<br>");
        document.write(arr[9] +"<br>");

        //alert(arr.length);//11
        document.write(arr.join("--")+"<br>");
        arr.push(11);
        document.write(arr.join("--")+"<br>");
    </script>

   3. Boolean
   4. Date：日期对象
                1. 创建：
                    var date = new Date();

                2. 方法：
                    toLocaleString()：返回当前date对象对应的时间本地字符串格式
                    getTime():获取毫秒值。返回当前如期对象描述的时间到1970年1月1日零点的毫秒值差

           Date：日期对象
                1. 创建：
                    var date = new Date();

getFullYear()

从 Date 对象以四位数字返回年份。

getDate()	从 Date 对象返回一个月中的某一天 (1 ~ 31)。
getDay()	从 Date 对象返回一周中的某一天 (0 ~ 6)。

getHours()	返回 Date 对象的小时 (0 ~ 23)。
getMilliseconds()	返回 Date 对象的毫秒(0 ~ 999)。
getMinutes()	返回 Date 对象的分钟 (0 ~ 59)。
getMonth()	从 Date 对象返回月份 (0 ~ 11)。
getSeconds()	返回 Date 对象的秒数 (0 ~ 59)。

setDate()	设置 Date 对象中月的某一天 (1 ~ 31)。
setFullYear()	设置 Date 对象中的年份（四位数字）。
setHours()	设置 Date 对象中的小时 (0 ~ 23)。
setMilliseconds()	设置 Date 对象中的毫秒 (0 ~ 999)。
setMinutes()	设置 Date 对象中的分钟 (0 ~ 59)。
setMonth()	设置 Date 对象中月份 (0 ~ 11)。
setSeconds()	设置 Date 对象中的秒钟 (0 ~ 59)。

*
*/

var date = new Date();

document.write(date + "<br>");

document.write(date.toLocaleString() + "<br>");

document.write(date.getTime() + "<br>");

</script>

   5. Math：数学对象
                1. 创建：
                    * 特点：Math对象不用创建，直接使用。 Math.方法名();

                2. 方法：
                    random():返回 0 ~ 1 之间的随机数。含0不含1
                    ceil(x)：对数进行上舍入。,3.14结果就是4，
                    floor(x)：对数进行下舍入,3.14结果为3
                    round(x)：把数四舍五入为最接近的整数。
                3. 属性：
                    PI

           Math：数学对象
                1. 创建：
                    * 特点：Math对象不用创建，直接使用。 Math.方法名();

                2. 方法：
                    random():返回 0 ~ 1 之间的随机数。含0不含1
                    ceil(x)：对数进行上舍入。
                    floor(x)：对数进行下舍入。
                    round(x)：把数四舍五入为最接近的整数。

max(x,y,z,...,n)	返回 x,y,z,...,n 中的最高值。
min(x,y,z,...,n)	返回 x,y,z,...,n中的最低值。

sqrt(x)

返回数的平方根。

3. 属性：
PI

*
*/

        document.write(Math.PI +"<br>");
        document.write(Math.random() +"<br>");
        document.write(Math.round(3.14) +"<br>");
        document.write(Math.ceil(3.14) +"<br>");
        document.write(Math.floor(3.14) +"<br>");

        /**
         * 取 1~100之间的随机整数
         *      1. Math.random()产生随机数：范围 [0,1)小数
         *      2. 乘以 100 --> [0,99.9999] 小数
         *      3. 舍弃小数部分：floor --> [0,99] 整数
         *      4. +1 -->[0,99] 整数 [1,100]
         *
         *
         */

var number = Math.floor((Math.random() * 100)) + 1;
document.write(number);

</script>

   6. Number
   7. String
   8. RegExp：正则表达式对象

表达式	描述
[abc]	查找方括号之间的任何字符。
[^abc]	查找任何不在方括号之间的字符。
[0-9]	查找任何从 0 至 9 的数字。
[a-z]	查找任何从小写 a 到小写 z 的字符。
[A-Z]	查找任何从大写 A 到大写 Z 的字符。
[A-z]	查找任何从大写 A 到小写 z 的字符。
[adgk]	查找给定集合内的任何字符。
[^adgk]	查找给定集合外的任何字符。
(red\|blue\|green)	查找任何指定的选项。

元字符

元字符（Metacharacter）是拥有特殊含义的字符：

元字符	描述
.	查找单个字符，除了换行和行结束符。
w	查找单词字符。
W	查找非单词字符。
d	查找数字。
D	查找非数字字符。
s	查找空白字符。
S	查找非空白字符。
b	匹配单词边界。
B	匹配非单词边界。
0	查找 NUL 字符。
n	查找换行符。
f	查找换页符。
r	查找回车符。
t	查找制表符。
v	查找垂直制表符。
xxx	查找以八进制数 xxx 规定的字符。
xdd	查找以十六进制数 dd 规定的字符。
uxxxx	查找以十六进制数 xxxx 规定的 Unicode 字符。

支持正则表达式的 String 对象的方法

方法	描述	FF	IE
search	检索与正则表达式相匹配的值。	1	4
match	找到一个或多个正则表达式的匹配。	1	4
replace	替换与正则表达式匹配的子串。	1	4
split	把字符串分割为字符串数组。

量词

量词	描述
n+	匹配任何包含至少一个 n 的字符串。
n*	匹配任何包含零个或多个 n 的字符串。
n?	匹配任何包含零个或一个 n 的字符串。
n{X}	匹配包含 X 个 n 的序列的字符串。
n{X,Y}	匹配包含 X 或 Y 个 n 的序列的字符串。
n{X,}	匹配包含至少 X 个 n 的序列的字符串。
n$	匹配任何结尾为 n 的字符串。
^n	匹配任何开头为 n 的字符串。
?=n	匹配任何其后紧接指定字符串 n 的字符串。
?!n	匹配任何其后没有紧接指定字符串 n 的字符串。

    1. 正则表达式：定义字符串的组成规则。
     1. 单个字符:[]
      如： [a] [ab] [a-zA-Z0-9_]
      * 特殊符号代表特殊含义的单个字符:
       d:单个数字字符 [0-9]
       w:单个单词字符[a-zA-Z0-9_]
     2. 量词符号：
      ?：表示出现0次或1次
      *：表示出现0次或多次
      +：出现1次或多次
      {m,n}:表示 m<= 数量 <= n
       * m如果缺省： {,n}:最多n次
       * n如果缺省：{m,} 最少m次
     3. 开始结束符号
      * ^:开始
      * $:结束
    2. 正则对象：
     1. 创建
      1. var reg = new RegExp("正则表达式");
      2. var reg = /正则表达式/;
     2. 方法
      1. test(参数):验证指定的字符串是否符合正则定义的规范

           2. 正则对象：
                1. 创建
                    1. var reg = new RegExp("正则表达式");
                    2. var reg = /正则表达式/;
                2. 方法
                    1. test(参数):验证指定的字符串是否符合正则定义的规范

*
*/

        //1.
        var reg = new RegExp("^w{6,12}$");
        //2.
        var reg2= /^w{6,12}$/;

/*alert(reg);
alert(reg2);*/

var username = "zhangsan";

        //验证
        var flag = reg.test(username);
        alert(flag);

</script>

   9. Global
    1. 特点：全局对象，这个Global中封装的方法不需要对象就可以直接调用。方法名();
    2. 方法：
        encodeURI():url编码
        decodeURI():url解码

encodeURIComponent():url编码,编码的字符更多
decodeURIComponent():url解码

        parseInt():将字符串转为数字
            * 逐一判断每一个字符是否是数字，直到不是数字为止，将前边数字部分转为number
        isNaN():判断一个值是否是NaN
            * NaN六亲不认，连自己都不认。NaN参与的==比较全部问false

        eval():讲 JavaScript 字符串，并把它作为脚本代码来执行。
                3. URL编码
                   传智播客 = %E4%BC%A0%E6%99%BA%E6%92%AD%E5%AE%A2

* BOM

* DOM

           Global
    1. 特点：全局对象，这个Global中封装的方法不需要对象就可以直接调用。方法名();
    2. 方法：
        encodeURI():url编码
        decodeURI():url解码

encodeURIComponent():url编码,编码的字符更多
decodeURIComponent():url解码

        eval():讲 JavaScript 字符串，并把它作为脚本代码来执行。
                3. URL编码
                   传智播客 = %E4%BC%A0%E6%99%BA%E6%92%AD%E5%AE%A2

         *
         */
        var str = "http://www.baidu.com?wd=传智播客";
        var encode = encodeURI(str);
        document.write(encode +"<br>");//%E4%BC%A0%E6%99%BA%E6%92%AD%E5%AE%A2
        var s = decodeURI(encode);
        document.write(s +"<br>");//传智播客

        var str1 = "http://www.baidu.com?wd=传智播客";
        var encode1 = encodeURIComponent(str1);
        document.write(encode1 +"<br>");//%E4%BC%A0%E6%99%BA%E6%92%AD%E5%AE%A2
        var s1 = decodeURIComponent(encode);
        document.write(s1 +"<br>");//传智播客

http://www.baidu.com?wd=%E4%BC%A0%E6%99%BA%E6%92%AD%E5%AE%A2
http://www.baidu.com?wd=传智播客
http%3A%2F%2Fwww.baidu.com%3Fwd%3D%E4%BC%A0%E6%99%BA%E6%92%AD%E5%AE%A2
http://www.baidu.com?wd=传智播客

        var str = "a234abc";
        var number = parseInt(str);
        //alert(number + 1);

var a = NaN;

document.write(a == NaN);
document.write(isNaN(a));

var jscode = "alert(123)";
eval(jscode);

</script>

版权说明

文章采用：《署名-非商业性使用-相同方式共享 4.0 国际 (CC BY-NC-SA 4.0)》许可协议授权。
版权声明：未标注转载均为本站原创，转载时请以链接形式注明文章出处。如有侵权、不妥之处，请联系站长删除。敬请谅解！

javaScript基础语法知识

元字符

支持正则表达式的 String 对象的方法

量词

相关推荐

13--redis笔记

javascript表格全选，反选，不选，样式控制等

08---EL_JSTL基础笔记

12----Ajax&Json笔记

发表评论

日历

最新评论

常见资源合集和破解

常见资源合集和破解

常见资源合集和破解

常见资源合集和破解

常见资源合集和破解

常见资源合集和破解

常见资源合集和破解

常见资源合集和破解

常见资源合集和破解

常见资源合集和破解

热门文章

您还未登录

登录体验更多功能

元字符

支持正则表达式的 String 对象的方法

量词

相关推荐

13--redis笔记

javascript表格全选，反选，不选，样式控制等

08---EL_JSTL基础笔记

12----Ajax&Json笔记

发表评论

日历

最新评论

热门文章