JavaScript基础语法

1 JavaScript

1.1 特点

解释型
弱类型
基于对象
跨平台性
事件驱动

1.2 JavaScript版本

ECMAScript3.0
ECMAScript5.0
ECMAScript6.0 (ECMA2015、ECMAScript2016、ECMAScript2017)

1.3 应用领域

WEB前端 (网页)
后端（node.js）
混合APP(IOS 安卓)
游戏

2 浏览器中JavaScript的基本语法

2.1 在HTML中使用JS

引入外部的 js 文件。类似于 CSS的link
<script src="js文件的地址"></script>
<script src="js文件的地址"></script>
<script src="js文件的地址"></script>

在htm中直接写，包裹在script标签中，类似css的style
<script>
    code...  js代码
</script>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>在HTML中使用JS</title>
</head>
<body>
    
    <!--引入外部的js文件 里面不能再写代码-->
    <script src="./script.js"></script>

    <!--直接在html中写js代码-->
    <script>
        console.log('HELLO,你爱我吗');
        alert('哈哈哈哈哈');
    </script>
</body>
</html>

2.2 指令结束符

#第一种   ;
#第二种  换行

2.3 注释

// 单行注释

/*
 多行注释
*/

2.4 变量

var 变量名 = 值;
* var 关键字
* 变量名 由数字、字母、下划线、$ 组成 不能数字开头。 变量名不能使关键字
* 变量名严格区分大小写
* 变量声明 没给值，默认值是undefined

2.5 输出内容

console.log()  输出到控制台
document.write() 输出到页面
alert()   弹出

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JS基本语法</title>
</head>
<body>
    <script>
        //指令结束符 --------两种方式：使用分号，或者换行，如果在一行不加分号写多个console则会报语法错误
        console.log("同志");console.log("小同志");console.log("老同志")

        console.log(1)
        console.log(2)
        console.log(3)

        //单行注释
        /*
            多行注释
            多行注释
            多行注释
            多行注释
        */

        //输出内容
        console.log("啊，我被输出了");  //输出到控制台
        document.write('啊，我也被输出了'); //输出到页面 不常用
        //alert('啊，我好疼');  //弹框输出


        //javascript 如何定义变量 
        // 必须由数字、字母、下划线、$ 组成，并且不能以数字开头
        // 不能是关键字
        // 严格区分大小写  user_name  / userName(推荐)   / UserName   / UserNameAge
        var username = '小丽丽';
        var userName = '大丽丽';
        var userAge;               //输出的结果是undefined

        console.log(username)
        console.log(userName)

        console.log(userAge)


    </script>
</body>
</html>

3 JS程序用到的知识点

弹框

alert()   警告框   没有返回值
confirm()  确认框   返回布尔值
prompt()   输入框   返回用户输入的内容，点确定。   点取消，null

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>弹框</title>
</head>
<body>
    <script>
        //alert是警告框 没有返回值
        //alert('不许动!');

        //donfirm是确认框 返回 布尔值  true/false----------比alert多了一个取消按钮
        //prompt是一个输入框，返回的是用户输入的内容，点取消按钮返回的是一个null
        if (confirm('你喜欢我吗?')) {
            alert('我也喜欢你');
        } else {
            res = prompt('你凭什么不喜欢我？');
            alert(res);
        }

        //输入框
    </script>
</body>
</html>

弹框

获取页面中的元素作为js对象

document.getElementById()  #返回对象，通常会称作元素对象

元素对象与 HTML元素 存在映射关系
元素对象用来描述某个HTML元素
HTML元素的属性，会映射成 元素对象的 属性

双标签元素里面的内容

eleObj.innerHTML 获取/设置双标签的内容

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>简易计算器</title>
    <style>
        input {
            width: 300px;
            font-size: 16px;
            line-height: 18px;
            padding:10px;
            border: 1px solid #ccc;
        }
        
        button {
            padding: 10px 20px;
            border: 1px solid #ccc;
            background: #f5f5f5;
        }
        .res {
            width: 300px;
            height: 100px;
            padding: 10px;
            border: 1px solid #ccc;
        }
    </style>
</head>
<body>
    <h1>计算器</h1>
    <hr>
    
    <table>
        <tr>
            <td>加数1：</td>
            <td>
                <input type="text" id="num1">
            </td>
        </tr>

        <tr>
            <td>加数2：</td>
            <td>
                <input type="number" id="num2">
            </td>
        </tr>

        <tr>
            <td></td>
            <td>
                <button onclick="add()">+</button>
            </td>
        </tr>

        <tr>
            <td></td>
            <td>
                <div class="res" id="box"></div>
            </td>
        </tr>
    </table>

    <script>
        
        //定义函数
        function add() {
            // 获取 用户在 input 中输入的内容
            // 获取元素对象 返回对象 对象描述 id是num1的元素 
            var inputEle1 = document.getElementById('num1');
            var inputEle2 = document.getElementById('num2');

            //获取用户在input中输入的值
            var v1 = inputEle1.value;
            var v2 = inputEle2.value;

            //判断用户输入是否是纯数字
            if (isNaN(v1)) {
                alert('加数1必须是纯数字');
                return; 
            }
            if (isNaN(v2)) {
                alert('加数2必须是纯数字');
                return;
            }

            //把字符串转换为数字
            v1 = Number(v1);
            v2 = Number(v2);

            //两个数相加
            var sum = v1 + v2;

            //获取放结果的div元素 innerHTML 获取或者设置 双标签内的内容
            var boxEle = document.getElementById('box');
            boxEle.innerHTML = sum;

        }
    </script>
    
</body>
</html>

js简单版计算器

3 JavaScript 数据类型

3.1 数据类型

原始类型 Number(数字)、 String(字符串)、Boolean(布尔值)、Null(空)、Undefined(未定义）
对象类型 Object、Array、Date、Math、Error Set(ES6).....

3.2 Number

js不区分整型和浮点型

定义方式

//十进制
var num = 100
//十六进制
var num = 0x10f
//科学计数法
var num = 123e100

特殊值 NaN

NaN跟任何值进行任何运算，结果仍然NaN
跟谁都不相等，包括自己

一般NaN被动产生（数据类型转为Number，不能转为正常的数字，就是NaN）
函数 isNaN()  判断是不是NaN或者能不能转换为NaN

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>数据类型</title>
</head>
<body>
    <h1>数据类型</h1>
    <hr>

    <script>
        //数字

        var n1 = 10234;
        var n2 = 0x12; //十六进制
        var n3 = 2e2; //科学计数法（小学知识）

        console.log(n1,n2,n3)

        //浮点精度问题
        console.log(.1 + .2);

        //NaN  表示Not a number

        console.log(NaN)
        console.log(typeof(NaN))       //NaN的数据类型依然是number

        //NaN 跟 任何值(包括0) 进行任何运算 结果依然是NaN
        console.log(NaN * 0);          //结果是NaN

        //NaN跟谁都不相等
        console.log(NaN == NaN)       //结果是false


        var num = 2344e1000;

        console.log(typeof(num))      //结果是infinity即无穷大
        console.log(num)              //数据类型依然为number


        console.log(isNaN(NaN))       //true
        console.log(isNaN('hello'))  //true
        console.log(isNaN('123')) // false 字符串'123' 转为number 的时候 是 123 不是NaN

    </script>
</body>
</html>

3.3 String 字符串

# 单引号
# 双引号
# 反引号 模板字符串  ` `

单引号 双引号 没有区别
反引号：
    多行
    可以支持中 ${变量} 添加变量

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>字符串</title>
</head>
<body>
    <script>    
        var username = '小丽丽';
    

        //单引号
        //var msg01 = '我和你去钓鱼';
        var msg01 = '我和' + username + '去钓鱼';
        
        //双引号
        var msg02 = "我和" + username + "去公园";
        

        // 反引号 （ES6）
        /*var msg03 = `
        我和你去动物园
        遇到了老虎
        我打了它
        被抓了
        判了15年
        `;*/
        // ${}可以向多行字符串中插入变量名
        var msg03 = `
        我和${username}去动物园     
        遇到了老虎
        我打了它
        被抓了
        判了15年
        `;


        console.log(msg01)
        console.log(msg02)
        console.log(msg03)



    </script>
</body>
</html>

3.4 布尔值

true
false

3.5 Null和undefined

被动产生

3.6 数据类型转换

强制转换

Number()
字符串：纯数字转为正常的数字，其他NaN
布尔值： true->1  false->0

String()


Boolean()
字符串->布尔： 只有空字符串转为false，其他true
数字->布尔：  0和NaN是false，其他true
null和undefined都会转为false

自动转换

根据运算符 做出适当的类型转换

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>数据类型转换</title>
</head>
<body>
    <script>
        //自动类型转换
        console.log(100 + '20'); //10020  数字100自动转为字符串,因为加号还可以连接字符串，当做连接字符串的优先级高一点
        console.log(10 * '3');   //30  字符串转为了数字
        console.log('2' / '4a');  // NaN  字符串自动转为数字，

        //100会转为布尔值 true
        if (100) {

        }

        //强制类型转换

        console.log(Boolean('false')) //true
        console.log(Boolean(''));  //false

        console.log(Boolean(NaN)) //false
        console.log(Boolean(null)) //false
        console.log(Boolean(undefined)) //false

        console.log('')      //结果是空


        console.log(String(null))        //结果是null
        console.log(Number(true))        //结果是1
        console.log(Number(false))       //结果是0
        console.log(Number(null))        //结果是0
        console.log(Number(undefined))   //结果是NaN
    </script>
</body>
</html>

4 运算符

4.1 算术运算符

+  加号 正号
-  减法 负号
*  
/
%
++  累加
--  累减

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>运算符</title>
</head>
<body>
    
    <h1>运算符</h1>
    <hr>

    <script>
        /*
            1 * 1 二元运算
            +100  正号
            -100  一元运算符
            a += 10
            a ++

            ?:   
        */

        //算数运算符
        /*
        + - * / %  ++递增 --递减
        */

        var num = 10;

        num ++; //每次递增1，结果是11
        num ++;  // 等同于 num += 1 ，结果基于上一次再加1是12 
        ++ num; //也可以递增，结果变为13

        console.log(num)   //运算结果13

        num --; //每次递减1   num -= 1
        -- num;
        console.log(num)  //减两次结果是11

        console.log('');


        // 表达式   表达式通常由运算符和操作数组成。 简单表达式也有复杂表达式
        // 表达式的特点 表达式有计算结果
        // 有些表达式 还会产生额外的作用（对操作产生影响）

        

        // ++和--再应用
        var a = 10;

        var r = (a += 10); //表达式
        console.log(r); //r是表达式的计算结果10,a

        console.log(a); //a+10表示，除了表达式有结果，操作数也被影响了



        console.log('');



        var b = 10;

        //r = b ++; //表达式
        r = ++b;
        console.log(r); //10 b++表达式的结果是 10 | ++b 表达式的结果是11,只有b++对表达式的结果是没有影响的
        console.log(b); // b++ 还是 ++b 对b的影响是一样的，即两者都会是b进行加1操作


        var c = 34;

        console.log(c --); //表达式的结果是34，c的值变为了33
        console.log(-- c); //32
        console.log(c);


        var d = 1;

                // 1   -  2   +     2  -    2
        var r = (d++) - (d--) + (++d) - (d--)
            /*
                1   d=2
                2   d=1
                2   d=2
                2   d=1
            */

        console.log(r); //-1
        console.log(d); //1

    </script>
</body>
</html>

算术运算符

4.2 比较运算符

>
>=
<
<=
== 相等      两个操作数  只要值相等(类型不同会自动转换) 就相等   
=== 全等     类型和值都要相同才全等
!=  不得
!== 不全等
in 判断 数组的索引 和 对象的属性 是否存在
instanceof  一个对象是否属于某个构造函数(类)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>运算符</title>
</head>
<body>
    <script>
        //比较运算符

        console.log(100 == '100')      //true
        console.log(1 == true)         //true
        console.log(100 == 100)       //true

        console.log(100 === '100')     //false
        console.log(1 === true)        //false
        console.log(1 === 1)           //true

        console.log('')                //输出为空我们在这里可以将其看做是换行


        console.log(100 != '100');  //false
        console.log(100 !== '100');  //true

        console.log('')           //换行


        //了解
        //in 用于数组和对象
        var list = [10,20,30,40,50];

        console.log(0 in list)      //true   判断的是索引在不在数组中
        console.log(6 in list)      //false


        //用于对象 object
        var obj = {'name':'lili', 'age':19}      //对象中的key可加可不加引号
        console.log('age' in obj);        //判断的是关键字是不是对象中的key，age要加引号


        
    </script>
</body>
</html>

比较运算符

4.3 逻辑运算符

&&   逻辑与and
||   逻辑或or
！   逻辑非not

4.4 位运算符

&
|
~
^
<<
>>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>按位与运算</title>
</head>
<body>
    <script>
        
        var a = 11;   
        var b = 8;

        console.log(a & b)    //先将他们转换为二进制，然后根据二进制进行按位与运算

        /*
            1011   
            1000
            ---------------
            1000
        */
    </script>
</body>
</html>

4.5 赋值运算符

=
+=
-=
*=
/=
%=

4.6 其他运算符

+   字符串连接符
?:  比较运算符    表达式？值1:值2
typeof  判断类型
delete  删除对象的属性和数组的成员
void  空运算符
,   逗号运算符

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>其他运算符</title>
</head>
<body>
    
    <!--没有任何作用的超链接  -->
    <a href="javascript:void(0)">按钮</a>   <!--将一个可以跳转的超链接编程一个不可以跳转的超链接，没有什么意义-->
    <script>
        
        //比较运算符
        //判断条件?结果1：结果2

        var score = 20;

        var res = score > 60 ? '及格' : '不及格';   //?比较运算，分数大于60则返回及格，否则返回不及格

        console.log(res);


        //有个函数叫 typeof  有个运算符也叫typeof  
        console.log(typeof(100));     //number
        console.log(typeof 'hello');   //string


        //同时声明多个变量
        var a=100,b=200,c=300;       //逗号运算符可以在一行声明多个变量
        console.log(a,b,c)

    </script>
</body>
</html>

总结

ECMAScript和JavaScript ES6(ES2015)
在HTML中使用 js。 <script></script>
js的基本语法：注释，指令结束符(；换行) 变量、输出内容
js程序：获取页面的元素，元素对的属性。事件函数
数据类型：原始类型 (Number string boolean null undefined) 对象类型（array、object）
运算符：算术运算符(++ 、--) 比较运算符(== 、===、!=、!==) 、位运算符、逻辑运算符、赋值运算符、其他(字符串连接符、比较运算符、typeof )

posted @ 2018-08-08 19:21 迎风而来阅读(250) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

迎风而来

JavaScript基础语法

1 JavaScript

1.1 特点

1.2 JavaScript版本

1.3 应用领域

2 浏览器中JavaScript的基本语法

2.1 在HTML中使用JS

2.2 指令结束符

2.3 注释

2.4 变量

2.5 输出内容

3 JS程序用到的知识点

弹框

获取页面中的元素 作为js对象

双标签元素里面的内容

3 JavaScript 数据类型

3.1 数据类型

3.2 Number

3.3 String 字符串

3.4 布尔值

3.5 Null和undefined

3.6 数据类型转换

强制转换

自动转换

4 运算符

4.1 算术运算符

4.2 比较运算符

4.3 逻辑运算符

4.4 位运算符

4.5 赋值运算符

4.6 其他运算符

总结

公告

获取页面中的元素作为js对象