简介：
JavaScript一种直译式脚本语言，是一种动态类型、弱类型、基于原型的语言，
内置支持类型。它的解释器被称为JavaScript引擎，为浏览器的一部分，广泛用于客户端的脚本语言。
组成部分:
ECMAScript:js基础语法(规定 关键字 运算符 语句 函数等等...)
BOM:浏览器对象模型
DOM:文档对象模型
作用:
修改html页面的内容
修改html的样式
完成表单的验证
注意：js可以写在html页面中 也可以单独存在.js文件夹中
js和html整合
方式1:在页面上直接写
将js代码放在 <script></script>标签中,一般放在head标签中
方式2:独立的js文件
通过script标签的src属性导入
js中变量声明:
var 变量名=初始化值;
var 变量名;
变量名=初始化值;
注意:
var可以省略 建议不要省略
一行要以分号结尾,最后一个分号可以省略,建议不要省略
（js为弱类型语言 弱到可以很随便，但是也不要太随便，遵守习惯）
js的数据类型:
- 原始类型（系统定义好的类型）:(5种)
Null
String
Number
Boolean
Undefined
通过 typeof运算符可以判断一个值或者变量是否属于原始类型,若属于原始类型,他还可以判断出属于那种原始类型
使用语法：typeof 变量 或者 typeof变量类型的值;
例如； int a = 3
typeof a
或者 typeof 3
-> 函数的返回值为相关的类型
注意：若变量值为null,使用typeof弹出的值 object 特殊例子
var a = null;
typeof a
-> object
使用typeof的返回值
undefined - 如果变量是 Undefined 类型的
boolean - 如果变量是 Boolean 类型的
number - 如果变量是 Number 类型的
string - 如果变量是 String 类型的
object - 如果变量是一种引用类型或 Null 类型的
- 引用类型: js中也可以new对象例如 var a = new String（）; a 为引用类型
js:事件驱动函数
函数定义格式:
方式1:
function 函数名(参数){
函数体;
}
注意:
- 函数不用声明返回值类型 (但是可以在方法体中直接使用)
- 参数不需要加类型
- 函数调用的时候 ：函数名(参数)
方式2:
var 函数名=function(参数){
函数体;
}
js中的事件:
常见的事件:
- 单击: onclick
- 表单提交: onsubmit 加在form表单上的 onsubmit="return 函数名()" 注意函数返回值为boolean类型
- 页面加载: onload(一般使用在body 标签上)
js事件和函数的绑定:
方式1:
通过标签的事件属性 <xxx onclick="函数名(参数)"></xxx>
code Demo 练习
js获取元素（标签）:
标签先定义好例如：
<input type="button" name="btn" id="btn" value="确定" onclick="clime()"/>
js中
<script>
function clime(){
var obj = document.getElementById("btn");
alert(obj.value);
}
</script>
小结：
获取元素的value值
obj.value;
获取元素的标签体中的内容
obj.innerHTML;
方式2:
给元素派发事件
document.getElementById("id值").onclick=function(参数){....}
document.getElementById("id值").onclick=函数名
注意:
内存中应该存在该元素才可以派发事件
a.将方式2的js代码放在html页面的最下面(参考下面代码实例)
b.在页面加载成功之后在运行方式2的js代码 onload事件.
代码实例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script>
//普通的事件
function clickMe1(){
alert("点我试试1");
}
//事件的派发
// var btn = function(){
// alert("测试");
// }
// document.getElementById("btn2").onclick = btn ;
</script>
</head>
<body>
<form>
<input type="button" value="普通的事件绑定" onclick="clickMe1()"/><br />
<input type="button" value="事件的派发" id="btn2"/><br />
</form>
</body>
<script>
// js 解释性的语言 故此句代码执行到 document.getElementById("btn2")否则事件找不到相关的元素
var btn = function(){
alert("测试");
}
document.getElementById("btn2").onclick = btn ;
</script>
</html>
bom中window对象的定时器方法
- 定时器:
var id=setInterVal(code,毫秒数):每隔指定的毫秒数执行一次函数 周期
var id=setTimeout(code,毫秒数):延迟指定的毫秒数之后 只执行一次函数
参数：要执行的函数名字，周期毫秒。 这两个函数都有返回值 id 用于下面清空的方法调用
- 清除定时器:
clearInterval(id);
claerTimeout(id);
简单的轮播图code：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body onload="init()">
<table width="100%">
<tr>
<td align="center">
<img id="id_img" src="../img/linyun1.jpg" />
</td>
</tr>
</table>
<input id="end" value="终止" type="button" />
</body>
<script>
var a =1;
var id;
function init(){
id = setInterval(changePhoto,2000);
}
function changePhoto(){
var imgObj = document.getElementById("id_img");
if(a%2==0){
imgObj.src = "../img/linyun1.jpg";
}else{
imgObj.src= "../img/linyun2.jpg";
}
a++;
}
// 终止
document.getElementById("end").onclick=function(){
clearInterval(id);
}
</script>
</html>
小补充：
document.write() 向页面上写内容
网友评论