一.JS使用语法规范
1.在html代码里边引入js语言
<script type=”text/javascript”>具体js代码</script>
<script type=”text/javascript” src=”js文件”></script>
2. 代码大小敏感
true/false
TRUE/FALSE
3.结束符号
每个简单语句使用”;”结束,与php类似
在javascript里边,该分号不是必须,但是推荐使用
4. 注释
// 单行注释
/*多行注释*/
5.变量
其值可以发生改变的量就是变量。
变量名字命名规则:
php里边:字母、数字、下划线组成,开始有$符号标志,数字不能作为开始内容
js里边:字母、数字、下划线、$符号、汉字 等5个组成部分,数字不能作为名字的开始内容。
6. 数据类型
php:int float string boolean array object null resource
javascript(6种): number(int/float) string boolean null undefined object
(数组是对象的一部分)
null类型:空对象类型;
var name = ""; //声明一个变量,后期要使用一个“字符串”进行赋值
var age = 0; //声明一个变量,后期要使用一个“数字”进行赋值
var obj = null; //声明一个变量,后期要使用一个“对象”进行赋值
undefined未定义类型
使用一个没有声明的变量
object对象类型:window document
二.数值数据类型
1.各种进制数表示
十进制: var age = 23;
八进制: var score = 023; 2*8+3=19的十进制数
十六进制: var color = 0x25; 2*16+5=37的十进制数
10:A 11:B 12:C 13:D 14:E 15:F
//console.log()是浏览器调试工具(firebug)的输出工具
//对信息的输出比较全面,例如可以输出对象的成员属性、成员方法等
//十进制数
var age = 20;
//alert(age);
//document.write(age);
console.log(age);
//八进制数
console.log(032); //3*8+2 = 26
console.log(0524); //5*8*8+2*8+4 = 340
console.log(07415); //7*8*8*8+4*8*8+1*8+5 = 3853
console.log(059); //59 保持原值
console.log(081); //81 保持原值
//十六进制
console.log(0x24); //2*16+4 = 36
console.log(0xC6); //12*16+6 = 198
console.log(0xFD5); //15*16*16+13*16+5 = 4053
2. 浮点数
//浮点数
console.log("-------------");
console.log(12.345); //12.345
console.log(0.87); //0.87
console.log(.87); //0.87
console.log(34.0); //34
//计算不准确
console.log(0.1+0.2);//0.30000000000000004
3.最大数、最小数
console.log("-------------");
//1.7976931348623157e+308 等于 1.79*10的308次方
console.log(Number.MAX_VALUE);
//5e-324 等于 5*10的-324次方(5除以10的324次方 0.000..005)
console.log(Number.MIN_VALUE);
4.无穷大的数
//无穷大的数
console.log(Number.MAX_VALUE + Number.MAX_VALUE);//Infinity
console.log(10/0);//Infinity
三 运算符
1.算术运算符
//i++ ++i在没有赋值的时候没有区别
// var score = 90;
//score++;
//++score;
//console.log(score); //91
//i++ ++i 有赋值的时候,使用区别如下:
var age = 20;
//var new_age = age++; //先返回信息,再++计算
//console.log(new_age+"---"+age); //20---21
var new_age = ++age; //先++计算,再把结果返回
//console.log(new_age+"---"+age); //21---21
2.比较运算符
- >
- >=
- <
- <=
- !=
- == 值大小的比较
- === 值大小和数据类型都比较
- !==
3.逻辑运算符
3.1 && 逻辑与
两边结果都为真,结果为真
3.2 || 逻辑或
两边结果只要有一个为真,结果为真
3.3 !逻辑取非
真既假,假既真
注意点:
1)逻辑运算符最终结果
在php里边,最终结果是“布尔”结果
在javascript里边,&&和||是其中一个操作数,!是布尔结果、
2) 短路运算
只给执行一个操作数,不执行另一个操作数,不被执行的操作数就被短路。
<script type="text/javascript">
var a = 10;
var b = 20;
var c = 30;
var name = "tom";
var age = 23;
var money = 0;
//字符串和数值信息进行逻辑运算符
//期间它们要进行数据类型转换
//0 "" array() null 等信息都被转换为false信息
//① &&和||的结果是其中一个操作数
console.log(name && age); //23 决定整体结果的操作数作为最终结果体现
console.log(age && money); //0
console.log(name || money); //tom
console.log(a>5 && b>10);//true,是b>10的结果
//② !取非最终是布尔结果
console.log(!name); //false
console.log(!money); //true
</script>
四 流程控制
顺序结构
分支选择结构:if elseif switch
循环结构:while() do{}while() for()
1. 条件表达式switch用法
switch(){
case 表达式:
分支;
case 表达式:
分支;
}
<script type="text/javascript">
//switch
age=50;
switch(true)
{
case age>1&&age<=10:
console.log('children');
break;
case age>10&&age<=20:
console.log('teenagers');
break;
case age>20:
console.log('young man');
break;
default:
console.log('old man');
break;
}
</script>
2. 两个关键字break和continue
break:在循环、switch里边有使用
跳出当前的本层循环
continue:在循环里边使用
跳出本次循环,进入下次循环
多个循环嵌套使用:
标志flag:
for1
red:
for2
for3
break/continue; //把for3给跳出 / 跳出本次的for3
//break 3;
//php语法
break flag; //continue flag; 把标志对应的for循环给做跳出操作
break red; //continue red;
script type="text/javascript">
//id with go over
//a decrease variable
var i=1;
//a id
passage:
while(true)
{
++i;
switch(i)
{
case 5:
console.log("stop:"+i+"\n");
break;
case 10:
console.log("stop:"+i+"\n");
break;
case 15:
console.log("at the movement,it will exit wholely");
break passage;
}
}
</script>
五 函数
1. 什么是函数
有一定功能代码体的集合。
2. 函数的封装
2.1 传统方式
function 函数名(){}
该方式的函数有“预加载”过程,允许我们先调用函数、再声明函数
预加载:代码先把函数的声明放入内存。代码看起来是先调用、后声明,本质是先声明、后调用的。
函数名();
function 函数名(){}
函数先调用、后声明的条件是,全部代码在一个”<script>”标记里边。
<script type="text/javascript">
//use function in front
displayInfo();
function displayInfo()
{
console.log("use firstly,declare lately,but not indeed");
}
</script>
2.2 变量赋值方式声明函数(匿名函数使用)
var 函数名 = function(){ }
该方式没有“预加载”,必须先声明、后调用。
<script type="text/javascript">
//declare function by giving value to variable
var displayInfo = function(){
console.log("give anonymous function to the variable");
}
displayInfo();
</script>
3. 函数的参数
function 函数名(形参1,形参2,形参3=’abc’){}
函数名(‘tom’,23,’beijing’);//传递实参信息
3.1 实参和形参的对应关系
没有默认值情况:
在php里边:实参的个数小于形参是不允许的
在javascript里边:实参与形参没有严格的对应关系
<script type="text/javascript">
//a function with many variables
function displayInfo(name,age,addr)
{
console.log("people's specific information: name="+name+" age="+age+" addr="+addr);
}
//use it with different amount of variables
displayInfo('maylia',18,'USA');
displayInfo('tom',20);
displayInfo('Li Ming');
</script>
总结:
- 数据类型:Number String Boolean Null Undefined Object
console.log(typeof 信息); 判断信息的数据类型
2.运算符
算术、比较、逻辑、连接
3.流程控制
switch
break/continue
4.函数
封装
参数
3.2 关键字arguments
function 函数名(){ } //函数声明没有形参
函数名(实参,实参); //调用的时候有传递实参
利用arguments可以在函数里边接收实参信息。
<script type="text/javascript">
//a function with many variables
function displayInfo(name,age,addr)
{
//we can specific variables' amount by arguements
var len = arguments.length;
if(len==3)
{
console.log("people's specific information: name="+name+" age="+age+" addr="+addr);
}
else if(len==2)
{
console.log("people's specific information: name="+name+" age="+age);
}
else if(len==1)
{
console.log("people's specific information: name="+name);
}
else if(len==0)
{
console.log('no variable');
}
else
{
console.log("we don't need so many variables!");
}
}
//use it with different amount of variables
displayInfo('maylia',18,'USA');
displayInfo('tom',20);
displayInfo('Li Ming');
displayInfo();
</script>
4. callee关键字
意思:在函数内部使用,代表当前函数的引用。
function f1(){
xxxx具体执行代码
arguments.callee(); //调用本函数(或者f1())
//都可以使得本函数执行,我们选择callee,其可以降低代码的耦合度。
xxxx执行代码
}
f1();
耦合:一处代码的修改会导致其他代码也要发生改变。
在程序项目里边要开发低耦合度的代码。
<script type="text/javascript">
//exampe: callee can reduce intrconnection
// solve the function of n rank
function solveRank(n)
{
if(n==1)
{
return 1;
}
else
{
return n*arguments.callee(n-1);
}
}
console.log("the result of solveRank(6):"+solveRank(6));
//give "solveRank" to other variable
var solveRank_copy=solveRank;
//unset the original "solveRank",otherwise,it will infect follow function
solveRank=null;
console.log("the result of solveRank_copy(6):"+solveRank_copy(6));
</script>
5. 函数返回值
一个函数执行完毕需要返回具体的信息,使用return关键字返回信息。
在一定层度上看,全部的数据类型(数值、字符串、布尔、对象、null)信息都可以返回
return本身还可以结束函数的执行。
在函数内部返回一个函数出来。
在javascript里边,一切都是对象
在一个函数内部,可以声明数值、字符串、布尔、对象等局部变量信息,言外之意就还可以声明函数(函数内部还要嵌套函数),因为函数是对象,并且函数可以被return给返回出来。
<script type="text/javascript">
//return a function
function f1()
{
//global variable
name="tom";
age="18";
function f2()
{
console.log("name="+name+" age="+age);
}
return f2;
}
var f2=f1();
f2();
</script>
6. 函数调用
6.1 传统方式函数调用
函数名();
6.2 匿名函数自调用
(function( ){})( );
<script type="text/javascript">
//use a anonymous function
//no variable
(function(){
console.log("anonymous function usage with no argument!");
})();
(function(name){
console.log(name+" is used in the intersting function");
})("tom");
</script>
7.全局/局部变量
7.1 全局变量
php里边:
① 函数外部声明的变量。
② 在函数内部也可以声明全局变量(函数调用之后起作用)
<?php
function f1()
{
global $name;
$name="tom";
$age=18;
}
f1();
//display the difference
echo "name:".$name;
echo "age:".$age;
?>
javascript里边:
① 在函数外部声明的变量
② 函数内部不使用“var”声明的变量(函数调用之后起作用)
<script type="text/javascript">
addr="USA";
function f1()
{
//global variable
name="tom";
var age="18";
}
console.log("name:"+name);
console.log("addr:"+addr);
console.log("age:"+age);
</script>
7.2 局部变量
php里边:在函数内部声明的变量
javascript里边:在函数内部声明的变量,变量前边有”var“关键字。
六 数组
1.什么是数组
有许多变量,它们的变量和数据类型都是一致的.
2.数组声明
var arr = [元素,元素,元素......]
var arr = new Array(元素,元素,元素......)
var arr = new Array( )
arr[0] = 元素;
arr[1] = 元素;
<script type="text/javascript">
//在javascript中,数组的下标就是数字",没有关联的说法
//如果一个数组的下标是"自定义",那么该元素就是对象的成员(非数组)
//第一种声明方式
var color=["red","blue","green"];
console.log(color);
console.log(color[1]);
//第二种声明方式
var animal = new Array("cat","dog","tiger");
console.log(animal[2]);
//第三种声明方式
var food=new Array(3);
food[0]="bread";
food[1]="drink";
food[2]="milk";
food[3]="fruit";
food['longyan']="龙眼";
for(i=0;i<3;i++)
{
console.log(food[i]);
}
console.log(food.longyan);
console.log(food['longyan']);
</script>
3.获取数组长度
<script type="text/javascript">
var food=new Array(3);
food[0]="bread";
food[1]="drink";
food[2]="milk";
food[3]="fruit";
food['longyan']="龙眼";
console.log(food.length);
</script>
4.数组遍历
沿着一定的顺序对数组内部的元素进行读取,就是遍历;
形式一: for 循环 遍历
形式二: for----in 遍历
<script type="text/javascript">
var color = new Array("red","blue","yellow");
for(var k in color)
console.log("position of "+k+" is "+color[k]);
</script>
5.数组常用方法
<script type="text/javascript" >
//instanceof 判断对象是否是指定构造器的实例化
var color = ["red","blue","green"];
console.log(color instanceof Array);
console.log(color instanceof Date);
//push() unshift() 给数组元素的"结尾/开始"追加元素
//pop() shift() 给数组元素的"结尾/开始"删除元素
color.push("pink","gold","yellow"); //追加多个元素
console.log(color.pop());
console.log(color.pop());
console.log(color.pop());
console.log(color);
//indexOf() lastIndexOf()在数组的"左边/右边"开始查找"第一次出现的指定字符串的位置
var addr = new Array("a","b","c","d","e");
console.log(addr.indexOf("a"));
console.log(addr.lastIndexOf("e"));
console.log(addr.lastIndexOf("c"));
</script>
七 字符串
在javascript里边,字符串可以调用一些成员.
<script type="text/javascript" >
/*
javascript中,普通字符串也可调用成员方法,该特点与php迥然不同
js里边一切都是对象
表面上看上去是字符串调用方法,本质不然,在js解释引擎内部把字符串转化为一个"临时对象"
进行方法的调用,输出调用结果,之后再把该临时对象给销毁,给外部用户的感觉就是字符串进行
方法的调用
*/
var str = "hello world";
//调用字符串的转换大写方法
console.log(str.toUpperCase());
//通过实例化方法创建一个字符串
var title1 = new String("javascript学习");
var title2 = new Array("javascript学习");
console.log(title1);
console.log(title2);
</script>
八 神奇的eval的用法
eval( ):接受一个字符串参数,将这个字符串作为代码
在上下文环境中执行,并返回一个执行结果.
<script type="text/javascript">
var a=10;
var b=10;
console.log(a+b);
//"a+b"不会进行运算
console.log("a+b");
//"a+b"字符串通过eval当做表达式在上下文运行起来
console.log(eval("a+b"));
console.log("alert(123)");
eval("alert(\"12345\")");
//eval内部参数字符串必须符合javascript语法规则
//eval的作用是接受外部传递的"字符串"信息给当前javascript语言使用
</script>
下节将巩固学习 DOM操作 ,事件操作