- 一、常用互動方法
- 二、常見事件響應
- 三、JavaScript內置對象
一、常用互動方法
1-1、輸出內容
<script type="text/javascript">
document.write("Hello！"); //內容用""括起來，""里的內容直接輸出。
</script>
內容可以是是變量名，也可以直接是" "，還可以是 兩者的組合
<script type="text/javascript">
var mystr="boy";
document.write("Hello！" + mystr ); //內容用""括起來，""里的內容直接輸出。
</script>
1-2、警告（alert 消息對話框）
也就是我們 iOS 中UIAlertController 只有一個 確定按鈕的情況：
<script type="text/javascript">
alert("hello!");
</script>
1-3、確認（confirm 消息對話框）
這個是我們 iOS 中UIAlertController 最常見的 alert 提示框，一個確認，一個取消：
confirm(str);
str：在消息對話框中要顯示的文本，返回值: 是Boolean值，確定返回true, 取消返回false。
function confirmAction(){
var mymessage = confirm("Are you Gay") ;
if(mymessage==true)
{
document.write("I am Gay");
}
else
{
document.write("I like Girl");
}
}
1-4、提問（prompt 消息對話框）
這個相當于 UIAlertController 中加一個 textField 一樣。
prompt(str1, str2);
str1: 要顯示在消息對話框中的文本，不可修改；str2：文本框中的內容，可以修改(placeholder)。點擊確定返回文本框中的內容，點擊取消返回 null。
function rec(){
var score; //score變量，用來存儲用戶輸入的成績值。
score = prompt("記錄分數","請輸入你的分數"); ;
if(score>=90)
{
document.write("你很棒!");
}
else if(score>=75)
{
document.write("不錯吆!");
}
else if(score>=60)
{
document.write("要加油!");
}
else
{
document.write("要努力了!");
}
}
1-5、打開新窗口（window.open）
打開另一個新窗口，直接說就是在新窗口中打開鏈接
window.open([URL], [窗口名稱], [參數字符串])
- URL：可選參數，在窗口中要顯示網頁的網址或路徑。如果省略這個參數，或者它的值是空字符串，那么窗口就不顯示任何文檔。
-
窗口名稱：可選參數，被打開窗口的名稱。
1.該名稱由字母、數字和下劃線字符組成。
2."_top"、"_blank"、"_selft"具有特殊意義的名稱。 _blank：在新窗口顯示目標網頁 _self：在當前窗口顯示目標網頁 _top：框架網頁中在上部窗口中顯示目標網頁
3.相同 name 的窗口只能創建一個，要想創建多個窗口則 name 不能相同。
4.name 不能包含有空格。 - 參數字符串：可選參數，設置窗口參數，各參數用逗號隔開。
其實通常來說，直接省略后面兩個，等于在新標簽頁中打開鏈接
window.open("http://www.baidu.com")
具體詳細可看： HTML DOM open() 方法
1-5、關閉窗口（window.close）
window.close(); //關閉本窗口
<窗口對象>.close(); //關閉指定的窗口
方法 close() 將關閉有 window 指定的頂層瀏覽器窗口。某個窗口可以通過調用 self.close() 或只調用 close() 來關閉其自身。
只有通過 JavaScript 代碼打開的窗口才能夠由 JavaScript 代碼關閉
注意： window.close()與document.close()的區別： 前者直接關閉窗口，后者文檔輸入流將被關閉。
二、常見事件響應
JavaScript 創建動態頁面。事件是可以被 JavaScript 偵測到的行為。 網頁中的每個元素都可以產生某些可以觸發 JavaScript 函數或程序的事件。
- onclick // 鼠標單擊事件
- onmouseover // 鼠標經過事件
- onmouseout // 鼠標移開事件
- onfocus // 光標聚焦事件
- onblur // 失焦事件
- onselect // 內容選中事件
- onchange // 文本框內容改變事件
- onload // 加載事件
- onunload // 卸載事件
注意下面幾個：
2-1、鼠標事件 ===> UIControlEvents
好比我們常用的 UIControlEventTouchUpInside
<input name="button" type="button" value="點擊提交" onclick="action()" />
2-2、onfocus onblur
第一反應 是 UITextField 中 的幾個代理事件, 但是發現 像 onclick 和 onfocus 更容易混淆
- onclick是在對象被鼠標點擊或者選取時觸發
- onfocus是在對象獲得焦點（“焦點”大概是接受鍵盤輸入的意思）時觸發
2-3、 unselect & onchange
針對于文本產生的事件，注意下就好
2-4、onload
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title> 加載事件 </title>
<script type="text/javascript">
function message(){
alert("加載中，請稍等…"); }
</script>
</head>
<body onload = "message()">
歡迎學習JavaScript。
</body>
好比系統 的HUD ，很讓人想用。
三、**JavaScript內置對象 **
JavaScript 中的所有事物都是對象，如:字符串、數值、數組、函數等，每個對象帶有屬性和方法。重點記錄下下面幾個, 其他的可看 JavaScript 對象參考手冊。
- String
- Array
- Date
- Math
3-1、String
用于處理文本（字符串）
- 初始化
var mystr = "I love JavaScript!"
- charAt() 方法可返回指定位置的字符。返回的字符是長度為 1 的字符串。
stringObject.charAt(index)
- indexOf() 方法可返回某個指定的字符串值在字符串中首次出現的位置。
stringObject.indexOf(substring, startpos)
// startops 省略代表 0
- split() 方法將字符串分割為字符串數組，并返回此數組。
stringObject.split(separator,limit)
// limit 省略 代表無限制
- substr() 方法從字符串中提取從 startPos位置開始的指定數目的字符串。
stringObject.substr(startPos,length)
// length 省略表示到結尾
- substring() 方法用于提取字符串中介于兩個指定下標之間的字符。
stringObject.substring(starPos,stopPos)
// stopPos 省略表示到結尾
其他方法參考：JavaScript String 對象
3-2、Array
- 定義
var 數組名= new Array(); // 定義了一個空數組:
var 數組名 =new Array(n); // 定義時指定有n個空元素的數組：
- concat() 方法用于連接兩個或多個數組。此方法返回一個新數組，不改變原來的數組。
arrayObject.concat(array1,array2,...,arrayN)
- join()方法用于把數組中的所有元素放入一個字符串。元素是通過指定的分隔符進行分隔的。
arrayObject.join(分隔符)
- reverse() 方法用于顛倒數組中元素的順序。
arrayObject.reverse()
- slice() 方法可從已有的數組中返回選定的元素。
arrayObject.slice(start,end)
//1. 返回一個新的數組，包含從 start 到 end （不包括該元素）的 arrayObject 中的元素。
//2. 該方法并不會修改數組，而是返回一個子數組
- sort()方法使數組中的元素按照一定的順序排列。
arrayObject.sort(方法函數)
真心感覺這個要比 Oc中的數組強大方便啊，至少省略了很多事吧！
其他方法參考：JavaScript Array 對象
3-3、Date
- 定義
var mydate=new Date();
- 設置年份
mydate.setFullYear(81); //設置年份
mydate.getFullYear()； //輸出年份
不同瀏覽器， mydate.setFullYear(81)結果不同，年份被設定為 0081或81兩種情況。
- 獲取星期
var mydate=new Date();
var weekday=["星期日","星期一","星期二","星期三","星期四","星期五","星期六"];
var mynum = mydate.getDay();
document.write("今天是：" + weekday[mynum]);
- get/setTime()返回/設置時間
<script type="text/javascript">
var mydate=new Date();
document.write("當前時間："+mydate+"<br>");
mydate.setTime(mydate.getTime() + 60 * 60 * 1000);
document.write("推遲一小時時間：" + mediate);
</script>
其他方法參考：JavaScript Date 對象
3-4、Math
Math對象，提供對數據的數學計算。它是一個固有的對象，無需創建它，直接把 Math 作為對象使用就可以調用其所有屬性和方法。
- 隨機數 random()
Math.random();
random() 方法可返回介于 0 ~ 1（大于或等于 0 但小于 1 )之間的一個隨機數。
- 四舍五入round()
Math.round(x)
這個一直是在OC 中希望有的
同時還有向下去整和向上取整等多種方法，看下面兩個圖：
真的感覺很強大，其他具體方法參考：JavaScript Math 對象。
學習筆記來源： W3Schhool JS 教程上 、 慕課網。
