JS入门到精通完整版

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- js代码需要编写在scrpit标签内 -->
    <script>

        // 控制浏览器弹出警告框
        alert("这是我的第一行js代码!");

        // 让计算机在页面输出内容
        document.write("Hello World!!!");

        // 向控制台输出内容
        console.log("你猜猜我在哪呢!!!");


        // alert("这是一个弹窗！！");
        // document.write("这是一个文本内容！！");
        // console.log("这是控制台输出内容");
    </script>
</head>
<body>
    
</body>
</html>

运行效果（示例）：

2.js基础——js编写的位置

js有三种编写位置的方式

第一种：直接在标签内部使用

第二种：在script标签内使用

第三种：在外部js文件中编写，通过script标签引入（推荐使用）

代码如下（示例）：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>js编写位置</title>
    <!-- 
        可以将js代码编写到外部js文件中，然后通过script标签引入
        写到外部文件中可以在不同页面同时使用，也可以利用浏览器缓存机制
        推荐使用
    -->
    <!-- 
        script标签一旦引入外部文件了，就不能在此标签内写代码了，即使编写也不会被编译
        如果需要则可以在创建一个新的script标签用于编写内部代码

     -->
    <script src="./js/scrpit.js"></script>


    <!-- 
            可以将代码编写到script标签内 
        <script>
            alert("我是script标签内的js代码")
        </script>
    -->
</head>
<body>
    <!-- 
        可以将js代码写在标签的onclick属性中
        当我们点击按钮时，js代码才会执行
     -->
    <button onclick="alert('讨厌，你点我干嘛！！！')">点我一下</button>
    <!-- 
        可以将js代码写在超链接的href属性中，当点击超链接时，会执行js代码
     -->
     <a href="javascript:alert('让你点你就点')">你也点我一下</a>
     <a href="javascript:">你也点我一下</a>
</body>
</html>

运行效果（示例）：

3.js基础——js基本语法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>js基本语法</title>
    <script>
        /*
            多行注释
            JS注释
            多行注释：注释中的内容不会被执行，但可以在源代码中查看
        */
        // 单行注释
        // alert("hello");

        /*
        * 1.JS严格区分大小写
        * 2.JS中每一条语句中以;结尾
        * 3.JS中会自动忽略多个空格和换行，可以对代码进行格式化
        * 
        */
    //    Alert("该语法不会被执行");
    </script>
</head>
<body>
    
</body>
</html>

4.js基础——js字面量和变量

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
    <script>
        /*
        * 字面量：都是不可变的值
        *   比如： 1 2 3 4...
        *   字面量可以直接使用，但我们一般不会直接使用字面量
        * 
        * 变量：变量可以用来保存字面量，而且变量可以任意改变
        *    变量可以更加方便使用,在开发中都是使用变量保存一个字面量
        *    而很少直接用字面量
        *    可以通过变量对字面量描述
        *    x=123546
        */
    //    alert(123456)

        // 声明变量
        // 在js中使用var关键字声明一个变量
        var a;
        // 为变量赋值
        a = 123;
        a = 456;
        console.log(a);

        // 声明和赋值同时进行
        var b = 789 ;
        console.log(b);

        var age = 80;
        console.log(age);
    </script>
</head>
<body>
    
</body>
</html>

5.js基础——js标识符

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
    <script>
        /*
        标识符：
            在js中所有可以由我们自主命名的都可以称为标识符
            例如：变量名、函数名、属性名都属于标识符
            命名要符合一下规则：
                1.标识符中可以含义字母、数字、_、$
                2.标识符不能以数字开头
                3.标识符不能是ES中的关键字和保留字
                4.标识符一般采用驼峰命名法
                                --首字母小写，每个单词的首字母大写，其余小写
            
        */
       var a1_$ = 123;
        // var 22a1_$ = 123;(不能以数字开头)
        // var var = 123;(var是关键字)
        var helloWorld;
    &