JavaScript基础入门全解析（上）

偏执的太偏执、 2023-09-27 18:51 112阅读 0赞

JavaScript基础语法  
什么是JavaScript（简称js）  
1.首先要了解前端页面的组成（前端页面的三层结构）  
●HTML 表示了你的页面内有什么，组成页面的骨架 （结构层）  
●CSS 表示了你的页面中每一个内容是什么样子的（样式层）  
●JavaScript（简称js） 表示了你的页面中每一个内容如何发生变化, 有什么行为内容（行为层）  
2.JavaScript  
是一种基于对象和事件驱动并具有相对安全性的客户端脚本语言。同时也是一种广泛用于客户端Web开发的脚本语言，常用来给HTML网页添加动态功能，比如响应用户的各种操作。

JavaScript的组成  
1.ECMASCRIPT: 定义了javascript的语法规范,描述了语言的基本语法和数据类型  
2.BOM (Browser Object Model): 浏览器对象模型  
●有一套成熟的可以操作浏览器的 API，通过 BOM 可以操作浏览器。比如： 弹出框、浏览器跳转、获取分辨率等  
3.DOM (Document Object Model): 文档对象模型  
●有一套成熟的可以操作页面元素的 API，通过 DOM 可以操作页面中的元素。比如： 增加个 div，减少个 div，给 div 换个位置等

![3a750719cafd46662b65b4f1f7915dcf.png][]

总结： JS 就是通过固定的语法去操作 浏览器 和 标签结构 来实现网页上的各种效果

JavaScript的执行环境  
●JavaScript 程序不能独立运行，它需要被嵌入 HTML 中，然后浏览器才能执行 JavaScript 代码

JavaScript代码的书写位置  
●和 css 一样，我们的 js 也可以有多种方式书写在页面上让其生效  
●js 也有多种方式书写，分为 行内式， 内嵌式，外链式

第一段 JS 代码  
●在开始之前, 我们先来学习第一段 js 代码

alert("hello world")
    
    ```
    
    ●作用 : 在浏览器出现一个弹出框, 弹出框内显示的内容就是小括号内书写的文本
    ●注意 : 小括号内的内容如果不是纯数字内容, 需要被引号包裹(单引号或双引号都可以) 
    
    行内式 JS 代码（不推荐）
    a标签
    ●因为a标签有自己的跳转行为，这个是这个标签本身就有的，当我们点击的时候会自动跳转到指定的页面
    ●我们只要在a标签的herf属性的位置写上javascript:;就不会跳转
    ●我们在冒号和分号之间写上js代码，就会执行我们写的这个js代码
    
    ```js
    
    
    <a href="javascript:alert('hello world');">点击一下试试</a>
    
    ```
    
    非a标签
    ●如果是非a标签，本身不具备这个跳转的能力，我们就需要认为的赋予它这个能力
    ●先学第一个能力，onclick，这是一个点击的行为
    ●在值的位置, 直接书写 js 代码就行, 不需要 javascript:; 了
    ●写在标签上的 js 代码需要依靠事件（行为）来触发
    
    ```
    
    <div onclick="alert('我是一个弹出层')">点一下试试看</div>
    
    
    
    
    ```
    
    
    内嵌式 JS 代码（不推荐）
    ●内嵌式的 js 代码会在页面打开的时候直接触发
    
    
    
    ```
    
    <script type="text/javascript">
        alert('我是一个弹出层')
    </script>
    
    
    
    
    ```
    
    
    ●注意 : 
    1.script 标签对内的代码不需要任何行为, 打开页面就会执行
    2.script 标签对原则上可以书写在页面的任意位置
    ●推荐放在 head 标签的末尾或者 body 标签的末尾
    ●目前我们推荐放在 body 的末尾
    3.一个页面原则上可以书写任意多个 script 标签
    ●会按照从上到下的顺序依次执行每一个 script 标签中的代码
    
    外链式 JS 代码（推荐）
    ●外链式代码是书写在一个 .js 的文件内
    ●外链式 js 代码只要引入到了 html 页面中，就会在页面打开的时候直接触发（解析）
    ●新建一个 .js 后缀的文件，在文件内书写 js 代码，把写好的 js 文件引入 html 页面
    
    
    ```
    
    
    
    <script src="index.js"></script>
    
    
    <script src="index1.js"></script>
    <script src="index2.js"></script>
    <script src="index3.js"></script>
    
    
    ```
    
    ●注意 :
    1.外链式 js 代码不需要任何行为, 打开页面就会执行
    2.script 标签对原则上可以书写在页面的任意位置
    ●推荐放在 head 的末尾或者 body 的末尾
    ●目前推荐放在 body 的末尾
    3.一个页面可以书写任意多个 script 标签
    ●会按照从上到下的顺序依次执行每一个 script 标签
    4.一个 script 标签当你书写了 src 属性以后, 表示你要把他当做外链式使用
    ●那么此时就不能在当做内嵌式使用了, 写在标签对内的内容没有意义了
    ●只要你写了 src 属性, 不管值的位置是否书写地址, 内嵌式都没有意义了
    5.一个页面中可以同时存在外链式和行内式，执行的顺序还是按照你script标签的书写位置先关，写在上面的先执行 
    
    
    ```
    <!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <title>JavaScript 基础 - 引入方式</title>
    </head>
    <body>
      
      <script src="demo.js">
        // 此处的代码会被忽略掉！！！！
        // 不管你有没有写demo.js。
        // 只要看到 src 属性浏览器就会当做外链式来解析。
        // 你写在 script 标签中的代码就不起作用了
          alert(千锋欢迎您);
      </script>
    </body>
    </html>
    
    
    ```
    
    
    JS 中的注释
    ●学习一个语言, 先学习一个语言的注释, 因为注释是给我们自己看的, 也是给开发人员看的
    ●写好一个注释, 有利于我们以后阅读代码
    ●JavaScript 支持两种形式注释语法：单行注释、多行注释
    
    单行注释
    ●一般就是用来描述下面一行代码的作用
    ●可以直接写两个 / ，也可以按 ctrl + /
    
    
    ```
    <!DOCTYPE html>
    <html lang="en">
    <head>
        ...
        <title>基础-注释</title>
    </head>
    <body>
        <script>
        // 这种是单行注释的语法
        // 一次只能注释一行
        // 可以重复注释
        alert('嗨，欢迎来千锋学习前端技术！');
        </script>
    </body>
    </html>
    
    
    ```
    
    多行注释
    ●一般用来写一大段话，或者注释一段代码
    ●可以直接写 /* */ 然后在两个星号中间写注释
    ○各个编辑器的快捷键不一样，vscode 是 Alt + shift + a
    
    ```
    <!DOCTYPE html>
    <html lang="en">
    <head>
        ...
        <title>基础-注释</title>
    </head>
    <body>
        <script>
            /*
                这是多行注释的语法
            */
    
            /*
                注释的代码不会执行
                alert('我是一个弹出层')
                alert('我是一个弹出层')
            */
            alert('欢迎您的到来')
        </script>
    </body>
    </html>
    
    
    ```
    
    变量（重点）
    ●变量是计算机中用来存储数据的“容器”，它可以让计算机变得有记忆，通俗的理解变量就是使用【某个符号】来代表【某个具体的数值】（数据）
    ●变量是计算机内存中存储数据的标识符，根据变量名称可以获取到内存中存储的数据
    ●也就是说，我们向内存中存储了一个数据，然后要给这个数据起一个名字，为了是我们以后再次找到他
    ●语法： var 变量名 = 值
    
    定义（声明）变量及赋值
    ●声明(定义)变量有两部分构成：声明关键字、变量名（标识）
    ○var : 定义变量的关键字, 告诉浏览器, 我要定义一个变量了
    ○空格 : 必须写, 区分 关键 和 变量名 的
    ○变量名 : 你自己起的一个名字
    ○= : 赋值符号, 把右边的内容, 给到左边的变量
    ○值 : 你给你定义的变量赋的是什么值
    
    ```
    <!DOCTYPE html>
    <html lang="en">
    <head>
        ...
        <title>基础-声明和赋值</title>
    </head>
    <body>
        <script>
            // 语法: var 名字 = 值
            var age = 18
            // var 关键字 所谓关键字是系统提供的专门用来声明（定义）变量的词语
            // age 即变量的名称，也叫标识符
        </script>
    </body>
    </html>
    
    
    ```
    
    ```
    <!DOCTYPE html>
    <html lang="en">
    <head>
        ...
        <title>基础-声明和赋值</title>
    </head>
    <body>
        <script>
            //   1. 定义不赋值
            //     => 语法: var x
            //     => 准备一个变量, 以后使用, 暂时先不进行赋值
            var x
        </script>
    </body>
    </html>
    
    
    ```
    
    ```
    <!DOCTYPE html>
    <html lang="en">
    <head>
        ...
        <title>基础-声明和赋值</title>
    </head>
    <body>
        <script>
            //   2. 定义并赋值
            //     => 语法: var x = 100
            //     => 准备一个变量的同时, 并且给他赋值为某一个数据
            var x = 100
        </script>
    </body>
    </html>
    
    
    ```
    ```
    <!DOCTYPE html>
    <html lang="en">
    <head>
        ...
        <title>基础-声明和赋值</title>
    </head>
    <body>
        <script>
            //   3. 一次性定义多个变量不赋值
            //     => 语法: var x, x2, x3, x4, ...
            //     => 同时定义多个变量, 都不进行赋值
            var x, x1, x2
        </script>
    </body>
    </html>
    
    
    ```
    
    ```
    <!DOCTYPE html>
    <html lang="en">
    <head>
        ...
        <title>基础-声明和赋值</title>
    </head>
    <body>
        <script>
            //   4. 一次性定义多个变量并赋值
            //     => 语法: var x = 10, x2 = 20, x3 = 30, ...
            var x = 10, x1 = 20, x2 = 30
        </script>
    </body>
    </html>
    
    
    ```
    ```
    <!DOCTYPE html>
    <html lang="en">
    <head>
        ...
        <title>基础-声明和赋值</title>
    </head>
    <body>
        <script>
            //   5. 一次性定义多个变量, 有的赋值有的不赋值
            //     => 语法: var x = 10, x2, x3 = 30
            var x = 10, x1, x2 = 20
        </script>
    </body>
    </html>
    
    
    ```
    
    变量命名规则和规范
    ●变量命名规则(你必须遵守) 
    1.一个变量只能由 字母(a-z, A-Z) 数字(0-9) 下划线(_) 美元符($) 组成
    2.一个变量不能由 数字 开头
    3.变量严格区分大小写
    4.不要使用关键字或保留字
    ●变量命名规范(建议你遵守)
    1.变量语义化
    2.驼峰命名法
    3.不使用中文
    
    变量使用注意事项
    ●允许声明和赋值同时进行
    ●允许同时声明多个变量并赋值
    ●JavaScript 中内置的一些关键字不能被当做变量名
    ●一个变量名只能存储一个值
    ●当再次给一个变量赋值的时候，前面一次的值就没有了
    ●变量名称区分大小写（JS 严格区分大小写）
    
    JS 的输入和输出
    ●输出和输入也可理解为人和计算机的交互，用户通过键盘、鼠标等向计算机输入信息，计算机处理后再展示结果给用户，这便是一次输入和输出的过程。
    ●举例说明：如按键盘上的方向键，向上/下键可以滚动页面，按向上/下键这个动作叫作输入，页面发生了滚动了这便叫输出。
    
    输出
    ●以弹窗的形式展示给用户
    
    ```
    // 以弹出层的形式展示给我们
    alert('你好 世界')
    
    
    ```
    ●在页面中展示给用户
    
    ```
    // 直接展示到我们的页面上
    document.write('hello world')
    
    
    ```
    ●在控制台展示 一般用户看不到
    
    ```
    // 在控制台展示出来
    console.log('大家好');
    
    
    ```
    
    输入
    ●用户选择框
    
    ```
    // 这个选择框返回的是一布尔值
    var name = confirm('你是程序员吗')
    // 打印我们拿到的结果(也就是布尔值)
    console.log(name)
    
    
    ```
    
    
    
    ●用户输入框 
    
    ```
    // 这个输入框返回的是用户输出的内容
    var name = prompt('请输入你的姓名')
    // 我们拿到的结果就是用户输入的结果
    console.log(name)
    
    ```

[3a750719cafd46662b65b4f1f7915dcf.png]: https://img-blog.csdnimg.cn/img_convert/3a750719cafd46662b65b4f1f7915dcf.png