JavaScript(二)

最新推荐文章于 2024-10-02 05:39:15 发布

码雲.py

最新推荐文章于 2024-10-02 05:39:15 发布

阅读量84

点赞数

分类专栏： web前端文章标签： javascript

本文链接：https://blog.csdn.net/weixin_43814474/article/details/103949632

版权

web前端专栏收录该内容

9 篇文章 0 订阅

订阅专栏

文章目录

流程控制
函数

流程控制

1. 作用

控制代码的执行顺序。

2. 分类

1. 顺序结构

从上到下依次执行代码语句。

css不会影响页面加载，当css样式未找到时，浏览器也会继续向下执行
js中的内容会直接在当前页面执行，如果没有执行完毕会阻塞当前页面加载。

<head>
    <title>顺序结构</title>
    <!-- 引入外部css -->
    <!-- herf属性会去对应文件的位置获取数据 -->
    <link rel="stylesheet" href="index.css">
    <!-- 引入外部js -->
    <!-- src属性会将对应的文件下载到当前页面运行 -->
    <script src="index.js"></script>
    <!-- 写在head中script会作为body的第一个子元素运行 -->
    <!-- 多个script按顺序执行 -->
    <script>console.log('hello world')</script>
</head>

<script>
	// 当页面元素加载完毕后执行
    window.onload=function(){};
</script>

2. 分支/选择结构

1. if语句

简单if结构
```
if(条件表达式){
	表达式成立时执行的代码段
}
```
注意 : 除零值以外，其他值都为真，以下条件为假值false
```
if(0){}
if(0.0){}
if(""){} //空字符串
if(undefined){}
if(NaN){}
if(null){}
```
特殊写法 :
{ }可以省略，一旦省略，if语句只控制其后的第一行代码。

if - else结构

if(条件表达式){
	//条件成立时执行
}else{
	//条件不成立时选择执行
}

多重分支结构

if(条件1){
	//条件1成立时执行
}else if(条件2){
	//条件2成立时执行
}else if(条件3){
	//条件3成立时执行
}...else{
	//条件不成立时执行
}

2. switch语句

语法 :

switch(value){
	case 值1 :
		//value与值1匹配全等时,执行的代码段
		break; //跳出流程，不再执行后面的case语句
	case 值2 :
		//value与值2匹配全等时,执行的代码段
		break;
	case 值3 :
		//value与值3匹配全等时,执行的代码段
		break;
	default:
		//所有case匹配失败后默认执行的语句
		break;
}

使用 :

switch语句用于值的匹配，case用于列出所有可能的值；只有switch()表达式的值与case的值匹配全等时，才会执行case对应的代码段；
break用于结束匹配，不再向后执行；可以省略，break一旦省略，会从当前匹配到的case开始，向后执行所有的代码语句，直至结束或碰到break跳出；
default用来表示所有case都匹配失败的情况，一般写在末尾，做默认操作；

多个case共用代码段。

case 值1:
case 值2:
case 值3:
	//以上任意一个值匹配全等都会执行的代码段
	break;

3. 循环结构

作用
根据条件，重复执行某段代码。
分类

while循环

//定义循环变量
while(循环条件){
	//条件满足时执行的代码段
	//更新循环变量;
}

do-while循环
```
do{
	循环体;
	更新循环变量
}while(循环条件);
```
循环的区别 :
- while 循环先判断循环条件，条件成立才执行循环体。
- do-while 循环不管条件是否成立，先执行一次循环体。

for 循环

for(定义循环变量;循环条件;更新循环变量){
	循环体;
}

<script>
// 循环打印1-10之间的数字
// 1. 初始化 var=1
// 2. 判断i<=10是否成立 如果成立执行循环体的代码 不成立退出循环
// 3. i++
// 重复2,3步骤
for(var i=0;i<=10;i++){
	console.log(i);
}
// 源自while
var i=1;
while(i<=10){
	console.log(i);
	i++;
}
var i=1;
for(;i<=10;){
	console.log(i);
	i++;
}
</script>

循环控制 :

break 强制结束循环
continue 结束当次循环，开始下一次循环

循环嵌套：在循环中嵌套添加其他循环。

函数

1. 作用

封装一段待执行的代码(复用)。

2. 语法

//函数声明
function 函数名(参数列表){
	函数体
	return 返回值;
}
//函数调用
函数名(参数列表);

3. 使用

函数名自定义，见名知意，命名规范参照变量的命名规范。
普通函数以小写字母开头，用于区分构造函数(构造函数使用大写字母开头，定义类)。
在函数内执行完return语句后直接退出，而不会执行下面的语句。

4. 匿名函数

匿名函数：省略函数名的函数。
语法为：

匿名函数自执行
```
(function (形参){})(实参);
```
定义变量接收匿名函数
将匿名函数赋值给一个变量相当于定义了一个带有函数名的函数。
```
var fun = function (){};
fun(); //函数调用
```

5. 作用域

作用域：变量或函数的作用范围。
JavaScript 中作用域分为全局作用域和函数作用域，以函数的{ }作为划分作用域的依据。

1. 全局变量和全局函数

只要在函数外部使用 var 关键字定义的变量或函数都是全局变量和全局函数，在任何地方都可以访问。
所有省略 var 关键字定义的变量，一律是全局变量。

2. 局部变量/局部函数
在函数内部使用 var 关键字定义的变量为局部变量，函数内部定义的函数也为局部函数，只能在当前作用域中使用，外界无法访问。
不加var为全局变量/函数，加var以函数{}作为划分。

3. 作用域链
局部作用域中访问变量或函数，首先从当前作用域中查找，当前作用域中没有的话，向上级作用域中查找，直至全局作用域。

4. 特殊情况
声明提前：当js加载时会将所有的全局的变量名和函数名都提前到最上方。

如果是函数名提前，会携带函数体。
如果是变量名提前，那么变量的名字提前，值留在原地。

5. script执行顺序

// 当页面元素加载完毕后执行
window.onload=function(){}

6. 获取多个DOM元素和控制属性

1. 根据id获取元素节点列表

var elems = document.getElementsById("");
//参数:id
//返回值:节点列表,需要从节点列表中获取具体的元素节点对象,添加相应下标。

2. 根据标签名获取元素节点列表

var elems = document.getElementsByTagName("");
//参数:标签名
//返回值:节点列表,需要从节点列表中获取具体的元素节点对象,添加相应下标。

3. 根据 class 属性值获取元素节点列表

var elems = document.getElementsByClassName("");
//参数 : 类名(class属性值)
//返回值 : 节点列表

4. 元素节点对象提供了以下属性来操作元素内容

onclick: 单击事件
onblur : 失去焦点事件，当用户的光标离开文本框（点击别的页面）时触发失去焦点事件
innerHTML : 读取或设置元素文本内容,可识别标签语法
innerText : 设置元素文本内容,不能识别标签语法
value : 读取或设置表单控件的值

5. DOM 中的属性值

elem.getAttribute("attrname");//根据指定的属性名返回对应属性值
elem.setAttribute("attrname","value");//为元素添加属性,参数为属性名和属性值
elem.removeAttribute("attrname");//移除指定属性单控件的值