2018.12.6

作者: 废废_siri | 来源:发表于2018-12-10 21:31 被阅读0次

JavaScript来源

网景公司为了解决表单验证问题。

JavaScript组成

-ECMAscript：由ECMA(欧洲计算机制造者协会)定义标准。
-DOM(文档对象模型)：由W3C定义标准。
-BOM(浏览器对象模型)：由firefox来定义标准。

JavaScript简介

JavaScript是互联网上最流行的脚本语言，可用于Web和HTML，更广泛应用于服务器、pc端、移动端。一般运行在宿主环境(如：浏览器)中。
特点：
JavaScript是一种轻量级的编程语言(编程语言：有分支、有循环)。
JavaScript是一种动态语言(一个变量可以持有任意类型的值)。
JavaScript是一种脚本语言，由浏览器解释执行。
JavaScript是一种解释型语言，边解释边执行。

JavaScript的引入方式

1.方法一
可以将JavaScript代码放在<head>中或</body>标签之前。放在<head>中或</body>标签之前的JavaScript代码需要用<script></script>标签包裹起来。并且插入到HTML中的JavaScript代码无数量限制。
2.方法二
单独创建一个JavaScript文件，扩展名为.js。将编写好的js代码引入到HTML的<head></head>标签中。引入js的格式为<script src="js文件路径"></script>，将<script src="js文件路径"></script>放在<head>标签中。

JavaScript输出--write

<!DOCTYPE html>
<html lang="zh-cn">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>demo1</title>
    <!-- 写在head标签中的js代码 -->
    <script>
        document.write("写在head标签中的js代码");  //文档输出
        document.write("<h1>h1标签中的内容</h1>"); //输出的内容也可以插入html标签
    </script>
    <!-- 引入到html中的js代码 -->
    <script src="../JS/demo1.js"></script>
</head>

<body>
</body>
<!-- 写在body后的js代码 -->
    <script>
        document.write("写在body后的js代码");  //文档输出
    </script>
</html>

注：两条性能优化的规则
-样式表一定要以<link>标签的形式放在<head>中。
-JS一定要以<script>标签的形式放在html文档的底部(ps:也就是</body>之前)。

JavaScript语法

-语句的作用：告诉浏览器应该做什么。
-分号：分号可选，可写可不写。分号在一条语句的末尾。
-js代码：按编写代码的顺序执行(从上到下，从左到右扫描)。
-js区分大小写
效果图

image.png

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>demo2</title>
    <!-- 根据以下顺序执行代码 -->
    <script>
        document.write("我在前面");
    </script>
    <br>
    <script>
        document.write("我在中间");
    </script>
    <br>
    <script>
        document.write("我在后面");
    </script>
</head>
<body>
</body>
</html>

-标识符：必须以字母、下划线或美元符$符号开始。
-编码时对大小写敏感。
-空格：js会保留一个空格，多余的空格会被忽略。
-保留字

JavaScript注释

-单行注释：用//注释内容。
-多行注释：用/注释内容/（多行注释不能嵌套）

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>注释 demo</title>
</head>
<body> 
</body>
<script>
        //document.write("hello");        //单行注释
        /*document.write(1);
        document.write(2);
        document.write(3);*/              //多行注释
    </script>
</html>

JavaScript基础--值

值分为两大类：
-基本数据类型(String、Number、Boolean、Undefined、Null)
-引用数据类型(Object、Array、Function)
字面量：

QQ截图20181210195207.png

JavaScript基础--变量

变量是存储数据的容器。通过关键字var来声明变量，变量名必须以$、_、字母开头。不能使用关键字、保留字。一般采用驼峰命名法(如:firstName),第二个单词的首字母大写。

image.png

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>variable demo</title>
</head>
<body>
</body>
<script>
            var $1 = 10;    //变量名以$符号开始
            var _2 = 20;    //变量名以_符号开始
            var a = $1 + _2; //变量名以字母开始
            document.write(a);
    </script>
</html>

JavaScript基础--引用数据类型

引用数据类型包括：函数(Function)、对象(Object)、数组(Array)。后面会详写。

JavaScript基础--基本数据类型

字符串(String)、数字(Number)、布尔(Boolean)、空(Null)、未定义(undefined)、Symbol (ES6中添加的类型)。可以通过赋值为null的方式清除变量。当用关键字var定义变量时，若没有给变量赋初始值，那么变量的数据类型为undefined。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>DataType demo</title>
</head>
<body>   
</body>
<script>
        var a = "六";       //数据类型为字符串
        var b = 1;          //数据类型为数字
        var flag = true;    //数据类型为布尔
        var arr = [1,2,3]   //数据类型为数组，取数据时下标从0开始
        var arr = new Array("我","你","他");  //数据类型为数组
        var arr = new Array();
        arr[0] = "我是第一个数据";
        arr[1] = "我是第二个数据";
        arr[3] = "我是第三个数据";
        document.write(arr[0]);
        var c = null;       //数据类型为空
        b = null;           //将变量b赋值为null
        document.write(b);  
    </script>
</html>

-typeof(a)/typeof a 返回值的数据类型，注意：是值的数据类型，而不是变量的。js中只有值才持有数据类型。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>基本数据类型</title>
</head>
<body>
    <h1>JS的基本数据类型</h1>
    <ul>
        <li>Number</li>
        <li>String</li>
        <li>Null</li>
        <li>undefined</li>
        <li>Boolean</li>
    </ul>
</body>
    <script>
        var a = 1;
        console.log(typeof a);      //打印出来是Number类型
        console.log(typeof typeof a);   //打印出来是String类型
        var b = "string";
        console.log(typeof b);       //打印出来是string类型
        // null类型只有null一个值
        var c = null;
        console.log(typeof c);       //打印出来是object类型(无法修复的bug)
        console.log(typeof typeof c);       //打印出来是string类型
        // undefined类型只有undefined一个值
        var d = undefined;
        console.log(typeof d);             //打印出来是undefined类型
        console.log(typeof typeof d);             //打印出来是string类型
        // boolean类型只有两个值：true/false
        var e = true;
        console.log(typeof e);              //打印出来是boolean类型
        console.log(typeof typeof e);              //打印出来是string类型

    </script>
</html>

堆栈

基本数据类型占用空间小，它们的值保存在栈中，按值来访问。
引用数据类型占用空间大，栈内存中存放地址指向堆内存中的空间，按引用来访问。

JavaScript语法--运算符

按操作数的个数：
-一元运算符(一个操作数，如:+a,-b)
-二元运算符(两个操作数，如:a+b)
-三元运算符(三个操作数，如:条件?值1:值2)
--
按功能：
-算术运算符：+ - * / %(取余) ++(自加) --(自减)
-赋值运算符：= += -= *= /= %=
-字符串操作：+(拼接)
-比较运算符：> < == === != !== >= <=
-逻辑运算符：&& || !
-条件运算符：x<10? "x比10小"："x比10大"

算术运算符

--
以+为例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>count demo</title>
</head>
<body>
    <p>i=10,j=10,i+j=?</p>
    <p id="count"></p>
    <button onclick="add()">结果</button>
</body>
  <script>
        function add() {
            var i = 10;
            var j = 10;
            var m = i + j;
            //获取p元素的id，然后对p元素进行插入内容innerHTML操作,将m的值赋给p元素，作为p元素的内容
            document.getElementById("count").innerHTML = m;
        }
    </script>
</html>

--
以--(自减)为例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>自减 demo</title>
</head>
<body>
    <p>i=5,i--?</p>
    <p id="subtract"></p>
    <p>i=5,--i?</p>
    <p id="subtractI"></p>
    <button onclick="subtract()">结果</button>
</body>
   <script>
        function subtract(){
            var i = 5;
            // i--先将i的值赋给j再自减，而--i是先自减再将值赋给j
            var j = i--;
            var m = --i
            // 现在j的值为5，然后i自减，自减后的值为4
            document.getElementById("subtract").innerHTML = j;
            // 现在i的值为4，先自减，自减后的值为3，将3赋给m
            document.getElementById("subtractI").innerHTML = m;
        }
    </script>
</html>

--
++(自加)的一些例子：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript">
            /*
             * 自增 ++
             *   - 通过自增可以使变量在自身的基础上增加1
             *   - 对于一个变量自增以后，原变量的值会立即自增1
             *   - 自增分成两种：后++(a++) 和 前++(++a)   
             *      无论是a++ 还是 ++a，都会立即使原变量的值自增1
             *          不同的是a++ 和 ++a的值不同
             *      a++的值等于原变量的值（自增前的值）
             *      ++a的值等于新值 （自增后的值）
             * 
             * 自减 --
             *  - 通过自减可以使变量在自身的基础上减1
             *  - 自减分成两种：后--(a--) 和 前--(--a)
             *      无论是a-- 还是 --a 都会立即使原变量的值自减1
             *          不同的是a-- 和 --a的值不同
             *              a-- 是变量的原值 （自减前的值）
             *              --a 是变量的新值 （自减以后的值）     
             */

            var a = 1;
            var num ;
            /*num = ++a;
            num = a++;
            console.log(a);*/

            /*num = a++ + 1;
            num = a++ +1;
            console.log(a);
            console.log(num);*/

            /*num = ++a + a;
            console.log(a);
            console.log(num);*/

            /*num =a++ + a + a;
            console.log(a);
            console.log(num);*/

            /*num = ++a +a +a;
            console.log(a);
            console.log(num);*/

            /*num = a++ + ++a ;
            console.log(a);
            console.log(num);*/

            /*num = a++ + a++ ;
            console.log(a);
            console.log(num);*/

            /*num = a++ + a++ + a;
            console.log(a);
            console.log(num);*/

            /*num = a++ + a++ + a + ++a;
            console.log(a);
            console.log(num);*/
        </script>
    </head>
    <body>
    </body>
</html>

+(字符串运算符)

+拼接符号两边的字符串

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>字符串拼接</title>
</head>
<body>
    
</body>
<script>
    var a = "hello";
    var b = 2;
    alert(a+b);      //做字符串拼接运算时，将数字2转换为字符2，再进行字符串拼接操作
</script>
</html>

逻辑运算符

&&(逻辑与)、||(逻辑或)、!(逻辑非)
逻辑运算返回Boolean值。

<script>
        //逻辑与
       var result = 2>1 && 3<1;
       console.log(result);
       //逻辑或
       var result2 = 2>1 || 3<1;
       console.log(result2);
       //逻辑非
       var result3 = !(3>2);
       console.log(result3);
    </script>

赋值运算符

复合赋值操作符
加法赋值 x += y <==> x = x + y
减法赋值 x -= y <==> x = x - y
乘法赋值 x *= y <==> x = x * y
除法赋值 x /= y <==> x = x / y
求余赋值 x %= y <==> x = x % y

--
以%=为例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>赋值运算符</title>
</head>
<body> 
</body>
<script>
    var x = 1;
    var y = 2;
    // x = x % y   取余
    console.log(x%=y);
</script>
</html>

比较运算符

大于号 >= 大于等于 < 小于号 <= 小于等于
== === != !==

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>比较运算符</title>
</head>
<body>
</body>
<script>
    var a = 1;
    var b = "1";
    alert(a==b);        //返回值为true
    alert(a===b);       //返回值为false(===：必须值和数据类型相同)
</script>
</html>

位操作符

在计算机中数值都以二进制补码形式存储和运算。
无符号数的取值范围：0~255.
有符号数的取值范围：-128~127.
所有的按位操作符的操作数都会被转成补码形式的有符号32位整数。

image.png

--按位异或
同为0，异为1

1.将-3转换为32位二进制数
-3的原码
-3 = 1000 0000 0000 0000 0000 0000 0000 0011(负号转为1，正号为0)
-3的反码(符号位不变，按位取反)
     1111 1111 1111 1111 1111 1111 1111 1100
-3的补码(末尾+1)
     1111 1111 1111 1111 1111 1111 1111 1101
将8转换为32位二进制数(正数的原码、反码、补码相同)
8 =  0000 0000 0000 0000 0000 0000 0000 1000
2.按相同为0，不同为1的规则进行运算(符号位也要参与运算)
     1111 1111 1111 1111 1111 1111 1111 0101(补码)
3.将上述结果转为原码(补码转原码)
     先-1
     1111 1111 1111 1111 1111 1111 1111 0100
     取反(符号位不变，按位取反)
     1000 0000 0000 0000 0000 0000 0000 1011
     最终为-11

条件运算符

条件表达式？语句1：语句2
1.首先执行条件表达式
2.返回值为true则执行语句1，否则，执行语句2.

<script>
   var a = 2>3?"2>3":"2<3";
    console.log(a)
</script>

运算符的优先级

MDN运算符优先级表

https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/Operator_Precedence#Table

2018.12.6

JavaScript来源

JavaScript组成

JavaScript简介

JavaScript的引入方式

JavaScript输出--write

JavaScript语法

JavaScript注释

JavaScript基础--值

JavaScript基础--变量

JavaScript基础--引用数据类型

JavaScript基础--基本数据类型

堆栈

JavaScript语法--运算符

算术运算符

+(字符串运算符)

逻辑运算符

赋值运算符

比较运算符

位操作符

条件运算符

运算符的优先级

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读