1.JavaScript:是一种基于对象和事件驱动的脚本语言.后缀名:.js
- 注意:依赖于html.
2.JavaScript的作用:
2.1:进行表单验证,来实现数据校验.
2.2:实现页面特效,吸引用户
2.3:对象和事件驱动
3.JavaScript的组成
- ECMAScript(js基础),
- DOM(文档对象模型),
- BOM(浏览器对象模型).
4.JavaScript是一种弱类型语言.
- 是一种边执行边解释的语言.
5.页面引入JavaScript的方式
5.1:行内js:在标签的事件中写js代码.
eg:<!--行内javaScript-->
<input onclick="javaScript:alert('试试就试试');" type="button" value="点我试试"/>5.2:内部js:在html页面任何地方都可以用
eg:<!--内部js-->
<script type="text/javascript">
alert("这是内部js");
</script>5.3:外部js:先创建一个外部js文件,再在页面上引入.
eg:<!--引入外部js-->
<script type="text/javascript" src="js/1.js" ></script>6.JavaScript的输出方式:
eg://js的第一种输出方式
alert("这是js的第一种输出方式");
//js的第二种输出方式
document.write("1.这是js的第二种输出方式<br/>");
document.write("2.这是js的第二种输出方式");
//js的第三种输出方式
console.log("这是js的第三种输出");7.JavaScript的变量
7.1:声明变量: var 变量名;
7.2:给变量赋值: 变量名=值;
7.3:声明变量的同时赋值: var 变量名=值;
eg://声明变量
var n1;
//给变量赋值
n1=11;
n2="Hello JS";
//在声明变量的同时赋值
var n3=3.14;
var n4,n5,n6=33,n7;
document.write(n1+"<br/>");
document.write(n2+"<br/>");
document.write(n3+"<br/>");
document.write(n4+"<br/>");
document.write(n6+"<br/>");8.JavaScript的数据类型:number,string,boolean,object,undefined,function
- 注意:在javaScript中如果变量省略 value 参数，或者设置为 0、-0、null、""、false、undefined 或 NaN，则该对象判断时值为 false.
eg:var n10=null;
//在javaScript中如果变量省略 value 参数，或者设置为 0、-0、null、""、false、undefined 或 NaN，则该对象判断时值为 false.
if(n10){
document.write("true");
}else{
document.write("false");//输出
}8.1:获得变量的数据类型: typeof(变量)
8.2:获得变量的数据类型: typeof 变量
eg:document.write(typeof n1);
document.write("<br/>");
document.write(typeof(n2)+"<br/>");
document.write(typeof(n3)+"<br/>");
document.write(typeof(n6)+"<br/>");
document.write(typeof(n8)+"<br/>");
document.write(typeof(n9)+"<br/>");
document.write(typeof(n10)+"<br/>");9.javaScript中运算符(算术运算符,关系运算符,赋值运算符,逻辑运算符)与java中用法是一样.
- 注意:==只比较变量的值,与数据类型无关;===比较变量的值和数据类型
eg:var num1=11;
var num2=11;
var num3="11";
//==只比较变量的值,与数据类型无关
//===比较变量的值和数据类型
document.write(num1==num2);//true
document.write(num1==num3);//true
document.write(num1===num2);//true
document.write(num1===num3);//false10.js中对象:万物皆对象.
10.1:自定义对象:
eg://第一种:创建JavaScript的本地对象,简称json对象
var ob1={"sname":"张三","sage":"18"};
//调用对象的属性并输出
//第一种调用对象属性:对象名.属性名
//第二种调用对象属性:对象名["属性名"]
//document.write("学生姓名:"+ob1.sname+"<br/>"+"年龄:"+ob1["sage"]);
//第二种:创建Js对象
var ob2=new Object();
//用对象调用属性并赋值
ob2.tname="孙星";
ob2.tage=18;
//document.write("学生姓名:"+ob2.tname+"<br/>"+"年龄:"+ob2["tage"]);
//第三种:创建js对象
function person(pname,page){
this.pname=pname;
this.page=page;
}
var ob31=new person("任奎",22);
var ob32=new person("文翊",22);
document.write("学生姓名:"+ob31.pname+",年龄:"+ob31.page+"<br/>");
document.write("学生姓名:"+ob32.pname+",年龄:"+ob32.page+"<br/>");10.2:prototype 属性使您有能力向对象添加属性和方法。
eg://第三种:创建js对象
function person(pname,page){
this.pname=pname;
this.page=page;
}
//prototype 属性使您有能力向对象添加属性。
person.prototype.psex="男";
//prototype 属性使您有能力向对象添加方法。
person.prototype.show=function(){
document.write("***学生姓名:"+this.pname+",年龄:"+this.page+"<br/>");
}
var ob31=new person("任奎",22);
var ob32=new person("文翊",22);
document.write("学生姓名:"+ob31.pname+",年龄:"+ob31.page+",性别为:"+ob31.psex+"<br/>");
document.write("学生姓名:"+ob32.pname+",年龄:"+ob32.page+"<br/>");
//用对象调用方法
ob31.show();
ob32.show();10.3:系统对象
- Date 日期对象
- Array 数组对象
- Math 对数字作处理的对象
- string 字符串对象
- RegExp 正则表达式对象
10.3.1:正则表达式:
- 表示一定规则的字符串.
eg: /^abc$/,/^\d{3}$/10.3.2:字符串与正则表达式的匹配:
- 语法1: 正则表达式对象.test(字符串) 结果boolean
- 语法2: 字符串对象.match(正则表达式对象) 结果boolean
eg://声明手机号字符串
var s1="15112603730";
//声明正则表达式
var reg=/^1[3-9]\d{9}$/;
//验证手机号是否符合正则表达式
if (reg.test(s1)) {
alert("手机号符合要求");
} else{
alert("手机号不符合要求");
}11.JavaScript的数组:像java中数组和集合综合体.
11.1:数组的声明:
eg://第一种创建数组
var arr1=[11,22,33];
arr1[3]=55;
//第二种创建数组
var arr2=new Array();
arr2[0]="张三";
arr2[1]=true;
arr2[3]=null;
//第三种创建数组
var arr3=new Array(2);
arr3[0]="张三";
arr3[1]=true;
arr3[2]=null;
//第四种创建数组
var arr4=new Array("aa","bb","cc");11.2:向数组中添加值
eg://第一种向数组中添加元素
arr4[3]="abc";
//第二种向数组末尾添加元素
arr4.push("qq","ww");
//第三种向数组开头添加元素
arr4.unshift("uu");11.3:修改数组中值
eg://第一种修改数组中元素
arr4[0]="cc";
//第二种修改数组中元素:splice(索引,删除元素个数,要添加元素) 方法向/从数组
//中添加/删除项目，然后返回被删除的项目。
arr4.splice(1,3,"as","bs","cs");11.4:删除数组中值
eg://第一种删除数组中第一个元素
arr4.shift();
//第二种删除数组中最后一个元素
arr4.pop();
//第三种删除指定索引位置元素,位置还在
delete arr4[1];
//第四种删除所有元素
arr4.length=0;11.5:遍历数组 :
eg://遍历数组
for(var i=0;i<arr4.length;i++){
document.write(arr4[i]+"<br/>")
}11.JavaScript中选择结构和while,do-while,for与Java中用法一样.
- 注意:JavaScript中没有foreach结构,但是有for-in
- for-in遍历数组,遍历的是数组索引
- for-in遍历对象,遍历的是对象属性名
eg://for-in遍历数组,遍历的是数组索引
for(var n in arr4){
document.write(n+",值:"+arr4[n]+"<br/>")
}
//for-in遍历对象,遍历的是对象属性名
var ob1={"sname":"金航","sage":"23"};
for(var n2 in ob1){
document.write(n2+",属性值为:"+ob1[n2]+"<br/>")
}12.函数:相当于java中方法.
12.1:自定义普通函数:function 函数名(参数1,参数2…){
[return 返回结果;]
}12.2:自定义匿名函数:
var 变量名= function(参数1,参数2...){
[return 结果;]
}eg:function show1(){
alert("这是一个无参无返回值的函数");
}
function show2(a){
alert("这是一个有参无返回值的函数,参数为:"+a);
}
function show3(){
return "这是一个无参有返回值的函数";
}
function show4(a,b){
return "这是一个有参有返回值的函数参数为a="+a+",b="+b;
}
var show5=function(){
alert("这是一个匿名函数");
}12.3:函数的调用:
12.3.1:普通函数调用:函数名(实参1,实参2…);
- var 变量=函数名(实参1,实参2…);
12.3.2:匿名函数的调用: 变量名(实参1,实参2…);
eg:<input type="button" value="调用无参无返回值的函数" onclick="show1()"/><br />
<input type="button" value="调用有参无返回值的函数" onclick="show2('哈哈哈')"/><br />
<input type="button" value="调用无参有返回值的函数" onclick="alert(show3())"/><br />
<input type="button" value="调用有参有返回值的函数" onclick="alert(show4('abc',123))"/><br />
<input type="button" value="调用有匿名函数" onclick="show5()"/><br />12.4:系统函数:
- isNaN() 检查某个值是否是非数字值 NaN（或者能被转换为这样的值），返回的值就是 true。如果是数字值,则返回 false。
- parseFloat() 解析一个字符串并返回一个浮点数。
- parseInt() 解析一个字符串并返回一个整数。
- eval（) 将JavaScript 字符串作为脚本代码来执行。
eg://系统函数的使用
var n1=11;
var n2="11";
var n3="s11";
//isNaN(n1)只判断变量引号中内容(值),不包括引号
document.write(isNaN(n1)+","+isNaN(n2)+","+isNaN(n3)+"<br/>");//false,false,true
document.write(n1+n2);//1111
document.write(parseInt(n1)+parseInt(n2)+"<br/>");//22
var s1="{'sname':'aa','sage':'22'}";
document.write(typeof(s1)+"<br/>");//string
var s2=eval（"("+s1+")");
document.write(typeof(s2)+"<br/>");//object
document.write("对象的属性为:"+s2.sname+","+s2.sage);
//对象数组
var arr=[{"sname":"aa","sage":11},{"sname":"bb","sage":11}];
for(var i=0;i<arr.length;i++){
alert(arr[i].sname+","+arr[i].sage);
}总结
1.js定义
2.js的作用
3.js的组成
4.js语言特色
5.页面引入js方式
6.js输出
7.变量和数据类型
8.对象
9.数组
10.函数
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
