第一章 avaScript核心语法
一.变量的声明和赋值
JavaScript是一种弱类型语言,没有明确的数据类型,也就是在声明变量时不需要指定数据类型,变量的类型由赋给变量的值决定。
在JavaScript中,变量是使用关键字var声明的,语法:
var 合法的变量名;
JavaScript的变量命名规则和Java命名规则相同。
JavaScript区分大小写,所以大小写不同的变量名表示不同的变量。
另外,由于JavaScript是一种弱类型语言,因此允许不声明变量而直接使用,系统将会自动声明该变量。例如:x=88;//没有声明x直接使用。
二.数据类型
1. undefined(未定义类型)
undefined类型只有一个值,即undefined。当声明的变量未初始化时,该变量的默认值是undefined,例如:var widtd;
2. null(空类型)
null类型只有一个值,即null。表示“什么都没有”,用来检测某个变量是否被赋值。
值undefined实际是值null派生出来的,因此javaScript把它们定义为相等的。例如:
Alert(null==undefined); //返回者为true
尽管这两个值相等,但是它们的含义不同;
Undefined表示声明了变量但未赋值;
Null则表示给该变量赋了一个空值;
3. number(数值类型)
javaScript中定义的最特殊的类型是number类型,这种类型即表示32位的整数,又可以表示64位的浮点数.
整数也可以表示为八进制或十六进制,八进制首数字必须是0,其后是(0~8);十六进制的手数字也必须是0,其后是(0~9)(A~F)。
另外一个特殊值NaN(Not a Number)表示非数字,它是number类型,例如:
Typeof(NaN); //返回者位number
4. String(字符串类型)
在javascript中,字符是一组被引号(单引号或双引号)括起来的文本。
与java不同,javaScript不对“字符”或“字符串”加以区别,因此var a=”a”也是字符串类型。
和Java相同,javaScript中String也是一种对象,它有一个length属性,表示字符串的长度(包括空格等)。
String 对象常用的方法 |
|
方法 |
描述 |
indexOf(str,index) |
查找某个指定的字符串str在字符串中首次出现的位置 |
charAt(index) |
返回指定位置index的字符 |
toLowerCase() |
把字符串转为小写 |
toUpperCase() |
把字符串转换为大写 |
Substring(index1,index2) |
返回位于索引index1和index2之间的字符串,并且包括索引index1对应的字符,不包括index2对应的字符 |
Split(str) |
将字符串以str为分割单位分割成字符串数组,str=””则分割成单个字符 |
5. boolean(布尔类型)
boolean类型数据称为布尔型数据或逻辑型数据,boolean类型是ECMAScript中常用的类型之一,它只有两个值:true和false
6. typeof
ECMAScript提供了typeof运算符来判断一个值或变量究竟属于哪种数据类型。
语法:typeof(变量或值);
其返回的值如下:
1) undefined
2) number
3) String
4) Boolean
5) Object:如果变量是null类型,或者变量是一种引用类型,如对象,数组,函数,则返回object
三.数组
和java一样,javaScript中的数组也需要先创建,赋值,再访问数组元素,并通过数组的一些方法或属性对数组元素进行处理。
- 创建数组
语法:var 数组名称=new Array(size);
例如:var fruit=new Array(5);表示创建了一个名称为fruit,有5个元素的数组。
- 为数组元素赋值
1) var fruit=new Array(“apple”,”pear”,”orange”,”peach”);
2) var fruit=new Array(4);
fruit[0]=”apple”;
fruit[1]=”pear”;
fruit[2]=”orange”;
fruit[3]=”peach”;
3)var fruit=[“apple”,”pear”,”orange”,”peach”];
- 访问数组
可以通过数组的名称+下标直接访问数组的元素,访问数组的表示形式:数组名[下标]。例如fruit[0]标识访问数组中的第一个元素,fruit数数组名,0表示下标。
- 数组中常用的属性和方法
类别 |
名称 |
描述 |
属性 |
Length |
设置或返回数组中元素的数目,为整形 |
方法 |
Join() |
把数组的所有元素放入一个字符串,通过一个分割符进行分隔 |
sort() |
对象数组排序 |
|
Push() |
向数组末位添加一个或多个元素,并返回新的长度 |
1) Length
如果在创建数组时就指定了数组的size值,那么无论数组中是否存储了实际数据,该数组的length值都是这个指定的长度值size。例如,var fruit=new Array(4);那么fruit.length=4。
2) join(分隔符)
例:
var fruit=”apple,orange,peach,banana”;//创建一个字符串
var arrlist=fruit.split(“,”);//定义一个数组接收 字符串fruit以”,”分割的元素
var str=arrlist.join(“-”);//用”-”符号把数组中元素连接在一个字符串中
结果:apple – orange – peach -banana
四.运算符号
类别 |
运算符号 |
算数运算符 |
+、-、*、/、%、++、-- |
比较运算符 |
>、<、>=、<=、==、!=、===、!== |
逻辑运算符 |
&&、||、! |
赋值运算符 |
=、+=、-= |
===表示恒等,要求数值类型和值都要相等,==要求值相等
!===表示不恒等,取反===
五.逻辑控制语句
在javaScript中,逻辑控制语句用于控制程序的执行顺序,同java一样,也分为两类:
- 条件结构
1)if结构
2)switch结构
- 循环结构
1) for循环
2) while循环
3) do-while循环
4) for-in循环
语法:
for(变量 in 对象){
}
例:var fruit=[“apple”,”orange”,”peach”,”bannaa”];
for(var i in fruit){
document.write(fruit[i]+”<br/>”);
}
5) 中断循环
break;可以立即退出整个程序
continue;只退出当前的循环,根据条件判断下一次循环
六.注释
当行注释: //
多行注释:/*注释内容*/
七.关键字和保留字
关键字(首字母全部小写) |
||||
Break |
Case |
Catch |
Continue |
Default |
Delete |
Do |
Else |
Finally |
For |
Function |
If |
In |
Instanceof |
New |
Return |
Switch |
This |
Throw |
Try |
Typeof |
Var |
Void |
While |
With |
保留字(首字母全部小写) |
|||||
Abstract |
Boolean |
Byte |
Char |
class |
Const |
Debugger |
Double |
Enum |
Export |
Extents |
Final |
Float |
Goto |
Implements |
Import |
Int |
Interface |
Long |
Native |
Package |
Private |
Protected |
Public |
Short |
Static |
Super |
Synchronized |
Throws |
Transient |
volatile |
|
|
|
|
|
八.常用的输入/输出
- alert( )警告
语法: alert(“提示信息”);
创建一个特殊的对话框,对话框带有一个字符串和“确定”按钮
- prompt( )提示
语法:prompt(“提示信息”,”输入框的默认信息或空的输入框”);
Prompt()方法第一个参数值显示在对话框上,通常是一些提示信息,第二个输入框出现在用户输入的文本框中,有“确定”和“取消”两个按钮,“取消”则返回为null,“确定”则返回一个字符串型数据。
九.语法约定
- 大小写的区分
1) javascript的关键字;如for和if,永远都是小写的
2) 内置对象,如Math和Date以大写字母开头
3) 对象的名称通常小写,遵循骆驼命名法。
- 变量、对象和函数的名称
与java命名规范相同,“字下美…”
- 分号
Javascript允许开发者自行决定是否以分号结束一行代码,如果没有分号,javascript就将行代码的末尾看作该语句的结尾。
为了代码的规范,不推荐不使用分号结尾。
十.调试
打开chrome浏览器,按F12进入调试:
>1:Elements:用于查看和编辑当前页面中的HTML和CSS元素.
>2:Console:用于显示脚本中所输出的调试信息,或运行测试脚本等.
>3:Sources:用于查看和调试当前页面所加载的脚本的源文件.
>4:Network:用于查看HTTP请求的详细信息,如请求,响应及返回内容等。
>5:Timeline:用于查看脚本的执行时间,页面元素渲染时间等信息.
>6:Profiles:用于查看CPU执行时间与内存占用等信息.
>7:Resource:用于查看当前页面所请求的资源文件,如HTML,CSS样式等。
>8:Audits:用于优化前端页面,加速网页加载速度等.
其次,通过alert()方法输出变量值也可以进行调试.
十一.常用的系统函数
- parseInt()
parseInt()函数可以解析一个字符串,并返回一个整数。如果第一个字符不是数值类型,则返回NaN,表示不是数组类型,如中间遇到非数值字符,则会省略后面的字符,返回前面的数值。
- parseFloat()
parseFloat()函数可以解析一个字符串,并返回一个浮点数。方法与parseInt()相似。如果第一个字符不是数值类型,则返回NaN,表示不是数组类型,如中间遇到非数值字符,则会省略后面的字符,返回前面的数值。
例: var a=parseFloat(36s22.0);//返回值36.0
- isNaN()
isNaN()函数用于检查其参数是否非数字,如果不是数字则返回true,如果是数字返回flase。
例:var flag=isNaN(“12.5s”); //返回为true,区别与parseInt()和parsrFloat()函数的转换,isNaN()函数不会省略后面的字母。
十二.自定义函数
1.定义函数
在javascript中,自定义函数是由关键字function、函数名、一组参数及置于括号中的待执行的javascript语句组成的,语法:
Function 函数名(参数一,参数二…){
//javascript语句;
[return 返回值]
}
Function是定义函数的关键字,必须有.
2.调用函数
要执行一个函数,必须调用这个函数,当调用函数时,必须指定函数名及其后面的参数(有参函数)。函数的调用一般和元素的事件结合使用。
语法:
时间名=”函数名([参数])”;
十三.变量的作用域
与java中的变量一样,在javascript中,根据变量作用范围不同,可分为全局变量和局部变量。
全局变量是在所有函数之外的脚本中声明的变量。
局部变量是在函数内声明的变量。
十四.事件
名称 |
说明 |
onload |
一个页面或一副图像完成加载 |
onlick |
鼠标单击某个对象 |
onmouseover |
鼠标移动到某个元素上 |
onkeydown |
某个键盘按键被按下 |
onchange |
域的内容被改变 |
例:
<!DOCTYPE HTML>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title> 加载事件 </title>
<script type="text/javascript">
function message(){
alert("加载中,请稍等…"); }
</script>
</head>
<body onLoad="message()">
欢迎学习JavaScript。
</body>
</html>
注:
onload 事件会在页面或图像加载完成后立即发生。
语法
onload="SomeJavaScriptCode"参数 描述
SomeJavaScriptCode 必需。规定该事件发生时执行的 JavaScript。
支持该事件的 HTML 标签:
<body>, <frame>, <frameset>,<iframe>, <img>, <link>, <script>
支持该事件的 JavaScript 对象:
image, layer, window