HTML只是干巴巴的页面，而CSS是修饰页面以致于页面美观。今天要讲的javaScript就相当于要给HTML页面赋予“灵魂”一样的东西。
javaScript历史
● JavaScript是由Netscape公司（美国网景公司是一个做浏览器的公司）开发的一种脚本语言。
● Netscape公司将这种脚本语言命名为LiveScript，与java一样,也是面向对 象的语言,而且无需编译，可由浏览器直接解释运行。
● Netscape公司见LiveScript大有发展前途，而SUN公司( java)也觉得可以 利用Livescript为Java的普及做铺垫，于是两家签订协议，将LiveScript改 为JavaScript。
（java是sun(美国斯坦福大学校办公司) ）
javaScript概述
JavaScript一种直译式脚本语言，用来为网页添加各式各样的动态功能 （javaScript可以操作网页内容），不需要编译可直接通过浏览器解释运 行，通常JavaScript脚本是通过嵌入在HTML中来实现自身的功能的。
脚本语言: 不需要编译(sql,html,css,js,python),由某种特定的引擎(数据库,浏览器)解释执行
javaScript一般简称为js
作用：
1.响应鼠标和键盘事件
2.客户端表单验证 表单就是有各种输入选择组件,可以让用户输入信息,最终将数据库提交到后端凡是有输入的地方,都会有表单验证
3.动态操作网页内容
而我们所学习的java是高级语言,需要 编译,运行在java虚拟机中 后端语言。
JavaScript与html,css关系
JavaScript是一种基于对象和事件驱动并具有安全性的解释性语言，其目的 就是增 强Web客户交互。弥补了HTML的缺陷。
html是网页的骨架(内容)， csss是网页的外观(皮肤)，javaScript是网页的行为(动作)
javaScript基本语法
那么脚本应该写在哪里？
javaScript脚本写在一组<script>标签里，此标签可以放在head中或body中，一般习惯放在 head中，还可以将脚本写在外部的.js文件中，在html页面中导入外部的.js文件。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<!-- 在html中导入外部的js文件 -->
<script src="js/index.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
/* 此标签内写javaScript代码 */
alert("你好 js");
</script>
</head>
<body>
</body>
</html>
变量
声明变量用var关键字
例如 var name;
声明变量的同时对其赋值
例如 var test=“THIS IS A BOOK”
java是一种强数据类型语言,对数据类型要求高 数据类型 int 变量名 = 10
javaScrit是一种弱类型语言
<script type="text/javascript">
var a = 10;
var b = "abc";
b = 20;
b = true;
alert(b);
</script>
JavaScript支持的数据类型
虽然javaScript声明时,不需要数据类型,但是他的值,仍然是由类型的.
因为数据也会参与运算
1、数值型(number)： 其中包括整型数和浮点型数。
2、布尔型(boolean)： 即逻辑值，true或flase。
3、字符串型： 由单个或多个文本字符组成。字符串是用单引号或双引号来说明的。 （使用单引号来输入包含引号的字符串。）
4: undefined类型
5: Object类型
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
/*
1.数值型 number 整数和浮点都是数值型
*/
var a = 10;
var b = 10.5;
/*
2.布尔型 boolean true false
*/
var c = true;
var d = a>b;
/*
3.字符串
"" '' sql 双引号和单引号都表示字符串
*/
var e = "abc";
var f = 'abc';
/*
4.undefined类型 变量没有赋值,值不明确
*/
var g;
//alert(g==""||g==null||g==undefined);
/*
5.Object 对象类型 javaScript是一种面向对象的语言,但是对于我们而言,把他理解为一个半面向对象,半面向过程的语言
*/
var date = new Date();
alert(date.getFullYear());
alert(date.getMonth()+1);
</script>
</head>
<body>
</body>
</html>算术运算符
+可以进行“加法”与“连接”运算，如果2个运算符中的一个是 字符串，javascript就将另一个转换成字符串，然后将2个运算数 连接起来。
<script type="text/javascript">
var a = 5;
var b = 10;
var c = "5";
var d = "a";
// alert(a+b);//加法运算 数值与数值操作 是加法运算
// alert(a+c);//连接
//alert(b-a);//5 减法 数值与数值 是减法运算
//alert(b-c);//5 数值与字符串的数字 此处会进行一个隐式数据类型转换
// alert(b-d);//NaN not a number 数字格式化异常 视图将字符串转为数字,没有转换成功
//alert(b*c);
b+=c;
alert(b);
</script>比较运算符
<script type="text/javascript">
// =赋值 ==比较内容是否相等 ===(全等 类型和内容)
var a = 5;
var b = "5";
//alert(a==b);
//alert(a===b);//比较值和内容
for(var i=0;i<10;i++){
alert(i);
}
</script>逻辑运算符
逻辑运算符用于测定变量或值之间的逻辑
函数
函数定义的基本语法： function functionName([arguments]){
javascript statements
[return expression] }
function: 表示函数定义的关键字;
functionName:表示函数名;
arguments:表示传递给函数的参数列表，各个参数之间用逗号隔开，可以为空;
statements: 表示实现函数功能的函数体;
return expression:表示函数将返回expression的值，同样是可选的的语句。
有参数的函数,参数不需要定义类型
function test(a,b,c){
alert(a+":"+b+":"+c);
} 有返回值,不需要定义返回值类型
function test(a,b){
//.....
return a+b;
}实参可以传入任意类型
var c = test(10,"5");
alert(c);全局函数
全局函数(内置函数): 就是js函数库中已经内置好的,在安装浏览器时,已经安装好了,只需要调用即可。
alert(); 弹出浮窗
parseInt() 可以把浮点转为整数,可以把数字字符串转为整数,如果其中包含字母,只能转换到字母前,以字母开头直接返回NaN
parseFloat() 同上
typeof(值) 返回值的数据类型
eval(字符串) 把字符串当做js脚本执行
String字符串
属性
length 用法：返回该字符串的长度.
方法
charAt(n)：返回该字符串位于第n位的单个字符.
indexOf(char)：返回指定char首次出现的位置.
lastIndexOf(char) ：跟 indexOf() 相似，不过是从后边开始找.
substring(start,end) ：返回原字符串的子字符串，该字符串是原字符串从start位 置到end位置的前一位置的一段.
substr(start,length) ：返回原字符串的子字符串，该字符串是原字符串从start位 置开始，长度为length的一段.
split(分隔符字符) ：返回一个数组，该数组是从字符串对象中分离开来的，决定了分离的地方，它本身不会包含在所返回的数组中。 例如：'1&2&345&678'.split('&')返回数组：1,2,345,678。
Array数组
数组的定义方法：
var <数组名> = new Array();
这样就定义了一个空数组。以后要添加数组元素，就用：<数组名> [下标] = 值;
如果想在定义数组的时候直接初始化数据，请用： var <数组名> = new Array(<元素>, <元素>, <元素>...);
还可以 var <数组名> = [<元素>, <元素>, <元素>...];
属性
length ：数组的长度，即数组里有多少个元素。
方法
join() ：返回一个字符串，该字符串把数组中的各个元素串起来，用置于元素与元素之间。
reverse() 使数组中的元素顺序反过来。如果对数组[1, 2, 3]使用这个方法，它将使数 组变成：[3, 2, 1]。
sort() ：使数组中的元素按照一定的顺序排列。如果不指定，则按字母顺 序排列。
对数字排序需要调用排序函数。function sortNumber(a,b){ return a - b; }
var array = [2,1,3,12,4];
var array1 = ["b","c","a","d"]; //97 98 99 100
array1.sort();
alert(array1);
array.sort(sortNumber);//将排序规则定义函数,传入到sort方法
alert(array);
//定义一个排序的函数
function sortNumber(a,b){
return a-b
}Date
new Date() 返回当日的日期和时间
getFullYear() 返回四位数字年份
getDate() 返回一个月中的某一天 (1 ~ 31)
getMonth() 返回月份 (0 ~ 11)
getDay() 返回一周中的某一天 (0 ~ 6)
getHours() 返回 Date 对象的小时 (0 ~ 23)
getMinutes() 返回 Date 对象的分钟 (0 ~ 59)
getSeconds() 返回 Date 对象的秒数 (0 ~ 59))
Math
属性
PI 返回π（3.1415926535...)。
方法
Math.abs(x) 绝对值计算；
Math.pow(x,y) 数的幂；x的y次幂
Math.sqrt(x) 计算平方根；
Math.ceil(x) 对一个数进行上舍入
Math.floor(x) 对一个数进行下舍入。
Math.round(x) 把一个数四舍五入为最接近的整数
Math.random() 返回 0 ~ 1 之间的随机数
Math.max(x,y) 返回 x 和 y 中的最大值
Math.min(x,y) 返回 x 和 y 中的最小值
事件
事件: html中的标签拥有事件,通过事件可以驱动javaScipt函数,从而产生一个动态效果
onclick()鼠标点击标签时；
onblur()标签失去焦点;
onfocus()标签获得焦点时触发;
onmouseover()鼠标被移到某标签之上;
onmouseout鼠标从某标签移开;
onload()是在网页加载完毕后触发相应的的事件处理程序;
onchange()是指当前标签失去焦点并且标签的内容发生改变时触发事件处理程序。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
function test(){
console.log(1);//向浏览器控制台输出内容
}
//test();
</script>
</head>
<body onload="test()" >
<input type="text" onchange="test()" />
</body>
</html>Html DOM
DOM是Document Object Model文档对象（网页中的标签）模型的 缩写.
从js的角度,认为网页中的每一个标签就是一个独立的对象,这一类对象,被称为dom对象.。这样就可以，以面向对象的思想来操作网页内容
那么在js中如何获取网页中的标签?
在js中,一旦网页被加载到浏览器中,会生成一个document对象,此对象表示整个html。
要操作,先获得可以使用document对象,获取网页中的标签.
document.getElementById(""); 通过标签中的id属性获取到标签 一对一
获得到标签之后,你可以对标签进行以下操作:
1.对标签属性进行操作(标签中支持的属性),包含获取属性值,给属性赋值
2.对标签体内容进行操作
3.对标签的样式进行操作
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
function test(){
//在js中获取到文本框中的值,如何获取?
var tobj1 = document.getElementById("t1");
console.log(tobj1.value);
console.log(tobj1.type);
var tobj2 = document.getElementById("t2");//获得第二个文本框对象
tobj2.value = tobj1.value;
tobj1.value="";
tobj1.type = "radio";
tobj1.disabled = "disabled";
}
</script>
</head>
<body>
<!--
标签中id唯一的,name可重复的,class,style这些属性每个标签都拥有,值可以自定义
-->
<input type="text" id="t1" value=""/>
<input type="text" id="t2" value=""/>
<input type="button" value="测试" onclick="test()" />
<div>wwwww</div>
<p>ssss</p>
</body>
</html>改变 HTML
Html dom允许javaScript 改变html标签的内容。
改变 HTML 标签的属性
document.getElementById(“username").value=“new value"; document.getElementById("image").src=“new.jpg";
• 修改 HTML 内容的最简单的方法时使用 innerHTML 属性 document.getElementById(“div”).innerHTML=new HTML
function test(){
var pobj = document.getElementById("p1");
//alert(pobj.innerHTML);获取到标签体中的内容,包含子标签
var divobj = document.getElementById("div1");
divobj.innerHTML = pobj.innerHTML;
}
</script>
</head>
<body>
<p id="p1">
<b>这是段落</b>
</p>
<div id="div1">
</div>
<input type="button" value="测试" onclick="test()" />
</body>改变 CSS
html dom允许 javaScript改变html标签的样式。
语法：
document.getElementById("id").style.property=new style; 例： document.getElementById("p2").style.backgroundImage="url(bg.jpg)";
function test(){
var divobj = document.getElementById("div1");
divobj.style.width = "100px";
divobj.style.height = "100px";
divobj.style.backgroundColor = "red";
}
</script>
</head>
<body>
<div id="div1">
</div>
<input type="button" value="测试" onclick="test()" />
</body>
计时
通过使用 JavaScript，我们有能力做到在一个设定的时间间隔之后来执 行代码，而不是在函数被调用后立即执行。我们称之为计时事件。
方法:
setTimeout(“函数”,”时间”)未来的某时执行代码
clearTimeout()取消setTimeout()
setInterval(“函数”,”时间”)每隔指定时间重复调用
clearInterval()取消setInterval()
<script type="text/javascript">
function test(){
alert("aaaa");
}
//把test函数调用,交给了setTimeOut这个定时器,让他在延迟指定的时间后调用指定函数
//var t = setTimeout("test()",5000);//在5秒后调用test(),返回一个定时器编号
var t;//函数外面定义的变量就是全局变量,在函数中都可以获取
function startTime(){
t = setInterval("test()",2000);//不间断的调用函数
}
//中间有可能去掉定时
function stopTime(){
//clearTimeout(t);//关闭定时器
clearInterval(t);
}
</script>
</head>
<body>
<input type="button" value="开始" onclick="startTime()" />
<input type="button" value="关闭" onclick="stopTime()" />
</body>
781
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
