转:最详细的JavaScript 教程,入门级都能看懂

目录

介绍

JavaScript特点

用法

实例1:head中的script函数

实例2:body中的script函数

实例3:外部调用JavaScript

输出

实例1:aler()弹窗输出

实例2:document.write()输出

实例3:写到HTMl文档

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

语法介绍

字面量

JavaScrip变量

JavaScript函数

JavaScript特点

JavaScript注释(与Java相同)

Java标识符

对象

访问对象属性

对象长度length

in 关键字使用

函数

参数与返回值

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

变量

事件描述

事件作用

字符串

字符串作为对象

==与===区别

运算符

其他补充:

 字符串拼接的几种方式

ES6 与 JavaScript 区别:

w3c离线JS手册


介绍

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

JavaScript特点

JavaScript 是一门脚本语言。

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

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

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

JavaScript 很容易学习。

JavaScript 已经由 ECMA(欧洲电脑制造商协会)通过 ECMAScript 实现语言的标准化。

用法

HTML 中的脚本必须位于 <script> 与 </script> 标签之间。脚本可被放置在 HTML 页面的 <body> 和 <head> 部分中。

通常,我们需要在某个事件发生时执行代码,比如当用户点击按钮时。如果我们把 JavaScript 代码放入函数中,就可以在事件发生时调用该函数。

实例1:head中的script函数

<!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%7Dicon-default.png?t=N7T8https://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

  • 19
    点赞
  • 181
    收藏
    觉得还不错? 一键收藏
  • 7
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 7
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值