您的位置：首页 > Web前端 > JavaScript

javascript--【DRP】

2015-11-06 16:10 549 查看

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>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航