JavaScript 基本了解

了解更多请访问https://www.runoob.com/js/js-tutorial.html

一、JavaScript 简介

JavaScript 是互联网上最流行的脚本语言，这门语言可用于 HTML 和 web，更可广泛用于服务器、PC、笔记本电脑、平板电脑和智能手机等设备。

JavaScript 是脚本语言

JavaScript 是一种轻量级的编程语言。

JavaScript 是可插入 HTML 页面的编程代码。

JavaScript 插入 HTML 页面后，可由所有的现代浏览器执行。

1、JavaScript：直接写入 HTML 输出流

<script>
    document.write("<h1>这是一个标题</h1>");
</script>

只能在 HTML 输出中使用 document.write。如果您在文档加载后使用该方法，会覆盖整个文档。

2、JavaScript：对事件的反应

<button type="button" onclick="alert('Holle')">点我</button>

3、JavaScript：改变 HTML 内容

<p id="demo">文本内容</p>
<script>
    x = document.getElementById("demo");  //查找元素
    x.innerHTML="Hello JavaScript";    //改变内容
</script>

二、JavaScript 用法

在HTML 中的js脚本必须位于 <script> 与 `</script> 标签之间。

脚本可被放置在 HTML 页面的 <body> 和 <head> 部分中。

1、<script> 标签

如需在 HTML 页面中插入 JavaScript，请使用 <script> 标签。

<script> 和 </script> 会告诉 JavaScript 在何处开始和结束。

<script> 和 </script>之间的代码行包含了 JavaScript:

<script>
    alert("我的第一个 JavaScript");
</script>

2、<body> 中的 JavaScript 函数

我们把一个 JavaScript 函数放置到 HTML 页面的 <body> 部分。

该函数会在点击按钮时被调用：

<body>
    <button type="button" onclick="myFun()">点我改变文本内容</button>
    <p id="demo">文本内容</p>
    <script>
        function myFun(){
            x = document.getElementById("demo");  //查找元素
            x.innerHTML="Hello JavaScript";    //改变内容
        }
    </script>
</body>

3、外部的 JavaScript

也可以把脚本保存到外部文件中。外部文件通常包含被多个网页使用的代码。

外部 JavaScript 文件的文件扩展名是 .js。

如需使用外部文件，请在 <script> 标签的 “src” 属性中设置该 .js 文件：

<!DOCTYPE html>
<html>
    <body>
        <script src="my.js"></script>
    </body>
</html>

三、JavaScript 输出

JavaScript 可以通过不同的方式来输出数据：

使用 window.alert() 弹出警告框。
使用 document.write() 方法将内容写到 HTML 文档中。
使用 innerHTML 写入到 HTML 元素。
使用 console.log() 写入到浏览器的控制

1、使用 window.alert()

可以弹出警告框来显示运算结果的数据：

<script>
    alert(5+6);
</script>

2、操作 HTML 元素

如需从 JavaScript 访问某个 HTML 元素，您可以使用 document.getElementById(id) 方法。

请使用 “id” 属性来标识 HTML 元素，并 innerHTML 来获取或插入元素内容：

<p id="demo">文本内容</p>
<script>
    document.getElementById("demo").innerHTML="Hello JavaScript"; //改变文本内容
</script>

以上 JavaScript 语句（在 <script> 标签中）可以在 web 浏览器中执行：

document.getElementById(“demo”) 是使用 id 属性来查找 HTML 元素的 JavaScript 代码。

innerHTML = “Hello JavaScript” 是用于修改元素的 HTML 内容(innerHTML)的 JavaScript 代码。

3、写到 HTML 文档

<script>
    document.write("<h1>这是一个标题</h1>");
</script>

4、写到控制台

如果您的浏览器支持调试，你可以使用 console.log() 方法在浏览器中显示 JavaScript 值。

浏览器中使用 F12 来启用调试模式，在调试窗口中点击 “Console” 菜单。

<script>
    let a = 5;
    let b = 6;
    let c = a + b;
    console.log(c);
</script>

四、JavaScript 变量

变量是用于存储信息的”容器”。

/*
声明（创建） JavaScript 变量在 JavaScript 中创建变量通常称为"声明"变量。使用 let 和 const (ES6)
在 2015 年以前，我们使用 var 关键字来声明 JavaScript 变量。
在 2015 后的 JavaScript 版本 (ES6) 允许我们使用 const 关键字来定义一个常量，使用 let 关键字定义的限定范围内作用域的变量。
*/
<script>
    let a = 5;
    let b = 6;
    let c = a + b;
    console.log(c);
</script>

与代数一样，JavaScript 变量可用于存放值（比如 a = 5）和表达式（比如 c = a + b）。
变量可以使用短名称（比如 a 和 b），也可以使用描述性更好的名称（比如 age, sum, totalvolume）。

变量必须以字母开头
变量也能以 $ 和 _ 符号开头（不过我们不推荐这么做）
变量名称对大小写敏感（y 和 Y 是不同的变量）

五、JavaScript 数据类型

值类型(基本类型)：字符串（String）、数字(Number)、布尔(Boolean)、对空（Null）、未定义（Undefined）、Symbol。
引用数据类型：对象(Object)、数组(Array)、函数(Function)。
注：Symbol 是 ES6 引入了一种新的原始数据类型，表示独一无二的值。

1、JavaScript 字符串

字符串是存储字符（比如 “Holle JavaScript”）的变量。
字符串可以是引号中的任意文本。您可以使用单引号或双引号：

<script>
    let str1 = "Holle JavaScript";
    let str2 = 'Holle JavaScript';
</script>

2、JavaScript 数字

JavaScript 只有一种数字类型。数字可以带小数点，也可以不带：

<script>
    let num1 = 10;
    let num2 = 10.00;
</script>

3、JavaScript 布尔

布尔（逻辑）只能有两个值：true 或 false。

<script>
    let x = true;
    let y = false;
</script>

4、JavaScript 数组

<script>
    let prices = [96, 45, 23, 88];
</script>

数组下标是基于零的，所以第一个项目是 [0]，第二个是 [1]，以此类推。

5、JavaScript 对象

对象由花括号分隔。在括号内部，对象的属性以名称和值对的形式 (name : value) 来定义。属性由逗号分隔：

<script>
const item1 = {
    // 属性: 变量在对象中叫属性
    name: "笔记本电脑",
    num: 5,
    price: 6699
};
</script>

6、Undefined 和 Null

Undefined 这个值表示变量不含有值。

可以通过将变量的值设置为 null 来清空变量。

<script>
    let res;//声明变量
    console.log(typeof res);//undefined
    res = null;
    console.log(typeof res);
</script>

六、JavaScript 函数

函数是由事件驱动的或者当它被调用时执行的可重复使用的代码块。

1、JavaScript 函数语法

函数就是包裹在花括号中的代码块，前面使用了关键词 function：

function functionname(){    // 执行代码}

当调用该函数时，会执行函数内的代码。
可以在某事件发生时直接调用函数（比如当用户点击按钮时），并且可由 JavaScript 在任何位置进行调用。
JavaScript 对大小写敏感。关键词 function 必须是小写的，并且必须以与函数名称相同的大小写来调用函数。

<button type="button" onclick="myFun()">点我改变文本内容</button>
<p id="demo">文本内容</p>
<script>
    function myFun(){        
        document.getElementById("demo").innerHTML="Hello JavaScript";//改变文本内容    
    }
</script>

2、调用带参数的函数

在调用函数时，可以向其传递值，这些值被称为参数。这些参数可以在函数中使用。可以发送任意多的参数，由逗号 (,) 分隔：

<script>
    myFunction(argument1,argument2);
</script>

当声明函数时，请把参数作为变量来声明：

<script>
    function myFunction(var1,var2)
    {
        代码
    }
</script>

变量和参数必须以一致的顺序出现。第一个变量就是第一个被传递的参数的给定的值，以此类推。

<script>
    function myFun(a,b){
        let c = a + b;
        console.log(c);
        }
    myFun(5,6);
</script>

3、带有返回值的函数

有时，我们会希望函数将值返回调用它的地方。
通过使用 return 语句就可以实现。
在使用 return 语句时，函数会停止执行，并返回指定的值。

语法

<script>
    function myFunction()
    {
        var x=5;
        return x;
    }
    var myVar=myFunction();
</script>

上面的函数会返回值 5。
注意： 整个 JavaScript 并不会停止执行，仅仅是函数。JavaScript 将继续执行代码，从调用函数的地方。
函数调用将被返回值取代：myVar 变量的值是 5，也就是函数 “myFunction()” 所返回的值。

七、JavaScript 作用域

在 JavaScript 中, 对象和函数同样也是变量。
在 JavaScript 中, 作用域为可访问变量，对象，函数的集合。
JavaScript 函数作用域: 作用域在函数内修改。

1、JavaScript 局部作用域

变量在函数内声明，变量为局部作用域。
局部变量：只能在函数内部访问。

<script>
    function myFun(){
        let a = 5;
        console.log(a);//5
    }
</script>

因为局部变量只作用于函数内，所以不同的函数可以使用相同名称的变量。
局部变量在函数开始执行时创建，函数执行完后局部变量会自动销毁。

2、JavaScript 全局变量

变量在函数外定义，即为全局变量。
全局变量有 全局作用域: 网页中所有脚本和函数均可使用。

<script>
    let a = 5;
    function myFun(){
        console.log(a);//5
    }
    myFun();
    console.log(a);//5
</script>

八、JavaScript 闭包

闭包是一种保护私有变量的机制，在函数执行时形成私有的作用域，保护里面的私有变量不受外界干扰。直观的说就是形成一个不销毁的栈环境。

1、闭包的3个特性：

1..函数嵌套函数
2.函数内部可以引用函数外部的参数和变量
3.参数和变量不会被垃圾回收机制回收

2、闭包的两个条件

1.父子函数
2.自由变量

<script>
    // 父函数
    function parent(a) {
        // 子函数
        function f(b) {
            // b 外部参数
            // c 是私有变量
            // b,c 都是当前子函数 f 的自有变量
            let c = 6;
            //   a : 是子函数 f 的自由变量
            return a + b + c;
        }
        // 返回
        return f;
    }
    // 这个时候,在外部调用parent()会返回 一个函数,此时闭包就产生了
    console.log(parent(5));
    // parent()调用结束,应该将空间和参数全部释放
    // 但是父函数parent中的一个变量a,被 它的一个子函数正在引用着,所以不能销毁
    const f1 = parent(5);
    console.log(f1);
    console.log(f1(8));
</script>

3、实例

<p>局部变量计数。</p>
<button type="button" onclick="myFun()">计数</button>
<p id="demo">0</p>
<script>
    let add = (function () {
        let num = 0;//私有变量
        // 返回
        return function(){ return num += 1; }
    })();
    function myFun() {
        document.getElementById("demo").innerHTML = add();
    }
</script>

实例解析

变量 add 指定了函数自我调用的返回字值。
自我调用函数只执行一次。设置计数器为 0。并返回函数表达式。
add变量可以作为一个函数使用。非常棒的部分是它可以访问函数上一层作用域的计数器。
这个叫作 JavaScript 闭包。它使得函数拥有私有变量变成可能。
计数器受匿名函数的作用域保护，只能通过 add 方法修改。

JavaScript 基本了解

JavaScript 基本了解

相关文章