閱讀912 返回首頁    go 阿裏雲 go 技術社區[雲棲]

JAVASCRIPT學習筆記基礎（一）

學習教程：

https://www.w3school.com.cn/js/index.asp


生成文本

<html>
<body>
<script type="text/javascript">

document.write("Hello World!");

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


生成普通文本和標簽

<html>
<body>
<script type="text/javascript">
document.write("<h1>HelloWorld!</h1>");
</script>
</body>
</html>

實例解釋：

如果需要把一段 JavaScript 插入 HTML 頁麵，我們需要使用 <script> 標簽（同時使用 type 屬性來定義腳本語言）。

這樣，<script type="text/javascript"> 和 </script> 就可以告訴瀏覽器 JavaScript 從何處開始，到何處結束。

document.write 字段是標準的 JavaScript 命令，用來向頁麵寫入輸出。

把 document.write 命令輸入到 <script type="text/javascript">與</script>之間後，瀏覽器就會把它當作一條 JavaScript 命令來執行。這樣瀏覽器就會向頁麵寫入 "Hello World!"。

注意：如果我們不使用 <script> 標簽，瀏覽器就會把 document.write("Hello World!") 當作純文本來處理，也就是說會把這條命令本身寫到頁麵上。


在哪裏放置 JavaScript

頁麵中的腳本會在頁麵載入瀏覽器後立即執行。我們並不總希望這樣。有時，我們希望當頁麵載入時執行腳本，而另外的時候，我們則希望當用戶觸發事件時才執行腳本。

位於 head 部分的腳本：

當腳本被調用時，或者當事件被觸發時，腳本就會被執行。當你把腳本放置到 head 部分後，就可以確保在需要使用腳本之前，它已經被載入了。


head部分

包含函數的腳本位於文檔的 head 部分。這樣我們就可以確保在調用函數前，腳本已經載入了。 

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

<body >
body內容
</body>

</html>


位於 body 部分的腳本：

body部分

在頁麵載入時腳本就會被執行。當你把腳本放置於 body 部分後，它就會生成頁麵的內容。

<html>
<head>
</head>

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

</body>
</html>


外部的JAVASCRIPT

有時，你也許希望在若幹個頁麵中運行 JavaScript，同時不在每個頁麵中寫相同的腳本。

為了達到這個目的，你可以將 JavaScript 寫入一個外部文件之中。然後以 .js 為後綴保存這個文件。

注意：外部文件不能包含 <script> 標簽。

然後把 .js 文件指定給 <script> 標簽中的 "src" 屬性，就可以使用這個外部文件了：


<html>
<head>
</head>
<body>

<script src="/js/example_externaljs.js">
</script>

<p>
實際的腳本位於名為 "xxx.js" 的外部腳本中。
</p>

</body>
</html>

提示：您可以把 .js 文件放到網站目錄中通常存放腳本的子目錄中，這樣更容易管理和維護。


JavaScript 是由瀏覽器執行的語句序列。

JavaScript 語句

JavaScript 語句是發給瀏覽器的命令。這些命令的作用是告訴瀏覽器要做的事情。

這個 JavaScript 語句告訴瀏覽器向網頁輸出 "Hello world"：

document.write("Hello world");

通常要在每行語句的結尾加上一個分號。大多數人都認為這是一個好的編程習慣，而且在 web 上的 JavaScript 案例中也常常會看到這種情況。

分號是可選的（根據 JavaScript 標準），瀏覽器把行末作為語句的結尾。正因如此，常常會看到一些結尾沒有分號的例子。

注釋：通過使用分號，可以在一行中寫多條語句。

JAVASCRIPT語句 

<html>
<body>
<script type="text/javascript">
document.write("<h1>這是標題</h1>");
document.write("<p>這是段落</p>");
document.write("<p>這是另一個段落</p>");
</script>
</body>
</html>


JavaScript 代碼

JavaScript 代碼是 JavaScript 語句的序列。

瀏覽器按照編寫順序依次執行每條語句。

本例向網頁輸出一個標題和兩個段落：


javascript代碼

<html>
<body>

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

</body>
</html>


JavaScript 代碼塊

JavaScript 可以分批地組合起來。

代碼塊以左花括號開始，以右花括號結束。

代碼塊的作用是一並地執行語句序列。

本例向網頁輸出一個標題和兩個段落：

javascript代碼塊

<html>
<body>

<script type="text/javascript">
	{
	document.write("<h1>這是標題</h1>");
	document.write("<p>這是段落。</p>");
	document.write("<p>這是另一個段落。</p>");
	}
</script>

</body>
</html>



JavaScript 變量

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

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

規則是：

如果把數字與字符串相加，結果將成為字符串。


<html>
<body>

<script type="text/javascript">
x=5+5;
document.write(x);
document.write("<br />");
x="5"+"5";
document.write(x);
document.write("<br />");
x=5+"5";
document.write(x);
document.write("<br />");
x="5"+5;
document.write(x);
document.write("<br />");
</script>

<h3>規則是：</h3>

<p><strong>如果把數字與字符串相加，結果將成為字符串。</strong></p>

</body>
</html>


If 語句 如何編寫一個 If 語句。  

<html>
<body>

<script type="text/javascript">
var d=new Date()
var time=d.getHours()

if(time<11)
{
document.write("<b>早安</b>");
}
</script>

<p>本例演示 If 語句。</p>

<p>如果瀏覽器時間小於 10，那麼會向您問“早安”。</p>

</body>
</html>


If...else 語句 如何編寫 if...else 語句。  

<html>
<body>

<script type="text/javascript">
var d=new Date()
var time=d.getHours()

if(time<10)
{
document.write("<b>早安</b>");
}
else
{
document.write("<b>十點以後了</b>");
}
</script>

<p>本例演示 If 語句。</p>

<p>如果瀏覽器時間小於 10，那麼會向您問“早安”。</p>

</body>
</html>


If..else if...else  

<html>
<body>

<script type="text/javascript">
var d=new Date()
var time=d.getHours()

if(time<10)
{
document.write("<b>早安</b>");
}
else if(time>=10&&time<16)
{
document.write("<b>午安</b>");
}
else
{
document.write("<b>晚安</b>")
}
</script>

<p>本例演示 If 語句。</p>

<p>如果瀏覽器時間小於 10，那麼會向您問“早安”。</p>

</body>
</html>

隨機鏈接 本例演示一個隨機的鏈接，當您單擊這個鏈接時，會打開某個隨機的網站。 

<html>
<body>
<script type="text/javascript">
var r=Math.random()
if(r>0.5)
{
document.write("<a href='https://www.baidu.com'>百度一下，你就知道</a>");
}
else
{
document.write("<a href='https://www.qq.com'>騰訊首頁</a>");
}
</script>
</body>
</html>

Switch 語句
如何編寫一個 Switch 語句。 

<html>
<body>
<script type="text/javascript">
var d = new Date()
theDay=d.getDay()
switch (theDay)
{
case 1:
  document.write("<b>Money Monday</b>");
case 5:
  document.write("<b>Finally Friday</b>")
  break
case 6:
  document.write("<b>Super Saturday</b>")
  break
case 0:
  document.write("<b>Sleepy Sunday</b>")
  break
default:
  document.write("<b>I'm really looking forward to this weekend!</b>")
}
</script>

<p>This JavaScript will generate a different greeting based on what day it is. Note that Sunday=0, Monday=1, Tuesday=2, etc.</p>

</body>
</html>

工作原理：switch 後麵的 (n) 可以是表達式，也可以（並通常）是變量。然後表達式中的值會與 case 中的數字作比較，如果與某個 case 相匹配，那麼其後的代碼就會被執行。break 的作用是防止代碼自動執行到下一行。



警告框

<html>
<head>
<script type="text/javascript">
function disp_alert()
{
alert("我是警告框");
}
</script>
</head>
<body>
<input type="button"  value="顯示警告框">
</body>
</html>

帶折行的警告框

<html>
<head>
<script type="text/javascript">
function disp_alert()
{
alert("再次向您問好！在這裏，我們向您演示" + '\n' + "如何向警告框添加折行。")
}
</script>
</head>
<body>

<input type="button"  value="顯示警告框" />

</body>
</html>


確認框

<html>
<head>
<script type="text/javascript">
function show_confirm()
{
var r=confirm("Press a button!");
if(r==true)
{
alert("You pressed OK!");
}
else 
{
alert("Yout pressed Cancel!");
}
}
</script>
</head>
<body>
<input type="button"  value="顯示確認框">
</body>
</html>

提示框 

<html>
<head>
<script type="text/javascript">
function disp_prompt()
{
var name=prompt("請輸入您的名字","zhuzhengke")
if(name!=null&&name!="")
{
document.write("歡迎"+name+"你今天過得怎麼樣")
}
}
</script>
</head>

<body>
<input type="button"  value="顯示提示框"/>
</body>
</html>

警告框

警告框經常用於確保用戶可以得到某些信息。

當警告框出現後，用戶需要點擊確定按鈕才能繼續進行操作。

語法：

alert("文本")

確認框

確認框用於使用戶可以驗證或者接受某些信息。

當確認框出現後，用戶需要點擊確定或者取消按鈕才能繼續進行操作。

如果用戶點擊確認，那麼返回值為 true。如果用戶點擊取消，那麼返回值為 false。

語法：

confirm("文本")

提示框

提示框經常用於提示用戶在進入頁麵前輸入某個值。

當提示框出現後，用戶需要輸入某個值，然後點擊確認或取消按鈕才能繼續操縱。

如果用戶點擊確認，那麼返回值為輸入的值。如果用戶點擊取消，那麼返回值為 null。

語法：

prompt("文本","默認值")




最後更新：2017-04-02 06:52:19

  上一篇：go AIDL文件中 in類型和out類型數據的區別
  下一篇：go 應用語言切換的三種方法