JavaScript编程基础2

1，数据类型相关操作

使用typeof x函数查看变量的数据类型：

typeof "John"                // 返回 string

typeof 3.14                  // 返回 number

typeof false                 // 返回 boolean

typeof [1,2,3,4]             // 返回 object，数组是一种特殊的对象类型

typeof {name:'John', age:34} // 返回 object， 因此 typeof [1,2,3,4] 返回 object

null：

　　null表示什么都没有，它自己是一种类型，表示一个空对象引用。所以可以把变量设置为null来清空对象。

undefined：

　　在 JavaScript 中, undefined 是一个没有设置值的变量。typeof 一个没有值的变量会返回 undefined。

null和undefined区别：

typeof undefined             // undefined

typeof null                  // object

null === undefined           // false

null == undefined            // true

2，类型转换

在 JavaScript 中有 5 种不同的数据类型：

string
number
boolean
object
function

3 种对象类型：

Object
Date
Array

2 个不包含任何值的数据类型：

null
undefined

constructor属性：

constructor属性返回javaScript变量的构造函数：

"John".constructor                 // 返回函数 String()  { [native code] }

(3.14).constructor                 // 返回函数 Number()  { [native code] }

false.constructor                  // 返回函数 Boolean() { [native code] }

[1,2,3,4].constructor              // 返回函数 Array()   { [native code] }

{name:'John', age:34}.constructor  // 返回函数 Object()  { [native code] }

new Date().constructor             // 返回函数 Date()    { [native code] }

function () {}.constructor         // 返回函数 Function(){ [native code] }

　　在我看来，js中的数组：var mycar=new Array("hello","i am","fine")是对象的实例，而[1,2,4]这种，更接近真正意义上的数组。

isArray()和isDate()用法，第一个为例

//看isArray()的用法，

var fruits = ["Banana", "Orange", "Apple", "Mango"];

document.getElementById("demo").innerHTML = isArray(fruits);    //返回true

//true直接会写到id=demo的元素中

数据类型转换：变成字符串

String(x) 把数字转换为字符串

String(x)         // 将变量 x 转换为字符串并返回

String(123)       // 将数字 123 转换为字符串并返回

String(100 + 23)  // 将数字表达式转换为字符串并返回，先算，后转换，转换以后是，字符串123，当然了输出的时候并不会表明自己的类型

toString()也是这样的作用：(123).toString()

　　其他的数字变字符串方法简介：留后再学，赶进度

方法	描述
toExponential()	把对象的值转换为指数计数法。
toFixed()	把数字转换为字符串，结果的小数点后有指定位数的数字。
toPrecision()	把数字格式化为指定的长度。

布尔值转换为字符串：

String(false)        // 返回 字符串false

false.toString()     // 返回 字符串false，两个方法都可以

日期变成字符串：

String(new Date())  //返回当前日期的字符串格式

obj.toString()     //同上

Date方法简介：

方法	描述
getDate()	从 Date 对象返回一个月中的某一天 (1 ~ 31)。
getDay()	从 Date 对象返回一周中的某一天 (0 ~ 6)。
getFullYear()	从 Date 对象以四位数字返回年份。
getHours()	返回 Date 对象的小时 (0 ~ 23)。
getMilliseconds()	返回 Date 对象的毫秒(0 ~ 999)。
getMinutes()	返回 Date 对象的分钟 (0 ~ 59)。
getMonth()	从 Date 对象返回月份 (0 ~ 11)。
getSeconds()	返回 Date 对象的秒数 (0 ~ 59)。
getTime()	返回 1970 年 1 月 1 日至今的毫秒数。

数据类型转换：变成数字

Number("3.14")    // 返回 3.14  空字符串转换为0，其他字符串转换为NaN
Number("99 88")   // 返回 NaN

var x="5";
var y=+5;    //y将是数字5，一元运算符可以把变量转化为数字，如果不能转化，那就得到NaN，仍旧是数字类型

　　其他字符串转换为数字的方法：

方法	描述
parseFloat()	解析一个字符串，并返回一个浮点数。
parseInt()	解析一个字符串，并返回一个整数

布尔值转化为数字：

Number(false)     // 返回 0

Number(true)      // 返回 1

日期转化为数字：

d = new Date();

Number(d)    //我得到的是15多少多少的一个数，估计是时间戳
//用d.getTime()也是可以的。

数据类型转换：自动转换类型

当 JavaScript 尝试操作一个 "错误" 的数据类型时，会自动转换为 "正确" 的数据类型

5 + null    // 返回 5         null 转换为 0

"5" + null  // 返回"5null"   null 转换为 "null"

"5" + 1     // 返回 "51"      1 转换为 "1"

"5" - 1     // 返回 4         "5" 转换为 5

当你尝试输出一个对象或一个变量时 JavaScript 会自动调用变量的 toString() 方法：

document.getElementById("demo").innerHTML = myVar;

myVar = {name:"Fjohn"}  // toString 转换为 "[object Object]"

myVar = [1,2,3,4]       // toString 转换为 "1,2,3,4"

myVar = new Date()      // toString 转换为 "Fri Jul 18 2014 09:08:55 GMT+0200"

数字和布尔值也经常相互转换：

myVar = 123             // toString 转换为 "123"    为什么数字123会转换成字符串123呢，我估计可能是因为html需要输出统一的字符给用户看

myVar = true            // toString 转换为 "true"

myVar = false           // toString 转换为 "false"

3，正则表达式

语法实例：

var patt = /runoob/i    //声明变量patt等于rundoob，i表示不区分大小写；这语法和sed，awk有点像

正则的修饰符：

修饰符	描述
i	执行对大小写不敏感的匹配。
g	执行全局匹配（查找所有匹配而非在找到第一个匹配后停止）。
m	执行多行匹配。

search() 方法

用于检索字符串中指定的子字符串，或检索与正则表达式相匹配的子字符串，并返回子串的起始位置。

var str = "Visit Runoob!";

var n = str.search(/Runoob/i);    //返回6

replace() 方法

用于在字符串中用一些字符替换另一些字符，或替换一个与正则表达式匹配的子串。

<body>

<button onclick="myFunction()">点我</button>    //按钮激发事件

<p id="demo">请访问 Microsoft!</p>

<script>

function myFunction() {

    var str = document.getElementById("demo").innerHTML;     //得到id=demo的元素的内容，赋值给str

    var txt = str.replace(/microsoft/i,"Runoob");    //声明变量txt等于在str的基础上把microsoft换成runoob。

    document.getElementById("demo").innerHTML = txt;    //重写id=demo的元素

}

</script>

</body>

js中的正则表达式简介：

表达式	描述
[abc]	查找方括号之间的任何字符。
[0-9]	查找任何从 0 至 9 的数字。
(x\|y)	查找任何以 \| 分隔的选项。

元字符	描述
\d	查找数字。
\s	查找空白字符。
\b	匹配单词边界。
\uxxxx	查找以十六进制数 xxxx 规定的 Unicode 字符。

量词	描述
n+	匹配任何包含至少一个 n 的字符串。
n*	匹配任何包含零个或多个 n 的字符串。
n?	匹配任何包含零个或一个 n 的字符串。

使用 RegExp 对象

在 JavaScript 中，RegExp 对象是一个预定义了属性和方法的正则表达式对象

调用var xxx=new RegExp('patton')就可以使用以下命令：

使用test（）：

test() 方法用于检测一个字符串是否匹配某个模式，如果字符串中含有匹配的文本，则返回 true，否则返回 false。

<script>

var patt1=new RegExp("e");   //实例化

document.write(patt1.test("The best things in life are free")); // 返回true，注意格式，是patt.test()，作用是查找字符串中有没有e。

</script>

//简写：/e/.test("The best things in life are free!")    厉害了，还有这种操作，但是好像不支持正则修饰符

使用exec（）：

exec() 方法用于检索字符串中的正则表达式的匹配。该函数返回一个数组，其中存放匹配的结果。如果未找到匹配，则返回值为 null。

<script>

var patt1=new RegExp("be|es");

document.write(patt1.exec("The best things in life are free"));

</script>

//返回的是be，所以我觉得它实际上只是返回匹配到的第一个值

4，javascript错误

try 语句测试代码块的错误。它允许我们定义在执行时进行错误测试的代码块。

catch 语句处理错误。catch 语句允许我们定义当 try 代码块发生错误时，所执行的代码块。

throw 语句创建自定义错误。当错误发生时，JavaScript 引擎通常会停止，并生成一个错误消息。

try...catch...

<script>

var txt="";

function message(){

    try {

        adddlert("Welcome guest!");    //特意写错了alert，如果try语句有错误，那就执行catch语句

    }

    catch(err) {    //catch 块会捕捉到 try 块中的错误，并执行代码来处理它。

        txt="本页有一个错误。\n\n";

        txt+="错误描述：" + err.message + "\n\n";    //捕捉错误用err.message

        txt+="点击确定继续。\n\n";

        alert(txt);

    }

}

</script>

</head>

<body>

<input type="button" value="查看消息" onclick="message()" />    //激发事件

</body>

throw语句

<body>

<p>请输出一个 5 到 10 之间的数字:</p>

<input id="demo" type="text">    //定义了一个文本框，用于收集用户端的信息

<button type="button" onclick="myFunction()">测试输入</button>    //按钮激发事件

<p id="message"></p>    //结果会更新在这个段落中，尽管现在是空的

<script>

function myFunction() {

    var message, x;    //两个变量

    message = document.getElementById("message");    //message相当于获取元素了

    message.innerHTML = "";    //元素的用空填充的

    x = document.getElementById("demo").value;    //x用于获取用户的输入

    try {

        if(x == "")  throw "值为空";    //如果用户的输入是空的话，直接引发错误，下面的代码不执行了，调到catch语句，打印出错误.err指代的是什么呢？其实就是throw后面的部分。

        if(isNaN(x)) throw "不是数字";

        x = Number(x);

        if(x < 5)    throw "太小";

        if(x > 10)   throw "太大";

    }

    catch(err) {

        message.innerHTML = "错误: " + err;    //向带id=message的元素中输出错误

    }

}

</script>

</body>

</html>

5 javascript调试

在程序代码中寻找错误叫做代码调试。调试很难，但幸运的是，很多浏览器都内置了调试工具。浏览器启用调试工具一般是按下 F12 键，并在调试菜单中选择 "Console" ，chrome的调试快捷键是ctrl+shift+j

console.log()方法：

在调试窗口上打印js程序的某个值

a = 5;

b = 6;

c = a + b;

console.log(c);

设置断点：用debugger

<body>

<p id="demo"></p>

<p>开启调试工具，在代码执行到第三行前会停止执行。</p>

<script>

var x = 15 * 5;

debugger;    //不开启调试工具的时候正常执行，开启以后在此处形成一个断点，点击下一步以后，页面会显示正确的内容

document.getElementById("demo").innerHTML = x;

</script>

</body>

6 变量提升

在js解释器内部，函数声明和变量声明总是会被解释器悄悄地被"提升"到方法体的最顶部。

//先用后声明，

x = 5; // 变量 x 设置为 5

elem = document.getElementById("demo"); // 查找元素

elem.innerHTML = x;                     // 在元素中显示 x

var x; // 声明 x

//先声明后用，是一样的

var x; // 声明 x

x = 5; // 变量 x 设置为 5

elem = document.getElementById("demo"); // 查找元素

elem.innerHTML = x;                     // 在元素中显示 x

//声明的时候同时赋值叫初始化，初始化的变量不会提升

var x = 5; // 初始化 x

elem = document.getElementById("demo"); // 查找元素

elem.innerHTML = x + " " + y;           // 显示 x 为5，但是y是undefined

var y = 7; // 初始化 y以后，y并没有被提升

为了避免由于声明提升引发的问题，通常我们在每个作用域开始前声明这些变量，这也是正常的 JavaScript 解析步骤，易于我们理解。

7，严格模式

启用严格模式：

<script>

"use strict";    //启用全局的严格模式的代码写在<script>标签内部的开头，双引号，分号，启用局部严格模式就写在局部咯

x = 3.14;       // 报错 (x 未定义)

</script>

严格模式的优点：

消除Javascript语法的一些不合理、不严谨之处，减少一些怪异行为;

消除代码运行的一些不安全之处，保证代码运行的安全；
提高编译器效率，增加运行速度；
为未来新版本的Javascript做好铺垫。

"严格模式"体现了Javascript更合理、更安全、更严谨的发展方向

严格模式的限制：有的不甚理解，留后

　　不允许使用没有声明的变量；对象也是一个变量

　　不允许删除变量，函数或者对象：错误示范：var x；delete x；

　　不允许变量重名；

　　不允许使用八进制；

　　不允许转义字符；

　　不允许对只读属性赋值；

　　不允许对一个使用getter方法读取的属性进行赋值

　　不允许删除一个不允许删除的属性：

　　变量名不能使用 "eval" 字符串，arguments字符串，在作用域 eval() 创建的变量不能被调用：

　　禁止this关键字指向全局对象。

8.js使用误区

1， if （x==10）注意，用比较运算符：==而不是=。

2，注意+号：var x=10; var y="5"; var z=x+y ; //得到z等于105.

3，浮点型数据注意事项：var x=0.1;var y=0.2;var z=x+y; //得到z等于0.30000000000000004 ，所以使用浮点数的时候要小心精度引起的问题

4，字符串分行：

<script>

document.getElementById("demo").innerHTML = "Hello \

World!";    //在编辑器里分行使用“\”反斜杠，输出中换行的话，使用<br>

</script>

5,分号

<script>

var x = 5;

if (x == 19);{    //此处错误地使用了分号，导致满足条件才执行的代码立马被执行了

    document.getElementById("demo").innerHTML = "Hello";

}

</script>

6，return

//错误示范：

function myFunction(a) {

    var

    power = 10;  //前一句分行写没毛病，因为var后面没有东西的时候浏览器会加载下一句。

    return    //但是return语句不能分开写，因为它本身可以被当作独立的语句，所以老老实实地遵循规则吧

    a * power;

}

7,这个比较重要：

　　js的数组中只能使用数字作为索引，

var person = [];

person[0] = "John";

person[1] = "Doe";

person[2] = 46;

var x = person.length;         // person.length 返回 3

var y = person[0];             // person[0] 返回 "John"

　　不能使用名字（字符串）作为索引，因为只要它用了字符串做索引，它就不再是数组了，而是对象。

var person = [];

person["firstName"] = "John";

person["lastName"] = "Doe";

person["age"] = 46;

var x = person.length;         // person.length 返回 0，数组的方法已经不能再继续使用

var y = person[0];             // person[0] 返回 undefined

8，js中定义数组和对象，最后一个元素后边不能加逗号。

//错误示范：

var colors = [5, 6, 7,]; //这样数组的长度可能为3 也可能为4

websites = {site:"菜鸟教程", url:"www.runoob.com", like:460,}    //这个是对象

9，undefined不是null

在 JavaScript 中, null 用于对象, undefined 用于变量，属性和方法。对象只有被定义才有可能为 null，否则为 undefined。

如果我们想测试对象是否存在，在对象还没定义时将会抛出一个错误。

所以我们一般这样写：

if (typeof myObj !== "undefined" && myObj !== null)

// myObj的类型不是undefined 并且myObj的值不等于null

10，程序块的作用域一般是全局的

for (var i = 0; i < 10; i++) {

    // some code

}

return i;    //这是正确的

9，js表单

表单验证：http://www.runoob.com/js/js-validation.html