目录
一、javaScript概述
1、历史
由Netscape(美国网景公司)开发的一种脚本语言(不需要编译,可以由某种引擎解释执行)
原名:LiveScript
网景公司和SUN公司合作,改为JavaScript
2、作用
响应客户端鼠标和键盘事件
客户端表单验证(在前端将一些无效的信息过滤掉,减轻服务器端的压力)
动态改变标签样式
HTML:网页布局 CSS:网页外观 JavaScript:网页行为(动作)
二、JavaScript基本语法
1、位置
<script> </script>
此标签可以放在head或body中,一般习惯放在head,还可以将脚本写在外部.js文件中,在HTML中导入外部.js文件
对象:是一种复杂的数据类型,里面可以包含很多信息(属性、函数)
2、变量
声明变量(程序中的一个存储单元)关键字(语言中事先定义好的,) var a = 10;
js是弱类型语言,变量的值可以是语言文本中支持的所有类型
3、数据类型
a、数值型 :包含整数,浮点数
var a = 10; var b = 5.4;
b、布尔值(boolean): true/false
c、字符串:"" '' 都表示字符串
d、undefined : 不明确,声明未赋值的变量
var d;
e、对象型:一种复合(复杂)类型,里面可以包含属性(变量)、方法(动作)
var date = new Date(); //会包含时间与你当那一刻的时间信息
4、运算符
a、算术运算符 + - * / % ++ --
b、逻辑运算符 && || !
c、赋值运算符 = += -= *= /= %=
e、比较运算符 == ===(全等于) != > < >= <=
f、条件运算符(三元运算符):(条件)?表达式1:表达式2
5、流程控制
if switch for while
6、定义函数
函数:定义一次,多次调用,完成某种功能的代码块
function 函数名([参数]){
函数体
[return 返回值]
}
7、全局函数
a、parseInt(参数)
将参数转为整数,浮点---->整数
字符串开头的数字部分转为整数
字母开头的字符串返回NaN
b、parseFloat(参数)
将参数转为浮点数,浮点--->浮点
字符串开头的数字部分转为浮点数
字母开头的字符串返回NaN
c、typeOf(参数)
返回所给参数的数据类型
d、eval(参数)
将字符串当做脚本执行(运算某个字符串)
三、内置对象
语法中已经定义好的
1.日期对象
表示程序运行时的时间
var date = new Date(); //创建一个日期对象 var year = date.getFullYear(); //年 var month = date.getMonth()+1; //月 (0-11) var da =date.getDate(); //月中的天数 var hour = date.getHours(); //小时 var minute = date.getMinutes(); //分钟 var s = date.getSeconds(); //秒 var w = date.getDay(); //星期 (0-6) /*设定日期*/ date.setFullYear(); //设置年份 date.setDate(); //设置月的某一天 setMonth(); //设置月份 (0 ~ 11)
2、算术对象
包含一些算数运算的函数
alert(Math.PI); //获取圆周率PI的值 alert(Math.pow(2,3)); //数的幂;x的y次幂 alert(Math.sqrt(10)); //计算平方根 alert(Math.abs(-9)); //绝对值 alert(Math.ceil(9.1)); //向上取整 alert(Math.floor(9.99)); //向下取整 alert(Math.round(9.5)); //四舍五入 alert(Math.random()); //获取0-1之间的随机数,可能会为0但不会为1 alert(Math.max(10,5)); //取最大值 alert(Math.min(10,5)); //取最小值
四、事件
属于html标签中的内容,例如点击按钮,会触发一个事件,不同的事件触发方式不同,触发方式有鼠标触发和键盘触发两种方式
onclick(); //单击:鼠标左键单击 ondblclick(); //双击:鼠标左键双击 onmouseover(); //移入: 鼠标移动到标签上触发 onmouseout(); //移出: 鼠标移出标签触发 onfocus(); //聚焦: 输入组件获得鼠标焦点触发 onblur(); //失焦: 输入组件失去鼠标焦点触发 onchange(); //内容改变: 内容发生改变且失去焦点触发 onload(); //页面加载: 当页面内容一旦加载触发 onkeydown(); //键盘按下: 按键按下时触发 onkeyup(); //键盘抬起: 按键抬起触发
五、HTML DOM对象
HTML标签可以触发事件,事件可以调用js中的函数,在函数中操作网页中的内容(标签)。
HTML DOM对象,指的是网页中的具体的一。
js是面向对象的语言,在js的世界中,认为网页中的每一个标签就是一个对象,操作网页就是操作对象。
document对象:表示整个html文档,通过document对象,就可以获得网页中的标签。
要操作,先得到
1、通过标签id获得HTML标签
document.getElementById("id名"); 标签名.interHTML; //获得标签的内容 对象名.属性名 //获得属性的名 对象名.属性名=值 //给属性赋值
example:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script>
function test(){
var message1 = document.getElementById("message1");
message2 = document.getElementById("message2");
message2.value = message1.value;
message1.value = "";
message1.type = "button";
message1.value = "返回"
}
</script>
</head>
<body>
<input type = "text" id="message1" />
<input type="text" id="message2" /><br />
<input type="button" value="测试" onclick="test()" />
</body>
</html>
2、通过标签名找到HTML标签
document.getElementsByTagName("标签名");
//获得到的是一个数组对象,对标签进行操作,循环遍历数组中的每一个标签
3、通过name找到HTML标签
ducument.getElementsByName("name名")
4、通过类名找到HTML标签
document.getElementsByClassName("class名");
即使标签名,name,class属性值只剩一个,仍然是数组
5、对css样式进行操作
document.getElementById("id名").style.属性="属性值";
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
function test(){
// var objects = document.getElementsByTagName("input
var objects =document.getElementsByName("a1");
//var objects =document.getElementsByClassName("c1");
//对标签进行操作,循环,遍历数组中的每一个标签
for(var i=0;i<objects.length;i++){
// console.log(objects[i].value);
objects[i].value = 666;
}
}
function test1(){
var divobj = document.getElementById("box1");
divobj.style.backgroundColor = "red";
divobj.style.width = "200px";
divobj.style.height = "200px";
}
</script>
</head>
<body>
<input type="text" value="1" name="a1" class="c1"/>
<input type="text" value="2" class="c1"/>
<input type="text" value="3" class="c1"/>
<input type="text" value="4" class="c1"/><br/>
<input type="button" value="测试" onclick="test()" />
<div id="box1">
</div>
<input type="button" value="测试css" onclick="test1()" />
</body>
</html>
六、计时
setTimeout("函数",时间);//在指定时间后,调用指定的函数,只调用一次
定时器开启后会返回一个编号
clearTimeout(序号);//取消指定的定时器
setInterval("函数",时间);//每隔指定时间调用指定的函数,调用多次
clearInterval(序号);//取消指定的计时器
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
function test(){
alert("执行");
}
var t;
function startTime(){
//定时器开启后会返回一个编号
//t = setTimeout("test()",5000);//在指定的时间后,调用指定的函数,只调用一次
t = setInterval("test()",3000);//每隔指定的时间调用指定的函数,多次调用
}
function stopTime(){
//clearTimeout(t);//取消指定的定时器
clearInterval(t);
}
</script>
</head>
<body>
<input type="button" value="开始" onclick="startTime()"/>
<input type="button" value="停止" onclick="stopTime()"/>
</body>
</html>