目录
一、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>
17万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
