Js适用于web开发的脚本语言
- 脚本语言是什么?
- 脚本语言往往不能独立使用,他和html/jsp/php/asp/asp.net配合使用
- 脚本语言有自己的变量。函数,控制语句(顺序,分支,循环)
- 脚本语句实际上是解释性语言(即在执行的时候,直接对源码进行执行)
- Java程序 java->class->jvm
- Js->浏览器(js引擎来解释执行)
- Js在客户端(浏览器)执行原理
- 因为js是由浏览器来解析执行的,因此这里有一个问题,不同类型的浏览器可能对js的支持不一样
Js的开发工具选择
- 记事本
- Eclipse
- Myeclipse
- Hbulider
案例1.
需求:打开网页后,显示hello world
代码:开山代码\helloworld.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>helloworld.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
<script type="text/javascript">
window.alert("Helloworld");
</script>
</head>
<body>
</body>
</html>
问题:
js放在html中的哪个位置
答:js位置可以随意,不过一般放在head标签间,但实际也可以放在别的位置
js必须使用<script ></script>包起来,如果没有则浏览器会将其视为普通文本
在一个html文件中(jsp/php/asp)可能出现多对<script>片段,浏览器会按先后顺序依次执行
案例2.
需求:输入两个数,求他本的和
代码:开山代码\add.heml
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>add.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
<script type="text/javascript">
var a = 22;
var b = 33;
var result = a+b;
window.alert("结果是"+result);
</script>
</head>
<body>
</body>
</html>
问题:
js中的变量类型究竟怎样决定,即在定义变量的时候,统一使用var表示,甚至可以去掉var这个关键字
答:所有类型的变量都统一用var来声明,javascript中变量的类型是通过 =后面赋的值来决定的。
JScript 的变量
js中的变量
- 所有类型的变量都统一用var来声明。
- javascript中变量的类型是通过 =后面赋的值来决定的。
变量声明
变量在脚本中的第一次出现是在声明中。变量在第一次用到时就设置于内存中,便于后来在脚本中引用。使用变量之前先进行声明。可以使用 var 关键字来进行变量声明,javascript中变量的类型是通过 =后面赋的值来决定的
var count; // 单个声明。
var count, amount, level; // 用单个 var 关键字声明的多个声明。
var count = 0, amount = 100; // 一条语句中的变量声明和初始化
如果在 var 语句中没有初始化变量,变量自动取 JScript 值 undefined。
尽管并不安全,但声明语句中忽略 var 关键字是合法的 JScript 语法。这时,JScript 解释器给予变量全局范围的可见度。
当在过程级中声明一个变量时,它不能用于全局范围;这种情况下,变量声明必须用 var 关键字。
- 变量命名
变量名称是一个标识符。Jscript 中,用标识符来:
-
命名变量,
-
命名函数,
-
给出循环的标签。
JScript 是一种区分大小写的语言。因此变量名称 myCounter 和变量名称 mYCounter 是不一样的。变量的名称可以是任意长度。创建合法的变量名称应遵循如下规则:
- 第一个字符必须是一个 ASCII 字母(大小写均可),或一个下划线(_)。注意第一个字符不能是数字。
- 后续的字符必须是字母、数字或下划线。
- 变量名称一定不能是 保留字。
下面给出合法变量名称的一些示例:
_pagecount
Part9
Number_Items
下面给出无效变量名称的一些示例:
99Balloons // 不能以数字开头。
Smith&Wesson // “与”符号(&)字符用于变量名称是无效的。
当要声明一个变量并进行初始化,但又不想指定任何特殊值,可以赋值为 JScript 值 null。下面给出示例。
var bestAge = null;
var muchTooOld = 3 * bestAge; // muchTooOld 的值为 0。
如果声明了一个变量但没有对其赋值,该变量存在,其值为Jscript 值 undefined。下面给出示例。
var currentCount;
var finalCount = 1 * currentCount; // finalCount 的值为 NaN,因为 currentCount 为 undefined。
注意:在 JScript 中 null 和 undefined 的主要区别是 null 的操作象数字 0,而 undefined 的操作象特殊值NaN (不是一个数字)。对 null 值和 undefined 值作比较总是相等的。
可以不用 var 关键字声明变量,并赋值。这就是隐式声明。
noStringAtAll = ""; // 隐式声明变量 noStringAtAll。
不能使用未经过声明的变量。
var volume = length * width; // 错误 — length 和 width 并不存在。
强制转换
在 Jscript 中,可以对不同类型的值执行运算,不必担心 JScript 解释器产生异常。相反,JScript 解释器自动将数据类型之一改变(强制转换)为另一种数据类型,然后执行运算。
例如:
考虑下面的示例。
var x = 2000; // 一个数字。
var y = "Hello"; // 一个字符串。
x = x + y; // 将数字强制转换为字符串。
document.write(x); // 输出 2000Hello。
JScript 的数据类型
Jscript 有三种主要数据类型、两种复合数据类型和两种特殊数据类型。
主要(基本)数据类型是:
- 字符串
- 数值
- 布尔
复合(引用)数据类型是:
- 对象
- 数组
特殊数据类型是:
- Null
- Undefined
字符串数据类型
一个字符串值是排在一起的一串零或零以上的 Unicode 字符(字母、数字和标点符号)。字符串数据类型用来表示 JScript 中的文本。脚本中可以包含字符串文字,这些字符串文字放在一对匹配的的单引号或双引号中。字符串中可以包含双引号,该双引号两边需加单引号,也可以包含单引号,该单引号两边需加双引号。下面是字符串的示例:
"Happy am I; from care I’m free!"
'"Avast, ye lubbers!" roared the technician.'
"42"
'c'
请注意,JScript 中没有表示单个字符的类型(如 C++ 的 char)。要表示 Jscript 中的单个字符,应创建一个只包含一个字符的字符串。包含零个字符("")的字符串是空(零长度)字符串。
数值数据类型
在 Jscript 中整数和浮点值没有差别;JScript 数值可以是其中任意一种(JScript 内部将所有的数值表示为浮点值)。
整型值
整型值可以是正整数,负整数和 0。可以用 10 进制,8 进制和 16 进制来表示。在 Jscript 中大多数字是用十进制表示的。加前缀“0”表示 8 进制的整型值,只能包含 0 到 7 的数字。前缀为“0”同时包含数字“8”或“9”的数被解释为十进制数。
加前缀“0x”(零和x|X)表示 16 进制整型值。可以包含数字 0 到 9,以及字母 A 到 F(大写或小写)。使用字母 A 到 F 表示十进制 10 到 15 的单个数字。就是说 0xF 与 15 相等,同时 0x10 等于 16。
八进制和十六进制数可以为负,但不能有小数位,同时不能以科学计数法(指数)表示。
浮点值
浮点值为带小数部分的数。也可以用科学计数法来表示。这就是说,大写或小写“e”用来表示 10 的次方。Jscript用数值表示的八字节 IEEE754 浮点标准。这意味着数字最大可以到±1.7976931348623157x10308,最小到±5x10-324。以“0”开始且包含小数点的数字被解释为小数浮点数。
注意以“0x”或“00”开始并包含小数点的数将发生错误。以下是 Jscript 中数字的例子。
另外,JScript包含特殊值数字。它们是:
- NaN (不是数)。当对不适当的数据进行数学运算时使用,例如字符串或未定义值。
- 正无穷大。在JScript中如果一个正数太大的话使用它来表示。
- 负无穷大。在JScript中如果一个负数太大的话使用它来表示。
- 正0和负0。Jscript区分正0和负0。
Boolean数据类型
尽管字符串和数字类型可以有无数不同的值,boolean 数据类型却只有两个值。它们是文字 true 和 false。Boolean值是一个真值,它表示一个状态的有效性(说明该状态为真或假)。Js中非0的数均表示true(包括小数和负数,和字符串).
- 0 /””/false/null/undefined/nan均表示false,其他的都为true。
脚本中的比较通常得到一个 Boolean 结果。考虑下一行 Jscript 代码。
y = (x == 2000);
这里要比较变量 x 的值是否与数字 2000 相等。如果相等,比较的结果为 Boolean 值 true,并将其赋给变量 y。如果x与2000不等,则比较的结果为boolean值false。
Boolean值在结构控制中尤其有用。可以将直接创建 boolean 值的比较与用使用该 boolean 值的语句相组合。考虑下面的JScript代码范例。
if (x == 2000)
z = z + 1;
else
x = x + 1;
当 boolean 值为 true 时,Jscript 中的 if/else 语句执行一个操作(这样,z = z + 1),而当 boolean 值为 false 时执行另一个操作(x = x + 1)。
可以使用任意表达式作比较表达式。任何值为0、null、未定义或空字符串的表达式被解释为 false。其他任意值的表达式解释为 true。例如,可以使用如下表达式:
if (x = y + z) // 这可能不是想要的结果 – 如下!
注意上面的代码并不检查 x 是否与 y+z 相等,因为仅使用了一个等号(赋值)。相反的,上面的代码将 y+z 赋给变量 x,然后检查整个表达式的值是否为零。要检查 x 是否与 y+z 相等,使用如下代码。
if (x == y + z) // 这与上面的代码不同!
Null 数据类型
在 Jscript 中数据类型 null 只有一个值:null。关键字 null 不能用作函数或变量的名称。
包含 null 的变量包含“无值”或“无对象”。换句话说,该变量没有保存有效的数、字符串、boolean、数组或对象。可以通过给一个变量赋 null 值来清除变量的内容。
请注意,在 Jscript 中,null 与 0 不相等(与在 C 和 C++ 中不同)。同时应该指出的是,Jscript中 typeof 运算符将报告 null 值为 Object 类型,而非类型 null。这点潜在的混淆是为了向下兼容。
Undefined 数据类型
如下情况使返回 undefined 值:
对象属性不存在,
声明了变量但从未赋值。
注意不能通过与 undefined 做比较来测试一个变量是否存在,虽然可以检查它的类型是否为“undefined”。在以下的代码范例中,假设程序员想测试是否已经声明变量 x :
// 这种方法不起作用
if (x == undefined)
// 作某些操作
// 这个方法同样不起作用- 必须检查
// 字符串 "undefined"
if (typeof(x) == undefined)
// 作某些操作
// 这个方法有效
if (typeof(x) == "undefined")
// 作某些操作
考虑将 undefined 值与null做比较。
someObject.prop == null;
如下情况时,比较的结果为 true,
如果属性 someObject.prop 包含 null 值,
如果属性 someObject.prop 不存在。
要检查一个对象属性是否存在,可以使用新的 in 运算符:
if ("prop" in someObject)
// someObject 有属性 'prop'
JScript 的运算符
控制程序的流程
控制程序的流程
第一种是选择结构。用来指明两种程序流方向
- 单一选择结构(if),
- 二路选择结构(if/else),
- 内联三元运算符 ?:
- 多路选择结构(switch)。
Weitch(表达式){
Case “ww”: break; //case常量值可以混合使用
Case 56: break;
Case null: break;
Default:
}
Switch的不同:
- Js的switch语句数据类型可以是js支持的任何类型(数组和对象除外)
- Case后面的数据类型可以是任意js支持的类型(数组和对象除外)
- Break作用是跳出整个switch
- 如果没有匹配则执行default
第二种类型的程序控制结构是循环结构。
- 在循环的开头测试表达式(while),
- 在循环的末尾测试表达式(do/while),
- 对对象的每个属性都进行操作(for/in),
- 由计数器控制的循环(for)。
函数
- 自定义函数
Function method(a , b){
Return a;
}
基本语法
faction 函数名(参数列表){//参数列表用逗号隔开,不需要写参数类型,可选
//函数体
Return ; //返回值,可选
}
如果其他的html,PHP,要使用函数怎么办
我们可以吧函数在一个js文件中,用的时候可以引用它:
<script type="text/javascript" src=”js文件的路径"></script>
系统函数
系统函数(经常查看js帮助手册)
函数的几种调用方式
- 函数名(传递给函数的参数1,传递给函数的参数2,…….);
- 变量=function()
此时变量就相当于函数的引用(指针),可以这样调用函数:
变量(实际参数….)
--》特别说明
- 对于有放回值的函数调用,也可以在程序中直接使用放回的结果,例如:alert(“res=”+sum(2,3);
- 没有放回值的函数,则返回undefined
如果直接的打印函数名不给参数则会出现
可以看到,他把整个函数体都打印出来了,如果给出了函数中的()则会放回函数的放回值。如果你把函数名直接赋值给另外一个变量则可以通过另外一个变量调用这个函数,就像你上面看到的,和c语言指针差不多。
Js的函数天然的支持可变参数
比如:
//编写一个函数,可以接收任意多个数
//abc给参数也是不会报错的比如function abc( a ),也可以传入多个传输正常输出
//js函数不同java,它不支持重载
function abc(){
for(var i=0;i<arguments.length;i++){//js提供的东西
window.alert(arguments[i]);
}
}
我们可以这样调用:
window.alert("abc(12,13,14,15)");
abc(12,13,14,15); //可以传入多个参数
window.alert("abc()");
abc();
Js函数的调用过程,内存分析
案例:
//abc是一个函数,他接受数值
function abc(num1){
if(num1>3){
abc(--num1);//递归
}
document.writeln(num1);
}
如果这样调用abc(5); 则输出334
分析图:
数组
数组的类型可以叫(引用类型/复杂类型/复合类型),他的基本概念是:
用于存放一组数据,一组数据用可以是多个不同的类型。
Javascript中的数组特性:
- Javascript中的数组定义长度不固定;也就是说数组可以动态增长。
- Javascript同一个数组可以保存不同数据类型的数据。
创建数组的基本方式有2种.
- 第一种是使用Array的构造函数
不指定长度
var arrs=new Array();
如数组保存的数量,可以通过构造函数传递数组的长度
指定长度
var arrs=new Array(20);
该数组有20个元素,每一项的默认值都是undefined
指定元素
var arrs=new Array("hello"); 会创建一个元素的数组.
指定不同元素
var name = new Array(“刘一锅”,25);//可以是不同的数据类型一般不这么做!
- 第二种方式
指定元素
创建一个包含3个字符串的数组
var arrs=["aa",78,null]; //注意这里使用[]号包起来的
创建一个空数组
var arrs=[];
赋值
arrs[0] = 1;
arrs[1] = 2;
获取数组中的数据:
可以使用下标的形式去访问数组内的原素。如: name[0]………
也可以直接获取数组内的数据alert(name);(Java中这样取的是地址)
数组常用属性和方法:
调用方法:数组名.属性名;或数组名.方法名;
属性:length属性
name.length 则会返回数组name中数组元素的个数。
数组遍历:
for(var i = 0; i < arr.length; i++){
alert(arr[i]);
}
或
for( var i in arr ){
// i 是遍历出的数组中的索引,从0开始,一直到最大索引。
// 如果有其他属性,也会遍历出来,其实索引就是数组对象的属性。
alert(arr[i]);
}
补充一点,数组的下标也可以用字符串指定,这在很多弱语言都是支持的
<script>
arr=[2,3,4,"dsd",null];
arr['a']=12.5; //动态增长
for(var i in arr){ //用for in循环遍历数组
document.write(arr[i]+", ");
}
</script>
一维数组小结
- 数组可存放任意类型的数据
- 数组大小不必事先制定,可以动态增长
- 数组名可以理解为指向数组首地址的引用
- 数组元素从0开始标号的
- 数组的下标也可以用字符串指定