一、javaScript概述
（一）历史
1.由Netscape公司（网景公司）开发的一种脚本语言
2.Netscape公司将其命名为LiveScript，改语言面向对象、无需编译、可由浏览器直接解释运行
3.Netscape公司见LiveScript大有发展前途，而SUN公司( java)也觉得可以 利用Livescript为Java的普及做铺垫，于是两家签订协议，将LiveScript改为JavaScript.
（二）作用
JavaScript,直译式脚本语言，用来为网页添加动态功能，通过嵌入HTML来实现自身功能
脚本语言：不需要编译，直接通过解释器运行，自上而下，逐行运行
1.响应客户端鼠标和键盘事件
2.页面表单数据验证(空值判断)
3.改变页面标签样式
（三）与html、css关系
与css都是围绕html展开的，目的就是增强网页与用户交互
html 控制主结构
JavaScript控制行为（网页动态效果）
css 控制标签样式
二、基本语法 函数
引入
变量 数据类型 运算符 流程控制 循环 函数 对象 事件
javascript写在一组< script >标签中，可置于head标签或者body标签中，一般放在head标签中，同样也可以写在.js文件中，从外部导入.
<script src="js/outer.js"></script>
链接到script文件
alert("hello js");
变量 数据类型
声明变量 var关键字 变量本身没有数据类型之分 值分数据类型
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
//声明变量 var关键字 变量本身没有数据类型之分 值分数据类型
var a = 10;
var b = "jim"
//数据类型 数值型 布尔型 字符串型 undefined类型 Object类型
//字符串分"",''
var c = 1;
var d = 1.0;
var e = true;
var f = false;
// alert(typeof(e));返回数值类型
var g = 'asd'
var h = "asdf"
// string
// undefined 声明了但未初始化， 返回 undefined
var i;
alert(i);
//返回 undefined
//Object
var date = new Date();
alert(date);
</script>
</head>
<body>
</body>
</html>
（一）运算符
1.算术运算符
算数运算符 + - * / % ++ –
用法与java一致
2.赋值运算符
= += -= *= /= %=
3.比较运算符
== === != > < >= <=
4.逻辑运算符
&& || |
5.条件运算符
var result = (条件表达式)?结果1:结果2
（二）控制语句
选择结构
1.if
2.if(){}else{}
3.switch
循环结构
1.for()
2.while()
3.do/while()
4…break continue
（三）函数
1.定义函数
function: 表示函数定义的关键字
functionName:表示函数名
function name(参数1，参数2，···){
}
直接传入参数，不需要写出参数的数据类型
同样不需要指出返回值；
2.调用函数
直接使用函数名进行调用
var a = 10;
var b = 5 ;
var c = "5";
var d = "aa"
//函数
//定义函数
// function hello(){
// alert("hello")
// }
// hello();//调用函数
// function hello(name){
// alert("hello"+name);
// }
// hello("jim");
//不能重载
function Do(name,age,a){
alert(name+" "+"who is"+" "+age+" "+a);
}
Do("jim",22,"palys");
function sum(a,b){
alert(a+b);
}
var x = sum(a,b);
alert("x");
（三）全局函数
1.全局变量
作用与全局，可随时调用
2.局部变量
定义在函数内的变量，仅能在函数内进行调用
全局函数
全局函数： javascript 中已经定义好的函数，可以直接调用的函数
像alert();
pareInt(); 把数值(小数)转换为整型数值，把一个字符串的数字转换成整数类型
//以数字开头的字符串会将数字部分转换为整数类型参与运算，其他类型不可以
pareFloat();把数值(小数)转换为小数数值，把一个字符串的数字转换成小数类型，
//整形运算还是整形，参与运算时含有小数类型，则结果也是小数类型
var a = 10;
var b = "5a";
var c = 5.5;
var d = 20;
alert(a+parseInt(b));
alert(a+parseFloat(a));
typeof 判断数据类型函数
alert(typeof(a));
eval();可以将字符串直接当成脚本进行运算
var s = "2+3*9"
alert(eval(s));
三、内置对象 事件
（一）内置对象
1.字符串对象
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
/*
4种内置对象
字符串 数组 日期 Math
*/
var a = 10;
var s = "asdfghjj";// 创建一个字符串对象
// alert(s.length);
console.log(s.length);//向浏览器控制台输出日志信息，便于程序调试
console.log(s.indexOf("j"));//indexOf(指定查询字符)查找指定字符第一次出现的位置
console.log(s.charAt(2));//charAt
console.log(s.lastIndexOf("j"));//查找指定字符最后一次出现的位置
console.log(s.substring(0,4));//substring(开始位置，结束位置)前闭后开
console.log(s.substr(2,4));// substr(开始位置，截取长度),
</script>
</head>
<body>
</body>
</html>
2.数组对象
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
//数组
var a = new Array();
a[0]=1;
a[1]=1;
a[2]=1;
a[3]=1;
a[4]=1;
console.log(a);
var b = new Array(1,2,3,3,4);
console.log(b);
var c = [1,2,3,4,5];
console.log(c);
console.log(c.length);
console.log(c.join(":"));//把数组转成字符串
console.log(c.reverse());//逆序
var d = [2,1,4,12,6];
console.log(d.sort(numberSort));//与java不同，不是按照数字大小排序
// 自定义函数
function numberSort(a,b){
return a-b;
}
/*
var e = [a,b,c,d]
console.log(e);
字符串类型数组要用""包裹元素
*/
</script>
</head>
<body>
</body>
</html>
3.日期对象
与Math对象并在一起
4.Math对象
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
/*
日期对象
*/
var date = new Date();
console.log(date.getFullYear());
console.log(date.getMonth()+1);
console.log(date.getDay());
console.log(date.getDate());
console.log(date.getHours());
console.log(date.getMinutes());
console.log(date.getSeconds());
console.log(Math.PI);
</script>
</head>
<body>
</body>
</html>
（二）事件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
function fun(){
console.log("hello")
}
</script>
</head>
<body>
<!--
事件时html标签中的内容
可以操作标签产生事件
通过事件去调用指定的函数
-->
<input type="button" value="按钮" onclick="fun()" />
<div onclick="fun()">单击触发</div>
<input type="text"value="count" onfocus="fun()" onblur="fun()" onchange="fun()"/>
<div onmouseover="fun()" onmouseout="fun()">悬浮触发</div>
<!--
οnclick="fun()"; 鼠标左键单击事件
οnfοcus="fun()";输入框获取到鼠标焦点时触发
οnblur="fun()";输入框失去焦点时触发事件
οnmοuseοver="fun()";鼠标悬浮在指定标签上时触发事件
οnmοuseοut="fun()";鼠标从标签上移开时触发
οnlοad="fun()";是在网页加载完毕后触发事件
οnchange="fun()"当标签失去焦点，并且标签中的内容发生改变时触发
只要是标签就能添加
-->
</body>
</html>
四、html DOM对象
要操作，先得到
（一）对标签对象的属性进行操作
1.document.getElementById();
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
/*
Html DOM对象
Document Object Model文档 对象 模型
javaScript是一种面向对象语言，操作网页时，把网页中的么一个标签，都视为一个对象
把这一类标签对象统称dom对象
要想对网页中的标签进行操作，就需要获取到要操作的标签
要操作，先得到
document对象表示整个html网页文件，网页加载完毕后，生成document对象
*/
function oper(){
//在js中获得第一个文本框标签对象
var tobj1 = document.getElementById("text1");
//拿到第二个框
var tobj2 = document.getElementById("text2");
// 赋值
tobj2.value=tobj1.value;
tobj1.value="按钮";
tobj1.type="button"
}
function changebgcolor(color){
var bobj = document.getElementById("bid");
bobj.bgColor = color;
}
</script>
</head>
<body id="bid" bgcolor="aqua">
<input type="text" id="text1" value=""/>
<input type="text" id="text2" value="" />
<input type="button" value="按钮" onclick="oper()"/>
<input type="button" value="红色" onclick="changebgcolor('red')"/>
<input type="button" value="蓝色" onclick="changebgcolor('blue')" />
<input type="button" value="绿色" onclick="changebgcolor('green')" />
</body>
</html>
2.document.getElementByTagName(“”);
通过标签名找到 HTML 标签
3.document.getElementsByClassName(“p”);
通过类名找到 HTML 标签
4.document.getElementsByName(“name");
通过name找到 HTML 标签
<!--
通过name属性得到标签
对多选框进行操作
-->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
function checkAll(ck){
var arrs = document.getElementsByName("hobby");
for(var i=0;i<arrs.length;i++){
var val = arrs[i];
val.checked=ck;
}
}
function Fcheck(){
var arrs = document.getElementsByName("hobby");
for(var i=0;i<arrs.length;i++){
var val = arrs[i];
val.checked=!val.checked;
}
}
</script>
</head>
<body>
<div>
<input type="checkbox"name="hobby"value="敲代码1"/>敲代码1
<input type="checkbox"name="hobby"value="敲代码2"/>敲代码2
<input type="checkbox"name="hobby"value="敲代码3"/>敲代码3
<input type="checkbox"name="hobby"value="敲代码4"/>敲代码4<br/>
<input type="button" value="全选" onclick="checkAll(true)"/>
<input type="button" value="全不选" onclick="checkAll(false)"/>
<input type="button" value="反选" onclick="Fcheck()"/>
</div>
</body>
</html>
（二）对标签对象的HTML内容进行操作
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
/*
对标签体中的内容进行操作
*/
function oper(){
var div1 = document.getElementById("box1");
var div2 = document.getElementById("box2");
div2.innerHTML = div1.innerHTML;
}
// // 对css属性进行操作
// function changestyle(){
// var div1 = document.getElementById("box1");
// div1.style.backgroundColor = "#0ECF73";
// div1.style.width = "200px";
// div1.style.height = "200px";
// }
</script>
</head>
<body>
<div id="box1" onclick="changestyle()">div</div>
<div id="box2"></div>
<input type="button" value="按钮" onclick="oper()"/>
</body>
</html>
（三）对标签对象的css属性进行操作
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
/*
对标签体中的内容进行操作
*/
function oper(){
var div1 = document.getElementById("box1");
var div2 = document.getElementById("box2");
div2.innerHTML = div1.innerHTML;
}
// // 对css属性进行操作
function changestyle(){
var div1 = document.getElementById("box1");
div1.style.backgroundColor = "#0ECF73";
div1.style.width = "200px";
div1.style.height = "200px";
}
</script>
</head>
<body>
<div id="box1" onclick="changestyle()">div</div>
<div id="box2"></div>
<input type="button" value="按钮" onclick="oper()"/>
</body>
</html>
（四）补充
1.div隐藏标签
1.高度或者宽度为零；
2.display = none;
2.下拉框标签触发
//在select标签上加触发
// οnchange="fun()"
<select class="k" id="color" onchange="chengecolor(value)">
<option value="none" selected disabled hidden>颜色</option>
<option value="red">红色</option>
<option value="green">绿色</option>
</select>
3.图片加载问题
<img src="../img/1.jpg">// 可以在上级文件中调
<img src="img/1.jpg"> // 同级文件
document.getElementByid("img").src="..img/1.jpg";
// 图片切换实际上就是改变img的src属性
4.验证表单问题
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
function checkForm(){
var user = document.getElementById("usernameId");
if(user.value.length==0){
alert("请输入用户名");
return false;
}
if(user.value.length>0&&user.value.length<6||user.length>10){
alert("用户名输入有误");
return false;
}
var pass = document.getElementById("passwordId");
if(pass.value.length==0){
alert("请输入密码");
return false;
}
if(pass.value.length<6||pass.length>10){
alert("密码输入有误");
return false;
}
return true;
}
</script>
</head>
<body>
<form action="sever.html" method="get" onsubmit="return checkForm()">
用户名<input type="text" id="usernameId" /><br />
密 码<input type="password" id="passwordId" /><br />
<input type="submit"/>
</form>
</body>
</html>
=========================== sever.html ============================
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
提交成功
</body>
</html>
五、计时
（一）setTimeout(“函数”,”时间”)未来的某时执行代码
计时器
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
var t;
function startTime(){
//t = setTimeout("oper()",3000);//指定时间后执行一次
t = setInterval("oper()",3000);//每隔指定时间执行一次
//alert(t);
}
function endTime(){
//clearTimeout(t);//清除setTimeout;
clearInterval(t);//清除setInterval
}
function oper(){
alert();
console.log("开始");
}
</script>
</head>
<body>
<input type="button" value="开始" onclick="startTime()"/>
<input type="button" value="结束" onclick="endTime()"/>
</body>
</html>
（二）clearTimeout()取消setTimeout()
（三）setInterval(“函数”,”时间”)每隔指定时间重复调用
（四）clearInterval()取消setInterval()
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
var t;
function startTime(){
//t = setTimeout("oper()",3000);//指定时间后执行一次
t = setInterval("oper()",3000);//每隔指定时间执行一次
//alert(t);
}
function endTime(){
//clearTimeout(t);//清除setTimeout;
clearInterval(t);//清除setInterval
}
function oper(){
alert();
console.log("开始");
}
</script>
</head>
<body>
<input type="button" value="开始" onclick="startTime()"/>
<input type="button" value="结束" onclick="endTime()"/>
</body>
</html>
扫一扫
4173
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
