JavaScript学习笔记（1）
html
完成了架子，
css
做了美化，但是网页是死的，我们需要给他注入灵魂，所以接下来我们需要学习 JavaScript，这门语言会让我们的页面能够和用户进行交互。
一、引入方式
1.内部脚本
将
JS
代码定义在
HTML
页面中
JavaScript
代码必须位于
<script></script>
标签之间
在
HTML
文档中，可以在任意地方，放置任意数量的
<script>
一般会把脚本置于
<body>
元素的底部，可改善显示速度
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
alert("hello world");
</script>
</body>
</html>2.外部脚本
JS
代码定义在外部
JS
文件中，然后引入到
HTML
页面中
外部
JS
文件中，只包含
JS
代码，不包含
<script>
标签
引入外部
js
的
<script>
标签，必须是双标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- <script>
alert("hello world");
</script> -->
<script src="js/demo.js"></script>
</body>
</html>二、输出语句
1.警告框
alert('This is an alert message.');2.在HTML 输出内容
document.write('This is some text written to the document.');3.写入浏览器控制台
console.log('Hello, World!');| API | 功能描述 |
|---|---|
| window.alert() | 弹出一个带有指定消息的警告框，用户需点击“确定”关闭，用于向用户显示简单提示信息 |
| document.write() | 在HTML文档中输出内容，注意在文档加载后使用可能会覆盖整个页面内容 |
| console.log() | 将内容写入浏览器控制台，可输出多种数据类型，如字符串、数字、对象、数组等 |
注意：在 HTML 文档完全加载后使用 document.write() 将删除所有已有的 HTML ：
三、变量
在JavaScript中，可以使用var、let或const关键字来声明变量。
| 特性 | var | let | const |
|---|---|---|---|
| 作用域 | 函数级或全局级 | 块级 | 块级 |
| 变量提升 | 有，可在声明前使用（值为undefined） | 无，在声明前使用报错 | 无，在声明前使用报错 |
| 重复声明 | 允许 | 不允许，同一作用域内重复声明报错 | 不允许，同一作用域内重复声明报错 |
| 重新赋值 | 可以 | 可以 | 不可以（对于基本数据类型），复杂数据类型（如对象、数组）可修改内部属性或元素 |
四、数据类型
| 数据类型 | 描述 |
|---|---|
| number | 包含整数、小数以及特殊值NaN（Not a Number） |
| string | 字符串，可以使用单引号或双引号括起来 |
| boolean | 仅有两个值，true或者false |
| null | 表示对象为空 |
| undefined | 当变量声明但未初始化时的默认值 |
<script>
document.write(typeof 10+"<br>");
document.write(typeof "10"+ "<br>");
document.write(typeof true+ "<br>");
document.write(typeof null+ "<br>");
document.write(typeof a+ "<br>");
</script>
五、运算符
| 运算规则 | 运算符 | 描述 |
|---|---|---|
| 算术运算符 | +, -, *, /, %, ++, -- | +：加法运算；-：减法运算；*：乘法运算；/：除法运算；%：取模（余数）运算；++：自增1；--：自减1 |
| 赋值运算符 | =, +=, -=, *=, /=, %= | =：简单赋值；+=：加后赋值；-=：减后赋值；*=：乘后赋值；/=：除后赋值；%=：取模后赋值 |
| 比较运算符 | >, <, >=, <=,!=, ==, === | >：大于；<：小于；>=：大于等于；<=：小于等于；!=：不等于（不严格比较，会进行类型转换）；==：等于（不严格比较，会进行类型转换）；===：全等（严格比较，不会进行类型转换） |
| 逻辑运算符 | &&,|| , ! | |
| 三元运算符 | 条件表达式? true_value : false_value | 根据条件表达式的结果返回true_value或者false_value |
在
js
中，绝大多数的运算规则和
java
中是保持一致的，但是
js
中的
==
和
===
是有区别的。
==
：只比较值是否相等，不区分数据类型，哪怕类型不一致，
==
也会自动转换类型进行值得比较
===
：不光比较值，还要比较类型，如果类型不一致，直接返回
false
原文地址：https://blog.csdn.net/m0_74370400/article/details/145270429
免责声明：本站文章内容转载自网络资源，如侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！