JS_01_變量_數據類型
標簽： JS JavaScript 變量 數據類型
簡介:
JavaScript 是世界上最流行的腳本語言,也是世界上第2難的語言。
JavaScript 是屬于 web 的語言，它適用于 PC、筆記本電腦、平板電腦和移動攜帶。
JavaScript 被設計為給 HTML 頁面增加交互性。
JavaScript 擁有非常簡單的語法 和 非常難的閉包。
說明:
Javascript，從“最被誤解的語言”，最后神奇地轉變成為世界上“最流行的語言”，證明它經受得起時間的考驗。
雖然單獨來看，它的交互設計有些失敗，但是加上Ajax的完美配合，javascript就成了一款輕便并且又實用的好語法。
接下來讓我們靜下心來，翻開這本關于Javascript的教程，
你可以學習到JavaScript 代碼規范、JavaScript 函數撰寫、javascript 正則表達式、JavaScript 邏輯運算等基礎內容，
除此之外，本書還有進擊的Javascript高級教程，面向對象 和 閉包! 最好在熟讀前面的基礎知識之后，再考慮繼續之后的教程。
高級教程當中包含的內容有很重要的JavaScript 對象介紹，JavaScript Window對象模型介紹，
JavaScript 庫以及JavaScript 實例等等，每一個章節都值得在寂寞的夜里,細細研讀。
1995年4月,34歲的公司新人Brendan Eich臨危受命,被指定為這種"簡化版Java語言"的設計師。
但是，他對Java一點興趣也沒有。為了應付公司安排的任務，他只用10天時間就把Javascript設計出來了。
由于設計時間太短，語言的一些細節考慮得不夠嚴謹，導致后來很長一段時間，Javascript寫出來的程序混亂不堪。如果Brendan Eich預見到，未來這種語言會成為互聯網第一大語言，全世界有幾百萬學習者，他會不會多花一點時間呢?
總的來說，他的設計思路是這樣的：
(1)借鑒C語言的基本語法;
(2)借鑒Java語言的數據類型和內存管理;
(3)借鑒Scheme語言，將函數提升到"第一等公民"(first class)的地位;
(4)借鑒Self語言，使用基于原型(prototype)的繼承機制。
所以，Javascript語言實際上是兩種語言風格的混合產物——(簡化的)函數式編程+(簡化的)面向對象編程。
如果不是公司的決策，Brendan Eich絕不可能把Java作為Javascript設計的原型。作為設計者，他一點也不喜歡自己的這個作品：
"與其說我愛Javascript，不如說我恨它。它是C語言和Self語言一夜情的產物。"
Scheme 編程語言是一種Lisp方言，誕生于1975年,它是現代兩大Lisp方言之一；另一個方言是Common Lisp。
Lisp 語言歷史悠久，在計算機程序語言里，年齡僅次于Fortran。
該語言起初為表處理而設計，后來廣泛用于人工智能。
LISP是一種通用高級計算機程序語言，長期以來壟斷人工智能領域的應用。LISP作為因應人工智能而設計的語言，是第一個聲明式系內函數式程序設計語言，有別于命令式系內過程式的C、Fortran和面向對象的Java、C#等結構化程序設計語言。
Lisp 程序中充滿了一對對嵌套的小括號，這些嵌套的符號表達式體現了遞歸。遞歸是數學上的基本概念之一，從遞歸理論出發，一切可以計算的函數最終都可以劃歸為幾種基本的遞歸函數的種種組合。
Scheme語言的規范很短，總共只有50頁，甚至連Common Lisp 規范的索引的長度都不到，但是卻被稱為是現代編程語言王國的皇后。
javascript介紹
javascript因為是兼容ECMA標準，因此也稱為ECMAScript。
(European Computer Manufactures Association 歐洲計算機制造聯合會)
JavaScript作為一種腳本語言，已經被廣泛地應用于Web頁面當中，
通過嵌入HTML來實現各種酷炫diao炸天的動態效果，為用戶提供賞心悅目的瀏覽效果。
除此之外，也可以用于控制cookies以及基于Node.js技術進行服務器端編程。
javascript是甲骨文公司的注冊商標，
完整的JavaScript實現包含3個部分：ECMAScript，文檔對象模型(DOM)和瀏覽器對象模型(BOM)。
發展初期，JavaScript的標準并未確定，同期有Netscape的JavaScript，微軟的JScript和CEnvi的ScriptEase三足鼎立。
1997年，在ECMA(歐洲計算機制造商協會)的協調下，
由Netscape、Sun、微軟、Borland組成的工作組確定統一標準：ECMA-262。
javascript開發工具
Spket：
Netbeans：
Ixedit：
codepress：
Webstorm：
Komodo Edit：
scripted：
javascript應用
學完javascript，你或許可以嘗試一下：
1.制作一些簡單的小游戲，比如說象棋游戲、消除游戲、闖關游戲等等
2.javascript實例
3.利用javascript實現網頁的前端邏輯
4.利用javascript實現移動應用的框架
JavaScript 教程導讀
JavaScript 是 Web世界 的編程語言。
所有現代的 HTML 頁面都使用 JavaScript，可以用于改進設計、驗證表單、檢測瀏覽器、創建cookies等。
JavaScript 非常容易學(騙人入坑)。
本教程將教你學習從初級到高級JavaScript知識。
JavaScript 在線實例
本教程包含了大量的 JavaScript 實例， 您可以點擊 "嘗試一下" 來在線查看實例。
代碼如下:
<!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 pNode = document.getElementById("id_p_result");
pNode.innerHTML = Date();
}
</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">這兒將顯示日期</p>
<button class="class_btn class_btn_green" type="button" onclick="btnClicked()">顯示當前日期</button>
<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>
</body>
</html> 效果如下:
 | 如果能根據本站的200多個實例一步一個腳印學習，你將會在很短的(一周左右)時間內學會 JavaScript。 |
|---|
為什么學習 JavaScript?
JavaScript web 開發人員必須學習的 3 門語言中的一門：
- HTML 定義了網頁的 內容
- CSS 描述了網頁的 布局
- JavaScript 網頁的 行為
本教程是關于 JavaScript 及介紹 JavaScript 如何與 HTML 和 CSS 一起工作。
誰適合閱讀本教程?
1. 如果您想學習 JavaScript，您可以學習本教程：
了解 JavaScript 是如何與 HTML 和 CSS 一起工作的。
2. 如果在此之前您已經使用過 JavaScript，您也可以閱讀本教程：
JavaScript 一直在升級，所以我們需要時刻了解 JavaScript 的新技術。
閱讀本教程前，您需要了解的知識：
閱讀本教程，您需要有以下基礎：
- HTML 和 CSS 基礎
如果您想學習這些基礎知識，您可以在我們前面的文章找到相應的教程。
JavaScript 實戰練習
我們最后會為學習者準備了大量的JavaScript編程實戰練習，供大家通過親自編程實驗來熟練編程操作JavaScript 實例
學習 100 多個 JavaScript 實例！
在教程的最后,我們會寫100多個實例,敬請期待!
- JavaScript 實例
- JavaScript 對象實例
- JavaScript 瀏覽器支持實例
- JavaScript HTML DOM 實例
JavaScript 參考手冊
我們為您提供完整的 JavaScript 對象、瀏覽器對象(BOM)、HTML DOM 對象參考手冊。
以下手冊包含了每個對象、屬性、方法的實例。
- JavaScript 內置對象
- Browser 對象
- HTML DOM 對象
JavaScript 簡介
JavaScript 是互聯網上最流行的腳本語言，
這門語言可用于 HTML 和 web，更可廣泛用于服務器、PC、筆記本電腦、平板電腦和智能手機等設備。
JavaScript 是腳本語言
JavaScript 是一種輕量級的編程語言。
JavaScript 是可插入 HTML 頁面的編程代碼。
JavaScript 插入 HTML 頁面后，可由所有的現代瀏覽器執行。
JavaScript 很容易學習(騙你入坑呢)。
您將學到什么
下面是您將在本教程中學到的主要內容有:
JavaScript：直接寫入 HTML 輸出流
代碼如下:
注意:只能在HTML輸入流中,使用document.write();
如果在文檔加載完成后(如函數中)使用,將覆蓋整個文檔喔~
<!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>
<script type="text/javascript" >
document.write("<p style='color:teal;text-align:center;'>我們仍未知道那夏天所知道的花的名字</p>");
</script>
<p class="sgcontentcolor sgcenter" style="clear:left;">
<b>注意:</b>只能在HTML輸入流中,使用document.write();<br/>
如果在文檔加載完成后(如函數中)使用,將覆蓋整個文檔喔~
</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>
</body>
</html> 效果如下:
核心代碼:
document.write("<p>這是一個段落。</p>");
| 您只能在 HTML 輸出中使用 document.write。如果您在文檔加載完成后使用該方法，會覆蓋整個文檔。 |
|---|
JavaScript：對事件的反應
代碼如下:
<!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>
</head>
<body>
<h1 style="color:white;text-shadow:2px 2px 4px #000;letter-spacing:5px;" class="sgcontentcolor sgcenter">
未聞花名
</h1>
<button class="class_btn class_btn_green" type="button" onclick="alert('即將播放『那朵花』,推薦WiFi環境下觀看')">在線觀看</button>
<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>
</body>
</html> 效果如下:
核心代碼:
alert() 函數在 JavaScript 中并不常用(也不推薦使用喔~)，但它對于代碼測試非常方便。
onclick 事件只是您即將在本教程中學到的眾多事件的萬分之一。
JavaScript：改變 HTML 內容
使用 JavaScript 來處理 HTML 內容是非常強大的功能。
代碼如下:
<!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 pNode = document.getElementById("id_p_result");
pNode.innerHTML = "Hello Beyond~";
}
</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">
Hello World!
</p>
<button onclick="btnClicked()" class="class_btn class_btn_green" type="button" >點我試試</button>
<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>
</body>
</html> 效果如下:
核心代碼:
pNode.innerHTML = "Hello Beyond"; //改變內容
您會經常看到 document.getElementById("id_element_result")。
這個方法是 HTML DOM 中定義的。
DOM (Document Object Model)（文檔對象模型）是用于訪問 HTML 元素的正式 W3C 標準。
JavaScript：改變 HTML 圖像
本例會動態地改變 HTML 圖像的來源（src）：
代碼如下:
<!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>
<script type="text/javascript">
// imgView Tap 手勢
function imgViewTapped() {
var imgNode = document.getElementById("id_img_light");
var isLightOn = imgNode.src.match("lighton.gif");
if (isLightOn) {
imgNode.src = "lightoff.gif";
} else{
imgNode.src = "lighton.gif";
}
}
</script>
</head>
<body>
<h1 style="color:white;text-shadow:2px 2px 4px #000;letter-spacing:5px;" class="sgcontentcolor sgcenter">
未聞花名
</h1>
<img id="id_img_light" onclick="imgViewTapped()" src="lightoff.gif" width="100" height="180" />
<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>
</body>
</html> 效果如下:
核心代碼:
點擊燈泡就可以打開或關閉這盞燈
JavaScript 能夠改變任意 HTML 元素的大多數屬性，而不僅僅是圖片。
JavaScript：改變 HTML 樣式
改變 HTML 元素的樣式，屬于改變 HTML 屬性的變種。
代碼如下:
<!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 pNode = document.getElementById("id_p_result");
pNode.innerHTML = "我們仍未知道那年夏天所見到的花的名字";
pNode.style.color = "Teal";
pNode.style.fontWeight = "Bold";
}
</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">
あの日見た花の名前を僕達はまだ知らない
</p>
<button onclick="btnClicked()" class="class_btn class_btn_green" type="button" >點我試試</button>
<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>
</body>
</html> 效果如下:
核心代碼:
pNode.style.color="#ff0000"; //改變樣式
JavaScript：驗證輸入
JavaScript 常用于驗證用戶的輸入。
代碼如下:
<!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 inputValue = inputTextNode.value;
// 先去掉所有的空格
inputValue = inputValue.replace(/\s+/g,"");
// 然后看看 是不是數字
var isNotNumber = inputValue == "" || isNaN(inputValue);
// 然后看看 是不是0 - 120之間
var isNotValideAge = inputValue < 0 || inputValue > 120;
// Toast提示
if (isNotNumber || isNotValideAge) {
alert("請輸入正確的年齡喔~");
}else {
alert("年齡是:" + inputValue);
}
}
</script>
</head>
<body>
<h1 style="color:white;text-shadow:2px 2px 4px #000;letter-spacing:5px;" class="sgcontentcolor sgcenter">
未聞花名
</h1>
<input id="id_input_text" type="text" placeholder="請輸入年齡" />
<button onclick="btnClicked()" class="class_btn class_btn_green" type="button" >點我試試</button>
<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>
</body>
</html> 效果如下:
核心代碼:
您知道嗎？
| JavaScript 與 Java 是兩種完全不同的語言，無論在概念上還是設計上。 Java（由 Sun 發明）是更復雜的編程語言。 ECMA-262 是 JavaScript 標準的官方名稱。 JavaScript 由 Brendan Eich 發明。它于 1995 年出現在 Netscape 中（該瀏覽器已停止更新），并于 1997 年被 ECMA（一個標準協會）采納。 |
|---|
javaScript和ECMAScript的關系
ECMAScript是歐洲計算機制造商協會通過ECMA-262標準化的腳本程序設計語言。
JavaScript 已經由 ECMA 通過 ECMAScript 實現語言的標準化。
相關教程,敬請期待
ECMAScript教程
.
JavaScript 用法
HTML 中的腳本必須位于 <script> 與 </script> 標簽之間。
腳本可被放置在 HTML 頁面的 <head> 或 <body> 部分中。
<script> 標簽
如需在 HTML 頁面中插入 JavaScript，必須使用 <script> 標簽。
<script> 和 </script> 會告訴 JavaScript 在何處開始和結束。
<script> 和 </script> 之間的代碼行包含著 JavaScript:
</script>
您無需理解上面的代碼。
只需明白，瀏覽器會解釋并執行位于 <script> 和 </script>之間的 JavaScript 代碼
| 那些老舊的實例可能會在 <script> 標簽中使用 type="text/javascript"。現在已經不必這樣做了。JavaScript 是所有現代瀏覽器以及 HTML5 中的默認腳本語言。 |
|---|
<body> 中的 JavaScript
在本例中，JavaScript 會在頁面加載時向 HTML 的 <body> 寫文本：
核心代碼:
<html>
<body>
.
.
<script>
document.write("<h1>這是一個標題</h1>");
document.write("<p>這是一個段落</p>");
</script>
.
.
</body>
</html>
JavaScript 函數和事件
上面例子中的 JavaScript 語句，會在頁面加載時執行。
通常，我們需要在某個事件發生時執行代碼，比如當用戶點擊按鈕時。
如果我們把 JavaScript 代碼放入函數中，就可以在事件發生時調用該函數。
在 <head> 或者 <body> 的JavaScript的區別
您可以在 HTML 文檔中放入無限的腳本。
腳本可位于 HTML 的 <head> 或 <body> 部分中，或者同時存在于兩個部分中。
通常的做法是把函數放入 <head> 部分中，或者放在頁面底部。
這樣就可以把它們安置到同一處位置，不會干擾頁面的內容。
<head> 中的 JavaScript 函數
在本例中，我們把一個 JavaScript 函數放置到 HTML 頁面的 <head> 部分。
該函數會在點擊按鈕時被調用：
核心代碼:
<html>
<head>
<script>
function btnClicked()
{
document.getElementById("id_p_result").innerHTML="hello beyond~";
}
</script>
</head>
<body>
<h1>未聞花名</h1>
<p id="id_p_result">hello world !</p>
<button type="button" onclick="btnClicked()">點我試試</button>
</body>
</html>
<body> 中的 JavaScript 函數
在本例中，我們把一個 JavaScript 函數放置到 HTML 頁面的 <body> 部分。
該函數會在點擊按鈕時被調用：
核心代碼:
<html>
<body>
<h1>我的 Web 頁面</h1>
<p id="id_p_result">hello world!</p>
<button type="button" onclick="btnClicked()">點我試試</button>
<script>
function btnClicked()
{
document.getElementById("id_p_result").innerHTML="hello beyond~";
}
</script>
</body>
</html>
注意：我們必須把 JavaScript 放到了頁面代碼的底部，這樣就才能確保在 <p> 元素創建之后再執行腳本。
外部的 JavaScript
也可以把腳本保存到外部文件中。
外部文件通常包含被多個網頁使用的代碼。
外部 JavaScript 文件的文件擴展名是 .js。
如需使用外部文件，請在 <script> 標簽的 "src" 屬性中引用外部的 .js 文件：
核心代碼:
<html>
<body>
<script src="beyondScript.js"></script>
</body>
</html>
你可以將腳本放置于 <head> 或者 <body>中 實際運行效果與您在 <script> 標簽中編寫腳本完全一致。
| 外部.js腳本文件中 不能再包含 <script> 標簽了,直接寫函數即可。 |
|---|
JavaScript 輸出
JavaScript 沒有任何打印或者輸出的函數。
JavaScript 可以通過不同的方式來輸出數據：
- 使用 window.alert() 彈出警告框。
- 在文檔流中(非函數)使用 document.write() 方法將內容寫到 HTML 文檔中。
- 使用 innerHTML 寫入到 HTML 元素。
- 使用 console.log() 寫入到瀏覽器的控制臺。
使用 window.alert()
你可以彈出警告框來顯示數據：
核心代碼:
<html>
<body>
<h1>我的第一個頁面</h1>
<p>我的第一個段落。</p>
<script>
window.alert(5 + 2 + 6 + 7);
</script>
</body>
</html>
操作 HTML 元素
如需從 JavaScript 訪問某個 HTML 元素，您可以使用 document.getElementById(id) 方法。
請使用 "id" 屬性來標識 HTML 元素，并 innerHTML 來獲取或插入元素內容：
核心代碼:
<html>
<body>
<h1>未聞花名</h1>
<p id="id_p_result">hello world!</p>
<script>
document.getElementById("id_p_result").innerHTML = "hello beyond~";
</script>
</body>
</html>
以上 JavaScript 語句（在 <script> 標簽中）可以在 web 瀏覽器中執行：
document.getElementById("id_p_result") 是使用 id 屬性來查找 HTML 元素的 JavaScript 代碼 。
該方法是 HTML DOM 中定義的。
innerHTML = "hello beyond" 是用于修改元素的 HTML 內容(innerHTML)的 JavaScript 代碼。
在本教程中
在大多數情況下，在本教程中，我們將使用上面描述的方法來輸出：
下面的例子直接把 id="id_p_result" 的 <p> 元素寫到 HTML 文檔輸出中：
document.write() 寫到 HTML 文檔
使用 document.write() 方法將內容寫到 HTML 文檔中。
此功能可用于寫入文本和HTML。
出于測試目的，您可以將JavaScript直接寫在HTML 文檔中：
核心代碼:
<html>
<body>
<h1>我的第一個 Web 頁面</h1>
<p>我的第一個段落。</p>
<script>
document.write(Date());
</script>
</body>
</html>
| 請千萬注意: document.write() 僅可在文檔流中向文檔輸出寫內容。 如果在文檔已完成加載后(如在函數中)執行 document.write()，則整個 HTML 頁面將被覆蓋。 |
|---|
核心代碼:
<html>
<body>
<h1>未聞花名</h1>
<p>hello beyond</p>
<button onclick="btnClicked()">點我</button >
<script>
function btnClicked() {
document.write(Date());
}
</script>
</body>
</html>
寫到控制臺
如果您的瀏覽器支持調試，你可以使用 console.log() 方法在瀏覽器中顯示 JavaScript 值。
瀏覽器中使用 F12 來啟用調試模式，
注意:使用shift + enter 可以使代碼強制換行,而不是運行代碼
注意:每次運行時,第2條輸出的undefined是console.log()的返回值(因為它這個函數沒有返回值)
為了使輸入美觀一些,我們改造一下console.log(),代碼如下:
function NSLog(loli) {console.log(loli);return 'Copyright 2018 Powered by beyond';};效果如下:
關于Safari,如果您未在Safari的菜單欄中看到“開發”菜單，請選取“Safari 瀏覽器”>“偏好設置”，點按“高級”，然后勾選“在菜單欄中顯示開發菜單”。
Chrome 的Console快捷鍵: 左Option + Command + J
Opera的Console快捷鍵:左Option + Command + I
Safari 的Console快捷鍵: 左Option + Command + C
Firefox的Console快捷鍵:左Option + Command + K
mac下快捷鍵是:左Option+commond + J
在調試窗口中點擊 "Console" 菜單。
代碼如下:
<!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>
<script type="text/javascript">
console.log(5+2+6+7);
</script>
</head>
<body>
<h1 style="color:white;text-shadow:2px 2px 4px #000;letter-spacing:5px;" class="sgcontentcolor sgcenter">
未聞花名
</h1>
<p class="sgcontentcolor sgcenter" style="clear:left;">
<b>注意:</b>在Chrome,Firefox,IE中<br/>
使用 F12 來啟用調試模式<br/>在調試窗口中點擊 "Console" 菜單。
</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> 效果如下:
核心代碼:
<html>
<body>
<h1>我的第一個 Web 頁面</h1>
<script>
a = 5;
b = 6;
c = a + b;
console.log(c);
</script>
</body>
</html>
您知道嗎?
| 程序中調試是測試，查找及減少bug(錯誤)的過程。 |
|---|
JavaScript 語法
JavaScript 是一個程序語言。語法規則定義了語言結構。
JavaScript 語法
JavaScript 是一個腳本語言。
它是一個輕量級，但功能強大的編程語言,也是世界上第2難的語言。
JavaScript 字面量
在編程語言中，一個字面量是一個常量，如 3.14。
數字（Number）字面量 可以是整數或者是小數，或者是科學計數(e)。
代碼如下:
<script type="text/javascript">
document.getElementById('id_p_result').innerHTML = 52067e-2;
// console.log(5+2+6+7);
</script>效果如下:
1001
123e5
字符串（String）字面量 可以使用單引號或雙引號 :
代碼如下:
<script type="text/javascript">
document.getElementById('id_p_result').innerHTML = 'beyond';
// console.log(5+2+6+7);
</script>'beyond'
表達式字面量 用于計算：
代碼如下:
<script type="text/javascript">
document.getElementById('id_p_result').innerHTML = 52 + 67;
// console.log(5+2+6+7);
</script>5 * 10
數組（Array）字面量 定義一個數組：左Option + Command + J
對象（Object）字面量 定義一個對象：打開Console 左Option + Command + J
函數（Function）字面量 定義一個函數：左Option + Command + J
JavaScript 變量
在編程語言中，變量用于存儲數據值。
JavaScript 使用關鍵字 var 來定義變量， 使用等號=來為變量賦值：
Chrome 的Console快捷鍵: 左Option + Command + J
Opera的Console快捷鍵:左Option + Command + I
Firefox的Console快捷鍵:左Option + Command + K
age = 13;
cup = "A罩杯" ;
變量可以通過變量名訪問。
在指令式語言中，變量通常是可變的。
注意:字面量則是一個恒定的值。
| 注意:變量是一個名稱。而字面量是一個值。 |
|---|
JavaScript 操作符
JavaScript使用 算術運算符 來計算值:
JavaScript使用賦值運算符給變量賦值：
var y = 6 ;
var z = (x + y) * 7 ;
JavaScript語言有多種類型的運算符：
| Type | 實例 | 描述 |
|---|---|---|
| 賦值，算術和位運算符 | = + - * / | 在 JS 運算符中描述 |
| 條件，比較及邏輯運算符 | == != < > | 在 JS 比較運算符中描述 |
JavaScript 語句
在 HTML 中，JavaScript 語句向瀏覽器發出的命令。
瀏覽器通過 JavaScript 語句明白要執行什么操作。
語句是用分號分隔：
var y = x * 10;
JavaScript 關鍵詞
JavaScript 語句通常以關鍵詞為開頭。
var 關鍵詞告訴瀏覽器創建一個新的變量：
var y = x * 10;
JavaScript 標識符
和其他任何編程語言一樣，JavaScript 保留了一些標識符為自己所用。
JavaScript 同樣還保留了一些關鍵字，這些關鍵字在當前的語言版本中并沒有使用，但在以后 JavaScript 擴展中會用到。
JavaScript 標識符必須以字母、下劃線（_）或美元符（$）開始。
后續的字符可以是字母、數字、下劃線或美元符（數字是不允許作為首字符出現的，以便 JavaScript 可以輕易區分開標識符和數字）。
以下是 JavaScript 中最??重要的保留字（按字母順序）：
| abstract | else | instanceof | super |
| boolean | enum | int | switch |
| break | export | interface | synchronized |
| byte | extends | let | this |
| case | false | long | throw |
| catch | final | native | throws |
| char | finally | new | transient |
| class | float | null | true |
| const | for | package | try |
| continue | function | private | typeof |
| debugger | goto | protected | var |
| default | if | public | void |
| delete | implements | return | volatile |
| do | import | short | while |
| double | in | static | with |
JavaScript 注釋
不是所有的 JavaScript 語句都是"命令"。雙斜杠 // 后的內容將會被瀏覽器忽略：
JavaScript 數據類型
JavaScript 有多種數據類型：數字，字符串，數組，對象等等：
var length = r * 2 * 3.14; // Number 通過表達式字面量賦值
var animeName = "那朵花"; // String 通過字符串字面量賦值
var girlArr = ["面碼", "艾拉", "逢坂大河"]; // Array 通過數組字面量賦值
var loli = {name:"mathilda", age:12}; // Object 通過對象字面量賦值
數據類型的概念
編程語言中，數據類型是一個非常重要的內容。
為了可以操作變量，了解數據類型的概念非常重要。
如果沒有使用數據類型，以下實例將無法執行：
12 加上 "歲的mathilda" 是如何計算呢? 以上會產生一個錯誤還是輸出以下結果呢？
你可以在瀏覽器嘗試執行以上代碼查看效果。
JavaScript 函數
JavaScript 語句可以封裝到函數內，因為函數可以被重復引用：
引用一個函數 = 調用函數(即執行函數內的語句)。
注意:shift + enter 可以換行,而不執行代碼
return a + b; // 返回 a + b 的結果
}
JavaScript 對大小寫敏感。
JavaScript 對大小寫是敏感的。
當編寫 JavaScript 語句時，請留意是否關閉大小寫切換鍵。
函數 getElementById 與 getElementbyID 是截然不同的。
同樣，變量 myVariable 與 MyVariable 也是完全不同的。
JavaScript 字符集
JavaScript 使用 Unicode 字符集。
Unicode 覆蓋了所有的字符，包含標點等字符。
如需進一步了解，請學習我們即將推出的 完整 Unicode 參考手冊。
您知道嗎?
| JavaScript 中，常見的是駝峰法的命名規則，如 animeName (而不是animename)。 |
|---|
| JavaScript 是腳本語言。瀏覽器會在讀取代碼時，逐行地執行腳本代碼。而對于傳統編程來說，會在執行前對所有代碼進行編譯。 |
|---|
JavaScript 語句
JavaScript 語句向瀏覽器發出的命令。語句的作用是告訴瀏覽器該做什么。
JavaScript 語句
JavaScript 語句是發給瀏覽器的命令。
這些命令的作用是告訴瀏覽器要做的事情。
下面的 JavaScript 語句向 id="id_p_result" 的 HTML 元素輸出文本 "Hello Beyond~" ：
實例
分號 ;
分號用于分隔 JavaScript 語句。
通常我們在每條可執行的語句結尾添加分號。
使用分號的另一個用處是:可以在一行中編寫多條語句。
var b = 67;
var c = a + b;
Is the same as writing:
| 您也可能看到不帶有分號的案例。 在 JavaScript 中，用分號來結束語句是可選的。 |
|---|
JavaScript 代碼
JavaScript 代碼是 JavaScript 語句的序列。
瀏覽器按照編寫順序依次執行每條語句。
本例向網頁輸出一個標題和兩個段落：
實例
document.getElementById("id_div_result").innerHTML="未聞花名";
JavaScript 代碼塊
JavaScript 可以用大括號組合起來。
代碼塊以左花括號開始，以右花括號結束。
代碼塊的作用是一并地執行語句序列。
本例向網頁輸出一個標題和兩個段落：
實例
{
document.getElementById("id_p_result").innerHTML="Hello Beyond~";
document.getElementById("id_div_result").innerHTML="未聞花名";
}
JavaScript 語句標識符
JavaScript 語句通常以一個 語句標識符 為開始，并執行該語句。
語句標識符是保留關鍵字不能作為變量名使用。
下表列出了 JavaScript 語句標識符 (關鍵字) ：
| 語句 | 描述 |
|---|---|
| break | 用于跳出循環。 |
| catch | 語句塊，在 try 語句塊執行出錯時執行 catch 語句塊。 |
| continue | 跳過循環中的一個迭代。 |
| do ... while | 執行一個語句塊，在條件語句為 true 時繼續執行該語句塊。 |
| for | 在條件語句為 true 時，可以將代碼塊執行指定的次數。 |
| for ... in | 用于遍歷數組或者對象的屬性（對數組或者對象的屬性進行循環操作）。 |
| function | 定義一個函數 |
| if ... else | 用于基于不同的條件來執行不同的動作。 |
| return | 退出函數 |
| switch | 用于基于不同的條件來執行不同的動作。 |
| throw | 拋出（生成）錯誤 。 |
| try | 實現錯誤處理，與 catch 一同使用。 |
| var | 聲明一個變量。 |
| while | 當條件語句為 true 時，執行語句塊。 |
空格
JavaScript 會自動忽略多余的空格。您可以向腳本添加空格，來提高其可讀性。下面的兩行代碼是等效的:
對代碼行進行折行
您可以在文本字符串中使用反斜杠對代碼行進行換行。下面的例子會正確地顯示:
您可以在文本字符串中使用反斜杠對代碼行進行換行。下面的例子會正確地顯示：
Beyond!");
不過，您不能像這樣折行：
("Hello World!");
JavaScript 語句練習
JavaScript 注釋語句操作
練習如何在JavaScript中對語句進行注釋，被注釋的代碼塊在JavaScript之中是不會被運行的。
JavaScript 注釋
JavaScript 注釋可用于提高代碼的可讀性。
JavaScript 注釋
JavaScript 不會執行 注釋。
我們可以添加注釋來對 JavaScript 進行解釋，或者提高代碼的可讀性。
單行注釋以 // 開頭。
本例用單行注釋來解釋代碼：
實例
document.getElementById("id_h1").innerHTML="未聞花名";
// 輸出段落：
document.getElementById("id_p").innerHTML="我們仍未知道那年夏天所見到的花的名字";
JavaScript 多行注釋
多行注釋以 /* 開始，以 */ 結尾。
下面的例子使用多行注釋來解釋代碼：
實例
下面的這些代碼會輸出
一個標題和一個段落
并將代表主頁的開始
*/
document.getElementById("id_h1").innerHTML="歡迎來到我的主頁";
document.getElementById("id_p").innerHTML="我們仍未知道那年夏天所見到的花的名字";
使用注釋來阻止執行
在下面的例子中，注釋用于阻止其中一條代碼行的執行（可用于調試）：
實例
document.getElementById("id_p").innerHTML="我們仍未知道那年夏天所見到的花的名字";
在下面的例子中，注釋用于阻止代碼塊的執行（可用于調試）：
實例
document.getElementById("id_h1").innerHTML="未聞花名";
document.getElementById("id_p").innerHTML="我們仍未知道那年夏天所見到的花的名字";
*/
在行的末尾使用注釋
在下面的例子中，我們把注釋放到代碼行的結尾處：
實例
var y=x+2; // 聲明 y 并把 x+2 賦值給它
JavaScript 變量
變量是用于存儲信息的"容器"。
實例
var y=67;
var z=x+y;
就像代數那樣
x=52
y=67
z=x+y
在代數中，我們使用字母（比如 x）來保存值（比如 52）。
通過上面的表達式 z=x+y，我們能夠計算出 z 的值為 117。
在 JavaScript 中，這些字母被稱為變量。
| 您可以把變量看做存儲數據的容器。 |
|---|
JavaScript 變量
與代數一樣，JavaScript 變量可用于存放值（比如 x=52）和表達式（比如 z=x+y）。
變量可以使用短名稱（比如 x 和 y），也可以使用描述性更好的名稱（比如 age, sum, totalvolume）。
- 變量建議以字母開頭
- 變量也能以 $ 和 _ 符號開頭（不過我們不推薦這么做）
- 變量名稱對大小寫那是相當滴敏感（y 和 Y 是不同的變量）
- 絕對不能以數字開頭(那樣會混淆 數字字面量)
| JavaScript 語句和 JavaScript 變量都對大小寫敏感。 |
|---|
JavaScript 數據類型
JavaScript 變量還能保存其他數據類型，比如文本值 (name="未聞花名")。
在 JavaScript 中，類似 "未聞花名" 這樣一條文本被稱為字符串。
JavaScript 變量有很多種類型，但是現在，我們只關注數字和字符串。
當您向變量分配文本值時，應該用雙引號或單引號包圍這個值。
當您向變量賦的值是數值時，不要使用引號。
如果您用引號包圍數值，該值會被作為文本來處理。
實例
var girl = "面碼";
var cup = 'A cup';
聲明（創建） JavaScript 變量
在 JavaScript 中創建變量通常稱為"聲明"變量。
我們使用 var 關鍵詞來聲明變量：
變量聲明之后，該變量默認是空的（它沒有值）。
如需向變量賦值，請使用等號：
不過，您也可以在聲明變量的同時對其賦值：
在下面的例子中，我們創建了名為 animeName 的變量，并向其賦值 "未聞花名"，然后把它放入 id="id_p" 的 HTML 段落中：
實例
var animeName = "未聞花名";
document.getElementById("id_p").innerHTML = animeName;
| 一個好的編程習慣是，在代碼開始處，統一對需要的變量進行聲明。 |
|---|
一條語句，多個變量
您可以在一條語句中聲明很多變量。
該語句以 var 開頭，并使用逗號分隔變量即可：
用逗號隔開的聲明也可橫跨多行：
age = 15,
cup = "A";
<script type="text/javascript">
// 用逗號分隔的多個變量聲明,可以跨行
var girlName = '面碼',
age = 15,
cup = "A";
var result = girlName + ',' + age + '歲,' + cup + '罩杯'
document.write(result);
</script>Value = undefined
在計算機程序中，經常會聲明無值的變量。
還未使用值的 聲明了的變量，其值實際上是 undefined。
在執行過以下語句后，變量 animeName 的值將是 undefined:
重新聲明 JavaScript 變量
如果重新聲明 JavaScript 變量，該變量的值不會丟失???Excuse Me???
在以下兩條語句執行后，變量 myFirstLove 的值依然是 "面碼"：
var myFirstLove;
JavaScript 算數
您可以通過 JavaScript 變量來做算數，使用的是 = 和 + 這類運算符：
實例
var x = y + 67;
JavaScript 數據類型
字符串（String）、數字(Number)、布爾(Boolean)、數組(Array)、
對象(Object)、
空（Null）、未定義（Undefined）。
JavaScript 擁有動態類型
JavaScript 擁有動態類型。
這意味著相同的變量可用作不同的類型：
實例
var x = 520; // 現在 x 為數字
var x = "keke"; // 現在 x 為字符串
JavaScript 字符串
字符串是存儲字符（比如 "未聞花名"）的變量。
字符串可以是引號中的任意文本。您可以使用單引號或雙引號：
實例
var girl = 'mathilda';
您可以在字符串中使用引號，只要不匹配包圍字符串的引號即可：
實例
var girlAge = "girl's age is 15";
var girlCup = 'girl is "A"';
JavaScript 數字
JavaScript 只有一種數字類型。
數字可以帶小數點，也可以不帶：
實例
var x2 = 1314; // 不使用小數點來寫
極大或極小的數字可以通過科學（指數）計數法來書寫：
實例
var z = 1314e-4; // 0.1314
JavaScript 布爾
布爾（邏輯）只能有兩個值：true 或 false。
var y = false;
注意:0,null,NaN, undefined,空字符串 轉成boolean后,都是false
JavaScript 數組
下面的代碼創建名為 girlArr 的數組：
girlArr[0] = "面碼";
girlArr[1] = "逢坂大河";
或者 (condensed array):
或者字面量的形式創建數組 (literal array):
實例
數組下標是基于零的，所以第一個項目是 [0]，第二個是 [1]，以此類推。
JavaScript 對象
對象由花括號分隔。
在括號內部，對象的屬性以健:值對的形式 (name : value) 來定義。
屬性由逗號分隔：
上面例子中的對象 (girl) 有三個屬性：name、age 以及 cup。
空格和折行無關緊要。
聲明可橫跨多行：
name : "面碼",
age : 15,
cup : 'A'
};
對象屬性有兩種尋址方式：
實例
var cup = girl["cup"];
注意: 用[]訪問時,key必須用引號引起來!
Undefined 和 Null
Undefined 這個值表示變量不含有值。
可以通過將變量的值設為 null 來清空變量。
實例
girl = null;
聲明變量類型
當您聲明新變量時，可以使用關鍵詞 "new" 來聲明其類型：
var isLoli = new Boolean;
var animeArr = new Array;
var girl = new Object;
| JavaScript 變量均為對象。當您聲明一個變量時，就創建了一個新的對象。 |
|---|
提示：JavaScript具有隱含的全局概念，
意味著你不聲明(而直接new,或賦值)的任何變量都會成為一個全局對象屬性。
JavaScript數據類型學習腦圖：
未完待續,下一章節,つづく
智能推薦
js數據類型
1.基本數據類型 數字類型 number 例子：var a = 3; var a = 3.0; var a = 011; var a = 0x11; 字符串類型 string 例子：var str = “hello world”; ...
js數據類型
typeof操作符 用于檢測給定變量的數據類型，有7種返回結果： “undefined”值未定義 “boolean” 布爾值 “string” 字符串 “number”數值或NaN “object”對象或null “function”函數 “s...
freemarker + ItextRender 根據模板生成PDF文件
1. 制作模板 2. 獲取模板，并將所獲取的數據加載生成html文件 2. 生成PDF文件 其中由兩個地方需要注意，都是關于獲取文件路徑的問題，由于項目部署的時候是打包成jar包形式，所以在開發過程中時直接安照傳統的獲取方法沒有一點文件，但是當打包后部署，總是出錯。于是參考網上文章，先將文件讀出來到項目的臨時目錄下，然后再按正常方式加載該臨時文件； 還有一個問題至今沒有解決，就是關于生成PDF文件...
電腦空間不夠了？教你一個小秒招快速清理 Docker 占用的磁盤空間！
Docker 很占用空間，每當我們運行容器、拉取鏡像、部署應用、構建自己的鏡像時，我們的磁盤空間會被大量占用。 如果你也被這個問題所困擾，咱們就一起看一下 Docker 是如何使用磁盤空間的，以及如何回收。 docker 占用的空間可以通過下面的命令查看： TYPE 列出了docker 使用磁盤的 4 種類型： Images：所有鏡像占用的空間，包括拉取下來的鏡像，和本地構建的。 Con...
猜你喜歡
requests實現全自動PPT模板
http://www.1ppt.com/moban/ 可以免費的下載PPT模板，當然如果要人工一個個下，還是挺麻煩的，我們可以利用requests輕松下載 訪問這個主頁，我們可以看到下面的樣式 點每一個PPT模板的圖片，我們可以進入到詳細的信息頁面，翻到下面，我們可以看到對應的下載地址 點擊這個下載的按鈕，我們便可以下載對應的PPT壓縮包 那我們就開始做吧 首先，查看網頁的源代碼，我們可以看到每一...
Linux C系統編程-線程互斥鎖（四）
互斥鎖 互斥鎖也是屬于線程之間處理同步互斥方式，有上鎖/解鎖兩種狀態。 互斥鎖函數接口 1）初始化互斥鎖 pthread_mutex_init() man 3 pthread_mutex_init (找不到的情況下首先 sudo apt-get install glibc-doc sudo apt-get install manpages-posix-dev) 動態初始化 int pthread_...
統計學習方法 - 樸素貝葉斯
引入問題：一機器在良好狀態生產合格產品幾率是 90%，在故障狀態生產合格產品幾率是 30%，機器良好的概率是 75%。若一日第一件產品是合格品，那么此日機器良好的概率是多少。 貝葉斯模型 生成模型與判別模型 判別模型，即要判斷這個東西到底是哪一類，也就是要求y，那就用給定的x去預測。 生成模型，是要生成一個模型，那就是誰根據什么生成了模型，誰就是類別y，根據的內容就是x 以上述例子，判斷一個生產出...
styled-components —— React 中的 CSS 最佳實踐
https://zhuanlan.zhihu.com/p/29344146 Styled-components 是目前 React 樣式方案中最受關注的一種，它既具備了 css-in-js 的模塊化與參數化優點，又完全使用CSS的書寫習慣，不會引起額外的學習成本。本文是 styled-components 作者之一 Max Stoiber 所寫，首先總結了前端組件化樣式中的最佳實踐原則，然后在此基...
