JavaScript基础
1.JavaScript:
是一种基于对象和事件驱动的脚本语言.
后缀名: .js,JavaScript也是边解释边执行的语言.
2.JavaScript的作用:
2.1:表单验证,增加网站安全.
2.2:动态特效,提高用户体验度.
2.3:驱动事件的执行,增强用户交互性.
3.JavaScript的组成:
ECMAScript(js的基础语法),
DOM(文档对象模型),
BOM(浏览器对象模型).
4.JavaScript是一种弱类型语言.
5.页面引入JavaScript的方式
5.1:行内JavaScript:只能在标签中使用.
eg:<!--行内js-->
<h1 onclick="javascript:alert('下周马上可以学后端');">java开发人员学JS的目标 </h1>5.2:内部JavaScript:可以在html里面任何地方使用.
eg:<!--内部js-->
<script type="text/javascript">
alert("这是一个内部js");
</script>5.3:外部JavaScript:先写外部js文件,再在html页面中引入
eg:<!--引入外部的js-->
<script type="text/javascript" src="js/1.js"></script>6.JavaScript的输出方式:
//第一种弹出窗体输出
alert("Hello JavaScript");
//第二种在body中输出
document.write("Hello china");
//第三种在控制台输出
console.log("Hello World");7.JavaScript的变量
7.1:声明变量: var 变量名;
7.2:给变量赋值: 变量名=值;
7.3:声明变量的同时赋值: var 变量名=值;
eg://声明变量
var weight;
var name;
//给变量赋值
name="八戒";
//给变量声明同时赋值
var age=18;
var isGF=false;
var sex="男";
var height=1.80;
//在js中声明变量也可以用var (不推荐)
address="千锋";
document.write(weight+"<br/>");
document.write(name+"<br/>");
document.write(age+"<br/>");
document.write(isGF+"<br/>");
document.write(sex+"<br/>");
document.write(height+"<br/>");
document.write(address+"<br/>");8.JavaScript的数据类型:
number,string,boolean,object,undefined,function
注意:
在javaScript中如果变量省略 value 参数，或者设置为 0、-0、null、""、 false、undefined 或 NaN，则该对象设置为 false.
eg:var a=0;
if (a) {
document.write("a的值为true");
}else{
document.write("a的值为false");
}8.1:获得变量的数据类型: typeof(变量)
8.2:获得变量的数据类型: typeof 变量
eg://判断变量的数据类型
document.write(typeof(weight)+"<br/>");
document.write(typeof name+"<br/>");
document.write(typeof(age)+"<br/>");
document.write(typeof(isGF)+"<br/>");
document.write(typeof(sex)+"<br/>");
document.write(typeof(height)+"<br/>");
document.write(typeof(address)+"<br/>");9.javaScript中运算符(算术运算符,关系运算符,赋值运算符,逻辑运算符)与java中用法是一样的.
注意:
==比较是变量的值,与数据类型无关;
===比较是变量的值和数据类型
eg:var num1="11";
var num2=11;
var num3=11;
//==比较是变量的值,与数据类型无关
//在javaScript中所有变量都可以用==比值.
document.write(num1==num2);//true
document.write("<br/>")
document.write(num2==num3);//true
document.write("<br/>")
//===比较是变量的值和数据类型
document.write(num1===num2);//false
document.write("<br/>")
document.write(num2===num3);//true
document.write("<br/>")10.JavaScript的数组:像java中数据和集合综合体.
10.1:数组的声明:
eg://第一种声明数组
var arr1=["苹果","菠萝","山竹"];
//第二种声明数组
var arr2=new Array();
//给数组每个空间赋值
arr2[0]="看直播";
arr2[1]="吃饭";
arr2[2]="睡觉";
//第三种声明数组
var arr3=new Array(2);
//给数组每个空间赋值
arr3[0]="lol";
arr3[1]="吃鸡";
arr3[2]="修仙";
//第四种声明数组
var arr4=new Array("火锅","烤肉","泡馍");10.2:向数组中添加值
eg://第一种:向数组中添加值
arr4[3]="烧烤"
//第二种:向数组末尾添加元素
arr4.push("啤酒","小龙虾");
//第三种:向数组开头添加元素
arr4.unshift("猪脚饭");10.3:修改数组中值
eg://第一种:修改数组中元素
arr4[0]="白切鸡";
//第二种:修改数组中元素,第一个参数要删除元素起始索引,
//第二个参数要删除的元素个数,后面参数就是添加到删除位置的元素
arr4.splice(1,2,"烤竹鼠","榨菜");10.4:删除数组中值
eg://第一种:删除数组中指定索引的元素的值,位置还在
arr4[0]=undefined;
//第二种:删除数组中最后一个元素.
arr4.pop();
//第三种:删除数组中第一个元素
arr4.shift();
//第四种:删除数组中指定索引处,指定个数的元素,第一个参数要删除元素的起始索引,第二个参数要删除的元素个数
arr4.splice(1,2);
//第五种:删除指定元素的值,位置还留着
delete arr4[0];
//第六种:删除数组中所有元素
arr4.length=0;10.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
11.1:JavaScript中,for-in遍历数组,遍历的是数组索引;for-in遍历对象,
遍历的是对象的属性
/*//声明一个数组
var arr1=["耳朵到","眼到","心到"];
//for-in遍历数组,遍历的是数组索引
for(var i in arr1){
document.write(i+"\t"+arr1[i]+"<br/>");
}*/
//for-in遍历对象,遍历的是对象的属性
var ob={"name":"张三","age":18};
for(var i in ob){
document.write(i+"<br/>");
}12.函数:相当于java中方法.
12.1:自定义普通函数:function 函数名(参数1,参数2…){
[return 返回结果;]
}
eg://第一种:声明无参无返回值的方法
function show1(){
alert("这是一个无参无返回值的方法");
}
//第二种:声明有参无返回值的方法
function show2(a,b){
alert("这是一个有参无返回值的方法,方法的参数为:"+a+","+b);
}
//第三种:声明无参有返回值的方法
function show3(){
var word="这是一个无参有返回值的方法";
return word;
}
//第四种:声明有参有返回值的方法
function show4(a,b){
var word="这是一个有参有返回值的方法,参数为:"+a+","+b;
return word;
}12.2:自定义匿名函数:var 变量名= function(参数1,参数2…){
[return 结果;]
}
eg://第五种:声明匿名函数
var a=function(c,d){
var word="这是一个匿名函数,参数为:"+c+","+d;
return word;
}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('孙星',18)"/><br />
<input type="button" value="调用无参有返回值的方法"
onclick="alert(show3())"/><br />
<input type="button" value="调用有参有返回值的方法"
onclick="javascript:alert(show4(11,12))"/><br />
<input type="button" value="调用匿名函数"
onclick="alert(a(17,18))"/><br />12.4:系统函数:isNaN():判断变量是否是数字,不是数字就返回true,反之就返回false
eg://isNaN():判断变量是否是数字,不是数字就返回true,反之就返回false
var num1="abc";
var num2=11;
var num3="11";
document.write(isNaN(num1)+"<br/>");//true
document.write(isNaN(num2)+"<br/>");//false
//注意:isNaN()只判断变量的值,与数据类型无关
document.write(isNaN(num3)+"<br/>");//false
parseFloat():将变量转换为带小数的数字
parseInt();将变量转换为整数的数字
eg://parseFloat():将变量转换为带小数的数字
//parseInt();将变量转换为整数的数字
var num4="11";
var num5="3.14";
//将两个变量进行字符串的连接作用
document.write(num4+num5+"<br/>");
//进行数学运算
document.write(parseInt(num4)+parseFloat(num5)+"<br/>");
document.write(parseInt(num5)+"<br/>");//3
document.write(parseFloat(num4)+"<br/>");//11
eval（);可以js字符串转换js代码执行
eg://eval（);可以js字符串转换js代码执行
var ob1="{'name':'胡青松','age':18}";
document.write(typeof ob1);//string
document.write("<br/>");
var ob2=eval（"("+ob1+")");
document.write(typeof ob2);//object
document.write("<br/>");
document.write(ob2.name+","+ob2.age);
document.write("<br/>");
