前端基础3——JavaScript基础用法

一、基本使用

• JavaScript（简称JS）：是一种轻量级客户端脚本语言，通常被直接嵌入HTML 页面，在浏览器上执行。
• JavaScript作用：改变页面中的HTML元素、属性、样式、事件。

1.1 内部方式

• 内嵌样式，在body标签中使用。

1.在body标签中写js脚本。

2.查看效果。

1.2 外部导入方式

• 在head标签中使用。

1.编写js脚本main.js，统一存放在js目录下。

alert("你好，卿君");

2.html模板引用js文件。

    
    
       ##引用js文件。

3.查看效果。

1.3 css标签调用js脚本（触发事件）

• 事件：指的是当HTML中发生某些事件时所调用的方法（处理程序）。
• 例如点击按钮，点击后做相应操作，例如弹出一句话。

1.可以使用css中的一个标签直接调用js脚本。

    
    



提交   ## onclick标签直接调用js脚本。

2.查看效果。

二、Windows对象

• Window 对象表示浏览器中打开的窗口。

2.1 对象属性

window对象属性	描述
document	每个载入浏览器的 HTML 文档都会成为 Document 对象
innerheight	返回窗口的文档显示区的高度
innerwidth	返回窗口的文档显示区的宽度
location Location	对象包含有关当前 URL 的信息
Navigator Navigator	对象包含有关浏览器的信息
Screen Screen	对象包含有关客户端显示屏幕的信息
history History	对象包含用户（在浏览器窗口中）访问过的 URL
window window	包含对窗口自身的引用

1.基本使用。

2.刷新按钮。

    
    


刷新当前页面
重新请求当前页面
请求别的页面

2.2 对象方法

window对象方法	描述
alert()	显示带有一段消息和一个确认按钮的警告框
confirm()	显示带有一段消息以及确认按钮和取消按钮的对话框
setInterval()	按照指定的周期（以毫秒计）来调用函数或计算表达式
clearInterval()	取消由 setInterval() 设置的 timeout
setTimeout()	在指定的毫秒数后调用函数或计算表达式。（类似于休眠）
clearTimeout()	取消由 setTimeout() 方法设置的 timeout
typeof()	查看数据类型

1.点击一次，刷新一次当前系统时间。

    
    


点击查看当前时间
    

    

2.点击开始，时间自动走。

    
    




    
当前时间

开始
停止

三、数据类型

• 在JS中，数据类型有：字符串、数组、布尔、数组、对象、Null、Undefined。

3.1 字符串处理

1.字符串处理方法。

2.字符拼接+。

3.2 数组处理

1.数组处理，相当于python中的列表，是一个序列的数据结构。

###############################################################
//定义数组。
var computer = new Array();     //定义空数组。
var computer = ["主机","显示器","键盘","鼠标"]    //定义有值的数组。
###############################################################
//向数组添加元素。
computer[0]="主机";     //通过索引下标获取数组中的有序元素。
computer[1]="显示器";
computer[2]="键盘";
computer.push("网线");   //追加元素。
###############################################################
console.log(computer[3]);   //根据下标获取元素并打印到控制台。

2.查看效果。

3.3 对象处理

1.对象处理，相当于python中的字典，是一个具有映射关系的数据结构，用于存储有一定关系的元素。字典中的key不允许重复。

格式：d = {'key1':value1, 'key2':value2, 'key3':value3}
###############################################################
var user = {
	name:"卿君",
	sex: "男",
	age:"26"
};
console.log(user.name);   //根据key查看value值，方式一。
console.log(user['age']);   //根据key查看value值，方式二。
user.height = "180cm"      //增加一对key-value。
user['height'] = "182cm";    //根据key修改value值。
console.log(user.height);

2.查看效果。

四、流程控制

4.1 操作符

• 操作符：一个特定的符号，用它与其他数据类型连接起来组成一个表达式。常用于条件判断，根据表达式返回True/False采取动作。

类型	操作符
比较操作符	== 等于 != 不等于 > 大于 < 小于 >= 大于等于 <= 小于等于
算术操作符	+ 加法 - 减法 * 乘法 / 除法 % 取余 ++ 自增，自动+1 – 自减，自动-1
逻辑操作符	&& 与 || 或 !() 结果取反
赋值运算符	= 赋值 += 加法赋值 -= 减法赋值 *= 乘法赋值 /= 除法赋值 %= 取余赋值

4.2 if判断语句

• if条件判断：判定给定的条件是否满足（True或False），根据判断的结果决定执行的语句。

//语法。
if (表达式) {
	<代码块>
} else if (表达式) {
	<代码块>
} else {
	<代码块>
}

1.控制开关。

    
    




开灯
关灯

2.查看效果。

4.3 for循环语句

• for循环：一般用于遍历数据类型的元素进行处理，例如字符串、数组、对象。

//语法。
for (<变量> in <序列>) {
	<代码块>
}

1.遍历数组，通过索引获取元素。

2.遍历数组，通过匿名函数返回元素。

3.遍历对象。

4.4 continue与break语句

• continue 当满足条件时，跳出本次循环。
• break 当满足条件时，跳出所有循环。
• 注意：只有在循环语句中才有效。

1.示例代码。

2.查看效果。

4.5 函数定义与调用

• 函数：是指一段可以直接被另一段程序或代码引用的程序或代码。
• 在编写代码时，常将一些常用的功能模块编写成函数，放在函数库中供公共使用，可减少重复编写程序段和简化代码结构。

//语法：
function 函数名称(参数1, 参数2, ...) {
	<代码块>
return <表达式>
}

1.定义函数hello，在按钮中引用函数，点击按钮执行hello函数。

    
    


按钮

2.传参用法。

    
    


按钮

五、选择器

查找元素方法：

• 通过id（常用）
• 通过类名
• 通过标签名

5.1 通过id获取元素

1.示例代码。

    
    


查看内容

2.查看效果。

5.2 通过标签名获取元素

1.示例代码。

    
    



    
Hello world！1
    
Hello world！2
    
Hello world！3

2.查看效果。

六、JS操作HTML

6.1 插入内容

1.向id=bb的标签写入内容。

2.查看结果。

6.2 修改标签属性

1.修改显示图片，修改之前。

2.修改之后。

6.3 改变标签样式

1.修改id=bb标签的颜色。

2.查看结果。

6.4 获取输入的值

• 比如提交一个数据框里的内容，点击提交按钮，可以获取到刚刚输入的值供其他功能使用。

1.获取输入框里的内容。

请输入您的姓名: 

提交  //店家提交按钮执行main1函数。

2.修改其他标签的内容。

#############################################################

请输入您的姓名: 

提交
#############################################################

2.查看效果。

6.6 删除元素

1.删除id=main标签的元素。

    
张三，Java开发
    
李四，大数据工程师
    
王五，k8s运维

2.查看效果。