JavaScript定义
JavaScript是一种解释性的脚本语言，主要用来向html文档添加交互行为，可以直接嵌入html页面，让文档和行为分离，跨平台特性。
组成分成三部分：ECMAScript(European Computer Manufacturers Association)欧洲计算机制造商协会 DOM(Document Object Model)文档对象模型 BOM（Browser Object Model)浏览器对象模型
JavaScript三种存在形式
作为元素的属性：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
<input type="button" value="登录" onclick="alert('用户名非法请检查')"/>
</body>
</html>
作为文件引入：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <!--将JavaScript代码放到一个js文件中，文件位置：js/test_js.js--> <script language="javascript" src="js/test_js.js"></script> </head> <body> </body> </html>
放入Script标签中
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<script>
//将javascript放到script标签中
alert("helloword");
</script>
</head>
<body>
</body>
</html>
JavaScript基本语法
parseInt、parseFloat、eval
<script>
var v1="20";
alert(v1+20);
alert(parseInt(v1)+20);//转换成整数
var v2="3.333";
alert(v2+1);
alert(parseFloat(v2)+1);//转换成浮点数
var v3=30;
var v4=40;
var v5="var temp"+v3+"="+v4;
alert(v5);
//将V5字符串转换成JavaScript表达式
eval(v5);//var temp30=40
alert(temp30);
</script>
DOM
获取文本框中的内容
demo:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script language="javascript">
function showUserInfo(){
// alert("Hello");
alert(document.getElementById("username").value);
}
</script>
</head>
<body>
用户：<input type="text" name="username" id="username"/>
<br>
<input type="button" value="保存" onclick="showUserInfo()" />
</body>
</html>
自定义对象
实例化一个person对象
demo
<script> var person=new Object(); person.name="张三"; person.age=35; alert(person.name+","+person.age); alert(person["name"] +"," +person["age"]); </script>
demo2:
<script language="javascript">
function Person(name,age){
this.name=name;
this.age=age;
}
var p=new Person("李四",30);
alert(p.name +"," +p.age);
</script>
demo3:
<script language="javascript">
function Person(name,age){
this.name=name;
this.age=age;
}
var p=new Person("李四",30);
alert(p.name +"," +p.age);
</script>
三大结构
选择语句
if else
<script>
var v=10;
if(v==10){
alert("v=10");}
else if(v==5){
alert("v==5");}
else{
alert("其他");
}
</script>
switch
<script>
var v="school";
switch(v){
case "school" :
alert("学校123");
break;
case 5:
alert("v=5");
default:
alert("其他")
}
</script>
内置对象
String
demo:
<script language="javascript">
var s1="Helloworld";//习惯性使用方法
var s2=new String("Helloworld");
//alert(s1);
//alert(s2);
//取得第四个位置的字符 e
alert(s1.charAt(1));
//返回匹配的字符串o的索引位置 4
alert(s1.indexOf("o"));
//取得最后一个l的位置 8
alert(s1.lastIndexOf("l"));
//分隔如下字符串 a b c d e
var s3 ="a,b,c,d,e";
var s4=s3.split(",");
for (var i=0;i<s4.length;i++){
alert(s4[i]);
}
//截取rld字符串 rld
alert(s1.substring(7,s1.length));
</script>
math
demo:
<script language="javascript"> alert(Math.random()); //取得最近的整数 alert(Math.round(Math.random()*10)); //-10 alert(Math.round(-10.3)); //10 alert(Math.round(10.6)); //取绝对值 alert(Math.abs(-50)); </script>
Date
demo
<script language="javascript"> var d=new Date(); alert(d.getDay()); alert(d.getDate()); alert(d.getMonth()); alert(d.getYear()); alert(d.getHours()); alert(d.getMinutes()); alert(d.getSeconds()); alert(d.getTime()); </script>
Array
demo
<script language="javascript">
var testArray1=new Array(10);
for(var i=0;i<testArray1.length;i++){
testArray1[i]=i;
}
for (var i=0;i<testArray1.length;i++){
document.write(testArray1[i]);
}
//换行
document.write("<p>");
//倒序
testArray1.reverse();
for (var i=0;i<testArray1.length;i++){
document.write(testArray1[i]);
}
document.write("<br>");
//升序
testArray1.sort();
for(var i=0;i<testArray1.length;i++){
document.write(testArray1[i]);
}
document.write("<br>");
//元素采用#号间隔输出
var s="";
for(var i=0;i<testArray1.length;i++){
s+=testArray1[i]+"#"
}
document.write(s.substring(0,s.length-1));//#1#2#3#4#5#6#7#8#9
document.write("<br>");
document.write(testArray1.join("#"));
//通过document可以遍历文档对应的数的每一个节点
</script>
demo1:
<script>
var testArray =['a','b','c','c'];
for(var i=0;i<testArray.length;i++){
alert(testArray[i]);
}
var testArray1=[[1,2],[1,2,3]];
for(var i =0;i<testArray1.length;i++){
for(var j=0;j<testArray1[i].length;j++){
alert(testArray[i][j]);
}
}
</script>
正则表达式
通过实例化正则表达式对象来判断是否存在oo串
<script language="javascript">
var s1="fweewflewjloowenoejWEWWEGERGOOOfwelfjweojfoj";
//是否存在oo串
var re=new RegExp(/o{2}/i);
alert(re.test(s1));
</script>
通过search方法来查找是否存在oo串，replace方法将oo替换为China
<script>
var s1="abcdfdofjofjfjoooldfj";
//是否存在oo子串
alert(s1.search(/o{2}/));
//不区分大小写
alert(s1.search(/B{1}/i));
var s2="wererfdfAABBSDfsdoodjfsdofj:EEGEWoOUOU"
//不区分大小写，全局查找
var s3=s2.replace(/o{2}/ig,"China");
alert(s3);
</script>