1. JavaScript介绍
1. 网景公司在Netscape2.0首先推出了JavaScript
2. JavaScript 的正式名称是 “ECMAScript”,此标准由 ECMA 组织发展和维护,简称“js”
3. JavaScript 是一种网页编程技术,用来向 HTML 页面添加交互行为
4. JavaScript 是一种基于对象和事件驱动的解释性脚本语言,直接嵌入 HTML 页面,由浏览器解释
执行代码,不进行预编译。
js的特点
1.可以使用任何文本编辑工具编写,只需要浏览器就可以执行程序 (后面会学习不用浏览器也能运行)
2. 解释执行:事先不编译,逐行执行
3. 基于对象:内置大量现成对象
4. 适宜:
客户端数据计算
客户端表单合法性验证
浏览器事件的触发
网页特殊显示效果制作
js的组成
1.ECMAScript:定义核心语法,关键字,运算符,数据类型等系列标准
2.DOM:文档对象模型,将一个html页面的所有节点看成是一个一个的对象。更有层次感的管理每一个节点。
3.BOM:浏览器对象模型,是对浏览器窗口进行访问和操作。使用 BOM,开发者可以移动窗口、改变状态栏中的文本以及执行其他与页面内容不直接相关的动作。使 BOM 独树一帜且又常常令人怀疑的地方在于,它只是 JavaScript 的一个部分,没有任何相关的准。
。弹出新的浏览器窗口
。移动、关闭浏览器窗口以及调整窗口大小
。提供 Web 浏览器详细信息的定位对象
。提供用户屏幕分辨率详细信息的屏幕对象
。对 cookie 的支持
。IE 扩展了 BOM,加入了 ActiveXObject 类,可以通过 JavaScript 实例化 ActiveX对象,进而
实现ajax局部刷新技术
#变量
1. 因为js是弱类型语言,所以,在定义变量的时候,所有的数据类型都是var
2. 数值类型:number
不区分整型数值和浮点型数值
所有数字都采用 64 位浮点格式存储,类似于double 格式
3. 字符串:string
首尾由单引号或双引号括起
4. 布尔类型:
仅有两个值:true和false也代表1和0
实际运算中true=1,false=0
5. 自动类型转换
数字 + 字符串:数字转换为字符串 10+’a’ -> 10a
数字 + 布尔值:true转换为1,false转换为0 true+5->6
字符串 + 布尔值:布尔值转换为字符串true或false true+’a’->truea
布尔值 + 布尔值:布尔值转换为数值1或0 true+true->2
6. 转换函数
parseInt:强制转换成整数
如果不能转换,则返回 NaN (NaN 属性是代表非数字值的特殊值。该属性用于指示某个值不是数字)
例如:parseInt("6.32")=6
parseFloat:强制转换成浮点数
如果不能转换,则返回 NaN
例如:parseFloat("6.32")=6.32
typeof:查询数值当前类型,返回 string / number / boolean / object
例如:typeof("test"+3)=="string"
Number对象
1. Number.fixed(2); 自带四舍五入技能
#闭包
闭包的概念:指有权访问另一个函数作用域中的变量的函数,一般情况就是在一个函数中包含另一个函数。
闭包的作用:访问函数内部变量、保持函数在环境中一直存在,不会被垃圾回收机制处理;
简单地说:就是在函数的局部范围内声明一个封闭的环境,此环境不会被垃圾回收探测到。保证了数据的安全唯一性
闭包是一种保护私有变量的机制,在函数执行时形成私有的作用域,保护里面的私有变量不 受外界干扰。
function test1(){
var count = 0; //局部变量
function jia(){
return count+=1;
}
return jia;
}
var fn = test1(); // fn => function jia(){return count+=1; }
fn();
fn();
console.log( fn() ); // 每次调用方法,首先就是将变量还原为0
直观的说就是形成一个不销毁的栈环境。
闭包的优点: 方便调用上下文中声明的局部变量 逻辑紧密,可以在一个函数中再创建个函数,避免了传参的问题
闭包的缺点: 因为使用闭包,可以使函数在执行完后不被销毁,保留在内存中,如果大量使用闭包就会造 成内存泄露,内存消耗很大
DOM
document.getElementById()通过id属性获取值。
<body>
<form action="xxx" onsubmit="return login()">
<p>帐号:<input id="username"/></p>
<p>电话:<input id="phone"/></p>
<p><button>登录</button></p>
</form>
<script>
function login() {
var name = document.getElementById("username").value ;
if(name == ""){
alert("帐号不能为空!");
return false; // 阻止表单的提交
}
return true; // 放行,让表单提交
}
</script>
</body>
getElementsByName:通过name属性获得元素节点对象集
<body>
<h2>我的购物车</h2>
<table border="1" cellspacing="0">
<tr>
<td><input type="checkbox" onchange="quan(this)" /> 全选</td>
<td>名称</td>
<td>单价</td>
</tr>
<tr>
<td><input type="checkbox" name="one" />1</td>
<td>功能性饮料-尖叫</td>
<td>4.0</td>
</tr>
<tr>
<td><input type="checkbox" name="one" />2</td>
<td>火腿肠</td>
<td>2.0</td>
</tr>
<tr>
<td><input type="checkbox" name="one" />3</td>
<td>包子</td>
<td>1.5</td>
</tr>
</table>
<p>
<button>提交订单</button>
</p>
<script>
function quan(all) {
var arr = document.getElementsByName("one");
for (var i = 0; i < arr.length; i++) {
arr[i].checked = all.checked; // 将全选框的状态,赋值给每一个复选框
}
}
</script>
</body>
getElementsByTagName:通过标签名称获得元素节点对象集
<body>
<table border="1" cellspacing="0">
<tr>
<td><input type="checkbox" onchange="quan(this)" /> 全选</td>
<td>名称</td>
<td>单价</td>
</tr>
<tr>
<td><input type="checkbox" name="one" />1</td>
<td>功能性饮料-尖叫</td>
<td>4.0</td>
</tr>
<tr>
<td><input type="checkbox" name="one" />2</td>
<td>火腿肠</td>
<td>2.0</td>
</tr>
<tr>
<td><input type="checkbox" name="one" />3</td>
<td>包子</td>
<td>1.5</td>
</table>
<script>
var rows = document.getElementsByTagName("tr"); //通过标签名获得元素对象集合
for (var i = 0; i < rows.length; i++) {
if(i % 2 == 1){ // 奇数
rows[i].style.backgroundColor = "pink";
}
}
</script>
</body>
DOM修改
修改 HTML DOM 意味着许多不同的方面:
- 改变 HTML 内容
document.getElementById("hello").innerHTML = "";
2.改变 CSS 样式
document.getElementById("hello").style.fontFamily = "华文彩云";
3.改变 HTML 属性,创建新的 HTML 元素
function add(){
var img = document.createElement("img"); // <img>
img.setAttribute("src","../lagou-html/img/cat.gif"); // <img
src="../lagou-html/img/cat.gif">
img.setAttribute("title","小猫咪"); // <img src="../lagou-
html/img/cat.gif" title="小猫咪">
img.setAttribute("id","cat"); // <img src="../lagou-
html/img/cat.gif" title="小猫咪" id="cat">
var divs = document.getElementsByTagName("div");
divs[0].appendChild(img);
}
4.删除已有的 HTML 元素
var img = document.getElementById("cat");
img.parentNode.removeChild(img); // 必须通过父节点,才能删除子节点
事件
窗口事件
onload 当文档被载入时执行脚本
<body onload="test()">
<script>
function test() {
document.write("哈哈哈哈");
}
</script>
</body>
表单元素事件
onblur 当元素失去焦点时执行脚本
onfocus 当元素获得焦点时执行脚本
鼠标事件
onclick 当鼠标被单击时执行脚本
ondblclick 当鼠标被双击时执行脚本
onmouseout 当鼠标指针移出某元素时执行脚本
onmouseover 当鼠标指针悬停于某元素之上时执行脚本
键盘事件
onkeydown 按下去
onkeyup 弹上来
事件冒泡
先子,后父。事件的触发顺序*自内向外*,这就是事件冒泡;
事件捕获
先父,后子。事件触发顺序变更为*自外向内*,这就是事件捕获;
面向对象OOP
var user = {
username : "孙悟空",
age : 527,
say : function(){
console.log("大家好,我叫:"+this.username+",我今年"+this.age+"岁了!");
}
};
user.say();
JSON
JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式。
BOM操作
就是javascript对浏览器的一些常规操作的方法
window对象
<button onclick="kai()">极速入职</button>
<script>
function kai(){
window.open("http://lagou.com" , "拉勾网" ,
"width=500,height=300,left=400");
// window.open("http://lagou.com" , "拉勾网" , "fullscreen=yes"); // IE才
生效
}
</script>
screen屏幕对象
我想知道我的电脑屏幕多大?实际上,得到的就是分辨率
<body>
<button onclick="kai()">求大小</button>
</body>
<script>
function kai() {
alert(window.screen.width + "|" + window.screen.height);
}
</script>
location定位
包含有关当前 URL 的信息,通常用来做页面跳转
<button onclick="test()">测试</button>
<script>
function test(){
console.log( "当前页面的URL路径地址:"+ location.href );
location.reload(); // 重新加载当前页面(刷新)
location.href = "http://lagou.com"; // 跳转页面
}
</script>
history浏览器历史
history对象会记录浏览器的痕迹
存储对象
用起来和我们在java中map很相似,都是键值对的方式存数据
保存数据
localStorage.setItem("name","curry");
提取数据
localStorage.getItem("name");
删除指定键的数据
localStorage.removeItem("name");
计时操作
周期性定时器 setInterval
<body>
<h1 id="title">拉勾网:极速入职</h1>
<script>
var colors = ["red","blue","yellow","pink","orange","black"];
var i = 0;
function bian(){
document.getElementById("title").style.color = colors[i++];
if(i == colors.length){
i = 0; // 颜色重新开始
}
}
setInterval(bian,100); // 每隔0.1秒,执行一次bian函数
</script>
</body>
停止定时器 clearInterval
<body>
<img id="tu" src="../lagou-html/img/1.jpg" width="50%" />
<br />
<button onclick="begin()">开始</button>
<button onclick="stop()">停止</button>
<script>
var arr = ["1.jpg", "2.jpg", "3.jpg", "4.jpg", "5.jpg"];
function begin() {
timer = setInterval(bian, 100); // 没有使用var,所以timer是全局变量
}
function stop() {
clearInterval(timer); // 停止定时器
}
function bian() {
var i = Math.floor(Math.random() * arr.length); // 0-4
document.getElementById("tu").src = "../lagou-html/img/" + arr[i];
}
</script>
</body>
一次性定时器 setTimeout
相当于延迟的效果,只执行一次
<script>
function bian(){
document.body.style.backgroundColor = "red";
}
//3秒之后调用
setTimeout(bian,3000);
</script>