190 likes | 322 Views
JavaScript 處理字串的方法. 李大偉 交通大學. 課程內容. JavaScript 為什麼需要處理字串 JavaScript 有哪些方法可以處理字串 學習範例 轉換字串 倒裝字串 Pig Latin 密碼系統的建立. JavaScript 為什麼需要處理字串. 通常在網頁上填寫一些申請表格時,我們常會發現申請表單有自我檢查的能例如, 自動將所有的字母大寫化 發現你某一項的資料格式不正確 身份證號碼不正確 等等 … 這些皆須利用 JavaScript 先檢查表格內容,等待無誤後,在將表格內所有的內容經由 CGI 介面送至網頁伺服器的另一端處理之。.
E N D
JavaScript處理字串的方法 李大偉 交通大學
課程內容 • JavaScript為什麼需要處理字串 • JavaScript有哪些方法可以處理字串 • 學習範例 • 轉換字串 • 倒裝字串 • Pig Latin 密碼系統的建立
JavaScript為什麼需要處理字串 • 通常在網頁上填寫一些申請表格時,我們常會發現申請表單有自我檢查的能例如, • 自動將所有的字母大寫化 • 發現你某一項的資料格式不正確 • 身份證號碼不正確 • 等等…這些皆須利用JavaScript先檢查表格內容,等待無誤後,在將表格內所有的內容經由CGI介面送至網頁伺服器的另一端處理之。
JavaScript有哪些方法可以處理字串 • var s1=“book”; • 字串的加法 • A1 = “This is a” + s1; • 計算字串的長度 • N1 = s1.length; • 將所有的字串大寫化或小寫化 • A2 = s1.toUpperCase( ); 或 A3 = s1.toLowerCase( ); • 取出字串中的某一字母或某一段文字 • 搜尋字串中的某一字母或某一段文字 • 字串的切割(需矩陣的輔助)
學習一:轉換字串 • 先建立新表單如右圖,然後將此檔存於「我的文件/WWW/js-11」 • 物件名稱: • 表單為「F1」 • 第一文字方塊:「T1」 • 轉換文字按鈕:「B1」 • 第二文字方塊:「T2」 • 第三文字方塊:「T3」 • 第四文字方塊:「T4」
「轉換字串」程式的想法 • 當按下「轉換文字」按鈕(onClick事件發生)時 • 將T1文字方塊的內容先存於s1變數中: • var s1 = F1.T1.value; • 計算字串的長度置於T2文字方塊: • F1.T2.value = s1.length; • 將所有的字串大寫化後置於T3文字方: • F1.T3.value = s1.toUpperCase(); • 將所有的字串小寫化後置於T4文字方: • F1.T4.value = s1.toLowerCase() • 請試試看利用一個函式完成此工作。
取出字串中的一字母 • charAt(N)是JavaScript取出字串中一字母的方法,如 • N:此參數是字串中欲取出字母的編號 • var s1 = “JavaScript”; • var a1 = s1.charAt(0); • var a2 = s1.charAt(4); • var a3 = s1.charAt(s1.length-1); • 注意的是字串中字母的編號從0開始 • 因此第一個字母的取出為 s1.charAt(0),而不是s1.charAt(1) • 因此最後一個字母的取出為 s1.charAt(s1.length-1),而不是s1.charAt(s1.length)
取出字串中的一段文字 • substring(N1,N2)是JavaScript取出字串中一段文字的方法,但需要兩個參數。 • N1為起始的字母編號(包含此字母) • N2為結束的字母編號(注意:不包含此字母) • var s1 = “JavaScript”; • var a1 = s1.subsring(0, 3); • var a2 = s1.subsring(4, 10); • var a3 = s1.substring(4, length);
學習二:倒裝字串 • 建立第二表單 • 物件名稱: • 表單為「F2」 • 第一文字方塊:「T1」 • 轉換文字按鈕:「B1」 • 第二文字方塊:「T2」
「倒裝字串」程式的想法 • 當按下「倒裝字串」按鈕(onClick事件發生)時 • 將F2.T1文字方塊的內容先存於s1變數中: • var s1 = F2.T1.value; • 計算字串的長度置於sn變數中: • var sn = s1.length; • 另一新的空字串變數儲存倒裝的s1: • var rs1=““; • 利用for loop倒數,如sn, sn-1, sn-2 …將每個字母以倒序的方式黏在rs1之後如: • rs1 = rs1 + s1.charAt(I); • 結束loop後,將rs1內容置於T2文字方塊: • F2.T2.value = rs1;
搜尋字串中的字母或一段文字 • 字串中的search方法可以幫助搜尋字串中的字母或一段文字,如 • var s1 = “JavaScript”; • var a1 = s1.search(“J”); ( a1 = 0 ) • var a2 = s1.search(“j”); ( a2 = -1 ) • var a3 = s1.search(“a”); ( a3 = 1 ) • var a4 = s1.search(“cript”); ( a4 = 5)
搜尋字串中的一組文字 • 字串中的search方法也可以幫助搜尋字串中的一組文字,如 • var s1 = “JavaScript”; • var a1 = s1.search(/[aeiou]/); ( a1 = 1 ) • var a2 = s1.search(/[a-z]/); ( a2 = 1 ) • var a3 = s1.search(/[a-zA-Z]/); ( a3 = 0 ) • var a4 = s1.search(/[0-9]/); ( a4 = -1 ) • var a5 = s1.search(/[!?.,;:-]/); ( a5 = -1 )
學習三:兒童黑話密碼系統的建立 • 兒童黑話(Pig Latin)是一種英語語言遊戲,形式是在英語上加上一點規則使發音改變。據說是由在德國的英國戰俘發明來瞞混德軍守衛的。兒童黑話於50年代和60年代在英國利物浦達到顛峰,各種年紀和職業的人都有使用。兒童黑話多半被兒童用來瞞著大人祕密溝通,有時則只是說著好玩。雖然是起源於英語的遊戲,但是規則適用很多其他語言。規則如下 • 母音開頭(A, E, I, O, U, a, e, i, o, u)的字就只在字尾加上“way”。 • 以子音開頭的字,將字首到第一個母音之前的子音部分移到字尾,再加上"ay": • ball 變 "all-bay"; • three 變 "ee-thray"; • Taiwan 變 "aiwan-Tay" .
建立第三表單 • 物件名稱: • 表單為「F3」 • 第一文字方塊:「T1」 • 轉換文字按鈕:「B1」 • 第二文字方塊:「T2」
「 Pig Latin 密碼系統」程式的想法 • 當按下「轉換成Pig Latin」按鈕(onClick事件發生)時 • 將F3.T1文字方塊的內容先存於s1變數中: • 搜尋字串中母音的第一個位置: • var vowel = s1.search(/[aeiouAEIOU]/); • 計算字串的長度置於sn變數中: • var sn = s1.length; • 如果vowel等於零,則新密碼為s1+”way” • F3.T2.valu=s1+”way”; • 否則,將新密碼為(s1中vowel到sn的字串)+ (s1中0到vowel的字串)+”ay” • F3.T2.value=s1.substring(vowel,sn)+s1.substring(0,vowel)+"ay"
JS Homework 11-1 • 將今天的上課所做表單網頁完成並完成所有的作業,將「js-11」整個目錄上傳至WWW,並在目錄框架中為其增加新的超連結 • 學習一:轉換字串(20%) • 可計算出字串的長度、將字串大寫畫及小寫化 • 學習二:倒裝字串(20%) • 將字串以原來自母順序相反重新排好輸出 • 學習三:兒童黑話密碼系統的建立(30%) • 母音開頭(A, E, I, O, U, a, e, i, o, u)的字就只在字尾加上“way”。 • 以子音開頭的字,將字首到第一個母音之前的子音部分移到字尾,再加上"ay":
JS Homework 11-2 計算電費 • 輸入用電度數,家庭用電計費方式:(30%) • 建立一「文字方塊」,可讓使用者輸入用電度數 n。建立一按鈕「計算」。建立第二「文字方塊」以供顯示電費。 • 0~100度之間的電費每度3元 • 如:10度時的電費計算公式:3*10 • 超過100度時,前面的0~100度1之間的電費每度3元;而101~300度之間的電費每度5元 • 如:210度時的電費計算公式:3*100+5*110 • 超過300度時,前面的0~100度1之間的電費每度3元;而101~300度之間的電費每度5元; 301度(含)以上的電費每度7元 • 如:310度時的電費計算公式:3*100+5*200+7*10
作業繳交方式 • 請在1月4日午夜十二點以前在BB系統上填入自己作業的網址 • 1月4日午夜十二點以前繳交滿分100分 • 1月4日午夜十二點以後就不需要繳交,以0分計算
var s1 = “JavaScript”; 字串的加法 A1 = “This is a” + s1; 計算字串的長度 N1 = s1.length; 將所有的字串大寫化或小寫化 A2 = s1.toUpperCase( ); A3 = s1.toLowerCase( ); charAt(N)是JavaScript取出字串中一字母的方法,如 var b1 = s1.charAt(0); substring(N1,N2)是JavaScript取出字串中一段文字的方法,但需要兩個參數。 var a1 = s1.subsring(0, 3); 搜尋字串中的字母或一段文字,如 var d1 = s1.search(“J”); var d2 = s1.search(“va”); Summary:處理字串方法的指令