JavaScript_上
javaScript
JavaScript,简称JS,是Web开发中不可缺少的脚本语言的,不需要编译就可以运行(解释性语言)。它“寄生”在HTML体内,随网络传输到客户端在浏览器中运行。js代码可以写到html的任何地方。一般写在 body 结束标签的上方。
作用
- 可以动态修改HTML和CSS代码(修改的是浏览器内存中的那一份代码)
- 操作浏览器:浏览器的地址栏信息(获取和修改)、浏览器的历史记录信息(页面的前进和后退)、打开浏览器的新窗口等
组成
- ECMAScript:基本语法规范
- BOM:Browser Object Model 浏览器对象模型。可以理解是把浏览器封装成js对象,JS代码可以操作Bom对象的属性和方法,从而操作浏览器。
- Dom:Document Object Model 文档对象模型,把html文档封装成Js对象。Js代码可以对象的属性和方法,从而操作HTML文档:操作HTML标签,操作属性,操作样式。
js的引入方式
- 内部JS
- 外部JS
- src:Js文件的路径
- type:引入文件的类型。固定值text/javascript
js代码在HTML页面内的任意位置都可生效,在不影响页面显示效果的情况下,js越晚加载越好。
ECMAScript基本语法
- 变量定义:js是弱类型语言,js里所有变量定义都使用 var
数据类型:分为原始数据类型 和引用数据类型
- 原始数据类
- 基本数据类型(4类八种)
- null
- undefined
- 引用数据类型:js里有9个引用数据类型。js里定义一个对象:var obj=new Data();
- 原始数据类
运算符
- ==和===(==比较变量的值,只要值相同,结果是true,=== 比较变量的值和类型 值和类型一样返回true)
- ||和 &&:js里做boolean类型运算的。没有| 和 &。
- 加减乘除
- 逻辑语句 if,if else,for,switch…
- number:0是false,非0是true
- string类型:”“是false,非”“是true
- null类型:false
- undefined类型:false
- Object类型:对象存在是true,对象不存在时false
函数
- 普通函数
关键字 function
function add(a,b){
return a+b;
}
add(3,3);
匿名函数
var fn=function(a,b){ return a+b; } var result=fn(3,3);
应用场景:将匿名函数作为另一个函数的参数
事件
先要明确是那个标签要发生事件,就给他添加事件的监听,发生了怎样的事件(常用事件),发生了事件后,应该怎么去处理(响应的行为)。
事件相关的概念
- 事件源:被监听的对象,一般只html标签
- 事件:事件源上发生的动作:比如单击、双击
- 响应行为:事件触发后,要执行的一些代码。这些代码通常是封装成函数来调用。
常见的事件(监听事件源)
- onclick 监听鼠标单击
- ondblclick 鼠标双击
- onload 监听加载事件,一般用于监听页面加载完成
- onsubmit 监听表单提交事件,针对form标签
- onchange 监听域内容改变事件,一般针对select下拉框的选项发送变化
- onfocus 监听获取焦点事件
- onblur 监听失去焦点事件
- onkeydown 监听键盘按键被按下
- onkeyup 监听键盘按键被弹起
- onkeypress 监听键盘被按下或按住
- onmousedown 监听鼠标按下
- onmouseup 监听鼠标弹起
- onmouseover 监听鼠标移入
- onmouseout 监听鼠标移出
- onmousemove 监听鼠标移动
事件绑定(三种方式)
var btn = document.getElementById(“btn3”);
btn.onclick = function(){
alert(“动态绑定事件”);
}
BOM
BOM浏览器对象模型。有5个对象
- window:浏览器窗口对象,是所有的bom对象的顶级对象
- location:浏览器地址信息对象。可以用来获取当前网址,或者设置当前网址
- history:历史记录信息对象。可以用来进行历史记录切换:前进、后退
- navigator:浏览器信息对象(只读)。可以获取浏览器的内核、版本、操作系统信息
- screen:浏览器屏幕显示信息对象。可以用来获取/设置浏览器大小,位置,颜色信息等
window对象
- 提供了弹窗方法
- 普通弹窗:alert()
- 确认弹窗:confirm()
- 输入弹窗:prompt()
提供定时器
- 执行多长的定时器
- 设置定时器:[window].setInterval(函数对象,间隔的毫秒值)
- 清除定时器:clearInterval();
- 执行一次的定时器(延时器)
- 设置定时器:setTimeout();
- 清除定时器:clearTimeout();
- 执行多长的定时器
提供一些全局函数
- parseInt():转化成整数
- parseFloat():转化成小数
- eval():把字符串转化成js代码
location对象
- 获取当前网址
- var url=location.href;
- 设置当期网址
- location.href=”XXX”;在当前窗口打开页面
- 在新窗口打开
- window.open(url);
history对象
- 前进一步:history.forward();
- 后退一步:history.back();
- 后退n步:history.go(-num);