- javaScript 是一门跨平台、面向对象的脚本语言（不需要编译）来控制网页行为，它可以使网页可以交互
- W3C标准：网页由三部分组成
1、结构html
2、表现css
3、行为JavaScript - javaScript和java是完全不相同的语言、无论是概念还是设计、但是基础语法类似
- JavaScript（简称js）在1995年由Brendan Eich发明，并于1997年成为一部ECMA标准
- ECMAScript 6 （ES6）是最新的JavaScript版本（发布于2015年）
javascript 能做什么？
1、改变图像的src属性
2、进行表单属性
JavaScript引入方式
1、内部脚本：将JS 代码定义在HTML页面中
在HTML中JavaScript代码必须在< script>与< / script>标签之间
提示：
- 在HTML文档中可以在任意地方，放置任意数量的< script>
- 一般把脚本置于< body>元素的底部，可改善显示速度，因为脚本执行会拖慢显示
<body>
<script>
alert("hello js~")
</script>
</body>
2、外部脚本：将JS代码定义在外部JS文件中然后引入到HTML页面中
- 外部文件：demo.js alter（“hello js~”）
- 引入外部js文件
alert("hello js");
<body>
<script src="../JS/demo.js"></script>
</body>
注意：
- 外部脚本不能包含< script>标签
- < script>标签不能自闭合
JavaScript基础语法
书写语法
1、区分大小写：与Java一样，变量名、函数名以及其他东西都是区分大小写的
2、每行结尾的分号可有可无
3、注释：
- 单行注释：//注释内容
- 多行注释：/* 注释内容*/
4、大括号表示代码块
if（count ==3）{
alert（count）；
}
<body>
<script>
window.alert("hello JS1")
document.write("hello js2")
console.log("hello js3")
</script>
</body>
输出语句
-
使用window.alert()写入警告框（window.可以省略）
-
使用document.write（）写入HTML输出
-
使用console.log()写入浏览器控制台
变量
- JavaScript中用var关键字来声明变量
- JavaScript是一种弱类型语言，变量可以存放不同类型的值
- 变量名需要遵循如下规则：
1、组成字符可以是任何字母、数字、下划线或美元符
2、数字不能开头
3、建议使用驼峰命名 - ECMAJavaScript 6 新增了let关键字来定义变量。他的用法类似于var但是所声明的变量，只在let关键字所在的代码块内有效，且不允许重复声明
- ECMAJavaScript 6 新增了const关键字，用来声明一个只读常量。一旦声明，常量的值不允许改变
var：
作用域：全局变量
可重复定义
数据类型
JavaScript 中分为：原始类型 和引用类型
5中原始类型： - number：数字
- String：字符、字符串。单双引号皆可
- boolean：布尔
- null:对象为空
- undefined：当声明对象未初始化时，该变量的默认值是undefined
使用alert（typeof age）可获取数据类型
运算符
- 一元运算符：++ –
- 算数运算符：+ - * / %
- 赋值运算符：= += -= …
- 关系运算符：> ,<, >= ,<= ,!=, ==, ===
- 逻辑运算符：&& || ！
- 三元运算符：条件表达式？ true_value:false_value
==:
1、判断类型是否一致，如果不一样则进行类型转换
2、再去比较其值
===：全等于
1、判断类型是否一致，如果不一致则直接返回false
2、在去比较
类型转换：
- 其他类型转为number：
a、按照字符串字面值、转为数字，如果字面值不是数字则转为NaN
b、boolean:true转为1，false 转为0 - 其他类型转为boolean：
a、number： 0和NaN转为false其他转为true
b、string：空字符串转为false，其他转为true
c、null：false
d、undefined： false
总结：
- == 和 ===：
==：会进行类型转化， === ：不会进行类型转化 - 类型转换
其他类型转数字
其他类型转boolean
流程控制语句
- if：
- switch：
- for：
- while：
- do… while:
函数
函数（方法）是被设计为执行特定任务的代码块
- 定义：JavaScript函数通过function关键词进行定义
function 函数名（参数1，参数2...）{
要执行的代码
}
注意：
1、形式参数不需要类型。因为JavaScript是弱类型语言
2、返回值也不需要定义类型，可在函数内部直接使用return 返回即可
function add（a,b）{
return a+b;
}
- 调用：函数名称
let res = add（1，2）;
- 定义方式二：
var 函数名= function(参数列表){
要执行的代码
}
调用方式相同
JS中函数调用可传递任意个数参数
JavaScript常用对象
-
array
JavaScript Array对象用于定义数组
1、定义
var 变量名 = new Array(元素列表)//方式一
var 变量名 = [元素列表]//方式二
2、访问：
arr[索引] = 值；
arr[0] =0;
注意：JS数组类似与Java集合、长度类型都可变
常用属性：
length ：设置或返回数组 中元素的数目
常用方法
push：向数组末尾添加一个元素，并返回新的长度
splice：删除元素 -
string
定义：
var 变量名 = new String（s）；// 方式1
var 变量名 = s ；//方式2
常用属性：
length： 字符串长度
常用方法：
charAt（） 返回在指定位置的字符
IndexOf() 检查字符串
trim（）：去除字符串前后两端的空白字符 -
自定义
格式：
var 对象名称 ={
属性名称1：属性值1，
…
函数名称：function（形参）{}
…
}
示例：
ver person ={
name ：“张三”,
age： 23,
eat：function（）{
alert（“吃饭”）;
}
};
BOM
- Browser Object Model:浏览器对象模型
- JavaScript：将浏览器的各个组成部分封装为对象
- 组成：
1、window：浏览器窗口对象
2、Navigator：浏览器对象
3、Screen：屏幕对象
4、History：历史浏览记录
5、Location：地址栏对象
window：浏览器窗口对象
- 获取：直接使用window，其中window.可是省略
window.alert(“abc”); - 属性：获取其他 BOM 对象
| 属性 | 描述 |
|---|---|
| history | 对history 对象的只读引用，参考history 对象 |
| Navigator | 对Navigator对象的只读引用，参考Navigator对象 |
| Screen | 对Screen对象的只读引用，参考Screen对象 |
| Location | 对Location对象的只读引用，参考Location对象 |
- 方法：
| 方法 | 描述 |
|---|---|
| alert（） | 显示带有一段信息和一个确认按钮的警告框 |
| confirm（） | 显示带有一段信息和一个确认按钮和取消按钮的对话框 |
| setInterval（） | 循坏调用函数 |
| setTimeout（） | 只调用一次函数 |
location：地址栏对象
- 获取：使用window.location其中window.可以省略
window.location.方法（）；
location.方法（）； - 属性
href :设置或返回完整的url
History：历史记录
- 获取：使用window.history其中window.可以省略
window.History.方法（）；
History.方法（）； - 方法
back（）：加载History列表的前一个url
forward（）：加载History列表的后一个url
DOM
- Document Object Model文档对象模型
- 将标记语言的各个组合封装成对象
1、Document：整个文档对象
2、Element：元素对象
3、Attribute：属性对象
4、Text：文本对象
5、Comment：注释对象
获取Element：
- getElementById：根据id属性获取，返回一个Element对象
- getElementByTagName：根据标签名获取。返回Element对象数组
- getElementByName：根据name属性获取。返回Element对象数组
- getElementByClassName：根据class属性获取。返回Element对象数组
常见HTML Element对象的使用
查阅文档：https://www.w3school.com.cn/
事件监听
事件：HTML 事件是发送在HTML元素上的“事情”，比如：
- 按钮被被点击
- 鼠标移动到元素之上
- 按下键盘按钮
事件监听： JavaScript可以在事件 被侦测到时执行代码
事件绑定：
- 方式1（不推荐 代码耦合）
通过HTML标签中事件属性进行绑定
<input type ="button" onclick ='on()'>
function on (){
alert（"我被点了"）
}
- 方式二
通过DOM元素属性绑定
<input type = "button" id = "btn"
document.getElememtById("btn").onclick = function (){
alert("我被点了")
}
常见事件
| 事件名 | 说明 |
|---|---|
| onclick | 鼠标点击事件 |
| onblur | 元素失去焦点 |
| onfocus | 元素获取焦点 |
| onload | 某个页面或图像被完全加载 |
| onsubmit | 当表单提交时触发该事件 |
| onkeydown | 某个键盘的键被按下 |
| onmouseover | 鼠标被移到某个元素之上 |
| onmouseout | 鼠标从某个元素移开 |
正则表达式
- 概念：正则表达式定义了字符串组成的规则
- 定义
1、直接量：注意不加引号
var reg =/^\w{6,12}$/;
2、创建RegExp对象
var reg =new RegExp("/^\w{6,12}$/");
- 方法：
test（str）：判断字符串是否符合规则。返回false 或true
语法：
- ^ :表示开始
- $ :表示结束
- []:表示某个范围内的单个字符
- \w：代表单词字符（数字、字母、下划线）
- \d:代表数字
- +：至少一个
- *：0个或多个
- ？：0个或1个
- {x}:X个
- {m,}:至少m个
- {m,n}:至少m个，最多n个
16万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
