JavaScript入门 Day2

一.JavaScript变量和函数

1.JavaScript变量

主要作用是存取数据、提供存放数据的容器。

(1)变量的定义：

JavaScript是一种弱检测的语言。它对变量的定义并不需要声明变量的类型，通过赋值的形式
可以将各种类型的数据赋值给同一变量。

(2)变量的声明与赋值：

在JavaScript中，变量可以用关键字var作声明，例如：var age；
JavaScript变量声明分为两种：显式声明与隐式声明。
显式声明：var i=56；
隐式声明： i=56； //JavaScript会自动用该变量名创建一个全局变量；
JavaScript可以使用var同时声明多个变量，也可以同时赋值。只声明但未对其赋值的变量，则其默认值为undefind。
例如：var x，y=“125”，xy=true，ost=19.5； -->

(3)变量的命名规则：

		A.一般以字母开头，中间可以出现下划线_，但是不能有有空格加减逗号等符号,必须以字母、下划线或美元符号开头，后面可以跟字母、下划线、美元符号和数字。
		B.变量名区分大小写，如:A与a是两个不同变量。
	    C.对变量命名时最好有含义，增强可读性，大驼峰命名法

命名规则:
（1）. 必须以字母、下划线或美元符号开头，后面可以跟字母、下划线、美元符号和数字。
（2）.变量名区分大小写，如:A与a是两个不同变量。
（3）.不允许使用JavaScript关键字和保留字做变量名。

2.JavaScript函数

(1)函数的定义

基本语法如下:

function 函数名(形式参数列表) {
函数体语句块;
}
说明:
（1）. function定义函数的关键字。

（2）. "函数名"你为函数取的名字。

（3）. "函数体语句块"替换为完成特定功能的代码。

(2)函数调用

函数只有被调用，其代码才会被真正的执行。与其他的JavaScript一样，
必须在标记之间。
JavaScript中的函数可以有返回值，也可以没有返回值，
返回值是通过return关键字加表达式实现的。

3.带参数的函数

上节中add2()函数不能实现任意指定两数相加。其实，定义函数还可以如下格式：
function 函数名(参数1,参数2) { 函数代码 }
注意:参数可以多个，根据需要增减参数个数。参数之间用(逗号，）隔开。
按照这个格式，函数实现任意两个数的和应该写成：
function add2(x,y) { sum = x + y; document.write(sum); }
x和y则是函数的两个参数，调用函数的时候，我们可通过这两个参数把两个实际的加数传递给函数了。
例如，add2(3，4)会求3+4的和，add2(60,20)则会求出60和20的和。

4.调用带参数的函数

在调用函数时，您可以向其传递值，这些值被称为参数。
这些参数可以在函数中使用。
您可以发送任意多的参数，由逗号 (,) 分隔：
myFunction(argument1,argument2)
当您声明函数时，请把参数作为变量来声明：
function myFunction(var1,var2)
{
这里是要执行的代码
}
变量和参数必须以一致的顺序出现。第一个变量就是第一个被传递的参数的给定的值，以此类推。

5.作用域

（1）局部 JavaScript 变量

在 JavaScript 函数内部声明的变量（使用 var）是局部变量，所以只能在函数内部访问它。（该变量的作用域是局部的）。
您可以在不同的函数中使用名称相同的局部变量，因为只有声明过该变量的函数才能识别出该变量。
只要函数运行完毕，本地变量就会被删除。

（2）全局 JavaScript 变量

在函数外声明的变量是全局变量，网页上的所有脚本和函数都能访问它。
JavaScript 变量的生存期
JavaScript 变量的生命期从它们被声明的时间开始。
局部变量会在函数运行以后被删除。
全局变量会在页面关闭后被删除。
向未声明的 JavaScript 变量来分配值
如果您把值赋给尚未声明的变量，该变量将被自动作为全局变量声明。
这条语句：
carname=“Volvo”;
将声明一个全局变量 carname，即使它在函数内执行。

6.操作符

保持先后顺序(操作符优先级）
操作符之间的优先级（高到低）:
算术操作符 → 比较操作符 → 逻辑操作符 → "="赋值符号
如果同级的运算是按从左到右次序进行,多层括号由里向外。
var numa=3; var numb=6; jq= numa + 30 >10 && numb * 3<2; //结果为false

7.自加一，自减一 ( ++和- -)

算术操作符除了(+、-、*、/)外，还有两个非常常用的操作符，自加一“++”；自减一“–”。首先来看一个例子：
mynum = mynum + 1;//等同于mynum++ mynum = mynum - 1;//等同于mynum–

8.条件运算符

条件运算符是三元运算符，使用该运算符可以方便地由条件逻辑表达式的真假值得到各自对应的取值。或由一个值转换成另外两个值，使用条件运算符嵌套多个值。其格式如下：

操作数？结果1：结果2

如果操作数的值为true，则整个表达式的结果为结果1，否则为结果2。

说明：条件运算符中条件部分若不是逻辑类型，按“非零即真”的原则进行判断。条件运算符嵌套时按“左结合性”计算。在编写语句时用多行表示一条复杂语句，会使语句结构清晰，增强程序的可读性。

二.JavaScript数据类型

1.JavaScript数据类型-数值型

数字（number）是最基本的数据类型。JavaScript和其他程序设计语言（例如C语言或者Java语言）的不同之处在于他并不区分整型数值和浮点数值。在JavaScript中，所有的数字都是浮点型。JavaScript采用64位浮点格式表示数字，这意味着它所表示的数值范围。

当一个数字直接出现在JavaScript程序中时，被称为数值直接量。JavaScript支持的数值直接量有整型数据、十六进制和八进制数据、浮点型数据几种，下面将对这几种进行形式进行详细介绍。

注意：在任何数值直接量前加上负号（-）可以构成它的负数。但是负数是一元求反运算符，不是数值直接量的一部分。

（1）. 整型数据

在JavaScript程序中，十进制的整数是一个数字序列，例如：
0 6 -8 200
var x=34;

（2）. 十六进制和八进制

JavaScript不但能够处理十进制的整型数据，还能够识别十六进制的数据。所谓的十六进制数据（基数为16），是以“0X”和“0x”开头，其后跟随十六进制数字串的直接量。十六进制的数字可以是0~9中的某个数字，也可以是a（A）- f（F）中的某个字母，他们用来表示0-15之间（包含0和15）的某个值，下面是十六进制整型数据的例子。例如：

0x8f //8*16+15=143（基数为10）

尽管ECMAScript标准不支持八进制数据，但是JavaScript的某些实现却允许采用八进制格式的整型数据（基数为8）。八进制数据以数字0开头，其后跟随一个数字序列，这个序列中的每个数字都在0~7之间（包括0和7），例如：

0566 //564+68+6=374（基数为10）

注意：由于某些JavaScript实现支持八进制数据，而有些不支持，所以最好不要使用0开头的整型数据，因为不知道某个JavaScript的实现是将其解释为十六进制，还是解释为八进制。

八进制数值字面量，(以 8 为基数)，前导必须是 0，八进制序列(0~7)。

var x = 070; //八进制，56

var x = 079; //无效的八进制，自动解析为 79

var x = 08; //无效的八进制，自动解析为 8

十六进制字面量前面两位必须是 0x，后面是(0~9 及 A~F)。

var x = 0xA; //十六进制，10

var x = 0x1f; //十六进制，31

（3）. 浮点型数据

浮点类型，就是该数值中必须包含一个小数点，并且小数点后面必须至少有一位数字。

var x = 3.8;

var x = 0.8;

var x = .8; //有效，但不推荐此写法

（4）. toFixed() 方法

toFixed() 方法可把number四舍五入为指定小数位数的数字，返回值为string类型。

var num = 3.456789;
var n=num.toFixed(); //将一个数字，不留任何小数：n 的值为3

var num = 3.456789;

var n=num.toFixed(2); //将一个数字，留2位小数：n 的值为3.46

alert(typeof n); // string

2.JavaScript数据类型-字符串型

字符串（string）是有Unicode字符、数字、标点符号等组成的序列，它是JavaScript用来表示文本的数据类型。程序中的字符串型数据包含在单引号和双引号中，由单引号定界的字符串中可以包含双引号，由双引号定界的字符串中也可以包含单引号。
其中字符串对象的“位置”时从0开始的。
例如：单引号括起来的一个或多个字符，代码如下：
‘A’
’ Hello JavaScript！’
例如：双引号括起来的一个或多个字符，代码如下：
“B”
" Hello JavaScript！"
例如：单引号定界的字符串中可以包含双引号，代码如下：
'pass=“mypass” ’
例如：双引号定界的字符串中可以包含单引号，代码如下：
“You can call her 'Rose '”
说明：JavaScript与C、Java不同的是，它没有char这样的单字符数据类型。要表示单个字符，必须使用长度为1的字符串。

3.JavaScript数据类型-布尔型

数值数据类型和字符串数据类型的值都是无穷多个，但布尔数据类型只有两个值，这两个合法的值分别由直接量“true”和“false”表示。它说明某个事物是真还是假。
在JavaScript程序中，布尔值通常用来比较所得的结果，例如：
m==1
这行代码测试了变量m的值是否和数值1相等。如果相等，比较的结果就是布尔值true，否则结果就是false。
布尔值通常用于JavaScript的控制结构。例如，JavaScript的if/else 语句就是在布尔值true时执行一个动作，而在布尔值为false时执行另一个操作。JavaScript在必要的时候将true转化为1，将false转化为0。

4.JavaScript数据类型-特殊数据类型

JavaScript还包括一些特殊类型的数据，如转义字符、未定义值等。

（1）. 转义字符

以反杠开头的，不可显示的特殊字符通常称为控制字符，也被称为转义字符。通过转义字符可以在字符串中添加不可以显示的特殊字符，或者避免引号匹配混乱。JavaScript常用的转义字符如表所示。
表 JavaScript常用的转义字符
转义字符 描述 转义字符 描述
\b 退格 \v 跳格（Tab、水平）
\n 回车换行 \r 换行
\t Tab符号 \ 反斜杠
\f 换页 \OO 八进制整数，范围00~77
\’ 单引号 \xHH 十六进制整数，范围00~FF
\” 双引号 \uhhhh 十六进制编码的Unicode字符
在document.write( )语句中使用转义字符时，只有将其放在格式化文本标签

中才会起作用。如： document.write(" <pre>努力学习\nJavaScript语言！</pre>");

（2）. 未定义值

未定义类型的变量是undefined，表示变量还没有赋值（如var m;），或者赋予一个不存在的属性值（如var m=String.noproperty;）。
此外，JavaScript中还有一种特殊类型的数字常量NaN，即“非数字”。当程序由于某种原因计算错误后，将产生一个没有意义的数字，此时JavaScript返回的数值就是NaN。

（3）. 空值

JavaScript中的关键字null是一个特殊的值，它表示值为空，用于定义空的或者不存在的引用。这里必须注意的是，null不等同与空字符串（""）和0。.
由此可见，null和undefined的区别是，null表示一个变量被赋予了一个空值，而undefined则表示该变量尚未被赋值。

（4）. 复合数据类型:Object类型

值为基本数据类型的组合如。

5.JavaScript JSON

（1）JavaScript JSON

JSON 是用于存储和传输数据的格式。
JSON 通常用于服务端向网页传递数据 。

（2）什么是 JSON?

• JSON 英文全称 JavaScript Object Notation
• JSON 是一种轻量级的数据交换格式。
• JSON是独立的语言 *
• JSON 易于理解。
JSON 格式化后为 JavaScript 对象
JSON 格式在语法上与创建 JavaScript 对象代码是相同的。
由于它们很相似，所以 JavaScript 程序可以很容易的将 JSON 数据转换为 JavaScript 对象。

（3）JSON 语法规则

• 数据为 键/值 对。
• 数据由逗号分隔。
• 大括号保存对象
• 方括号保存数组

（4）JSON 数据 - 一个名称对应一个值

JSON 数据格式为 键/值 对，就像 JavaScript 对象属性。
键/值对包括字段名称（在双引号中），后面一个冒号，然后是值：
“name”:“Runoob”
字段名称 ：值

---

（5）JSON 对象

JSON 对象保存在大括号内。
就像在 JavaScript 中, 对象可以保存多个 键/值 对：
{“name”:“Runoob”, “url”:“www.runoob.com”}

---

（6）JSON 数组

JSON 数组保存在中括号内。
就像在 JavaScript 中, 数组可以包含对象：
“sites”:[ {“name”:“Runoob”, “url”:“www.runoob.com”}, {“name”:“Google”, “url”:“www.google.com”}, {“name”:“Taobao”, “url”:“www.taobao.com”}]
在以上实例中，对象 “sites” 是一个数组，包含了三个对象。
每个对象为站点的信息（网站名和网站地址）。

---

（7）JSON 字符串转换为 JavaScript 对象

通常我们从服务器中读取 JSON 数据，并在网页中显示数据。
简单起见，我们网页中直接设置 JSON 字符串 ：
首先，创建 JavaScript 字符串，字符串为 JSON 格式的数据：
var text = ‘{ “sites” : [’ +’{ “name”:“Runoob” , “url”:“www.runoob.com” },’ +’{ “name”:“Google” , “url”:“www.google.com” },’ +’{ “name”:“Taobao” , “url”:“www.taobao.com” } ]}’;
然后，使用 JavaScript 内置函数 JSON.parse() 将字符串转换为 JavaScript 对象:
var obj = JSON.parse(text);
最后，在你的页面中使用新的 JavaScript 对象：
实例
var text = ‘{ “sites” : [’ + ‘{ “name”:“Runoob” , “url”:“www.runoob.com” },’ + ‘{ “name”:“Google” , “url”:“www.google.com” },’ + ‘{ “name”:“Taobao” , “url”:“www.taobao.com” } ]}’;
obj=JSON.parse(text);
document.getElementById(“demo”).innerHTML = obj.sites[1].name + " " + obj.sites[1].url;

（8）Json解析

json格式的数据越来越多的在web开发中起到重要作用。下面介绍对于json对象和数组经常用到解析方法。
var obj ={”name”:”冯娟”,”password”:”123456″,”department”:”技术部”,”gender”:” 女”,”old”:26};

var arr = [{dd:‘SB’,AA:‘东东’,re1:123},{cccc:‘dd’,lk:‘1qw’}];

1、对于一个json对象，已知其json中的某个键的值，求对应的值：
格式一、 obj.name
格式二、 obj.[‘name’]

2、对于json对象，需要遍历json对象的所有数据：
遍历方法：
for(var p in obj){
str = str+obj[p]+’,’;//这里p为键，obj[p]为值
return str;
}

3、对于普通json数组，我们可以向解析普通的数组来解析
for(var i=0;i<arr.length;i++){
alert(i+"-"+arr[i]);
}

4、对于json对象数组，解析方式如下：
解析一、
for(var i=0,l=arr.length;i<l;i++){
for(var key in arr[i]){
alert(key+’:’+arr[i][key]);
}
}

   解析二、使用jquery解析　　　

$.each(arr, function (n, value) { //说明，对于数组，那么n为下表，value为下表对应的值；对于对象，那么n为键，value为值
alert(n + ’ ’ + value);
});

6.数据类型的自动转换

当JavaScript尝试操作一个"错误"的数据类型时，会自动转换为"正确"的数据类型。以下输出结果不是你所期望的：
5 + null // 返回 5 null 转换为 0
“5” + null // 返回"5null" null 转换为 “null”
“5” + 1 // 返回 “51” 1 转换为 “1”
“5” - 1 // 返回 4 “5” 转换为 5
“5”* 2 // 返回 10 “5” 转换为 5
“6” / 2 // 返回 3 “6” 转换为 6
总结：当字符串与其它类型用+连接，其它类型会转为字符串，其它的运算符-,*,/,%都会转换成Number类型

7.typeof的用法

typeof运算符返回其操作数当前的数据类型。这对于判断一个变量是否已被定义特别有用。

说明：typeof运算符把类型信息用字符串返回。typeof运算符的返回值有6种：“number”、“string”、“boolean”、“object”、“function”和“undefined”。
typeof “John” // 返回 string
typeof 3.14 // 返回 number
typeof false // 返回 boolean
typeof [1,2,3,4] // 返回 object
typeof {name:‘John’, age:34} // 返回 object
typeof undefined // undefined
typeof null // object
typeof是操作符，不是方法，也就是说和加减号一样用，不考虑优先级问题，没必要给操作数加括号，当然加了也没事儿，说实话可读性还挺高
typeof返回值都是小写字符串
null的类型不是null，而是"object"
NaN这个不是数字的类型也是"number"
function明明也是对象，但是typeof却给了"function"类型
其它对象都返回"object",很没有识别性
具体识别对象类型使用instanceof 操作符，这个记住一点儿就行，对于基本类型，instanceof 永远返回false
1 instanceof Number; //false
new Number(1) instanceof Number; //true

三.JavaScript控制语句

1.if…else…语句

做判断（if语句）
if语句是基于条件成立才执行相应代码时使用的语句。
语法:
if(条件) { 条件成立时执行代码}
注意：if小写，大写字母（IF）会出错！

2.Switch语句

多种选择（Switch语句)
当有很多种选项的时候，switch比if else使用更方便。
语法:
switch(表达式) { case值1: 执行代码块 1 break; case值2: 执行代码块 2 break; … case值n: 执行代码块 n break; default: 与 case值1 、 case值2…case值n 不同时执行的代码 }
语法说明:
Switch必须赋初始值，值与每个case值匹配。满足执行该 case 后的所有语句，并用break语句来阻止运行下一个case。如所有case值都不匹配，执行default后的语句。

3.循环结构

（1）循环结构的三个要素

循环初始化，设置循环变量初值；
循环控制，设置继续循环进行的条件；
循环体，重复执行的语句块。

（2）当循环结构：while（）

当循环结构，while语句格式如下：
while（条件表达式）{
语句块
}

（3）直到循环结构：do…while

直到循环结构，do…while语句格式如下：
do{
语句块
} while（条件表达式）;

（4）计数循环结构:for

计数循环结构， for语句格式如下：
for(var i=0;i<length;i++){
语句块
}
现有数组和json对象如下
var demoArr = [‘Javascript’, ‘Gulp’, ‘CSS3’, ‘Grunt’, ‘jQuery’, ‘angular’];
var demoObj = {
aaa: ‘Javascript’,
bbb: ‘Gulp’,
ccc: ‘CSS3’,
ddd: ‘Grunt’,
eee: ‘jQuery’,
fff: ‘angular’
};

避免使用for(var i=0; i<demo1Arr.length; i++){} 的方式，这样的数组长度每次都被计算，效率低于上面的方式。也可以将变量声明放在for的前面来执行，提高阅读性：
var i = 0, len = demo1Arr.length;
for(; i<len; i++) {};

（5）枚举循环结构：for…in

枚举循环结构，for…in语句格式如下：
for(var i=0 in array){ 或者 for(i in array){
语句块 语句块
} }
for(var item in arr|obj){} 可以用于遍历数组和对象
遍历数组时，item表示索引值， arr表示当前索引值对应的元素 arr[item]
遍历对象时，item表示key值，arr表示key值对应的value值 obj[item]

（6）break

退出循环break
在while、for、do…while、while循环中使用break语句退出当前循环，直接执行后面的代码。

格式如下：
for(初始条件;判断条件;循环后条件值更新) {
if(特殊情况) {
break;
}
循环代码
}

（7）continue

继续循环continue
continue的作用是仅仅跳过本次循环，而整个循环体继续执行。
语句结构：
for(初始条件;判断条件;循环后条件值更新) {
if(特殊情况) {
continue;
}
循环代码
}

4.异常处理语句

程序运行过程中难免会出错，出错后的运行结果往往是不正确的，因此运行时，出错的程序通常被强制中止。运行时的错误统称为异常，为了能在错误发生时得到一个处理的机会，JavaScript提供了异常处理语句：try-catch。编码时通常将可能发生错误的语句写入try块的花括号中，并在其后的catch块中处理错误。错误信息包含在一个错误对象里，通过exception的引用可以访问该对象。根据错误对象中的错误信息以确定如果处理。
try{
tryStatements //必选项。可能发生错误的语句序列。
}
catch(exception){ //必选项。任何变量名，用于引用错误发生时的错误对象。
catchStatements //可选项。错误处理语句，用于处理tryStatements中发生的错误。
}
示例如下：
var txt="";
function message()
{ try { adddlert(“Welcome guest!”); }
catch(err)
{ txt=“本页有一个错误。\n\n”;
txt+=“错误描述：” + err.message + “\n\n”;
txt+=“点击确定继续。\n\n”;
alert(txt);
}
}
message();
throw语句允许创建自定义错误，创建或抛出异常（exception）。如果把throw与try和catch一起使用，能够控制程序流，并生成自定义的错误消息。

5.prompt()方法

prompt()方法：输入语句用于显示和提示用户输入的对话框。方法返回用户输入的字符串。
语法：prompt(msg,defaultText)
参数mag可选：要在对话框中显示的纯文本（而不是HTML格式的文本）。用于提示。
参数defaultText可选。默认的输入文本。 -->
语法：prompt(msg,defaultText)
参数msg可选。要在对话框中显示的纯文本（而不是HTML格式的文本）。用于提示。
参数defaultText可选。默认的输入文本。
可以使用对话框询问用户账号并处理回复。

<script> 
var ans = prompt("请输入您的账号?","666"); 
if (ans) {
  alert("您的账号是： " + ans); 
} 
else { 
     alert("您拒绝了回答！"); 
}
</script>
</script> 
 
</script>