JavaScript的介绍

JavaScript是运行在浏览器端的脚本语言, 是由浏览器解释执行的, 简称js

它能够让网页和用户有交互功能, 增加良好的用户体验效果

前端开发三大块:

1. HTML：负责网页结构
2. CSS：负责网页样式
3. JavaScript：负责网页行为

JavaScript的使用方式

行内式（主要用于事件)

<input type="button" value="你点我一下试试" onclick="alert('ok!')">

内嵌式

<script>

// js

alert("你等着！")

</script>

外链式

<script src="./JS/main.js"></script>

变量和数据类型

JavaScript 是一种弱类型语言，也就是说不需要指定变量的类型

JavaScript的变量类型由它的值来决定， 定义变量需要用关键字 'var', 一条JavaScript语句应该以“;”结尾

弱类型语言:

data = 10 整型

data = “itcast” 字符串类型

强类型语言:

int data = 10 整形

str data =“itcast” 字符串类型

JavaScript的注释分为单行注释(//注释内容)和多行注释(/*多行注释*/)

js中有六种数据类型，包括五种基本数据类型和一种复杂数据类型(object)

5种基本数据类型：

1. number 数字类型
2. string 字符串类型
3. boolean 布尔类型 true 或 false
4. undefined undefined类型，变量声明未初始化，它的值就是undefined
5. null null类型，表示空对象，在页面上获取不到对象，返回的值就是null

1种复合类型：

1. object 后面学习的JavaScript对象属于复合类型

变量命名规范:

1. 区分大小写
2. 第一个字符必须是字母、下划线（_）或者美元符号（$）
3. 其他字符可以是字母、下划线、美元符或数字

匈牙利命名风格:

• 对象o Object 比如：oDiv
• 字符串s String 比如：sUserName
• 整数i Integer 比如：iItemCount
• 布尔值b Boolean 比如：bIsComplete
• 浮点数f Float 比如：fPrice
• 函数fn Function 比如：fnHandler

函数定义和调用

函数就是可以重复使用的代码块, 使用关键字 function 定义函数

函数调用就是函数名加小括号，比如:函数名(参数[参数可选])

定义函数时，函数如果有参数，参数放到小括号里面，函数如果有返回值，返回值通过 return 关键字来返回

变量作用域

变量作用域就是变量的使用范围

局部变量就是在函数内使用的变量，只能在函数内部使用

全局变量就是在函数外定义的变量，可以在不同函数内使用

条件语句

条件语句就是通过条件来控制程序的走向

条件语句语法:

1. if 语句 - 只有当指定条件为 true 时，使用该语句来执行代码
2. if...else 语句 - 当条件为 true 时执行代码，当条件为 false 时执行其他代码
3. if...else if....else 语句 - 使用该语句来判断多条件，执行条件成立的语句

获取标签元素

js能够让网页和用户有交互功能

步骤:

1.获取标签元素

获取标签元素需要等待页面加载完成，使用document.getElementById('标签id');

获取到的是一个html对象，然后将它赋值给一个变量

2.改变标签元素属性

操作标签元素属性

属性名在js中的写法

①html的属性和js里面属性大多数写法一样，但是“class” 属性写成 “className”

②“style” 属性里面的属性，有横杠的改成驼峰式，比如：“font-size”，改成”style.fontSize”

innerHTML可以读取或者设置标签包裹的内容

标签属性的获取和设置:

①var 标签对象 = document.getElementById('id名称'); -> 获取标签对象

②var 变量名 = 标签对象.属性名 -> 读取属性

③标签对象.属性名 = 新属性值 -> 设置属性

数组及操作方法

数组就是一组数据的集合

javascript 中 , 数组里面的数据可以是不同类型的数据，好比 python 里面的列表

多维数组指的是数组的成员也是数组，把这样的数组叫做多维数组

根据下标添加和删除元素

数组.splice(start, num, element1,.....,elementN)

参数解析：

①start：必需，开始删除的索引

②num：可选，删除数组元素的个数

③elementN：可选，在start索引位置要插入的新元素

此方法会删除从start索引开始的num个元素，并将elementN参数插入到start索引位置

数组常用操作:

①数组的定义使用一对中括号

②获取数组的长度使用length属性

③从数组最后添加元素使用push方法

④从数组最后删除元素使用pop方法

⑤根据下标添加和删除元素使用splice方法

循环语句

循环语句就是让一部分代码重复执行

javascript中常用的循环语句有: for while do-while

字符串拼接 “+”

数字和字符串拼接会自动进行类型转换，把数字类型转成字符串类型进行拼接

定时器

定时器就是在一段特定的时间后执行某段程序代码

setTimeout(func[, delay, param1, param2, ...])

（以毫秒计）调用一次函数的定时器

setTimeout函数的参数说明:

setTimeout(func[, delay, param1, param2, ...])

第一个参数 func , 表示定时器要执行的函数名

第二个参数 delay, 表示时间间隔，默认是0，单位是毫秒

第三个参数 param1, 表示定时器执行函数的第一个参数，依次类推传入多个执行函数对应的参数

setInterval(func[, delay, param1, param2, ...])

以指定的时间间隔（以毫秒计）重复调用一个函数的定时器

setInterval函数的参数说明:

setInterval(func[, delay, param1, param2, ...])

第一个参数 func , 表示定时器要执行的函数名

第二个参数 delay, 表示时间间隔，默认是0，单位是毫秒

第三个参数 param1, 表示定时器执行函数的第一个参数，依次类推传入多个执行函数对应的参数

js 清除定时器分别是:

clearTimeout(timeoutID) 清除只执行一次的定时器(setTimeout函数)

clearInterval(timeoutID) 清除反复执行的定时器(setInterval函数)

clearTimeout函数的参数说明:

timeoutID 为调用 setTimeout 函数时所获得的返回值，使用该返回标识符作为参数，可以取消该 setTimeout 所设定的定时执行操作

clearInterval函数的参数说明:

timeoutID 为调用 setInterval 函数时所获得的返回值，使用该返回标识符作为参数，可以取消该 setInterval 所设定的定时执行操作