目录
JavaScript概述
javaScript是美国网景公司(Netscape)开发的一种脚本语言,原名liveScript,后来Sun公司改名为JavaScript.
JavaScript不需要编译,由浏览器直接解释运行,写在网页中,简称js
JavaScript是一种直译式脚本语言,是嵌入在网页中,为网页添加各种动态效果(效果动态,数据动态).
作用：
1.响应客户端鼠标和键盘事件
2.客户端页面表单数据验证
3.使用JavaScript动态的改变页面标签的样式
JavaScript与html,css之间的关系:
html是网页的骨架(结构)
css是网页的外观(样式)
JavaScript是解释下语言(行为)
基本语法
JavaScript脚本写在script标签内(写JavaScript代码)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
p{color: aquamarine;}
</style>
<!-- 导入外部的js代码 -->
<script src="js/outer.js" type="text/javascript" charset="utf-8"></script>
<!-- 此标签内写JavaScript代码 -->
<script type="text/javascript">
//变量 数据类型 运算符 流程控制 循环 函数 对象 时间
alert("你好,js!");
</script>
</head>
<body>
</body>
</html>
alert("hello,js!");声明变量使用关键字var
eg:var name;
声明变量的同时对其赋值
var a=10;
JavaScript支持的类型
1.数值类型:整数,浮点数
2.布尔类型
3.字符串类型
4.undefined类型
5.Object对象类型
<script type="text/javascript">
//声明变量 使用var关键字
var a=10;
a="Any";
var b=20;
//数据类型
//1.数值类型 整数 浮点数 number
var c=10;
var d=10.5;
//2.布尔类型
var tr= true;
var fa= false;
//3.字符串 使用单引号 或 双引号表示
var d='abcd';
var s="abcd";
//4.undefined类型 变量没有赋值 值不明确
var e;
//alert(e);
//5.Object对象类型
var date=new Date();
alert(date.getFullYear());
alert(date.getMonth()+1);
alert(date.getDay());
</script>运算符
算数运算符
+ - * / % ++ --
+数值+数值=数值 加法运算
+数值+字符串 字符串+字符串=字符串 连接符
赋值运算
<script type="text/javascript">
/*
运算符
算数运算符
+ - * / % ++ --
+数值+数值=数值 加法运算
+数值+字符串 字符串+字符串=字符串 连接符
*/
var a = 10;
var b = 5;
var c = "5";
var d = "aa";
//alert(a+b);//15
//alert(a+c);//105
//alert(a-c);//5 数值-字符串数字(隐式的数据类型转换)
//alert(a-d);//NaN(not a number)
//alert(a*c);//50
//a+=d;//a=a+d
//alert(a);//10aa
//alert(b==c);//true 比较值是否相等
//alert(b===c);//false 比较的值 和数据类型是否相等 全等
alert(a>c);//true
</script>条件运算符
var result = (条件表达式)?结果1:结果2
控制语句:和Java相似
选择结构
1.单一选择结构（if）
2.二路选择结构（if/else）
3.多路选择结构（switch）
循环结构
1.由计数器控制的循环（for）
2.在循环的开头测试表达式（while）
3.在循环的末尾测试表达式（do/while）
4.break continue
函数
基本语法:
function functionName([arguments]){
javascript statements
[return expression]
}
1.有参数的函数,函数不需要被定义类型
2.有返回值,不需要定义返回值类型
3.实参可以传入任意类型
<script type="text/javascript">
/* function fun(){
alert("hello!");//不输出,只是定义了函数
}
fun();//调用函数才能进行输出
*/
//有参数的函数
//声明变量name,变量本身没有类型
/* function fun(name,a,b){
alert("hello!"+name+":"+a+":"+b);
}
fun("Jane",10,true);
fun("Janery");
fun(100);
*/
//有返回值的函数
function sum(a,b){
return a+b;
}
//var s=sum("10","5");//105
var s=sum(10,5);//15
alert(s);//10+5=15
</script>全局函数
全局函数:JavaScript 中已经定义好的,可以直接拿来调用的函数
alert();
parseInt();把数值(小数)转为整数数值,把一个字符串的数字转为数值类型,字符串不能以非数字开头
parseFloat();把数值(小数)转为小数数值,把一个字符串的数字转为数值类型,如果有小数,保留小数部分
typeof();返回arg值的数据类型
eval();可运算某个字符串
<script type="text/javascript">
var a=10;
var b=10.5; //var b=10.5a 15 var b="a10.5" no
var c="5.5";
// alert(a+parseInt(b));//20
// alert(a+parseInt(c));//本来:15.5 实际:15
// alert(a+parseFloat(b));//20.5
// alert(a+parseFloat(c));//15.5
// alert(typeof(a));//number
// alert(typeof(b));//number
// var s="3+5";
// alert(eval(s));//8
// var s="3+5*9-6";
// alert(eval(s));//42
var s="alert(a)";
eval(s);//10
</script>内置对象 事件
4种内置对象
字符串,数组,日期,math
属性
length:返回该字符串的长度
方法
charAt(n)：返回该字符串位于第n位的单个字符.
indexOf(char)：返回指定char首次出现的位置.
lastIndexOf(char) ：跟 indexOf() 相似，不过是从后边开始找.
substring(start,end) ：返回原字符串的子字符串，该字符串是原字符串从start位
置到end位置的前一位置的一段.
substr(start,length) ：返回原字符串的子字符串，该字符串是原字符串从start位
置开始，长度为length的一段.
split(分隔符字符) ：返回一个数组，该数组是从字符串对象中分离开来的，<分隔
符字符>决定了分离的地方，它本身不会包含在所返回的数组中。
var s="abcefgh";//创建一个字符串对象
var a=10;
console.log(s.length);//向浏览器的控制台输出日志信息,方便调试代码
// alert(s.length);
console.log(s.charAt(0));
console.log(s.indexOf("c"));
console.log(s.lastindexOf("c"));
console.log(s.substing(0,5));
console.log(s.substr(2,5));
console.log(s.split)数组定义方法
属性
length:数组的长度,元素个数
方法
join(<分隔符>) ：返回一个字符串，该字符串把数组中的各个元素串起来，用<分隔
符>置于元素与元素之间。
reverse() 使数组中的元素顺序反过来。如果对数组[1, 2, 3]使用这个方法，它将使数
组变成：[3, 2, 1]。
sort() ：使数组中的元素按照一定的顺序排列。如果不指定<方法函数>，则按字母顺
序排列。
对数字排序需要调用排序函数。
function sortNumber(a,b){
return a - b;
}
<script type="text/javascript">
//方法1
/* var a=new Array();
a[0]=0;
a[1]=1;
a[2]=2;
a[3]=3;
console .log(a);
*/
//方法2
/*var a=[1,2,3,4,5];
console.log(a);
*/
//方法3
/*var a=new Array(1,2,3,4,5);
console.log(a);
*/
/* var a=[1,2,3,4,5];
console.log(a.length);
console.log(a.join(":"));//把数组转为一个字符串
console.log(a.reverse());//倒序排列
*/
/* var a=["b","a","d","c"];
console.log(a.sort());//按照顺序排列
*/
var a=[3,5,4,15];
console.log(a.sort(numberSort));//排序不是按照数字大小排序
//自定义排序的规则函数
function numberSort(a,b){
return a-b;
}
</script>内置对象-date
var date=new Date();
console.log(date.getFullYear());
console.log(date.getMonth()+1);
console.log(date.getDate());
console.log(date.getDay());
console.log(date.getHours());
console.log(date.getMinutes());
console.log(date.getSeconds());内置对象-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 中的最小值
console.log(Math.PI);
console.log(Math.floor(8.888888));
console.log(Math.random());
console.log(Math.abs(5));
console.log(Math.pow(3,6));
console.log(Math.ceil(5));
console.log(Math.round(8));
console.log(Math.max(1,5));
console.log(Math.min(1,5));事件
<script type="text/javascript">
function fun(){
console.log("abcdefghijklmnopqrstuvwxyz");
}
// fun();
</script>
</head>
<body onload="fun()">
<!--
事件属于html标签中的内容
可以操作标签产生事件,通过事件去调用指定的函数
onclick="fun()" 鼠标左键单击事件
onfocus="fun()" 输入框获取焦点时触发 聚焦事件
onblur="fun()" 输入框失去焦点时触发 失焦事件
onmouseover="fun()" 鼠标移到标签上时触发 悬浮事件
onmouseout="fun()" 鼠标离开标签时触发
onload="fun()" 网页内容加载完毕后触发
onchange="fun()"标签失焦时且内容发生改变时触发
-->
<input type="button" value="按钮" onclick="fun()" />
<div onclick="fun()">单击</div>
<input type="text" onfocus="fun()" /><br/>
<input type="text" onblur="fun()" /><br/>
<input type="button" value="按钮" onmouseover="fun()" /><br>
<input type="button" value="按钮" onmouseout="fun()" /><br>
<input type="text" onchange="fun()"/><br>
</body>html DOM对象
html dom对象?
Document Object Model 文档,对象,模型
JavaScript是一种面向对象的语言,操作网页时,把网页中的每一个标签都视为一个对象
把这一类标签对象统称为dom对象
那么JavaScript要想对网页中标签进行操作,那么就需要获取到要操作的标签
要操作,先得到. 通过html dom，可用javaScript操作html文档的所有标签.
四种方法查找元素
1.通过 id 找到 HTML 标签
document.getElementById(“id");
function oper(){
//在js中获得第一个文本框标签对象
var tobj1=document.getElementById("txt1");
var tobj2=document.getElementById("txt2");
tobj2.value=tobj1.value;//把1的值赋给2
tobj1.value="按钮";
tobj1.type="button";
}
function changeBgColor(color){
var bobj=document.getElementById("bid");
bobj.bgColor=color;
}
</script>
</head>
<body bgcolor="azure" id="bid">
<input type="text" id="txt1" value=""/>
<input type="text" id="txt2"/>
<input type="button" value="操作" onclick="oper()"/>
<input type="button" value="粉色" onclick="changeBgColor('pink')" />
<input type="button" value="蓝色" onclick="changeBgColor('skyblue')"/>
<input type="button" value="绿色" onclick="changeBgColor('green')"/>
</body>document对象表示我们整个html网页文件,网页加载完毕后,生成document对象
document.getElementById();根据标签的id获取唯一的一个标签对象
拿到标签对象后,对标签的属性进行操作
1.对标签的属性进行操作
2.对标签体中的内容进行操作
3.对标签的css属性进行操作
function oper(){
//在js中获得第一个文本框标签对象
/* var divobj1=document.getElementById("box1");
var divobj2=document.getElementById("box2");
divobj2.innerHTML=divobj1.innerHTML;
*/
var divobj1=document.getElementById("box1");
divobj1.style.backgroundColor="#7FFFD4";
divobj1.style.width="100px";
divobj1.style.height="50px";
} 2.通过标签名找到 HTML 标签
document.getElementsByTagName("p");
3.通过类名找到 HTML 标签
document.getElementsByClassName("p");
4.通过name找到 HTML 标签
document.getElementsByName(“name");
<script type="text/javascript">
function checkAll(ck){
//var objs =document.getElementsByTagName("address");//通过标签名获取到多个标签集合
//var objs =document.getElementsByTagName("input");//通过name属性获取到多个标签集合
//var objs =document.getElementsByTagName("c1");//通过class属性名获取到多个标签集合
var objs = document.getElementsByName("address");
for(var i=0;i<objs.length;i++){
var obj=objs[i];
obj.checked=ck;
}
//console.log(objs);}
function checkAll1(){
var objs = document.getElementsByName("address");
for(var i=0;i<objs.length;i++){
var objs=objs[i];
objs.checked=!(objs.checked);
}
//console.log(objs);
}
</script>
</head>
<body>
<input type="checkbox" name="address" value="地址1" class="c1"/>上海
<input type="checkbox" name="address" value="地址2" class="c1"/>北京
<input type="checkbox" name="address" value="地址3" />广州
<input type="checkbox" name="address" value="地址4" />重庆 <br/>
<input type="button" value="全选" onclick="checkAll(true)"/>
<input type="button" value="全不选" onclick="checkAll(false)"/>
<input type="button" value="反选" onclick="checkAll(true)"/>
</body>计时
方法:
setTimeout(“函数”,”时间”)未来的某时执行代码
clearTimeout()取消setTimeout()
setInterval(“函数”,”时间”)每隔指定时间重复调用
clearInterval()取消setInterval()
<script type="text/javascript">
function startTime(){
t=setTimeout("oper()",5000);
t=setInterval("oper()",3000);
}
function oper(){
alert();
}
function stopTime(){
clearTimeout(t);//停止计时器
clearInterval(t);//停止计时器
}
</script>
</head>
<body>
<input type="button" name="" id="" value="开始" onclick="startTime()" />
<input type="button" name="" id="" value="停止" onclick="stopTime()"/>
</body>
1228
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
