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 中有 不同的数据类型,

用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, 23, 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( 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");


你注意到了吗?

Note正则表达式参数可用在以上方法中 (替代字符串参数)。 
正则表达式使得搜索功能更加强大(如实例中的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 出现错误,是不会有提示信息,这样你就无法找到代码错误的位置。

Note通常,你在编写一个新的 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 以后扩展使用。

abstractargumentsbooleanbreakbyte
casecatchcharclass*const
continuedebuggerdefaultdeletedo
doubleelseenum*evalexport*
extends*falsefinalfinallyfloat
forfunctiongotoifimplements
import*ininstanceofintinterface
letlongnativenewnull
packageprivateprotectedpublicreturn
shortstaticsuper*switchsynchronized
thisthrowthrowstransienttrue
trytypeofvarvoidvolatile
whilewithyield  

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


JavaScript 对象、属性和方法

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

ArrayDateevalfunctionhasOwnProperty
InfinityisFiniteisNaNisPrototypeOflength
MathNaNnameNumberObject
prototypeStringtoStringundefinedvalueOf


Java 保留关键字

JavaScript 经常与 Java 一起使用。

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

getClassjavaJavaArrayjavaClassJavaObjectJavaPackage




Windows 保留关键字

JavaScript 可以在 HTML 外部使用。

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

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

alertallanchoranchorsarea
assignblurbuttoncheckboxclearInterval
clearTimeoutclientInformationcloseclosedconfirm
constructorcryptodecodeURIdecodeURIComponentdefaultStatus
documentelementelementsembedembeds
encodeURIencodeURIComponentescape 编码eventfileUpload
focusformformsframeinnerHeight
innerWidthlayerlayerslinklocation
mimeTypesnavigatenavigatorframesframeRate
hiddenhistoryimageimagesoffscreenBuffering
openopener  开启者optionouterHeightouterWidth
packagespageXOffsetpageYOffsetparentparseFloat
parseIntpasswordpkcs11pluginprompt
propertyIsEnumradioresetscreenXscreenY
scrollsecureselectselfsetInterval
setTimeoutstatussubmittaint 玷污text
textareatopunescape 解码untaintwindow


HTML 事件句柄

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

实例:

onbluronclickonerroronfocus
onkeydownonkeypressonkeyuponmouseover
onloadonmouseuponmousedownonsubmit

注意:在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 易于理解。

Note* 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 访问。

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




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



  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值