将内容写到 HTML 文档中 - - - document.write()

    <script>// 括号里的内容要有引号document.write("<h1>这是一个标题</h1>");document.write('<div class="box">hello world</div>');</script><style>.box{width: 100px;height: 100px;background: red;}</style>

如果在文档已完成加载后执行 document.write，整个 HTML 页面将被覆盖

在文本字符串中使用反斜杠\对代码行进行换行

<script>
document.write("你好 \
世界!");
</script>

弹出警告框 window.alert() - - - 测试常用

<button type="button" onclick="alert('欢迎!')">点我!</button>

    <script>window.alert(5 + 6);</script>

改变HTML内容 - - - innerHTML

    <p id="demo">JavaScript 能改变 HTML 元素的内容。</p><script>function myFunction() {// x = document.getElementById("demo");  // 找到元素// x.innerHTML = "Hello JavaScript!";    // 改变内容document.getElementById('demo').innerHTML = 'Hello JavaScript!'}</script><button type="button" onclick="myFunction()">点击这里</button>

console.log 写到控制台

---

---

JavaScript 语句标识符 (关键字)

语句	描述
break	用于跳出循环
catch	语句块，在 try 语句块执行出错时执行 catch 语句块
continue	跳过循环中的一个迭代
do … while	执行一个语句块，在条件语句为 true 时继续执行该语句块
for	在条件语句为 true 时，可以将代码块执行指定的次数
for … in	用于遍历数组或者对象的属性（对数组或者对象的属性进行循环操作）
function	定义一个函数
if … else	用于基于不同的条件来执行不同的动作
return	退出函数
switch	用于基于不同的条件来执行不同的动作
throw	抛出（生成）错误
try	实现错误处理，与 catch 一同使用
var	声明一个变量
while	当条件语句为 true 时，执行语句块

var 声明变量

    <script>// 一行声明多个变量var name = 'tom',age = 12,gender = '';// 可横跨多行var name,age,gender;// x,y 为 undefined(未使用值来声明的变量)， z 为 1var x,y,z=1;</script>

JavaScript 数据类型

值类型(基本类型)：字符串（String）、数字(Number)、布尔(Boolean)、空（Null）、未定义（Undefined）、Symbol。

引用数据类型（对象类型）：对象(Object)、数组(Array)、函数(Function)，还有两个特殊的对象：正则（RegExp）和日期（Date）。

typeof 查看变量的数据类型

<script>
document.getElementById("demo").innerHTML = typeof false + "<br>" +typeof {name:'john', age:34};
</script>

创建数组

    <script>var cars=new Array();cars[0]="Saab";cars[1]="Volvo";cars[2]="BMW";// var cars=new Array("Saab","Volvo","BMW");document.write(cars)document.write('<br><br>')// 注意使用分号隔开，不是逗号for(i=0;i<cars.length;i++){document.write(cars[i] + '<br>')}</script>

创建对象

    <script>var person ={firstname: "John",lastname: "Doe",id: 5566};// 得到值的两种方法  访问对象属性document.write(person.lastname + "<br>");		// Doedocument.write(person["lastname"] + "<br>");	// Doe</script>

对象方法

    <p id="demo"></p><script>var person = {firstName: "John",lastName: "Doe",id: 5566,fullName: function () {return this.firstName + " " + this.lastName;}};// 访问 person 对象的 fullName() 方法document.getElementById("demo").innerHTML = person.fullName();	// John Doe// 访问 person 对象的 fullName 属性，它将作为一个定义函数的字符串返回document.getElementById("demo").innerHTML = person.fullName;	// function () { return this.firstName + " " + this.lastName; }</script>

Undefined 和 Null

Undefined 这个值表示变量不含有值。

可以通过将变量的值设置为 null 来清空变量。

函数

    <script>function myFun(){alert('Hello World!')}</script><button onclick="myFun">点我</button>

传参

    <button onclick="myFunction('Harry Potter','Wizard')">点击这里</button>	<button onclick="myFunction('Bob','Builder')">点击这里</button><script>function myFunction(name, job) {alert("Welcome " + name + ", the " + job);}</script>

返回值

    <p id="demo"></p><script>function myFunction(a, b) {return a * b;}document.getElementById("demo").innerHTML = myFunction(4, 3);</script>

12

JavaScript 变量

    <script>var var1 = 1; // 不可配置全局属性var2 = 2; // 没有使用 var 声明，可配置全局属性console.log(this.var1); // 1console.log(window.var1); // 1console.log(window.var2); // 2delete var1; // false 无法删除console.log(var1); //1delete var2;console.log(delete var2); // trueconsole.log(var2); // 已经删除 报错变量未定义    </script>

作用域

作用域为可访问变量，对象，函数的集合

局部作用域

    <p id="demo"></p><script>myFunction();document.getElementById("demo").innerHTML = "carName 的类型是：" + typeof carName;function myFunction() {// 局部变量在声明的函数外不可以访问var carName = "Volvo";}</script>

carName 的类型是：undefined

全局作用域

    <p id="demo"></p><script>var carName = "Volvo";myFunction();function myFunction() {document.getElementById("demo").innerHTML ="我可以显示 " + carName;}</script>

我可以显示 Volvo

    <p id="demo"></p><script>myFunction();document.getElementById("demo").innerHTML ="我可以显示 " + carName;function myFunction() {// 如果你的变量没有声明，它将自动成为全局变量carName = "Volvo";}</script>

我可以显示 Volvo

HTML 中的全局变量

在 HTML 中, 全局变量是 window 对象，所以window 对象可以调用函数内的局部变量。
注意：所有数据变量都属于 window 对象。

    <p id="demo"></p><script>myFunction();document.getElementById("demo").innerHTML ="我可以显示 " + window.carName;function myFunction() {carName = "Volvo";}</script>

我可以显示 Volvo

事件

按钮

onclick 点击 属性

<button onclick="getElementById('demo').innerHTML=Date()">现在的时间是?</button>
<p id="demo"></p>

Tue Oct 24 2023 09:37:54 GMT+0800 (中国标准时间)

改变自身元素的内容 this.innerHTML

<button onclick="this.innerHTML=Date()">现在的时间是?</button>

点击 调用函数

    <button onclick="displayDate()">点这里</button><script>function displayDate() {document.getElementById("demo").innerHTML = Date();}</script><p id="demo"></p>

常见的HTML事件

事件	描述
onchange	HTML 元素改变
onclick	用户点击 HTML 元素
onmouseover	鼠标指针移动到指定的元素上时发生
onmouseout	用户从一个 HTML 元素上移开鼠标时发生
onkeydown	用户按下键盘按键
onload	浏览器已完成页面的加载