前端开发工程师-前端基础-JavaScript_JavaScript项目实战案例.docx

PAGE1

PAGE1

JavaScript基础

1变量与数据类型

1.1原理与内容

在JavaScript中，变量用于存储数据值。JavaScript有七种基本数据类型：undefined、null、boolean、number、bigint、string和symbol。此外，还有object类型，包括数组和函数。理解这些数据类型是编写JavaScript代码的基础。

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

//声明变量并赋值

letname=John;//string类型

letage=30;//number类型

letisStudent=false;//boolean类型

lethobbies=[reading,coding,traveling];//array类型

letperson={name:John,age:30};//object类型

//使用typeof操作符检查数据类型

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

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

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

console.log(typeofhobbies);//输出:object(数组在JavaScript中被视为对象)

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

1.2控制结构与循环

1.2.1原理与内容

控制结构用于控制程序的流程，包括条件语句（如if、else、switch）和循环语句（如for、while）。循环语句用于重复执行一段代码，直到满足特定条件。

1.2.2示例：条件语句与循环

//条件语句示例

lettemperature=25;

if(temperature30){

console.log(Itshotoutside.);

}elseif(temperature10){

console.log(Itscoldoutside.);

}else{

console.log(Theweatherisnice.);

}

//循环语句示例

letnumbers=[1,2,3,4,5];

for(leti=0;inumbers.length;i++){

console.log(numbers[i]);

}

//使用while循环

leti=0;

while(inumbers.length){

console.log(numbers[i]);

i++;

}

1.3函数与作用域

1.3.1原理与内容

函数是可重用的代码块，用于执行特定任务。作用域定义了变量的可访问性，JavaScript有全局作用域和局部作用域。局部作用域通常在函数内部创建，函数外部无法访问函数内部的变量。

1.3.2示例：函数声明与作用域

//函数声明

functiongreet(name){

letgreeting=Hello,+name;

console.log(greeting);

}

//调用函数

greet(John);//输出:Hello,John

//作用域示例

functioncheckScope(){

letlocalVariable=Iamlocal;

if(true){

letblockVariable=Iamblockscoped;

console.log(localVariable);//输出:Iamlocal

console.log(blockVariable);//输出:Iamblockscoped

}

console.log(localVariable);//输出:Iamlocal

//console.log(blockVariable);//报错:ReferenceError:blockVariableisnotdefined

}

checkScope();

以上示例展示了如何在JavaScript中声明和使用变量，如何使用控制结构和循环来控制程序流程，以及如何声明函数和理解作用域。这些是JavaScript编程的基础，掌握它们对于进一步学习和开发项目至关重要。#DOM操作实战案例

2选择与修改元素

在JavaScript中，DOM（Doc