第二章JavaScript核心语法

Posted 2020-10-11 别动我的猫

第一章   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中的数组也需要先创建，赋值，再访问数组元素，并通过数组的一些方法或属性对数组元素进行处理。

1. 创建数组

语法：var  数组名称=new Array(size);

例如：var  fruit=new Array(5);表示创建了一个名称为fruit,有5个元素的数组。

1. 为数组元素赋值

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”];

1. 访问数组

可以通过数组的名称+下标直接访问数组的元素，访问数组的表示形式：数组名[下标]。例如fruit[0]标识访问数组中的第一个元素，fruit数数组名，0表示下标。

1. 数组中常用的属性和方法

类别	名称	描述
属性	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. 条件结构

1）if结构

2）switch结构

1. 循环结构

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

 

八.常用的输入/输出

1. alert( )警告

语法: alert(“提示信息”);

创建一个特殊的对话框，对话框带有一个字符串和“确定”按钮

1. prompt( )提示

语法：prompt(“提示信息”,”输入框的默认信息或空的输入框”);

Prompt()方法第一个参数值显示在对话框上，通常是一些提示信息，第二个输入框出现在用户输入的文本框中，有“确定”和“取消”两个按钮，“取消”则返回为null,“确定”则返回一个字符串型数据。

九.语法约定

1. 大小写的区分

1）  javascript的关键字；如for和if,永远都是小写的

2）  内置对象，如Math和Date以大写字母开头

3）  对象的名称通常小写，遵循骆驼命名法。

1. 变量、对象和函数的名称

与java命名规范相同，“字下美…”

1. 分号

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()方法输出变量值也可以进行调试.

十一.常用的系统函数

1. parseInt()

parseInt()函数可以解析一个字符串，并返回一个整数。如果第一个字符不是数值类型，则返回NaN,表示不是数组类型，如中间遇到非数值字符，则会省略后面的字符，返回前面的数值。

1. parseFloat()

parseFloat()函数可以解析一个字符串，并返回一个浮点数。方法与parseInt()相似。如果第一个字符不是数值类型，则返回NaN,表示不是数组类型，如中间遇到非数值字符，则会省略后面的字符，返回前面的数值。

例： var a=parseFloat(36s22.0);//返回值36.0

1. 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