本文围绕JavaScript展开，介绍其历史、作用及与HTML、CSS的关系。阐述了基本语法，包括数据类型、运算符和控制语句等。还讲解了函数定义、内置对象、常用事件，如onclick、onload等，以及html DOM对象和计时方法，如setTimeout、setInterval等。
• javaScript概述
javaScript历史:
●
JavaScript是由Netscape公司（美国网景公司）开发的一种脚本语言。
●
Netscape公司将这种脚本语言命名为LiveScript，与java一样,也是面向对
象的语言,而且无需编译，可由浏览器直接解释运行。
●
Netscape公司见LiveScript大有发展前途，而SUN公司( java)也觉得可以
利用Livescript为Java的普及做铺垫，于是两家签订协议，将LiveScript改
为JavaScript。
●
JavaScript一种直译式脚本语言，用来为网页添加各式各样的动态功能
（
javaScript
可以操作网页内容），不需要编译可直接通过浏览器解释运
行，通常JavaScript脚本是通过嵌入在HTML中来实现自身的功能的。
作用：
1.响应客户端鼠标和键盘事件
2.客户端页面表单数据验证
3.使用JavaScript动态的改变页面标签的样式
JavaScript与html,css关系：
●
JavaScript
是一种基于对象和事件驱动并具有安全性的解释性语言，其目的就是增强Web客户交 互。弥补了HTML的缺陷。
• 基本语法
脚本写在哪里？
javaScript脚本写在一组<script>标签中，此标签可以放在head中或body中，一般习惯放在
head中，还可以将脚本写在外部的.js文件中，在html页面中导入外部的.js文件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<!-- <script>
// var a = "10";
function hello(){
alert("你好");
}
// 可以直接链接
</script> -->
<script src="js/out.js"></script>
</head>
<body>
<input type="button" value="打招呼" onclick="hello()"/>
</body>
</html>
●
声明变量用
var
关键字
例如
var name;
●
声明变量的同时对其赋值
var test=“THIS IS A BOOK”
JavaScript支持的数据类型
●
1、数值型(number)：
其中包括整型数和浮点型数。
●
2、布尔型(boolean)：
即逻辑值，true或flase。
●
3、字符串型：
由单个或多个文本字符组成。字符串是用单引号或双引号来说明的。
（使用单引号来输入包含引号的字符串。）
●
4: undefined类型
●
5: Object类型
赋值运算
比较运算符
逻辑运算符
条件运算符
JavaScript
还包含了基于某些条件对变量进行赋值的条件运算符。
语法：
var result = (
条件表达式
)?
结果
1:
结果
2
当条件成立返回
?
后的内容，否则返回
:
后的内容
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script>
// var a = 5;
// var b = 5.5;
// alert(typeof(a));
// alert(typeof(b));
// alert(a+b);
// 布尔型 true false
// var c = true;
// alert(typeof(c));
// 字符串 单引号 双引号 都可以表示字符串
var s = 'abc';
var s1 = "efg";
// alert(typeof(s));
// alert(typeof(s2));
alert(s+s1);
// 不复制的变量也可以使用
var d ;
if(d==undefined){
alert(111);
}
</script>
</head>
<body>
</body>
</html><!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script>
// 变量声明 使用的是var关键字,变量没有类型(弱类型语言)
变量的值是有类型的
var a = '10';
var c = "abc";
var b = '20';
var d = true;
alert(typeof(c));
</script>
</head>
<body>
</body>
</html><!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script>
var a = 10;
var b = 5;
var c = "5";
// alert(a+b);//数字相加
// alert(a+c);//加号拼接
// alert(a-c);//发生隐式转换
// alert(a+"c");//加号可以拼接 10c
// alert(a-"c");//NaN not a number 不是数字无法转换
// b+=c;
// alert(b);//加号拼接
// b -= c;
// alert(b);
// alert(b==c);//判断值是否相等 返回true
// alert(b===c);//判断是否全等 返回false
var s = (a<b)?"成立":"no";
alert(s);
//成立返回冒号前面的值，不成立返回冒号后边的值
</script>
</head>
<body>
</body>
</html>控制语句
第一种是选择结构
1.单一选择结构（if）
2.二路选择结构（if/else）
3.多路选择结构（switch）
第二种类型的程序控制结构是循环结构。
1.由计数器控制的循环（for）
2.在循环的开头测试表达式（while）
3.在循环的末尾测试表达式（do/while）
4.break continue
• 函数
定义函数：
函数定义的基本语法：
function functionName([arguments])
{
javascript statements
[return expression]
}
function: 表示函数定义的关键字;
functionName:表示函数名;
arguments:表示传递给函数的参数列表，各个参数之间用逗号隔开，可以为空;
statements: 表示实现函数功能的函数体;
return expression:表示函数将返回expression的值，同样是可选的的语句
。
由函数来调用：
<script
type= "text/javascript">
function fun(){
alert(“test”);
}
fun();//函数名调用
function fun2(){
fun();//在其他函数中调用
}
</script>
全局函数
•
parseInt(arg) 把括号内的内容转换成整数之后的值。如果括号内是字符串，
则字符串开头的数字部分被转换成整数，如果以字母开头，则返回
“NaN” 。
•
parseFloat(arg) 把括号内的字符串转换成浮点数之后的值，字符串开头的
数字部分被转换成浮点数，如果以字母开头，则返回“NaN” 。
•
typeof (arg)返回arg值的数据类型。
•
eval(arg) 可运算某个字符串。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script>
/*
函数声明
function 函数名(参数列表){
函数体
[return 返回值]
}
*/
/* function test(){
alert("test函数");
} */
/* function test(a,b,c){
alert("test函数"+a+":"+b+":"+c);
} */
function test(a,b){
return a+b;
}
//函数调用
//test("abc",10,true);
var c = test(10,"5");
alert(c);
</script>
</head>
<body>
</body>
</html><!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script>
//typeof(); 返回变量值的具体数据类型
//alert(typeof(new Date()));
//var a = 10.5;
//var b = parseInt(a);
//把小数转为整数
//alert(b);
var a = 10;
var b = 5;
var d = "9";
var e = "2.5";
var res1 = parseInt(d)+b;//将字符串强制转换为整数
var res2 = parseInt(d)+10;
var res3 = parseFloat(e)+a;
alert(res1);
alert(res2);
alert(res3);
// var c = "2+3+a-b";
// alert(c);//只会当作字符串进行输出
// eval(c);//把字符串当作js的脚本进行运算
// alert(eval(c));
</script>
</head>
<body>
</body>
</html>• 内置对象
内置对象-String字符串：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script>
var s = "ab:cde:fg";
console.log(s.length);
//.length .length() .size
console.log(s.substring(2,4));//开始位置到结束位置
console.log(s.substr(2,4));//开始位置，截取长度
var array = s.split(":");
console.log(array);
</script>
</head>
<body>
</body>
</html>
内置对象_Array数组-Date-Math
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script>
var array = new Array();
array[0] = 1;
array[1] = "abc";
array[2] = true;
console.log(array);
var array = new Array(1,2,"ab",false);
console.log(array);
var array = [1,2,3,4,5,6];
array[6] = 7;
console.log(array);
console.log(array.length);
var s = array.join("-");//拼接数组中的元素
console.log(s);
//逆序
console.log(array.reverse());
//var array = ["c","a","b","d"];
var array = [11,2,1,3];
//将自定义的排序函数传入到sort()函数中
array.sort(numberSort);
console.log(array);
//自定义排序的函数
function numberSort(a,b){
return b-a;
}
var date = new Date();
console.log(date.getFullYear());
console.log(date.getMonth());
console.log(date.getDay())
console.log(date.getHours())
console.log(date.getMinutes());
console.log(date.getDate());
//Math不需要new Math
console.log(Math.PI);
console.log(Math.random());
console.log(Math.max());
console.log(Math.min());
console.log(Math.round());
console.log(Math.pow());
console.log(Math.sqrt());
console.log(Math.floor());
console.log(Math.ceil());
</script>
</head>
<body>
</body>
</html>
事件
一些常用的事件:
onclick()
鼠标点击时；
onblur()
标签失去焦点;
onfocus()
标签获得焦点;
onmouseover()
鼠标被移到某标签之上;
onmouseout()
鼠标从某标签移开;
onload()
是在网页加载完毕后触发相应的的事件处理程序;
onchange()
是指当前标签失去焦点并且标签的内容发生改变时触发事件处理程序。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script>
function test(){
console.log("test()函数被调用")
}
</script>
</head>
<body>
<!--
onclink 点击事件（左键）
onblclick 双击事件
onblur 失焦事件 鼠标移开
onfocus 聚焦事件 鼠标移入
onload 网页加载完毕触发的事件
onchange 文本框内容发生改变且鼠标移动触发的事件
-->
<input type="button" value="测试按钮" onclick="test()"/>
<div onclick="test()">点击</div>
<div ondblclick="test()">双击</div>
<input type="text" onblur="test()"/>
<br />
<input type="text" onfocus="test()">
<br />
<!-- -->
<div onmouseover="test()" onmouseout="test()" style="background-color: black;">鼠标点击</div>
<input type="text" onchange="test()"/>
<select>
<option>北京</option>
<option>上海</option>
<option>广州</option>
<option>武汉</option>
<option>长沙</option>
<option>太原</option>
<option>西安option>
</select>
</body>
</html>• html DOM对象
●
DOM是Document Object Model文档对象（网页中的标签）模型的
缩写.
●
通过html dom，可用javaScript操作html文档的所有标签.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script>
// 为网页添加动态效果，本质上就是在js中对网页中标签进行提作问题:
// 1.触发shtml 标签中有各种事件，通过事件触发调用函数
// 2.在js 中如何获得网页中的标签
// 在js中认为每一个网页中的标签就是一个对象，要提作网页中的标签，就需要获得标签.通过一个document家()
// document:文档对家,表示当前的@页文档document.getElementById("id”);可以精确获得网页中莫个标签
function oper(){
var tobj1 = document.getElementById("textid1");//获取到第一个text
tobj1.value = "1234";
var tobj2 = document.getElementById("textid2");
tobj2.value = tobj1.value;
tobj1.type= "radio";
}
function changeDiv(color){
var divobj = document.getElementById("div_box");
//获取到要实行操作的参数
divobj.style.backgroundColor = color;
divobj.style.width="50px";
divobj.style.height="50px";
divobj.style.borderRadius="20px";
}
</script>
</head>
<body>
<input type="text" value="" id="textid1"/>
<input type="text" value="" id="textid2"/>
<input type="button" value="测试按钮" onclick="oper()"/>
<div id="div_box">
变色块
</div>
<input type="button" value="红色" onclick="changeDiv('red')"/>
<input type="button" value="蓝色" onclick="changeDiv('blue')"/>
<input type="button" value="黄色" onclick="changeDiv('yellow')"/>
</body>
</html><!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script>
/*
掌握了js基本语法.
js作用: 为网页添加各种动态效果(标签内容改变,标签样式)
为网页添加动态效果,本质上就是在js中对网页中标签进行操作
问题: 1.触发js html标签中有各种事件,通过事件触发调用函数.
2.在js中如何获得网页中的标签
在js中认为每一个网页中的标签就是一个对象,要操作网页中的标签,就需要获得标签.
通过一个document对象()
document:文档对象,表示当前的网页文档
document.getElementById("id");可以精确获得网页中某个标签
js中把获取到标签对象统称为 DOM对象
可以对标签中属性进行操作,
还可以对标签中的样式(css)进行操作
*/
var i = 0;//定义在函数外面 就是全局变量
function changeDiv(btnobj){
var divobj = document.getElementById("boxid");
// var btnobj = document.getElementById("btnid");
/* if(btnobj.value=='红色'){
divobj.style.backgroundColor = "red";
btnobj.value = "蓝色";
}else if(btnobj.value=='蓝色'){
divobj.style.backgroundColor = "blue";
btnobj.value = "绿色";
}else{
divobj.style.backgroundColor = "green";
btnobj.value = "红色";
} */
switch (i){
case 0:
i++;
divobj.style.backgroundColor = "red";
btnobj.value = "蓝色";
break;
case 1:
i++;
divobj.style.backgroundColor = "blue";
btnobj.value = "绿色";
break;
case 2:
i=0;
divobj.style.backgroundColor = "green";
btnobj.value = "红色";
break;
default:
break;
}
}
</script>
</head>
<body>
<div id="boxid" >
div
</div>
<input type="button" id="btnid" value="红色" onclick="changeDiv(this)"/><!-- this表示所在的标签对象 -->
</body>
</html><!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script>
/*
掌握了js基本语法.
js作用: 为网页添加各种动态效果(标签内容改变,标签样式)
为网页添加动态效果,本质上就是在js中对网页中标签进行操作
问题: 1.触发js html标签中有各种事件,通过事件触发调用函数.
2.在js中如何获得网页中的标签
在js中认为每一个网页中的标签就是一个对象,要操作网页中的标签,就需要获得标签.
通过一个document对象()
document:文档对象,表示当前的网页文档
document.getElementById("id");可以精确获得网页中某个标签
js中把获取到标签对象统称为 DOM对象
可以对标签中属性进行操作,
还可以对标签中的样式(css)进行操作
还可以操作标签体中的内容
*/
function changeDiv(){
var date = new Date();
var divobj1 = document.getElementById("boxid1");
var divobj2 = document.getElementById("boxid2");
divobj2.innerHTML = divobj1.innerHTML+ date.toLocaleString();
}
</script>
</head>
<body>
<div id="boxid1" >
<b>div</b>
</div>
<div id="boxid2" >
</div>
<input type="button" id="btnid" value="测试" onclick="changeDiv()"/>
</body>
</html><!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script>
/*
掌握了js基本语法.
js作用: 为网页添加各种动态效果(标签内容改变,标签样式)
为网页添加动态效果,本质上就是在js中对网页中标签进行操作
问题: 1.触发js html标签中有各种事件,通过事件触发调用函数.
2.在js中如何获得网页中的标签
在js中认为每一个网页中的标签就是一个对象,要操作网页中的标签,就需要获得标签.
通过一个document对象()
document:文档对象,表示当前的网页文档
document.getElementById("id");可以精确获得网页中某个标签
js中把获取到标签对象统称为 DOM对象
可以对标签中属性进行操作,
还可以对标签中的样式(css)进行操作
还可以操作标签体中的内容
*/
function test(val){
//获取到的是一个对象数组/集合
// var objs = document.getElementsByTagName("input");
//var objs = document.getElementsByClassName("d1");
var objs = document.getElementsByName("course");
//循环集合 每次拿出一个标签对象
for (var i = 0; i < objs.length; i++) {
objs[i].checked = val;
}
}
</script>
</head>
<body>
<input type="checkbox" class="d1" name="course"/>
<input type="checkbox" class="d1" name="course"/>
<input type="checkbox" name="course"/>
<input type="checkbox" name="course"/>
<input type="button" value="全选" onclick="test(true)"/>
<input type="button" value="全不选" onclick="test(false)"/>
</body>
</html>• 计时
●
通过使用
JavaScript
，我们有能力做到在一个设定的时间间隔之后来执
行代码，而不是在函数被调用后立即执行。我们称之为计时事件。
方法:
setTimeout(“函数”,”时间”)未来的某时执行代码
clearTimeout()取消setTimeout()
setInterval(“函数”,”时间”)每隔指定时间重复调用
clearInterval()取消setInterval()
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script>
function test(){
alert("你好!");
}
var t;
function startTime(){
// t = setTimeout("test()",3000); 开启一个定时器,在指定的时间后调用指定的函数,只调用一次, 开始后,会返回一个定时器的序号
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>
扫一扫
1836
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
