之前在寫週記的時候，還是覺得寫的太簡單了，實在不適合初學者，就算是以後自己回首再看也不方便，故決定再寫一些。這次會以實例爲主，防止過於理論化，希望沒接觸過的小可愛也可以看懂(✺ω✺)。

JavaScript是可插入 HTML 頁面的編程代碼。

JavaScript 插入 HTML 頁面後，可由所有的現代瀏覽器執行。

① Hello World

<html>
<body>

<script type="text/javascript">
document.write("Hello World!")
</script>

</body>
</html>

這個就是簡單的生成文本，效果就是：

好了，還有一個問題，如果我重複寫“document.write("Hello World!")”會發生什麼呢？

<html>

<body>

document.write("Hello World!")

</script>

</body>

</html>

這和Python一點也不像，手動再見。不會自動換行……

當然，<h1>標籤也是可以用的啦：

<html>
<body>

<script type="text/javascript">
document.write("<h1>Hello World!</h1>")
</script>

</body>
</html>

② Head部分和body部分

Head↓

<html>
<head>
<script type="text/javascript">
function message()
{
alert("該提示框是通過 onload 事件調用的。")
}
</script>
</head>

<body onload="message()">

</body>
</html>

Body↓

<html>
<head>
</head>

<body>

<script type="text/javascript">
document.write("該消息在頁面加載時輸出。")
</script>

</body>
</html>

將兩者結合：

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<script type="text/javascript">
	function message()
	{
	alert("該提示框是通過 onload 事件調用的。")
	}
	</script>
</head>


<body>

	<script type="text/javascript">
	document.write("該消息在頁面加載時輸出。")
	</script>

</body>
</html>

所看到的就是一個對話框，還有後面的字

好了，寫到這裏，我們先停一下，針對一個問題來談一談。比如：

1.document.write("該消息在頁面加載時輸出。")

2. <script type="text/javascript">

3. function message()

4. alert("該提示框是通過 onload 事件調用的。")

先來說明

1. https://blog.csdn.net/qlzx_syzx/article/details/47218213

js方法document.write();用來向瀏覽器頁面輸出內容
具體用法：
用來輸出字符串內容：document.write("輸出字符串內容要使用雙引號");
用來輸出變量的值：如var mynum="hello"; document.write(mynum);
用來輸出html標籤內容：如document.write("<p>你好!</p>");
用來輸出混合內容，使用”+“號來連接內容：如document.write(mynum+"<br/>"+"world");

2.<script type="text/javascript"> 放在<script></script>之間的是文本類型(text)。 javascript是告訴瀏覽器裏面的文本是屬於javascript腳本。

3. function message() 函數

function functionname()
{
這裏是要執行的代碼
}

4.alert https://blog.csdn.net/lixiang0522/article/details/7764730

1. alert是彈出警告框，在文本里面加入\n就可以換行。

2. confirm彈出確認框，會返回布爾值，通過這個值可以判斷點擊時確認還是取消。true表示點擊了確認，false表示點擊了取消。

3. prompt彈出輸入框，點擊確認返回輸入框中的值，點擊取消返回null。

③註釋

單行註釋

<html>
<body>

<script type="text/javascript">
// 這行代碼輸出標題：
document.write("<h1>這是標題</h1>");
// 這行代碼輸出段落：
document.write("<p>這是段落。</p>");
document.write("<p>這是另一個段落。</p>");
</script>

</body>
</html>

多行註釋

<html>
<body>

<script type="text/javascript">
/*
下面的代碼將輸出
一個標題和兩個段落
*/
document.write("<h1>這是標題</h1>");
document.write("<p>這是段落。</p>");
document.write("<p>這是另一個段落。</p>");
</script>

</body>
</html>

關於這個，只想吐槽一句，和C++一模一樣。

④變量

<html>
<body>
<script type="text/javascript">
var firstname;
firstname="George";
document.write(firstname);
document.write("<br />");
firstname="John";
document.write(firstname);
</script>
<p>上面的腳本聲明瞭一個變量，爲其賦值，顯示該值，改變該值，然後再顯示該值。</p>
</body>
</html>

什麼是變量呢？

在之前學習C++和Python的時候，我們也接觸過變量，那麼，這個變量又有什麼與衆不同之處呢

其實呢……在我個人看來，比較接近二者的綜合，即：既需要向C++一樣在前面加上幾個字母表示需要一個變量，但是又不用像C++一樣說明變量的類型（在這一點上與Python迷之相似）。

JavaScript 變量還能保存其他數據類型，比如文本值 (name="Bill Gates")。

在 JavaScript 中，類似 "Bill Gates" 這樣一條文本被稱爲字符串。

JavaScript 變量有很多種類型，但是現在，我們只關注數字和字符串。

當您向變量分配文本值時，應該用雙引號或單引號包圍這個值。

當您向變量賦的值是數值時，不要使用引號。如果您用引號包圍數值，該值會被作爲文本來處理。

例子

var pi=3.14;
var name="Bill Gates";
var answer='Yes I am!';

這個分號可以說是蜜汁像C++了

（說到C++，明天就是省賽熱省賽了……我竟然還在划水寫博客……）

其他的一些特點與C++很接近，比如：既可以在聲明時賦值，也可以先聲明，後面再賦值。還有就是命名規則也沒什麼變化（強調，大小寫敏感！！！）

可以在一條語句中聲明很多變量。該語句以 var 開頭，並使用逗號分隔變量即可：

var name="Gates", age=56, job="CEO";

聲明也可橫跨多行：

var name="Gates",
age=56,
job="CEO";

講實話，就沒覺得連數組都像Python裏的列表嗎……

總結……

其實，這就是在聲明時加個var，其他操作和Python沒什麼區別……

當然聲明變量類型也是做得到的：

聲明變量類型

當您聲明新變量時，可以使用關鍵詞 "new" 來聲明其類型：

var carname=new String;
var x=      new Number;
var y=      new Boolean;
var cars=   new Array;
var person= new Object;

JavaScript 變量均爲對象。當您聲明一個變量時，就創建了一個新的對象。

哦，那個對象嘛，就是和其他的對象一樣啦：

JavaScript 對象

對象由花括號分隔。在括號內部，對象的屬性以名稱和值對的形式 (name : value) 來定義。屬性由逗號分隔：

var person={firstname:"Bill", lastname:"Gates", id:5566};

上面例子中的對象 (person) 有三個屬性：firstname、lastname 以及 id。

空格和折行無關緊要。聲明可橫跨多行：

var person={
firstname : "Bill",
lastname  : "Gates",
id        :  5566
};

對象屬性有兩種尋址方式：

實例

name=person.lastname;
name=person["lastname"];

然後，這個換行理所當然就是<br />

⑤函數

<!DOCTYPE html>
<html>
<head>
<script>
function myFunction()
{
alert("Hello World!");
}
</script>
</head>

<body>
<button onclick="myFunction()">點擊這裏</button>
</body>
</html>

在點擊按鈕（“點擊這裏”）之後會彈出上面這個框框↑

看起來和其他的函數也沒什麼區別啦

類似的，也可以有：

調用帶參數的函數

在調用函數時，您可以向其傳遞值，這些值被稱爲參數。

這些參數可以在函數中使用。

您可以發送任意多的參數，由逗號 (,) 分隔：

myFunction(argument1,argument2)

當您聲明函數時，請把參數作爲變量來聲明：

function myFunction(var1,var2)
{
這裏是要執行的代碼
}

變量和參數必須以一致的順序出現。第一個變量就是第一個被傳遞的參數的給定的值，以此類推。

實例

<button onclick="myFunction('Bill Gates','CEO')">點擊這裏</button>

<script>
function myFunction(name,job)
{
alert("Welcome " + name + ", the " +

job

);}</script>

帶有返回值的函數

有時，我們會希望函數將值返回調用它的地方。

通過使用 return 語句就可以實現。

在使用 return 語句時，函數會停止執行，並返回指定的值。

語法

function myFunction()
{
var x=5;
return x;
}

上面的函數會返回值 5。

註釋：整個 JavaScript 並不會停止執行，僅僅是函數。JavaScript 將繼續執行代碼，從調用函數的地方。

函數調用將被返回值取代：

var myVar=myFunction();

myVar 變量的值是 5，也就是函數 "myFunction()" 所返回的值。

即使不把它保存爲變量，您也可以使用返回值：

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

"demo" 元素的 innerHTML 將成爲 5，也就是函數 "myFunction()" 所返回的值。

您可以使返回值基於傳遞到函數中的參數：

實例

計算兩個數字的乘積，並返回結果：

function myFunction(a,b)
{
return a*b;
}

document.getElementById("demo").innerHTML=myFunction(4,3);

"demo" 元素的 innerHTML 將是：

在您僅僅希望退出函數時，也可使用 return 語句。返回值是可選的：

function myFunction(a,b)
{
if (a>b)
  {
  return;
  }
x=a+b
}

如果 a 大於 b，則上面的代碼將退出函數，並不會計算 a 和 b 的總和。

⑥循環

for循環

while循環

Do-while循環

break語句

continue語句

以上內容與C++無異，以下則更像Python

使用 For...In 聲明來遍歷數組內的元素

⑦運算符

JavaScript 算術運算符

算術運算符用於執行變量與/或值之間的算術運算。

給定 y=5，下面的表格解釋了這些算術運算符：

運算符	描述	例子	結果
+	加	x=y+2	x=7
-	減	x=y-2	x=3
*	乘	x=y*2	x=10
/	除	x=y/2	x=2.5
%	求餘數 (保留整數)	x=y%2	x=1
++	累加	x=++y	x=6
--	遞減	x=--y	x=4

JavaScript 賦值運算符

賦值運算符用於給 JavaScript 變量賦值。

給定 x=10 和 y=5，下面的表格解釋了賦值運算符：

運算符	例子	等價於	結果
=	x=y		x=5
+=	x+=y	x=x+y	x=15
-=	x-=y	x=x-y	x=5
*=	x*=y	x=x*y	x=50
/=	x/=y	x=x/y	x=2
%=	x%=y	x=x%y	x=0

用於字符串的 + 運算符

+ 運算符用於把文本值或字符串變量加起來（連接起來）。

如需把兩個或多個字符串變量連接起來，請使用 + 運算符。

txt1="What a very";
txt2="nice day";
txt3=txt1+txt2;

在以上語句執行後，變量 txt3 包含的值是 "What a verynice day"。

要想在兩個字符串之間增加空格，需要把空格插入一個字符串之中：

txt1="What a very ";
txt2="nice day";
txt3=txt1+txt2;

或者把空格插入表達式中：

txt1="What a very";
txt2="nice day";
txt3=txt1+" "+txt2;

在以上語句執行後，變量 txt3 包含的值是：

"What a very nice day"

對字符串和數字進行加法運算

請看這些例子：

x=5+5;
document.write(x);

x="5"+"5";
document.write(x);

x=5+"5";
document.write(x);

x="5"+5;
document.write(x);

用法沒什麼好講的……

比較運算符

比較運算符在邏輯語句中使用，以測定變量或值是否相等。

給定 x=5，下面的表格解釋了比較運算符：

運算符	描述	例子
==	等於	x==8 爲 false
===	全等（值和類型）	x===5 爲 true；x==="5" 爲 false
!=	不等於	x!=8 爲 true
>	大於	x>8 爲 false
<	小於	x<8 爲 true
>=	大於或等於	x>=8 爲 false
<=	小於或等於	x<=8 爲 true

如何使用

可以在條件語句中使用比較運算符對值進行比較，然後根據結果來採取行動：

if (age<18) document.write("Too young");

您將在本教程的下一節中學習更多有關條件語句的知識。

邏輯運算符

邏輯運算符用於測定變量或值之間的邏輯。

給定 x=6 以及 y=3，下表解釋了邏輯運算符：

運算符	描述	例子
&&	and	(x < 10 && y > 1) 爲 true
\|\|	or	(x==5 \|\| y==5) 爲 false
!	not	!(x==y) 爲 true

條件運算符

JavaScript 還包含了基於某些條件對變量進行賦值的條件運算符。

語法

variablename=(condition)?value1:value2

例子

greeting=(visitor=="PRES")?"Dear President ":"Dear ";

如果變量 visitor 中的值是 "PRES"，則向變量 greeting 賦值 "Dear President "，否則賦值 "Dear"。

⑧if-else語句

條件語句

通常在寫代碼時，您總是需要爲不同的決定來執行不同的動作。您可以在代碼中使用條件語句來完成該任務。

在 JavaScript 中，我們可使用以下條件語句：

if 語句 - 只有當指定條件爲 true 時，使用該語句來執行代碼
if...else 語句 - 當條件爲 true 時執行代碼，當條件爲 false 時執行其他代碼
if...else if....else 語句 - 使用該語句來選擇多個代碼塊之一來執行
switch 語句 - 使用該語句來選擇多個代碼塊之一來執行

If 語句

只有當指定條件爲 true 時，該語句纔會執行代碼。

語法

if (條件)
  {
  只有當條件爲 true 時執行的代碼
  }

注意：請使用小寫的 if。使用大寫字母（IF）會生成 JavaScript 錯誤！

實例

當時間小於 20:00 時，生成一個“Good day”問候：

if (time<20)
  {
  x="Good day";
  }

x 的結果是：

Good day

請注意，在這個語法中，沒有 ..else..。您已經告訴瀏覽器只有在指定條件爲 true 時才執行代碼。

If...else 語句

請使用 if....else 語句在條件爲 true 時執行代碼，在條件爲 false 時執行其他代碼。

語法

if (條件)
  {
  當條件爲 true 時執行的代碼
  }
else
  {
  當條件不爲 true 時執行的代碼
  }

實例

當時間小於 20:00 時，將得到問候 "Good day"，否則將得到問候 "Good evening"。

if (time<20)
  {
  x="Good day";
  }
else
  {
  x="Good evening";
  }

x 的結果是：

Good day

If...else if...else 語句

使用 if....else if...else 語句來選擇多個代碼塊之一來執行。

語法

if (條件 1)
  {
  當條件 1 爲 true 時執行的代碼
  }
else if (條件 2)
  {
  當條件 2 爲 true 時執行的代碼
  }
else
  {
  當條件 1 和 條件 2 都不爲 true 時執行的代碼
  }

實例

如果時間小於 10:00，則將發送問候 "Good morning"，否則如果時間小於 20:00，則發送問候 "Good day"，否則發送問候 "Good evening"：

if (time<10)
  {
  x="Good morning";
  }
else if (time<20)
  {
  x="Good day";
  }
else
  {
  x="Good evening";
  }

x 的結果是：

Good morning

好了，說到這裏，已經足夠解算法題了（大霧）

不過到這裏爲止都不是寫這個的主要目的……

那個微信小程序太……完全沒有頭緒，寫個JS冷靜一下……

JavaScript學習筆記

① Hello World

② Head部分和body部分

Head↓

Body↓

2.<script type="text/javascript"> 放在<script></script>之間的是文本類型(text)。 javascript是告訴瀏覽器裏面的文本是屬於javascript腳本。

3. function message() 函數

③註釋

單行註釋

多行註釋

④變量

例子

聲明變量類型

JavaScript 對象

實例

⑤函數

調用帶參數的函數

實例

帶有返回值的函數

語法

實例

⑥循環

for循環

while循環

Do-while循環

break語句

continue語句

使用 For...In 聲明來遍歷數組內的元素

⑦運算符

JavaScript 算術運算符

JavaScript 賦值運算符

用於字符串的 + 運算符

對字符串和數字進行加法運算

比較運算符

如何使用

邏輯運算符

條件運算符

語法

例子

⑧if-else語句

條件語句

If 語句

語法

實例

If...else 語句

語法

實例

If...else if...else 語句

語法

實例