一、 Web端哪些时候需要用到？

　　行为交互：例如：返回顶部

　　数据交互：例如：筛选关键词

　　逻辑交互：例如：单选选男选女

二、JavaScript组成

　　ECMAScript：JavaScript语法和基本对象

　　DOM：文档对象模型，js代码去操作HTML标签

document.getElementById("content")

　　BOM：浏览器对象模型，浏览器内置功能

alert("点击了");

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <input type="text" placeholder="请输入内容" id="content" />
    <input type="button" value="点击" onclick="clickMe();"/>
    <h1>显示内容</h1>
    <div id="txt"></div>

    <script>
        function clickMe(){
//            alert("点击了");
//            1、获取用户输入的内容
            var tag = document.getElementById("content");
            var userInputData = tag.value;

//            2、找到div，并将内容赋值
            var tagTxt = document.getElementById("txt");
            tagTxt.innerText = userInputData;
        }
    </script>
</body>
</html>

三、JavaScript建议放到body部分的最下部位：

1）单个文件使用一个script

2）多个文件使用一个script，要创建一个js文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <input type="text" placeholder="请输入内容" id="content" />
    <input type="button" value="点击" onclick="clickMe();"/>
    <h1>显示内容</h1>
    <div id="txt"></div>

    <script src="v1.js"></script>
</body>
</html>

v1.js文件

function clickMe(){
//            alert("点击了");
//            1、获取用户输入的内容
            var tag = document.getElementById("content");
            var userInputData = tag.value;

//            2、找到div，并将内容赋值
            var tagTxt = document.getElementById("txt");
            tagTxt.innerText = userInputData;
        }

 四、注释

1）HTML注释

   单行&多行注释： <!–HTML注释标记–>

2）CSS注释，必须在style的代码块中。

<style>
    /* 这是CSS注释*/
</style>

3）JavaScript注释，必须在script的代码块中。

<script>
    //JavaScript单行注释
    /*JavaScript多行注释*/
</script>

五、JavaScript变量

变量名标准的规范：

var userName = “liusijiang”；

1）局部变量：函数中变量。

2）全局变量：代码块顶格。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <script>
        //全局变量
        NAME = "liusijaing";

        function userName() {
            //局部变量
            var age = 19;
        }
        alert(NAME);
    </script>
</body>
</html>

六、JavaScript的数据类型

<body>
<script>
    var age = 19; //数字类型
    var name = "liusijiang"; // 字符串
    var data = true;  //bool类型:true&false
    var dataList = [11,22,33];  //数组 python列表
    var info = {name:"liusijiang",age:19}  //对象 python字典
    var info = {"name":"liusijiang","age":19}  //对象 python字典
</script>
</body>

七、JavaScript语句

1）、判断语句

    var age = 19;
    if(age < 19){
        ...
    }else{
        ...
    }
    var age = 19;
    if(age < 18){
        ...
    }else if(age == 19){
        ...
    }else{
        ...
    }

2）循环语句

    var dataList = [11,22,33];
    for (var i = 0;i < dataList.length;i++){
        console.log(i);  //print
    }
    // 上面for语句可以换成如下
    for (var idx in dataList){
        var data = dataList[idx];
        console.log(idx,data);
    }

八、函数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script>
    function du(a1,a2) {
        var a3 = a1 + a2;
        return a3;
    }
    var res = du(11,22);
    console.log(res);  //33
</script>
</body>
</html>

运行结果使用F12》console（控制台）》查看

 匿名函数（函数没有名字），作用：因在开发过程中名字过多导致重名

function (arg) {

　　console.log(12345678);

}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script>
    function func(){
        console.log(12345678);
    }
    setInterval(func, 1000);  //定时调用函数
</script>
</body>
</html>

匿名函数的使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script>
    function func(){
        console.log(12345678);
    }
    setInterval(func, 1000);  //定时调用函数
// 匿名函数的使用如下：
    setInterval(function (){
        console.log(123);
    }, 1000);  //定时调用函数

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

自执行函数，自动执行（闭包）

    function f(a1,a2) {
        console.log(a1,a2);
    }
    f("xxxxx","123");
// 上面代码转换成如下
    (function f(a1,a2) {
        console.log(a1,a2);
    })("yyyy","4321")

运行结果如下：

 九、JSON序列化

JSON.stringify(对象)，js中的对象转换成JSON字符串

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script>
    var info = {name:"liusijiang",age:19}

    var infoStr = JSON.stringify(info);

    console.log(infoStr);  //执行结果：{"name":"liusijiang","age":19}
</script>
</body>
</html>

运行结果如下：

JSON.parse(字符串)，JSON字符串转换成js对象

//JSON.parse(字符串)，JSON字符串转换成js对象
    var dataString = '{"name":"liusijiang","age":19}';
    var info = JSON.parse(dataString);
    console.log(info);  // 执行结果：{name:"liusijiang",age:19}

运行结果如下：

 十、ES5

现阶段ES6（很多前后端分离的项目），ES6编译转换成ES5

JavaScript基础语法

JavaScript应该放在什么位置？

1、行间JS

　　优势

　　劣势

2、内部JS

　　优势

　　劣势

3、外部JS

　　优势

　　劣势

 

版权声明：本文为思江原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://www.cnblogs.com/liunaixu/p/16332922.html