JavaScript 基本了解

Home > List of blog posts > JavaScript 基本了解

Blogger Information

Blog 33

fans 0

comment 0

visits 49712

Special Recommendation

More>

Related recommendations

了解更多请访问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 方法修改。

Statement of this Website

The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!

All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement

0 comments

Author's latest blog post

HTML 表单内容的详细介绍

2021-09-23 15:41:35