@[TOC](JavaScript基础
一、简介
- JavaScript对网页行为进行编程
- JavaScript 能够改变 HTML 内容
getElementById() 是多个 JavaScript HTML 方法之一
JavaScript 同时接受双引号单引号-
- JS能改变HTML 属性
二、使用
- JavaScript代码必须位于
<script>
与</script>
之间
<script>
document.getElementById("demo").innerHTML = "我的第一段 JavaScript";
</script>
- JavaScript 函数是一种 JavaScript 代码块,可以在调用时被执行。
例:当发生事件时调用函数,或当用户点击按钮时。
- 可以被放在
<head>
或<body>
中或兼而有之 - 外部脚本
外部文件:myScript.js
扩展名 .js
如需使用外部脚本,请在 <script>
标签的 src (source) 属性中设置脚本的名称:
添加多个脚本文件 - 请使用多个 script 标签
<script src="myScript.js"></script>
- 外部脚本不能包含
<script>
标签5、外部引用:
通过完整的 URL 或相对于当前网页的路径引用外部脚本
<script src="https://www.w3school.com.cn/js/myScript1.js"></script>
三、输出
1.使用 innerHTML
访问 HTML 元素,JavaScript 可使用 document.getElementById(id)
方法。
id 属性定义 HTML 元素。innerHTML 属性定义 HTML 内容:
2.使用 document.write()
(1)用于测试的话,使用 document.write()
比较方便
例:
<!DOCTYPE html>
<html>
<body>
<h1>我的第一张网页</h1>
<p>我的第一个段落</p>
<script>document.write(5 + 6);</script>
</body>
</html>
(2)在 HTML 文档完全加载后使用 document.write() 将删除所有已有的 HTML :
3.使用 window.alert()
使用警告框来显示数据:
<!DOCTYPE html>
<html>
<body>
<h1>我的第一张网页</h1>
<p>我的第一个段落</p>
<script>window.alert(5 + 6);</script>
</body>
</html>
结果:
4、使用 console.log()
在浏览器中,您可使用 console.log()
方法来显示数据。
可以通过 F12 来激活浏览器控制台,并在菜单中选择“控制台”。
四、JS语句
JavaScript 语句由以下构成:值、运算符、表达式、关键词和注释
。
-
- 在每条可执行的语句之后添加分号
- 如果有分号分隔,允许在同一行写多条语句
2.JavaScript 代码块
JavaScript 语句可以用花括号({...})
组合在代码块中。
代码块的作用是定义一同执行的语句。
3.JavaScript 关键词
JavaScript 语句常常通过某个关键词来标识需要执行的 JavaScript 动作
五、关键词
1.Let
(1)可以使用 let 关键词声明拥有块作用域的变量。
在块 {} 内声明的变量无法从块外访问
(2) 使用 let 关键字在块内重新声明变量不会重新声明块外的变量:
(3) 在循环作用域中使用let并没有重新声明循环外的变量
(4) 在函数内声明变量时,使用var和let相似,都有函数作用域
在块外声明变量时,使用var和let相似,都有全局作用域
( 5)重新声明
- 允许在程序的任何位置使用 var 重新声明 JavaScript 变量
- 在相同的作用域,或在相同的块中,通过 let 重新声明一个 var 变量是不允许
- 在相同的作用域,或在相同的块中,通过 let 重新声明一个 let 变量是不允许
实例
let x = 10; // 允许
let x = 6; // 不允许
{
let x = 10; // 允许
let x = 6; // 不允许
}
- 在相同的作用域,或在相同的块中,通过 var 重新声明一个 let 变量是不允许的
- 在不同的作用域或块中,通过 let 重新声明变量是允许的
2.const
(1)在声明时赋值
JavaScript const 变量必须在声明时赋值:
(2)不是真正的常数
关键字 const 有一定的误导性。它没有定义常量值。它定义了对值的常量引用。
因此,我们不能更改常量原始值,但我们可以更改常量对象的属性。
注:如果我们将一个原始值赋给常量,我们就不能改变原始值:
(3)常量对象可以更改
可以更改常量对象的属性:
(4)常量数组可以更改
(5)重新声明
- 在程序中的任何位置都允许重新声明 JavaScript var 变量:
- 在同一作用域或块中,不允许将已有的 var 或 let 变量重新声明或重新赋值给 const:
- 在同一作用域或块中,为已有的 const 变量重新声明声明或赋值是不允许的:
- 在另外的作用域或块中重新声明 const 是允许的:
例:
const x = 2; // 允许
{
const x = 3; // 允许
}
{
const x = 4; // 允许
}
六、运算符
(1)JavaScript 算数运算符
算数运算符用于对数字执行算数运算:
运算符 | 描述 |
---|---|
+ | 加法 |
- | 减法 |
* | 乘法 |
/ | 除法 |
% | 取模(余数) |
++ | 递加 |
-- | 递减 |
(2)JavaScript 赋值运算符
赋值运算符向 JavaScript 变量赋值。
运算符 | 例子 | 等同于 |
---|---|---|
= | x = y | x = y |
+= | x += y | x = x + y |
-= | x -= y | x = x - y |
*= | x *= y | x = x * y |
/= | x /= y | x = x / y |
%= | x %= y | x = x % y |
加法赋值运算符(+=)向变量添加一个值。
(3)JavaScript 字符串运算符
+ 运算符也可用于对字符串进行相加(concatenate,级联)。
+= 赋值运算符也可用于相加(级联)字符串:
(4)字符串和数字的相加
相加两个数字,将返回和,但对一个数字和一个字符串相加将返回一个字符串
(5)JavaScript 比较运算符
运算符 | 描述 |
---|---|
== | 等于 |
=== | 等值等型 |
!= | 不相等 |
!== | 不等值或不等型 |
> | 大于 |
< | 小于 |
>= | 大于或等于 |
<= | 小于或等于 |
? | 三元运算符 |
(6)JavaScript 逻辑运算符
运算符 | 描述 | ||
---|---|---|---|
&& | 逻辑与 | ||
\ | \ | 逻辑或 | |
! | 逻辑非 |
(7)JavaScript 类型运算符
运算符 | 描述 |
---|---|
typeof | 返回变量的类型。 |
instanceof | 返回 true,如果对象是对象类型的实例。 |