JS_03_类型_正则_异常_保留字_JSON

为了去掉console.log()的因为无返回值导致输出的undefined,我们可以自定义一个函数

代码如下:

function NSLog(loli) {console.log(loli);return 'Copyright © 2018 Powered by beyond';};

效果如下:

JavaScript 类型转换

---

Number() 转换为数字， 

String() 转换为字符串， 

Boolean() 转化为布尔值。

---

JavaScript 数据类型

ECMAScript中 7种原生构造器

1. Boolean

2. Number

3. String 

4. Array

5. Function

6. Object

7. Symbol (新增)

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

用typeof()可以返回下面5个字符串,

注意下面5个只是不同的字符串而已：

• boolean  (只有true和false两个值)
• number (NaN是number类型的一个值)
  
• string
• object     (null 使用typeof()检测,返回的也是object)
• function

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

null == undefined 为true,

但是null === undefined为false

• null                 typeof(null) 为 object
• undefined       typeof(undefined)为undefined, 没有赋值的变量就是undefined

3 种对象类型：

• Object ???注意这个Object才是对象类型,前面的"object"只是一个普通字符串而已???
• Date
• Array

---

typeof 操作符

你可以使用 typeof 操作符的返回值字符串,

来查看 JavaScript 变量的5种数据类型。

实例

typeof   "beyond"                   // 返回的字符串是 string 
typeof   3.14                     // 返回的字符串是 number
typeof   NaN                     // 返回的字符串是 number  
typeof   false                    // 返回的字符串是 boolean
typeof  [ 0,1, 2 , 3 , 4 ]               // 返回的字符串是 object
typeof  {name:  '面码' , age:15}   // 返回的字符串是 object
typeof   new  Date()              // 返回的字符串是 object
typeof   function  () {}          // 返回的字符串是 function
typeof  lover                   // 返回的字符串是 undefined (if lover is not declared) 
typeof   null                     // 返回的字符串是 object

请特别注意：

• NaN 的数据类型是 number
• 数组(Array)的数据类型是 object
• 日期(Date)的数据类型为 object
• null 的数据类型是 object
• 未定义变量(也未赋值的)的数据类型为 undefined
• 函数的数据类型是function

如果是 JavaScript Array 或 JavaScript Date 这样的,typeof()返回的字符串统一是"object",

我们就无法通过 typeof 来判断他们的具体的类型，

因为它们都是 返回的字符串都是"object"

---

constructor 属性

constructor 属性返回所有 JavaScript 变量的构造函数。

具体的对象有:String,Number,Boolean,Array,Date,Function,Object

注意:特殊的是null虽然typeof()返回字符串是"object",但是无法读取null.constructor属性的!

注意:没有定义(也没有赋值)的变量,也是无法读取variable.constructor属性的!

注意:数字必须用()包起来,才能读取(52).constructor属性的!

实例

"面码".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] }

注意:读取null和未定义(也未赋值)的变量的constructor属性,结果会报错!

注意:数字必须用括号括起来!否则报错! 如(52.67).constructor

应用:此时,你就可以使用 constructor 属性来查看某个对象它到底是不是 数组 啦 (包含字符串 "Array"):

实例

function isArray(arr) { 
     return arr.constructor.toString().indexOf( "Array") >  -1; 
}

现在,我们就可以使用 constructor 属性来查看是某个对象它到底是不是日期啦 (包含字符串 "Date"):

实例

function isDate(dateObj) { 
     return dateObj.constructor.toString().indexOf( "Date") >  -1; 
}

---

JavaScript 类型转换

JavaScript 变量可以 自由地 转换为 新的变量 或 其他数据类型：

• 通过使用 JavaScript 转换函数
• 通过 JavaScript 神奇的自身自动转换

---

将数字转换为字符串

全局方法 String() 可以将 数字 转换为字符串。

该方法可用于任何类型的数字，字母，变量，表达式：

实例

String(x)          // 将变量 x 转换为字符串并返回
String( 52)        // 将数字 67 转换为字符串并返回
String( 6 +  7)   // 将数字表达式转换为字符串并返回

Number 方法 toString() 也是有同样的效果。

实例

x.toString() 
( 52 ).toString() 
( 6  + 7 ).toString()

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

---

将布尔值转换为字符串

全局方法 String() 可以将布尔值转换为字符串。

String( false)         // 返回 "false"
String( true)          // 返回 "true"

Boolean 方法 toString() 也有相同的效果。

false.toString()      // 返回 "false"
true.toString()       // 返回 "true"

---

将日期转换为字符串

全局方法 String() 可以将日期转换为字符串。

String(Date())       // 返回 Thu Jul 17 2014 15:38:19 GMT+0200 (W. Europe Daylight Time)

Date 方法 toString() 也有相同的效果。

实例

Date().toString()    // 返回 Thu Jul 17 2014 15:38:19 GMT+0200 (W. Europe Daylight Time)

在 Date 方法 章节中，你可以查看更多关于日期转换为字符串的函数：

方法	描述
getDate()	从 Date 对象返回一个月中的某一天 (1 ~ 31)。
getDay()	从 Date 对象返回一周中的某一天 (0 ~ 6), 0是礼拜天
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( "3.14")     // 返回 3.14
Number( " ")        // 返回 0 
Number( "")         // 返回 0 
Number( "99 88")    // 返回 NaN

在 Number 方法 章节中，你可以查看到更多关于字符串转为数字的方法：

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

---

一元运算符 +  

字符串前面的 Operator + 可用于 将 变量 转换为 数字(Number含NaN)：

实例

var y =  "13";       // y 是一个字符串
var x = + y;       // x 是一个数字

如果该变量不能成功转换为正确的数字，那么它仍然会是一个数字，

只是这个数字的值为 NaN (即not a number不是一个数字):

实例

var y =  "面码";    // y 是一个字符串
var x = + y;       // x 是一个数字 (NaN)

---

将布尔值转换为数字

全局方法 Number() 可将布尔值转换为数字。

Number( false)      // 返回 0
Number( true)       // 返回 1

---

将日期转换为数字

全局方法 Number() 可将日期转换为数字。

d =  new Date(); 
Number(d)           // 返回 1404568027739

日期方法 getTime() 也有相同的效果。

d =  new Date(); 
d.getTime()         // 返回 1404568027739

---

牛X的自动转换类型 Type Conversion

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

以下输出结果不是你所期望的：

注意:

1.字符串 与 其他东东  用+号相连时,  是concat连接

2.字符串 单独 在其前面 跟一个 + ,作用是将 字符串转成数字

3.字符串 单独 在其后面 跟一个 + ,将会报错!  

   

5 +  null     // 返回 5         because null is converted to 0
"5" +  null   // 返回"5null"   because null is converted to "null" 
"5" +  20      // 返回 "520"      because 1 is converted to "1"  
"5" -  1      // 返回 4         because "5" is converted to 5

牛X,看不懂唉~

数字 + null, null自动转成数字0

字符串 - 数字,  字符串自动转成数字

字符串 + 数字,  +号的作用是concat;

字符串 + null,  +号的作用是concat;

---

自动转换为字符串

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

document.getElementById( "id_p_result").innerHTML = tmpVariable; 

// if tmpVariable = {name:"面码"}  // toString 转换为 "[object Object]"
// if tmpVariable = [5,2,6,7]       // toString 转换为 "5,2,6,7"
// if tmpVariable = new Date()      // toString 转换为 "Fri June 07 2018 05:20:55 GMT+0200"

数字和布尔值也经常 转换 成对应的字符串：

// if myVar = 123             // toString 转换为 "123"
// if myVar = true            // toString 转换为 "true"
// if myVar = false           // toString 转换为 "false"

---

null         typeof(null) 返回值是 "object"

在 JavaScript 中 null 表示 "什么都没有"，

null是一个只有一个值的特殊类型，表示一个空对象引用。

当设置为“null”时，可以用来清空对象：

var loli = null; // 值为 null(虽然是  空), 但它的类型 尊贵 ,为object对象

提示：你可以使用 typeof(null) 返回是object。

---

undefined

在 JavaScript 中 undefined 是一个没有设置值的变量。

如果一个变量没有设置值的话，就会返回 undefined：

var loli; // 值为 undefined(空), 类型typeof(loli)是 undefined

---

 

关于 + 号的几个疑问:

JavaScript 正则表达式

---

正则表达式（英语：Regular Expression，在代码中常简写为regex、regexp或RE）

使用单个字符串来  描述、匹配  一系列符合某个  句法规则  的字符串   搜索模式。

搜索模式可用于 文本搜索 和 文本替换。

---

什么是正则表达式？

正则表达式是由一个字符序列形成的搜索模式。

当你在文本中搜索数据时，你可以用搜索模式来描述你要查询的内容。

正则表达式可以是一个简单的字符，或一个更复杂的模式。

正则表达式可用于所有  文本搜索  和  文本替换  的操作。

语法

/ pattern/ modifiers;

实例：

var patt = /beyond/i

实例解析：

/beyond/i  是一个正则表达式。

beyond  是一个模式 (用于检索)。

i  是一个修饰符 (意思是指本次搜索 不区分大小写)。

---

使用字符串方法

在 JavaScript 中，正则表达式通常只用于字符串的两个方法而已 : search() 和 replace()。

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

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

---

search() 方法使用正则表达式

实例

使用正则表达式搜索 "beyond" 字符串，且不区分大小写(ignore)：

var str =  "hello beyond"; 
var n = str.search(/beyond/i);

输出结果为：

6

---

search() 方法使用字符串

search 方法可使用字符串作为参数。字符串参数会转换为正则表达式：

实例

检索字符串中 "beyond" 的子字符串：

var str =  "hello beyond!"; 
var n = str.search( "beyond");

---

replace() 方法使用正则表达式

实例

使用正则表达式且不区分大小写将字符串中的 World 替换为 beyond :

var str =  "Hello World!"; 
var res = str.replace(/world/i,  "beyond");

结果输出为:

Hello beyond!

replace() 方法使用字符串

replace() 方法将接收字符串作为参数：

var str =  "Hello World!"; 
var res = str.replace( "World",  "beyond");

---

你注意到了吗？

	正则表达式参数可用在以上方法中 (替代字符串参数)。  正则表达式使得搜索功能更加强大(如实例中的i不区分大小写)。

---

正则表达式修饰符

修饰符 可以使得全局搜索中不再区分大小写:

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

---

正则表达式模式

方括号用于查找某个范围内的字符：

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

元字符是拥有特殊含义的字符：

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

量词:

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

---

使用 RegExp 对象

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

---

使用 test()方法

test() 方法是一个正则表达式方法。

test() 方法用于检测一个字符串是否匹配某个模式，

如果字符串中含有匹配的文本，则返回 true，否则返回 false。

以下实例用于搜索字符串中的字符 "e"：

实例

var patt = /e/; 
patt.test( "I crossed the oceans of time to find you");

字符串中含有 "e"，所以该实例输出为：

true

你可以不用设置正则表达式的变量，以上两行代码可以合并为一行：

/e/.test( "I crossed the oceans of time to find you")

---

使用 exec()方法

exec() 方法是一个正则表达式方法。

exec() 方法用于检索字符串中的正则表达式的匹配。

该函数返回一个数组，其中存放匹配的结果。

如果未找到匹配，则返回值为 null。

以下实例用于搜索字符串中的字母 "e":

Example 1

/e/.exec( "I crossed the oceans of time to find you");

字符串中含有 "e"，所以该实例输出为:

e

---

使用 compile()方法

compile() 方法用于更改 RegExp。即换一个正则进行匹配

compile() 既可以改变检索模式，也可以添加或删除第二个参数。

var patt1=new RegExp("o"); 

document.write(patt1.test("a no hana")); 

patt1.compile("d"); 

document.write(patt1.test("a no hana"));

由于字符串中存在 "o"，而没有 "d"，以上代码的输出是： 

true        false

---

JavaScript 正则表达式学习脑图

JavaScript 错误 - throw、try 和 catch

---

try 语句测试代码块的错误。

catch 语句处理错误。

throw 语句创建自定义错误。

---

 JavaScript 错误

当 JavaScript 引擎执行 JavaScript 代码时，会发生各种错误：

可能是语法错误，通常是程序员造成的编码错误或错别字。

可能是拼写错误或语言中缺少的功能（可能由于浏览器差异）。

可能是由于来自服务器或用户的错误输出而导致的错误。

当然，也可能是由于许多其他不可预知的因素。

---

JavaScript 抛出（throw）错误

当错误发生时，当事情出问题时，JavaScript 引擎通常会停止，并生成一个错误消息。

描述这种情况的技术术语是：JavaScript 将抛出一个错误。

---

JavaScript try 和 catch

try 语句  是允许我们定义 在执行时,发生错误的代码块。

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

JavaScript 语句 try 和 catch 是成对出现的。

语法

try
  {
  //在这里运行代码
  }
catch(err)
  {
  //在这里处理错误
  }

实例

在下面的例子中，我们故意在 try 块的代码中写了一个错字。

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

代码如下:

try{
	allert("hello beyond");
}
catch(error){
	NSLog('错误信息: ' + error.message );
}

效果如下:

---

Throw 语句

throw 语句允许我们创建自定义错误。

正确的技术术语是：创建或抛出异常（exception）。

如果把 throw 与 try 和 catch 一起使用，那么您能够控制程序流，并生成自定义的错误消息。

语法

throw exception

异常 可以是  JavaScript 字符串、数字、逻辑值或对象。

实例

本例检测输入变量的值。

如果值是错误的，会抛出一个异常（错误）。

catch 会捕捉到这个错误，并显示一段自定义的错误消息：

代码如下:

<!DOCTPYE html>  
<html lang="zh">  
<head>  
    <link rel="icon" href="beyond.jpg" type="image/x-icon"/>
    <meta charset="UTF-8">
    <meta name="author" content="beyond">
    <meta http-equiv="refresh" content="520">
    <meta name="description" content="免费零基础教程">
    <meta name="viewport" content="width=device-width, 
    initial-scale=1.0, maximum-scale=1.0,minimum-scale=1.0,user-scalable=0" />
    <meta name="keywords" content="HTML,CSS,JAVASCRIPT">
    <title>beyondの心中の动漫神作</title>
    <link rel="stylesheet" type="text/css" href="beyondbasestylewhite3.css">

    <!--[if lt IE 9]>
        <script src="//apps.bdimg.com/libs/html5shiv/3.7/html5shiv.min.js"></script>
    <![endif]-->
    <style type="text/css">  
        body{  
            font-size: 100%;  
            background-image: url("sakura4.png");  
            background-repeat: no-repeat;  
            background-position: center center;  
            /*声明margin和padding是个好习惯*/  
            margin: 0;  
            padding: 0; 
        }
        /*设置css3的按钮样式,input的按钮样式*/  
        button.class_btn {  
            cursor: pointer;  
            border:none;  
            font-size: 16px;  
            color: black;  
            text-align: center;  
            text-decoration: none;  
            background-color: white;  
            border-radius: 6px;
            outline: none;
            /*核心代码*/  
            padding: 16px 32px;  
            margin: 4px 2px;  
            display: inline-block;  
            border:2px solid #4CAF50;  
  
            /*核心代码*/  
            /*兼容Safari*/  
            -webkit-transition-duration:0.4s;  
            transition-duration:0.4s;  
        }  
        /*第1个绿色按钮*/  
        button.class_btn_green {  
            border: 2px solid #4CAF50;  
        }  
        button.class_btn_green:hover {  
            color: white;  
            background-color: #4CAF50;  
        } 
    </style>  


    <script type="text/javascript">
        function btnClicked() {
            var inputTextNode = document.getElementById("id_input_text");
            var pResultNode = document.getElementById("id_p_result");
            try{
                
                var girlAge = inputTextNode.value;
                // 先去掉所有的空格
                girlAge = girlAge.replace(/\s+/g,"");
                // 然后看看 是不是数字
                var isNotNumber = girlAge == "" || isNaN(girlAge);
                // 然后看看 是不是0 - 120之间
                var isNotValideAge = girlAge < 0 || girlAge > 120; 
                // Toast提示
                if (isNotNumber || isNotValideAge) {
                    throw "请输入正确的年龄喔~"
                }else if(girlAge < 8 || girlAge > 14){
                    throw "妳的年龄不符合参赛要求喔~"
                }else {
                    inputTextNode.value = "报名成功!";
                }
            }catch(error){
                inputTextNode.value = "";
                inputTextNode.placeholder = error;
            }
            

        }
    </script>
</head>  
  
<body>  
        <h1 style="color:white;text-shadow:2px 2px 4px #000;letter-spacing:5px;" class="sgcontentcolor sgcenter">  
            未闻花名
        </h1>
        <p id="id_p_result" class="sgcenter">第13届世界萝莉锦标赛</p>
        <input id="id_input_text" type="text" placeholder="请输入妳的年龄~" size="25" />
        <button οnclick="btnClicked()" class="class_btn class_btn_green" type="button" >点我报名</button>

        <p class="sgcontentcolor sgcenter" style="clear:left;">
            <b>注意:</b>throw可以抛出异常(错误)
        </p>
        <footer id="copyright">
            <p style="font-size:14px;text-align:center;font-style:italic;">  
            Copyright © <a id="author">2018</a> Powered by <a id="author">beyond</a>  
            </p>        
        </footer>
    </div>
</body>  
</html>  

效果如下:

请注意，如果 getElementById 函数出错，上面的例子也会抛出一个错误。

JavaScript 调试

---

在编写 JavaScript 时，如果没有调试工具将是一件很痛苦的事情。

---

JavaScript 调试

没有调试工具是很难去编写 JavaScript 程序的。

你的代码可能包含语法错误，逻辑错误，如果没有调试工具，这些错误比较难于发现。

通常，如果 JavaScript 出现错误，是不会有提示信息，这样你就无法找到代码错误的位置。

	通常，你在编写一个新的 JavaScript 代码过程中都会发生错误。

---

JavaScript 调试工具

在程序代码中寻找错误叫做代码调试。

调试很难，但幸运的是，很多浏览器都内置了调试工具。

内置的调试工具可以开始或关闭，严重的错误信息会发送给用户。

有了调试工具，我们就可以设置断点 (代码停止执行的位置), 且可以在代码执行时检测变量。

浏览器启用调试工具一般是按下 F12 键，并在调试菜单中选择 "Console" 。

---

console.log() 方法

如果浏览器支持调试，你可以使用 console.log() 方法在调试窗口上打印 JavaScript 值

function NSLog(loli) {console.log(loli);return 'Copyright © 2018 Powered by beyond';};

---

设置断点

在调试窗口中，你可以设置 JavaScript 代码的断点。

在每个断点上，都会停止执行 JavaScript 代码，以便于我们检查 JavaScript 变量的值。

在检查完毕后，可以重新执行代码（如播放按钮）。

具体步骤如下:

用chrome浏览器打开页面 → 按f12打开开发者工具 → 点击Sources按钮 → 打开你要调试的js代码文件 → 在行号上单击一下，OK!恭喜你的断点已经打上啦

---

神奇的 debugger 关键字

debugger 关键字用于停止执行 JavaScript，并调用调试函数。

这个debugger关键字与在调试工具中设置断点的效果是一样的。

如果没有调试可用，debugger 语句将无法工作。

开启 debugger ，代码在第三行前停止执行。

在上面的示例代码中,加入一行debugger;

然后打开console,刷新html_456.html页面;

输入报名的年龄,点击按钮,触发函数,

这个时候,你会发现,JS将自动停在debugger代码那一行处,

如图所示:

---

主要浏览器的调试工具

通常，浏览器启用调试工具一般是按下 F12 键，并在调试菜单中选择 "Console" 。

各浏览器的步骤如下:

Chrome 浏览器

• 打开浏览器。
• 在菜单中选择工具。
• 在工具中选择开发者工具。
• 最后，选择 Console。

Firefox 浏览器

• 打开浏览器。

Internet Explorer 浏览器。

• 打开浏览器。
• 在菜单中选择工具。
• 在工具中选择开发者工具。
• 最后，选择 Console。

Opera

• 打开浏览器。

Safari

• 打开浏览器。如果您未在Safari菜单栏中看到“开发”菜单，请选取“Safari 浏览器”>“偏好设置”，点按“高级”，然后勾选“在菜单栏中显示开发菜单”。

JavaScript 表单验证

---

JavaScript 表单验证

JavaScript 可用来在数据被送往服务器 之前对 HTML 表单中的这些输入数据进行  安全性验证。

表单数据经常需要使用 JavaScript 来验证其正确性：

• 验证表单数据是否为空？
  
• 验证输入是否是一个正确的email地址？
  
• 验证日期是否输入正确？
  
• 验证表单输入内容是否为数字型？
  
• 输入是否有SQL注入的脚本?

---

必填（或必选）项目

下面的函数用来检查用户是否已填写表单中的必填（或必选）项目。

假如必填或必选项为空，那么警告框会弹出，并且函数的返回值为 false，

否则函数的返回值则为 true（意味着数据没有问题）：

代码如下:

<!DOCTPYE html>  
<html lang="zh">  
<head>  
    <link rel="icon" href="beyond.jpg" type="image/x-icon"/>
    <meta charset="UTF-8">
    <meta name="author" content="beyond">
    <meta http-equiv="refresh" content="520">
    <meta name="description" content="免费零基础教程">
    <meta name="viewport" content="width=device-width, 
    initial-scale=1.0, maximum-scale=1.0,minimum-scale=1.0,user-scalable=0" />
    <meta name="keywords" content="HTML,CSS,JAVASCRIPT">
    <title>beyondの心中の动漫神作</title>
    <link rel="stylesheet" type="text/css" href="beyondbasestylewhite3.css">

    <!--[if lt IE 9]>
        <script src="//apps.bdimg.com/libs/html5shiv/3.7/html5shiv.min.js"></script>
    <![endif]-->
    <style type="text/css">  
        body{  
            font-size: 100%;  
            background-image: url("sakura4.png");  
            background-repeat: no-repeat;  
            background-position: center center;  
            /*声明margin和padding是个好习惯*/  
            margin: 0;  
            padding: 0; 
        }
        /*设置css3的按钮样式,input的按钮样式*/  
        input.class_btn {  
            cursor: pointer;  
            border:none;  
            font-size: 16px;  
            color: black;  
            text-align: center;  
            text-decoration: none;  
            background-color: white;  
            border-radius: 6px;
            outline: none;
            /*核心代码*/  
            padding: 16px 32px;  
            margin: 4px 2px;  
            display: inline-block;  
            border:2px solid #4CAF50;  
  
            /*核心代码*/  
            /*兼容Safari*/  
            -webkit-transition-duration:0.4s;  
            transition-duration:0.4s;  
        }  
        /*第1个绿色按钮*/  
        input.class_btn_green {  
            border: 2px solid #4CAF50;  
        }  
        input.class_btn_green:hover {  
            color: white;  
            background-color: #4CAF50;  
        } 
    </style>  


    
</head>  
  
<body>  
        <h1 style="color:white;text-shadow:2px 2px 4px #000;letter-spacing:5px;" class="sgcontentcolor sgcenter">  
            未闻花名
        </h1>
        <p id="id_p_result" class="sgcenter">第13届世界萝莉锦标赛</p>
        <form οnsubmit="return btnClicked()" action="http://localhost/cgi-bin/ruby_23.rb" method="post" target="_blank">
            <fieldset>
                <legend>报名参赛</legend>
                萝莉姓名:<input id="id_input_text_name" type="text" placeholder="请输入妳的芳名~" name="loliname" size="30" /><br/>
                萝莉年龄:<input id="id_input_text_age" placeholder="请输入妳的年龄~" type="text" name="loliage" size="30"><br/>
                萝莉罩杯:<input id="id_input_text_cup" type="text" placeholder="请输入妳的罩杯~" name="lolicup" size="30"><br/>
                <input class="class_btn class_btn_green" type="submit" value="提交" />
            </fieldset>
        </form>

        

        <p class="sgcontentcolor sgcenter" style="clear:left;">
            <b>注意:</b>throw可以抛出异常(错误)
        </p>
        <footer id="copyright">
            <p style="font-size:14px;text-align:center;font-style:italic;">  
            Copyright © <a id="author">2018</a> Powered by <a id="author">beyond</a>  
            </p>        
        </footer>
    </div>
    <script type="text/javascript">
        function btnClicked() {
            var inputTextNameNode = document.getElementById("id_input_text_name");
            var inputTextAgeNode = document.getElementById("id_input_text_age");
            var inputTextCupNode = document.getElementById("id_input_text_cup");
            var girlName = inputTextNameNode.value;
            var girlAge = inputTextAgeNode.value;
            var girlCup = inputTextCupNode.value;
        
            // 姓名:
            // 去掉左右空格
            girlName = girlName.replace(/\s+/g,"");
            if (girlName == "" || girlName == null || girlName.length == 0) {
                inputTextNameNode.value = "";
                inputTextNameNode.placeholder = "请输入正确的芳名喔~";
                return false;
            }


            // 先去掉所有的空格
            girlAge = girlAge.replace(/\s+/g,"");
            // 然后看看 是不是数字
            var isNotNumber = girlAge == "" || isNaN(girlAge);
            // 然后看看 是不是0 - 120之间
            var isNotValideAge = girlAge < 0 || girlAge > 120; 
            // Toast提示
            if (isNotNumber || isNotValideAge) {
                inputTextAgeNode.value = "";
                inputTextAgeNode.placeholder = "请输入正确的年龄喔~";
                return false;
            }else if(girlAge < 8 || girlAge > 14){
                inputTextAgeNode.value = "";
                inputTextAgeNode.placeholder = "妳的年龄不符合参赛要求喔~";
                return false;
            }

            // 还有罩杯判断 A - H
            // 先去掉所有的空格
            girlCup = girlCup.replace(/\s+/g,"");
            if(/[abcdefgh]/i.test(girlCup) && girlCup.length == 1){
                // 恭喜通过全部难
                return true;
            }else{
                inputTextCupNode.value = "";
                inputTextCupNode.placeholder = "请输入正确的罩杯喔~";
                return false;
            }


        }
    </script>
</body>  
</html>  

效果如下:

---

E-mail 验证

下面的函数检查输入的数据是否符合电子邮件地址的基本语法。

意思就是说，输入的数据必须包含 @ 符号和点号(.)。

同时，@ 不可以是邮件地址的首字符，并且 @ 之后需有至少一个点号:

代码如下:

<!DOCTPYE html>  
<html lang="zh">  
<head>  
    <link rel="icon" href="beyond.jpg" type="image/x-icon"/>
    <meta charset="UTF-8">
    <meta name="author" content="beyond">
    <meta http-equiv="refresh" content="520">
    <meta name="description" content="免费零基础教程">
    <meta name="viewport" content="width=device-width, 
    initial-scale=1.0, maximum-scale=1.0,minimum-scale=1.0,user-scalable=0" />
    <meta name="keywords" content="HTML,CSS,JAVASCRIPT">
    <title>beyondの心中の动漫神作</title>
    <link rel="stylesheet" type="text/css" href="beyondbasestylewhite3.css">

    <!--[if lt IE 9]>
        <script src="//apps.bdimg.com/libs/html5shiv/3.7/html5shiv.min.js"></script>
    <![endif]-->
    <style type="text/css">  
        body{  
            font-size: 100%;  
            background-image: url("sakura4.png");  
            background-repeat: no-repeat;  
            background-position: center center;  
            /*声明margin和padding是个好习惯*/  
            margin: 0;  
            padding: 0; 
        }
        /*设置css3的按钮样式,input的按钮样式*/  
        input.class_btn {  
            cursor: pointer;  
            border:none;  
            font-size: 16px;  
            color: black;  
            text-align: center;  
            text-decoration: none;  
            background-color: white;  
            border-radius: 6px;
            outline: none;
            /*核心代码*/  
            padding: 16px 32px;  
            margin: 4px 2px;  
            display: inline-block;  
            border:2px solid #4CAF50;  
  
            /*核心代码*/  
            /*兼容Safari*/  
            -webkit-transition-duration:0.4s;  
            transition-duration:0.4s;  
        }  
        /*第1个绿色按钮*/  
        input.class_btn_green {  
            border: 2px solid #4CAF50;  
        }  
        input.class_btn_green:hover {  
            color: white;  
            background-color: #4CAF50;  
        } 
    </style>  


    
</head>  
  
<body>  
        <h1 style="color:white;text-shadow:2px 2px 4px #000;letter-spacing:5px;" class="sgcontentcolor sgcenter">  
            未闻花名
        </h1>
        <h3 id="id_p_result" class="sgcenter" style="color:teal;">第13届世界萝莉锦标赛</h3>
        <form οnsubmit="return btnClicked()" action="http://localhost/cgi-bin/ruby_23.rb" method="post" target="_blank">
            <fieldset>
                <legend>报名参赛</legend>
                萝莉姓名:<input id="id_input_text_name" type="text" placeholder="请输入妳的芳名~" name="loliname" size="30" /><br/>
                萝莉年龄:<input id="id_input_text_age" placeholder="请输入妳的年龄~" type="text" name="loliage" size="30"><br/>
                萝莉罩杯:<input id="id_input_text_cup" type="text" placeholder="请输入妳的罩杯~" name="lolicup" size="30"><br/>
                萝莉邮箱:<input id="id_input_email" type="email" placeholder="请输入妳的邮箱~" name="loliemail" size="30"><br/>
                
                <input class="class_btn class_btn_green" type="submit" value="提交" />
            </fieldset>
        </form>
        
        <p class="sgcontentcolor sgcenter" style="clear:left;">
            <b>注意:</b>表单验证演示
        </p>
        <footer id="copyright">
            <p style="font-size:14px;text-align:center;font-style:italic;">  
            Copyright © <a id="author">2018</a> Powered by <a id="author">beyond</a>  
            </p>        
        </footer>
    </div>
    <script type="text/javascript">
        function btnClicked() {
            var inputTextNameNode = document.getElementById("id_input_text_name");
            var inputTextAgeNode = document.getElementById("id_input_text_age");
            var inputTextCupNode = document.getElementById("id_input_text_cup");
            var inputEmailNode = document.getElementById("id_input_email");
            var girlName = inputTextNameNode.value;
            var girlAge = inputTextAgeNode.value;
            var girlCup = inputTextCupNode.value;
            var girlEmail = inputEmailNode.value;
        
            // 姓名:
            // 去掉左右空格
            girlName = girlName.replace(/\s+/g,"");
            if (girlName == "" || girlName == null || girlName.length == 0) {
                inputTextNameNode.value = "";
                inputTextNameNode.focus();
                inputTextNameNode.placeholder = "请输入正确的芳名喔~";
                return false;
            }


            // 先去掉所有的空格
            girlAge = girlAge.replace(/\s+/g,"");
            // 然后看看 是不是数字
            var isNotNumber = girlAge == "" || isNaN(girlAge);
            // 然后看看 是不是0 - 120之间
            var isNotValideAge = girlAge < 0 || girlAge > 120; 
            // Toast提示
            if (isNotNumber || isNotValideAge) {
                inputTextAgeNode.value = "";
                inputTextAgeNode.focus();
                inputTextAgeNode.placeholder = "请输入正确的年龄喔~";
                return false;
            }else if(girlAge < 8 || girlAge > 14){
                inputTextAgeNode.value = "";
                inputTextAgeNode.focus();
                inputTextAgeNode.placeholder = "妳的年龄不符合参赛要求喔~";
                return false;
            }

            // 还有罩杯判断 A - H
            // 先去掉所有的空格
            girlCup = girlCup.replace(/\s+/g,"");
            var isGirlCupValid = /[abcdefgh]/i.test(girlCup) && girlCup.length == 1;
            if(!isGirlCupValid){
                inputTextCupNode.value = "";
                inputTextCupNode.focus();
                inputTextCupNode.placeholder = "请输入正确的罩杯喔~";
                return false;
            }

            // 判断邮箱
            // 先去掉所有的空格
            girlEmail = girlEmail.replace(/\s+/g,"");
            // beyond@qq.com
            // a@a.a
            // @的index是:1   .的index是:3  长度是:5
            // 检验@和.
            var position_1 = girlEmail.indexOf("@");
            var position_2 = girlEmail.indexOf(".");
            var isPosition1Valid = position_1 > 0 && ((position_1+2) <= position_2);
            var isPosition2Valid = (position_2+2) <= girlEmail.length;
            if (!isPosition1Valid || !isPosition2Valid) {
                inputEmailNode.value = "";
                inputEmailNode.focus();
                inputEmailNode.placeholder = "请输入正确的邮件喔~";
                return false;
            }
            // 来到这儿说明...
            return true;


        }
    </script>
</body>  
</html>  

效果如下:

JavaScript 保留关键字

---

保留关键字 在意思上表达成:   为将来可能成为关键字 而保留的单词。

在 JavaScript 中，一些标识符  是保留关键字，不能用作变量名或函数名。

---

JavaScript 标准

所有的现代浏览器完全支持 ECMAScript 3（ES3，JavaScript 的第三版，从 1999 年开始）。

ECMAScript 4（ES4）未通过。

ECMAScript 5（ES5，9年前的2009 年发布），是 JavaScript 最新的官方版本。

随着时间的推移，我们开始看到，所有的现代浏览器已经完全支持 ES5。

---

JavaScript 保留关键字

Javascript 的保留关键字  不可以用作  变量、标签或者函数名。

有些保留关键字是作为 Javascript 以后扩展使用。

abstract	arguments	boolean	break	byte
case	catch	char	class*	const
continue	debugger	default	delete	do
double	else	enum*	eval	export*
extends*	false	final	finally	float
for	function	goto	if	implements
import*	in	instanceof	int	interface
let	long	native	new	null
package	private	protected	public	return
short	static	super*	switch	synchronized
this	throw	throws	transient	true
try	typeof	var	void	volatile
while	with	yield

* 标记的关键字是 ECMAScript5 中新添加的。

---

JavaScript 对象、属性和方法

您也应该避免使用 JavaScript 内置的对象、属性和方法  的名称  作为 Javascript 的变量或函数名：

Array	Date	eval	function	hasOwnProperty
Infinity	isFinite	isNaN	isPrototypeOf	length
Math	NaN	name	Number	Object
prototype	String	toString	undefined	valueOf

---

Java 保留关键字

JavaScript 经常与 Java 一起使用。

您应该避免使用一些 Java 对象和属性作为 JavaScript 标识符：

getClass

java

JavaArray

javaClass

JavaObject

JavaPackage

---

Windows 保留关键字

JavaScript 可以在 HTML 外部使用。

它可在许多其他应用程序中作为编程语言使用。

在 HTML 中，您必须（为了可移植性，您也应该这么做）避免使用 HTML 和 Windows 对象和属性的名称作为 Javascript 的变量及函数名：

alert	all	anchor	anchors	area
assign	blur	button	checkbox	clearInterval
clearTimeout	clientInformation	close	closed	confirm
constructor	crypto	decodeURI	decodeURIComponent	defaultStatus
document	element	elements	embed	embeds
encodeURI	encodeURIComponent	escape 编码	event	fileUpload
focus	form	forms	frame	innerHeight
innerWidth	layer	layers	link	location
mimeTypes	navigate	navigator	frames	frameRate
hidden	history	image	images	offscreenBuffering
open	opener  开启者	option	outerHeight	outerWidth
packages	pageXOffset	pageYOffset	parent	parseFloat
parseInt	password	pkcs11	plugin	prompt
propertyIsEnum	radio	reset	screenX	screenY
scroll	secure	select	self	setInterval
setTimeout	status	submit	taint 玷污	text
textarea	top	unescape 解码	untaint	window

---

HTML 事件句柄

除此之外，您还应该避免使用 HTML 事件句柄的名称作为 Javascript 的变量及函数名。

实例：

onblur	onclick	onerror	onfocus
onkeydown	onkeypress	onkeyup	onmouseover
onload	onmouseup	onmousedown	onsubmit

注意：在JavaScript中关键字不能用作变量名或者函数名，否则可能会得到错误消息，

例如"Identifier Expected"（应该有标识符、期望标识符）”。

---

非标准 JavaScript

除了保留关键字，在 JavaScript 实现中也有一些非标准的关键字。

一个实例是 const 关键字，用于定义变量。 

一些 JavaScript 引擎把 const 当作 var 的同义词。

另一些引擎则把 const 当作只读变量的定义。

const 是 JavaScript 的扩展。

JavaScript 引擎支持它用在 Firefox 和 Chrome 中。

但是它并不是 JavaScript 标准 ES3 或 ES5 的组成部分。

建议：不要使用它。

总结出来的67个陌生保留关键字:

abstract  
class*  
enum* 
export*
extends*  
import* 
interface
native    
package 
static  
super*  
synchronized
throws  
transient 
volatile
yield 
hasOwnProperty
Infinity  
isPrototypeOf 
getClass  
java  
JavaArray 
javaClass 
JavaObject  
JavaPackage
anchors 
clearInterval
clearTimeout  
clientInformation 
closed  
crypto  
decodeURI 
decodeURIComponent  
defaultStatus
elements  
embeds
encodeURI 
encodeURIComponent  
escape    
forms 
innerHeight
innerWidth  
layer 
layers    
navigate  
frames  
frameRate
images  
offscreenBuffering
opener  开启者 
outerHeight 
outerWidth
packages  
pageXOffset 
pageYOffset 
pkcs11  
plugin  
prompt
propertyIsEnum  
secure  
setInterval
setTimeout  
taint 玷污  
untaint 
unescape 解码 
onblur  
onerror

JavaScript JSON

---

JSON 是用于存储和传输数据的格式。

JSON 通常用于服务端向网页传递数据 。

---

什么是 JSON?

• JSON 英文全称 JavaScript Object Notation
• JSON 是一种轻量级的数据交换格式。
• JSON是独立的语言 *
• JSON 易于理解。

	* JSON 使用 JavaScript 语法，但是 JSON 格式仅仅是一个文本。 文本可以被任何编程语言读取及作为数据格式传递。

JSON 实例

以下 JSON 语法定义了 girlArr 对象: 3 条关于girl记录（对象）的数组:

JSON Example

{"girlArr":[
    {"name":"面码", "age":15}, 
    {"name":"逢坂大河", "age":16},
    {"name":"mathilda", "age":12}
]}

---

JSON 格式化后为 JavaScript 对象

JSON 格式在语法上与创建 JavaScript 对象代码是相同的。

由于它们很相似，所以 JavaScript 程序可以很容易的将 JSON 数据转换为 JavaScript 对象。

---

JSON 语法规则

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

---

JSON 数据 - 一个名称对应一个值

JSON 数据格式为 键:值 对，就像 JavaScript 对象属性。

键:值对包括字段名称（在双引号中），

键的后面一个冒号，然后是值：

"name":"面码"

---

JSON 对象

JSON 对象保存在大括号内。

就像在 JavaScript 中, 对象可以保存多个 键/值 对：

{"name":"面码", "age":"15岁"}

---

JSON 数组

JSON 数组保存在中括号内。

就像在 JavaScript 中, 数组可以包含对象：

"girlArr":[
    {"name":"面码", "age":"15岁"},
    {"name":"逢坂大河", "age":"16岁"},
    {"name":"mathilda", "age":"12岁"}
]

在以上实例中，对象 "girlArr" 是一个数组。

包含了三个对象。

每个为个对象为girl的记录（姓名和年龄）。

---

JSON 字符串转换为 JavaScript 对象

通常我们是从服务器中读取 JSON 数据，然后才在网页中显示数据。

为了方便起见，我们就在网页中直接设置 JSON 字符串啦

首先，手动拼接 JavaScript 字符串，字符串为 JSON 格式的数据：

var jsonString = '{ "girlArr" : [' +
'{ "name":"面码" , "age":"15岁" },' +
'{ "name":"逢坂大河" , "age":"16岁" },' +
'{ "name":"mathilda" , "age":"12岁" } ]}';

然后，使用 JavaScript 内置函数 JSON.parse() 将字符串转换为 JavaScript 对象:

var obj = JSON.parse(jsonString);

最后，在你的页面中使用新的 JavaScript 对象：

核心代码:

<p id="id_p_result"></p>

<script>
document.getElementById("id_p_result").innerHTML =
obj.girlArr[1].name + " " + obj.girlArr[1].age;
</script>

完整代码如下:

<!DOCTPYE html>  
<html lang="zh">  
<head>  
    <link rel="icon" href="beyond.jpg" type="image/x-icon"/>
    <meta charset="UTF-8">
    <meta name="author" content="beyond">
    <meta http-equiv="refresh" content="520">
    <meta name="description" content="免费零基础教程">
    <meta name="viewport" content="width=device-width, 
    initial-scale=1.0, maximum-scale=1.0,minimum-scale=1.0,user-scalable=0" />
    <meta name="keywords" content="HTML,CSS,JAVASCRIPT">
    <title>beyondの心中の动漫神作</title>
    <link rel="stylesheet" type="text/css" href="beyondbasestylewhite3.css">

    <!--[if lt IE 9]>
        <script src="//apps.bdimg.com/libs/html5shiv/3.7/html5shiv.min.js"></script>
    <![endif]-->
    <style type="text/css">  
        body{  
            font-size: 100%;  
            background-image: url("sakura4.png");  
            background-repeat: no-repeat;  
            background-position: center center;  
            /*声明margin和padding是个好习惯*/  
            margin: 0;  
            padding: 0; 
        }
    </style>  


    
</head>  
  
<body>  
        <h1 style="color:white;text-shadow:2px 2px 4px #000;letter-spacing:5px;" class="sgcontentcolor sgcenter">  
            未闻花名
        </h1>
        <p id="id_p_result"></p>
        <script type="text/javascript">
            var jsonString = '{"girlArr":[' + 
                '{"name":"面码","age":"15岁"},' + 
                '{"name":"逢坂大河","age":"16岁"},' + 
                '{"name":"mathilda","age":"12岁"}' + 
                ']}';
            console.log(jsonString);
            var jsonObject = JSON.parse(jsonString);
            console.log(jsonObject);
            var pNode = document.getElementById("id_p_result");
            pNode.innerHTML = jsonObject.girlArr[0].name + "'s age is " + jsonObject.girlArr[0].age;
                
        </script>

        <p class="sgcontentcolor sgcenter" style="clear:left;">
            <b>注意:</b>JSON.parse(jsonString)演示
        </p>
        <footer id="copyright">
            <p style="font-size:14px;text-align:center;font-style:italic;">  
            Copyright © <a id="author">2018</a> Powered by <a id="author">beyond</a>  
            </p>        
        </footer>
    </div>
</body>  
</html>  

效果如下:

javascript:void(0) 含义

我们经常会使用到 javascript:void(0) 这样的代码，

那么在 JavaScript 中 javascript:void(0) 代表的是什么意思呢？

javascript:void(0) 中最关键的是 void 关键字， 

void 是 JavaScript 中非常非常非常重要的关键字，

void操作符指定: 要计算一个表达式但是偏偏就不给返回值。

console.log(void(0));输出结果为undefined,如图所示:

语法格式如下：

<head>
<script type="text/javascript">
<!--
void func()
javascript:void func()

或者

void(func())
javascript:void(func())
//-->
</script>
</head>

下面的代码创建了一个超级链接，当用户点击以后不会发生任何事。

实例

<a href="javascript:void(0)">单击此处什么也不会发生</a>

当用户链接时，void(0) 计算为 0，但 Javascript 上没有任何效果。

以下实例中，在用户点击链接后显示警告信息：

实例

<head> 
<script type="text/javascript"> 
<!-- 
//--> 
</script> 
</head> 
<body> 
<a href="javascript:void(alert('点我干嘛?!'))">点我试试</a> 
</body>

以下实例中参数 a 将返回 undefined :

实例

<head> 
<script type="text/javascript"> 

function getValue(){ 
  var a,b,c; 
  a = void ( b = 5, c = 7 );   // a 等于 undefined,因为void(x)是无返回值的!
  document.write('a = ' + a + ' b = ' + b +' c = ' + c ); 
} 

</script> 
</head>

---

href="#"与href="javascript:void(0)"的区别

# 包含了一个位置锚点信息，默认的锚是#top 也就是网页的顶端。

<a href="#">回到顶部</a>

而javascript:void(0), 仅仅表示一个死链接。

在页面很长很高的时候,会使用 # 来定位页面的具体位置，格式为：# + id。

如果你非要定义一个死链接,那就请用 javascript:void(0) 。

实例

<a href="javascript:void(0);">点我没有反应的!我是死链接</a>  > 
 
<a href="#">回到顶部!</a> 
<a href="#positionbottom">点我定位到指定位置!</a> 
<br><br><br> <br><br><br> <br><br><br> <br><br><br> <br><br><br> <br><br><br> <br><br><br> <p id="positionbottom">尾部定位点</p>

注意：void()仅仅是代表不会返回任何值，但是括号内的表达式还是会运行的

void()适用于:只需要触发事件 而 不需要返回值，

href=”#”,包含了一个位置信息.默认的锚是#top,也就是网页的上端，当连续快速点击此链接时会导致浏览器巨慢甚至崩溃。

当然我们一般用三个 href="###",

javascript:;(一个冒号一个分号)

javascript:;好些,字数少些

JavaScript 代码规范

---

所有的 JavaScript 项目适用同一种规范。

---

JavaScript 代码规范

代码规范通常包括以下几个方面:

• 变量 和 函数 的命名规则
• 空格，缩进，注释的使用规则。
• 其他常用规范……

规范的代码可以更易于阅读与维护。

代码规范一般在开发前规定，可以跟你的团队成员来协商设置。

---

变量名

变量名推荐使用小驼峰法来命名(littleCamelCase):

girlName = "面码";
girlAge = "15岁";

loveYou = 52.67;
loveDuration = 13.14;

在JavaScript中定义变量名时，还应该注意以下事项：

• 变量名应该区分大小写，允许包含 字母、数字、美元符号($)和下划线_，但第1个字符不允许是数字，不允许包含空格和其他标点符号；
• 变量命名长度应该尽可能的短，并抓住要点，尽量在 变量名 中体现出 值的类型；
• 变量名的命名应该是有意义的；
• 变量名不能为JavaScript中的关键词、保留字全名；
• 变量名命名方法常见的有匈牙利命名法、驼峰命名法和帕斯卡命名法。

---

空格与运算符

通常运算符 ( = + - * / ) 前后需要添加空格:

实例:

var x = y + z;
var girlArr = ["面码", "逢坂大河", "古手梨花"];

---

代码缩进

通常使用 4 个空格符号(或Tab)来缩进代码块：

函数:

function toCelsius(fahrenheit) {
    return (5 / 9) * (fahrenheit - 32);
}

注意:不推荐使用 TAB 键来缩进，因为不同编辑器 TAB 键的解析不一样。(就要用tab,怎么滴~)

语句规则

简单语句的通用规则:

• 一条简单的语句通常 必须 以分号作为结束符。(复杂语句则相反)

实例:

var girlArr = ["面码", "逢坂大河", "古手梨花"];

var girl = {
    name: "mathilda",
    sex: "loli",
    age: 12,
    lover: "leno"
};

复杂语句的通用规则:

• 将左花括号  放在第一行的结尾。
• 左花括号     前添加一空格。
• 将右花括号  独立放在一行。
• 千万不要以分号结束一个 复杂的声明。

函数:

function toCelsius(fahrenheit) {
    return (5 / 9) * (fahrenheit - 32);
}

循环:

for (i = 0; i < 5; i++) {
    x += i;
}

条件语句:

if (girlAge < 18) {
    greeting = "Girl";
} else {
    greeting = "Lady";
}

---

对象规则

对象定义的规则:

• 将左花括号        与类名放在同一行。
• 冒号与属性值间  有个空格。
• 字符串使用双引号，数字不需要。
• 最后一个属性-值对后面,千万不要添加逗号。
• 将右花括号独立放在一行，并且记住必须以分号作为结束符号。

实例:

var girl = {
    name: "mathilda",
    sex: "loli",
    age: 12,
    lover: "leon"
};

短的对象代码可以直接写成一行:

实例:

var girl = {name:"mathilda", sex:"loli", age:12, lover:"leon"};

---

每行代码字符小于 80

为了便于阅读每行字符建议小于数 80 个。

如果一个 JavaScript 语句超过了 80 个字符，建议在 运算符或者逗号后换行。

实例:

实例:

document.getElementById( "id_p_result").innerHTML = 
     "Hello Beyond";

千万注意：

在函数声明(必须要有函数名)、函数表达式(只是JS语句的一部分而已)、

立即执行函数(必须用()括起来,告诉JS引擎,这是一个函数表达式,而不是一个函数声明)

函数调用、

对象创建、数组创建、for 语句等场景中，

绝对不允许在尊贵的逗号 , 或分号 ; 的前面换行。

---

命名规则

一般很多代码语言的命名规则都是类似的，例如:

• 变量和函数为小驼峰法（ littleCamelCase）
• 全局变量为大写 (UPPERCASE )
• 常量 (如 PI) 为大写 (UPPERCASE )

变量命名你是否使用这几种规则： hyp-hens, littleCamelCase, 或under_scores ?

HTML 和 CSS 的横杠(-)字符:

HTML5 属性可以以 data- (如：data-name, data-age) 作为自定义属性的前缀。

CSS 使用 - 来连接 属性名 (font-size)。

注意: - 通常在 JavaScript 中被认为是减法，所以绝对不允许使用。

下划线:

很多程序员比较喜欢使用下划线(如：date_of_birth), 特别是在 SQL 数据库中(_做前缀)。

PHP 语言通常都使用 下划线。

帕斯卡拼写法(PascalCase):

帕斯卡拼写法(PascalCase) 在 C 语言中语言较多。

驼峰法：

JavaScript 中通常推荐使用 小驼峰法，jQuery 及其他 JavaScript 库都使用小驼峰法。

注意:变量名千万不要以 $ 作为开始标记，会与很多 JavaScript 库冲突。

---

HTML 载入外部 JavaScript 文件

使用简洁的格式载入 JavaScript 文件 ( type 属性不是必须的):

< script  src= "beyondscript.js" >

---

使用 JavaScript 访问 HTML 元素

一个糟糕的 HTML 格式可能会导致 JavaScript 执行错误。

以下两个 JavaScript 语句会输出不同结果:

实例

var obj = getElementById( "id_p_result") ;
var obj = getElementById( "id_p_Result") ;

HTML 与 JavaScript 尽量使用相同的命名规则。

---

文件扩展名

HTML 文件后缀可以是 .html (不建议使用 .htm)。

CSS 文件后缀是 .css 。

JavaScript 文件后缀是 .js 。

---

使用小写文件名

大多 Web 服务器 (Apache, Unix) 对大小写敏感： london.jpg 不能通过 London.jpg 访问。

其他 Web 服务器 (Microsoft, IIS) 对大小写不敏感： london.jpg 可以通过 London.jpg 或 london.jpg 访问。

你必须保持统一的风格，我们强烈建议统一使用小写的文件名。

未完待续,下一章节,つづく