全栈工程师-前端开发-JavaScript_Ajax基础.docxVIP

PAGE1

PAGE1

JavaScript基础

1变量与数据类型

1.1原理与内容

在JavaScript中，变量用于存储数据值。JavaScript有七种基本数据类型：undefined、null、boolean、number、bigint、string和symbol。此外，还有object类型，包括数组和函数。变量声明使用var、let或const关键字。

1.1.1示例：变量声明与数据类型

//声明变量并赋值

letname=张三;//string类型

letage=25;//number类型

letisStudent=true;//boolean类型

lethobbies=[阅读,编程,旅行];//array类型

letperson={name:张三,age:25};//object类型

//输出变量类型

console.log(typeofname);//输出：string

console.log(typeofage);//输出：number

console.log(typeofisStudent);//输出：boolean

console.log(Array.isArray(hobbies));//输出：true

console.log(typeofperson);//输出：object

1.2控制结构与函数

1.2.1原理与内容

控制结构用于控制程序的执行流程，包括条件语句（如if、else、switch）和循环语句（如for、while）。函数用于封装可重复使用的代码块，可以接受参数并返回值。

1.2.2示例：控制结构与函数

//条件语句示例

functioncheckAge(age){

if(age=18){

console.log(您已成年！);

}else{

console.log(您未成年！);

}

}

//循环语句示例

functionprintNumbers(max){

for(leti=1;i=max;i++){

console.log(i);

}

}

//函数调用

checkAge(20);//输出：您已成年！

printNumbers(5);//输出：12345

2DOM操作与事件处理

2.1原理与内容

DOM（DocumentObjectModel）是文档对象模型，用于表示和操作HTML文档。JavaScript可以通过DOM访问和修改页面元素。事件处理用于响应用户操作，如点击、输入等。

2.1.1示例：DOM操作与事件处理

!DOCTYPEhtml

htmllang=zh

head

metacharset=UTF-8

titleDOM操作与事件处理示例/title

/head

body

h1id=title欢迎来到DOM操作与事件处理示例/h1

buttonid=changeTitle点击改变标题/button

script

//获取DOM元素

lettitle=document.getElementById(title);

letbutton=document.getElementById(changeTitle);

//修改DOM元素

functionchangeTitle(){

title.innerHTML=DOM操作与事件处理已更新！;

}

//事件处理

button.addEventListener(click,changeTitle);

//输出原始标题

console.log(title.innerHTML);//输出：欢迎来到DOM操作与事件处理示例

/script

/body

/html

在上述示例中，我们首先通过document.getElementById获取了标题和按钮元素。然后，我们定义了一个changeTitle函数，用于修改标题元素的innerHTML属性。最后，我们使用addEventListener为按钮添加了一个点击事件，当用户点击按钮时，会调用changeTitle函数，从而改变标题。#Ajax基础

3Ajax概述与原理

Ajax（AsynchronousJavaScriptandX