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