JavaScript
作用
控制页面特效。象征前端的大脑和灵魂。WEB的脚本语言。
简单描述就是页面的特效展示。
脚本语言:无法独立执行,必须嵌入到其他语言中编译执行。
语言特征及编程注意事项
- JavaScript 无需编译,直接被浏览器解释并执行
- JavaScript无法单独运行,必须嵌入到HTML代码中运行
- JavaScript的执行过程由上到下依次执行
- JavaScript没有访问系统文件的权限
- 由于JavaScript无需要编译,是由上到下依次编译执行,在保证可读性的情况下,允许使用链式编程
- JavaScript和java没有半毛钱关系
JavaScript的组成部分
- ECMAScript (核心):规定了JS的语法和基本对象。
- DOM:文档对象模型:处理网页内容的方法和接口标记型文档。HTML
- BOM:浏览器对象模型:与浏览器交互的方法和接口
JavaScript的引入方式
内部脚本
1 | <script> |
外部引入
text.js
1 | alert("我无敌!"); |
text.html
1 | <script src="text.js"> |
规范化的放置
放置在body结束之前
为了用户的快速响应的体验效果
JavaScript语法及规则
注释
单行注释 //
CTRL+ /
多行注释 /* */
CRTL+SHIFT+ /
变量
变量如果没有声明就不能用
变量的声明
1 | var bianliang; |
变量的声明和赋值
1 | var bianliang = 10; |
基本规范
- 必须以字母或下划线开头,中间可以是数字、字符或下划线
- 变量名不能包含空格等符号
- 不能使用JavaScript关键字作为变量名,如:function、this、class
- 严格区分大小写
基本数据类型
数据类型 | 含义 |
---|---|
string | 字符串类型””和’’都是字符串,没有单个字符 |
boolean | 布尔类型,固定值为true和false |
number | 数字类型,任意数字(正负,整、小数) |
null | 空,一个占位符 |
undefined | 未定义类型,只有一个固定值undefined |
通过 typeof() 来显示变量的数据类型。
null数据类型返回object,其余的数据类型返回值都为原先的数据类型。
引用数据类型
所处理的引用数据类型都是对象
标准创建方式
1 | var str = newString(); //和java相同 |
运算符
JavaScript中只有&&和||不存在单个的&和|运算符
正则对象
RegExp对象
1 | var reg = new RegExp("表达式"); //开发中基本不用(因为太麻烦) |
直接量中存在边界^代表开始;$代表结束
直接量的方式的正则是对象,不是字符串,不能用引号
直接量方式必须全部满足才可以为true 检查严格,适用于表单校验
普通量方式只要存在成立正则的字符就为true,检查不严格,适用于字符串查找
test方法
通过reg.test(“”);可以拿来判断是否符合正则的规则
JS数组对象
特性
JS数组可以看做是Java中的Arraylist集合
- 数组中的每一个成员没有类型限制,及可以存放任意类型
- 数组的长度可以自动修改
创建
- var arr =[1,2,3,”a”,true]; //常用的JS数组。 长度为5
- var arr =newArray();创建一个数组对象。数组长度默认为0
- var arr =newArray(4);创建一个长度为4的数组,其中每个元素都是undefined(仅仅在显示数组时进行处理)
- var arr = newArray(1,2,”a”); //创建了一个数组,数组元素为1,2
自定义函数/方法
1 | //自定义函数/方法的创建 |
自定义对象
1 | //自定义对象的创建 |
自定义对象直接量
格式:
var 对象名 ={属性名1:”属性值1”,属性名2:”属性值2”……};
1 | var Person = {name:"虞程龙",age:18,sex:"男"}; |
BOM对象
BOM指的是浏览器对象模型或者称为windows对象。
消息框
警告框alert(“”);
确认框confirm(“”);
确认框存在返回值,点击确定返回值为true,点击取消返回值为false。
定时器
循环定时器
启动循环计时器-setInterval()
格式:
setInterval(“调用方法”,毫秒值);
毫秒值:循环周期
1 | function run1(){ |
取消循环计时器-clearInterval()
需要返回计时器的ID
1 | function run1(){ |
一次性定时器
启动一次性定时器-setTimeout()
格式:
setTimeout(调用方法,毫秒值);
1 | function run1(){ |
取消一次性定时器-clearTimeout()
方法和取消循环计时器一样,()里需要id才能取消。
location 对象
href : 设置或者返回当前的URL
1 | //设置URL地址(即跳转到设置的网页上) |
DOM对象
DOM 文档对象模型
文档:标记型文档(HTML等)
DOM 是将标记型文档中所有内容(标签、文本、属性)都封装成对象,通过操作对象的属性或者方法,来达到操作或者改变HTML展示的效果的目的。
获取元素对象的四种方式
在JavaScript中,我们可以通过DOM对象的4种方式获取的对应的元素对象:
- getElementByld(); 通过元素ID获取对应元素对象,找不到返回null
- getElementByName(); 通过元素的name属性获取符合要求的所有元素
- getElementByTagName(); 通过元素的元素名属性获取符合要求的所有元素
- getElementByClassName(); 通过元素的class属性获取符合要求的所有元素
注意事项
获取的元素节点对象,必须保证元素节点对象已经被加载到内存中。
元素对象常见属性
value
元素对象.value,获取元素对象的value属性值。
元素对象.value=属性值 设置元素对象的value属性值
1 | <input type="text" id="t1" value ="你好" /> |
className
元素对象.className,获取元素对象的class属性值。
元素对象.className = 属性值 设置元素对象的class属性值
checked
元素对象.checked,获取元素对象的checked属性值。
元素对象.checked = 属性值 设置元素对象的checked属性值(html中用true和false表示是否选中)
innerHTML
元素对象.innerHTML 获取元素对象
元素对象.innerHTML = 属性值
1 | <span id = "s1"> |
JS事件
常见JS事件
事件代码 | 事件 |
---|---|
onclick | 点击事件 |
onfocus | 元素组件获取焦点 |
onblur | 失去焦点事件 |
onchange | 域内容改变事件值发生改变 |
onload | 元素组件加载完毕 |
onsubmit | 表单的提交按钮被点击时触发 |
onkeyup | 键位弹起事件(键盘) |
onmouseover | 鼠标移入事件 |
onmouseout | 鼠标移除事件 |
JS事件的绑定
onclick = “run1(),run2()”;
- 开发方便
- 传参方便
- 可以绑定多个函数
DOM方式绑定
window.onload=run1;
window.onload=function(){
run1();
run2();
};