转：最详细的JavaScript 教程，入门级都能看懂

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>head标签中script</title>    <script>        function myFunction() {            document.getElementById("demo").innerHTML = "这是我的函数";        }</script></head><body><h1>我的函数</h1><p id="demo">一段话</p><button type="button" onclick="myFunction()">这是函数</button></body></html>

实例2：body中的script函数

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>body中的script</title></head><body><h1>我的函数</h1><p id="demo">我的函数</p><button type="button" onclick="myFunction()">点击一下</button><script>    function myFunction() {        document.getElementById("demo").innerHTML = "这是我的函数"    }</script></body></html

JavaScript也可以放在外部供调用，注意外部拓展名为.js。

实例3：外部调用JavaScript

外部调用.js

function myFunction() {    document.getElementById('demo').innerHTML = "这是我的函数"}

调用外部script

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>调用外部script</title></head><body><p id="demo">一段文字</p><button type="button" onclick="myFunction()">尝试一下</button><script src="外部脚本.js"></script></body></html>

输出

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

使用 window.alert() 弹出警告框。

使用 document.write() 方法将内容写到 HTML 文档中。

使用 innerHTML 写入到 HTML 元素。

使用 console.log() 写入到浏览器的控制台。

实例1：aler()弹窗输出

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>alert输出</title></head><body><h1>alert输出</h1><script>    window.alert(5 + 6)</script></body></html>

实例2：document.write()输出

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>document.write输出</title></head><body><h1>document.write输出</h1><script>    document.write(Date());    document.write("Hello,Web!");</script></body></html>

实例3：写到HTMl文档

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>写到HTMl文档</title></head><body><h1>写到HTMl文档</h1><script>    function myFunction() {        document.write("函数输出");    }</script><button onclick="myFunction()">点击这里</button></body></html>

实例4：使用 console.log() 写入到浏览器的控制台


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>使用console.log()写入到浏览器的控制台</title>
</head>
<body>
<h1>console.log()写入到浏览器的控制台</h1>
<script >
    a = 5;
    b = 6;
    c = a + b;
    console.log(c)
</script>
</body>
</html>

语法介绍

JavaScript 是一个脚本语言，它是一个轻量级，但功能强大的编程语言。

字面量

在编程语言中，一般固定值称为字面量。

数字（Number）字面量：可以是整数或者是小数，或者是科学计数(e)。如3.14，5.88等。

字符串（String）字面量：”可以使用单引号或双引号。如"Hello"，"Web"等

表达式字面量：用于计算的固定值。3 + 2.2,3.14 * 2等。

数组（Array：字面量：定义一个数组。如[1,2,3,4,5,6]。

对象（Object：字面量：定义一个对象。如{firstName:"John", lastName:"Doe", age:50, eyeColor:"blue"}。

函数（Function）字面量：定义一个函数。如function myFunction(a, b) { return a * b;}。

注意，在JavaScript中，语句需要加结束符“；”。

JavaScrip变量

在编程语言中，变量用于存储数据值。JavaScript 使用关键字var来定义变量，使用等号来为变量赋值，变量之间可以相互操作：

var y = false                                     // 布尔值var length = 16;                                  // 数字var points = x * 10;                              // 数字计算var lastName = "Johnson";                         // 字符串var cars = ["Saab", "Volvo", "BMW"];              // 数组var person = {firstName:"John", lastName:"Doe"};  // 对象字典

JavaScript函数

为了能够重复引用相同的功能，减少代码的书写和维护的方便，JavaScript提供函数功能，由关键字function引导：

function myFunc(a, b) {    return a + b; // 返回a+b结果}

JavaScript特点

相对其它语言，JavaScript具有下列特点：

JavaScript对大小写敏感。

JavaScript使用Unicode字符集。

JavaScript推荐使用驼峰命名法定义变量，命名避免关键字。

JavaScript属于弱类型语言，定义变量都是var关键字。

JavaScript注释（与Java相同）

// 这是代码：单句注释，在编辑器一般是ctrl + L键。

/* 这是代码 */：多行注释，在编辑器一般是ctrl + shift + L键。

语句

JavaScript语句向浏览器发出的命令，告诉浏览器该做什么。下面的JavaScript语句向id="demo"的 HTML元素输出文本"Hello World!" ：

document.getElementById("demo").innerHTML = "Hello World!";

与Python不同的是，JavaScript代码块都是在大括号中的，这点像极了Java。

Java标识符

大部分语言能够自动补全空格，我们建议在运算符两边加上空格，这样清晰美观，但是要注意在HTML中空格的是要留意用法的，切勿混谈。在JavaScript中，下面两句话是一样的：

var a = 10;var b=10;

与Python相似，JavaScript也是脚本语言，属于解释型。

对象

定义对象

任何事物都是对象，具有相同特点的事物中抽象出来的一个特点实例。如人类中的小明。

在JavaScript中，对象就是是属性变量的容器，类似Python中的字典，Java中的哈希映射，其中定义了对象的属性。

var people = {    firstName: "Mike",    lastName: "Smith",    age: "18",    address: "Beijing",    job: "Student"};

以上就是对象定义，当然你也可以写作一行，我这样是为了美观，以后也强烈大家这样写。

访问对象属性

可以说 "JavaScript 对象是变量的容器"。但是，我们通常认为 "JavaScript 对象是键值对的容器"。键值对通常写法为key : value(键与值以冒号分割)，键值对在JavaScript对象通常称为对象属性。我们访问属性也是通过万能的" . "（大部分语言都是用的这个）。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>这是网站</title>
</head>
<body>
<h1>访问类属性</h1>

<p id="demo"></p>
<script>
    var people = {
        firstName: "Mike",
        lastName: "Smith",
        age: "18",
        address: "Beijing",
        job: "Student"
    };
    document.getElementById("demo").innerHTML =
        people["firstName"] + "." + people.lastName;
</script>
</body>
</html>

两种访问方式,你可以使用对象名 .property 或对象名.["property"] 。

对象长度length

通过key个数求得长度

array.keys().length

in 关键字使用

判断对象key是否存在

let array={
  '2023-10-10':
    [{id:1,name:'John',value:11},{id:2,name:'John',value:11}],

  '2023-10-09':
    [{id:1,name:'John',value:11},{id:2,name:'John',value:11}],

  '1008':
    [{id:1,name:'John',value:11},{id:2,name:'John',value:11}]
}

console.log('1008' in array)
console.log('10080' in array)

运行结果：

true
false

in右操作数必须是一个对象值。

// 数组
var trees = new Array("redwood", "bay", "cedar", "oak", "maple");
0 in trees; // 返回 true
3 in trees; // 返回 true
6 in trees; // 返回 false
"bay" in trees; // 返回 false (必须使用索引号，而不是数组元素的值)

"length" in trees; // 返回 true (length 是一个数组属性)

Symbol.iterator in trees; // 返回 true (数组可迭代，只在 ES2015+ 上有效)

// 内置对象
"PI" in Math; // 返回 true

// 自定义对象
var mycar = { make: "Honda", model: "Accord", year: 1998 };
"make" in mycar; // 返回 true
"model" in mycar; // 返回 true

函数

函数是由事件驱动的或者当它被调用时执行的可重复使用的代码块。当调用该函数时，会执行函数内的代码。可以在某事件发生时直接调用函数（比如当用户点击按钮时），并且可由 JavaScript 在任何位置进行调用。

参数与返回值

在调用函数时，您可以向其传递值，这些值被称为参数，参数个数不限。

function myFunction(var1,var2){代码}

参数在调用时，应该严格按照其顺序传参，如下所示：

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>这是一个JavaScript网站</title></head><body><h1>函数参数传递问题</h1><p>点击下面按钮调用</p><button onclick="myFunc('Mike','18','Beijing')">点击这里</button><script>    function myFunc(name, age, address) {        alert("My name is " + name + ", age is " + age + " and my home is in " + address);    }</script></body></html>

JavaScript函数允许有返回值，返回关键字为return。当函数返回值后，函数将停止执行，在return后面的语句将不会被执行。

实例：计算两个数的乘积并返回结果

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>JavaScript网站</title></head><body><h1>计算两个数的值返回</h1><p id="demo"></p><script>    function myFunc(a, b) {        return a * b;    }
    document.getElementById("demo").innerHTML = myFunc(3, 4);</script></body></html>

变量

JavaScript变量分为两种：

全局变量：在函数外声明的变量是全局变量，网页上的所有脚本和函数都能访问它。

局部变量：在JavaScript函数内部声明的变量（使用 var）是局部变量，所以只能在函数内部访问它。

当我们向未声明的JavaScript变量分配值时，该变量将被自动作为window的一个属性。如下列语句：

name = "Mike";

将声明window的一个属性name。非严格模式下给未声明变量赋值创建的全局变量，是全局对象的可配置属性，可以删除。如：

var var1 = 1; // 不可配置全局属性
var2 = 2; // 没有使用 var 声明，可配置全局属性

console.log(this.var1); // 1
console.log(window.var1); // 1

delete var1; // false 无法删除
console.log(var1); //1

delete var2; 
console.log(delete var2); // true
console.log(var2); // 已经删除 报错变量未定义

事件描述

HTML事件是发生在HTML元素上的事情。当在 HTML 页面中使用JavaScript时， JavaScript可以触发这些事件。

HTML事件可以是浏览器行为，也可以是用户行为。以下是HTM 事件的实例：

HTML 页面完成加载

HTML input 字段改变时

HTML 按钮被点击

通常，当事件发生时，你可以做些事情。在事件触发时JavaScript可以执行一些代码。HTML元素中可以添加事件属性，使用JavaScript代码来添加HTML元素。

单引号：<some-HTML-element some-event='JavaScript 代码'>

双引号：<some-HTML-element some-event="JavaScript 代码">

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>JavaScript事件</title></head><body><h1>JavaScript事件处理两种方式</h1><p id="demoOne"></p><button onclick="getElementById('demoOne').innerHTML=Date()">点击查看时间1</button><p id="demoTwo"></p><button onclick="this.innerHTML=Date()">点击查看时间2</button></body></html>

JavaScript通常是多行代码，比较差常见的就是通过事件属性调用。

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>JavaScript事件</title></head><body><h1>JavaScript事件之属性调用</h1><p>点击执行<em>myFunc()</em>函数</p><button onclick="myFunc()">点击这里</button><p id="one"></p><script>    function myFunc() {        document.getElementById("one").innerHTML = Date();    }</script></body></html>

后续会继续学习更多事件。

事件作用

事件可以用于处理表单验证，用户输入，用户行为及浏览器动作：

页面加载时触发事件

页面关闭时触发事件

用户点击按钮执行动作

验证用户输入内容的合法性

可以使用多种方法来执行 JavaScript 事件代码：

HTML 事件属性可以直接执行 JavaScript 代码

HTML 事件属性可以调用 JavaScript 函数

你可以为 HTML 元素指定自己的事件处理程序

你可以阻止事件的发生

字符串

字符串：一系列字符的集合。

var a = "abc";var b = "Hello";

与Python类似，可以使用索引来访问字符串中的每个字符：

var c = b[1];           // e

length

该属性可以计算字符串的长度。

<!DOCTYPE html><html><head>    <meta charset="utf-8">    <title>字符串长度</title></head><body><script>    var txtOne = "Hello World!";    document.write("<p>" + txtOne.length + "</p>");    var txtTwo = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";    document.write("<p>" + txtTwo.length + "</p>");</script></body></html>

JavaScript也有一些特殊字符，例如当我们要打印引号时，需要加上“\”来进行转义，否则编译器无法解析。

字符串作为对象

通常，JavaScript字符串是原始值，可以使用字符创建：var firstName = "Mike"，但我们也可以使用new关键字将字符串定义为一个对象：var firstName = new String("Mike")，这点与Java类似。

==与===区别

1、对于 string、number 等基础类型，== 和 === 是有区别的

a）不同类型间比较，==之比较"转化成同一类型后的值"看"值"是否相等，===如果类型不同，其结果就是不等。

b）同类型比较，直接进行 "值" 比较，两者结果一样。

2、对于 Array,Object 等高级类型，== 和 === 是没有区别的进行 "指针地址" 比较

3、基础类型与高级类型，== 和 === 是有区别的

a）对于 ==，将高级转化为基础类型，进行 "值" 比较

b）因为类型不同，=== 结果为 false

4、!= 为 == 的非运算，!== 为 === 的非运算

var num=1；

var str="1"；

var test=1；

test == num   //true　相同类型　相同值 

test === num  //true　相同类型　相同值 

test !== num  //false test与num类型相同，其值也相同,　非运算肯定是false 

num == str   //true 　把str转换为数字，检查其是否相等。

num != str   //false  == 的 非运算 

num === str  //false  类型不同，直接返回false 

num !== str  //true   num 与 str类型不同 意味着其两者不等　非运算自然是true啦

运算符

JavaScript 还包含了基于某些条件对变量进行赋值的条件运算符。如：

variablename=(condition)?value1:value2

其他补充：

字符串拼接的几种方式

在 JavaScript 中，使用字符串连接有几种方式：连接符（+）、反引号（`）、join()、concat()。

一、使用连接符 “+” 把要连接的字符串连起来

let a = 'java'

let b = a + 'script'


//运行结果：javascript

说明：只连接100个以下的字符串建议用这种方法，最方便

二、使用模板字符串，以反引号（ ` ）标识

ES6中新增的字符串方法，可以配合反单引号完成拼接字符串的功能

反单引号怎么打出来：将输入法调整为英文输入法，单击键盘上数字键1左边的按键。

用法：

1：定义需要拼接进去的字符串变量

2：将字符串变量用${}包起来，再写到需要拼接的地方

注意：反单引号：` ；单引号：' 。不要用错了哟~

实例：

let a = 'java'

let b = `hello ${a}script`


//运行结果：hello javascript

三、使用数组的 join() 方法连接字符串

定义和用法：

join() 方法将数组作为字符串返回。

元素将由指定的分隔符分隔。默认分隔符是逗号 (,)。

注释：join() 方法不会改变原始数组。

语法：

array.join(separator)

参数：

参数	描述
separator	可选。要使用的分隔符。如果省略，元素用逗号分隔。

返回值：

类型	描述
String	字符串值，表示数组值，由指定的分隔符分隔。

实例：

let arr = ['hello','java','script']

let str = arr.join(" ")


//运行结果：hello java script

四、使用 JavaScript的 concat() 方法连接字符串

定义和用法：

concat() 方法用于连接两个或多个字符串。

该方法没有改变原有字符串，但是会返回连接两个或多个字符串新字符串。

注释：concat() 方法不会修改原字符串的值，与数组的 concat() 方法操作相似。

语法：

string.concat(string1, string2, ..., stringX)

参数：

参数	描述
string1, string2, ..., stringX	必需。将被连接为一个字符串的一个或多个字符串对象。

返回值：

类型	描述
String	两个或多个字符串连接后生成的新字符串。

实例：

et a = 'java'

let b = 'script'

let str = a.concat(b)

ES6 与 JavaScript 区别：

一、概述

首先需要搞清楚如下几个问题

（1）什么是javascript?

重新认识一下javascript，定义是javascript是一种弱类型的脚步语言，用于动态渲染html。仅此而已？更深入了解的话，发现其实javascript由核心（ESMAScript）、文档对象模型（DOM）和浏览器对象模型（BOM）三部分组成。

（2）什么是ES6

ES全称ECMAScript，ES6是它的第六个版本（以下简称ES6），它是JavaScript语言的下一代标准，已经在2015年6月正式发布了。Mozilla公司将在这个标准的基础上，推出JavaScript 2.0。除此之外还有ES还有其他版本，像ES5等，目前ES6还不被大多数浏览器兼容。

（3）ES6和JavaScript的关系

简单一句话总结就是，ECMAScript（ES）是JavaScript语言的国际标准，JavaScript是ECMAScript的实现。所以ES6是JavaScript的一个实现标准。更准确来说JavaScript由核心（ESMAScript）、文档对象模型（DOM）和浏览器对象模型（BOM）三部分组成。

w3c离线JS手册

分享一个好用实在实用手册

https://blog.csdn.net/LlanyW/article/details/129058392?csdn_share_tail=%7B%22type%22%3A%22blog%22%2C%22rType%22%3A%22article%22%2C%22rId%22%3A%22129058392%22%2C%22source%22%3A%22LlanyW%22%7Dhttps://blog.csdn.net/LlanyW/article/details/129058392?csdn_share_tail=%7B%22type%22%3A%22blog%22%2C%22rType%22%3A%22article%22%2C%22rId%22%3A%22129058392%22%2C%22source%22%3A%22LlanyW%22%7D

Lan.W

关注

29
点赞
踩
283

收藏

觉得还不错? 一键收藏
7
评论
转：最详细的JavaScript 教程，入门级都能看懂

介绍JavaScript 是互联网上最流行的脚本语言，这门语言可用于 HTML 和 web，更可广泛用于服务器、PC、笔记本电脑、平板电脑和智能手机等设备。JavaScript特点JavaScript 是一门脚本语言。JavaScript 是一种轻量级的编程语言。JavaScript 是可插入 HTML 页面的编程代码。JavaScript 插入 HTML 页面后，可由所有的现代浏览器执行。JavaScript 很容易学习。JavaScript 已经由 ECMA（欧洲电脑..
复制链接

扫一扫

专栏目录