主題 : Js寫法 外部Js 資料型態 變數 字串 數字 陣列 If While For 函式 物件 Class模板 Document.write Document.getElementById Console.log Prompt Event listener 正規表達式 其他筆記
Js寫法
- 另外寫.js檔
- 寫在<body>裡
<body>
<script>
var firstjs = "Hello Js !!"
document.write(firstjs)
</script>
</body>
引入外部Js
如果另外寫.js檔，便須要自外部引入Js檔案
<script src="檔名.js/檔案連結"></script>
基本資料型態
字串
"字串內容"、'字串內容' (兩種皆可)
數字
1、3、5、7 (就是數字)
布林
true、false
變數
var 變數名稱 = 任一種資料型態
let 變數名稱 = 任一種資料型態
var 是函數變數，在函數生存範圍都可以存取；let 則是區塊變數，只能在宣告後使用，宣告前使用則會報錯。
有兩點規則須注意:
變數名稱只能是英文大小寫、數字、$、_的組合
變數名稱開頭不能是數字
例 : 1name(X)、$name(O)
字串使用
var stringname = "hello Js"
.length
stringname.length = 8
.toUppercase()
stringname.toUppercase() = HELLO JS
.toLowercase()
stringname.toLowercase() = hello js
.charAt(數字)
stringname.charAt(4) = o (取第n個字元，第一個為0)
.indexof(字元)
stringname.indexof(l) = 2 (比對找出位置，重複取前者)
.substring(i,j)
stringname.substring(0, 5) = hello (取i到j的字元，不含j)
數字使用
Js中，程式本身有先乘除後加減的概念，括號內也會先運算
.abs(數)
Math.abs(-1) = 1 (絕對值)
.max(數, 數1)
Math.max(4, 5) = 5 (最大值)
.min(數, 數1)
Math.min(4, 5) = 4 (最小值)
.round(數)
Math.round(7.6) = 8 (四捨五入)
.pow(數, 次方)
Math.pow(5, 2) = 25 (平方)
.sprt(數)
Math.sprt(4) = 2 (開根號)
.random()
Math.random() = 0.547569781339 (隨機產生0到1的數)
Math.round(Math.random()*10) 這樣便可產生0到10的隨機數
陣列
一般陣列
var arrayname = [] | [0, 1, 2] | ["a", "b", "c"];
多資料型態陣列
var arrayname = ["ccj", 19, "nqu"];
二維陣列
var arrayname = [
[0, 1, 2],["ccj", 19, "nqu"]
];
If
如同其他程式語言的if
if(條件){
指令 ;
指令-1 ;
}
Whlie
如同其他程式語言的while
while(條件){
指令 ;
指令-1 ;
}
或者是先執行再來檢查條件
do{
指令 ;
指令-1 ;
}while(條件)
For
如同其他程式語言的for
for(i = 0 ; i < j ; i++){
指令 ;
指令-1 ;
}
也有巢狀迴圈，適合用來處理二維陣列
for(i = 0 ; i < j ; i++){
for(k = 0 ; k < l ; k++){
指令-3 ;
指令-4 ;
}
指令-1 ;
}
函式
使用函式可以預先寫好程式碼，需要時呼叫即可
function fnname(傳入的值){
指令 ;
指令-1 ;
return 回傳的值 ;
}
不一定需要傳入的值，依需求決定
Object物件
Js本身便是物件導向的程式語言，物件由鍵(key)和值(value)組成
以下提供物件的基礎寫法
var objectname{
name:"ccj" ;
age:19 ;
school:"nqu" ;
}
物件下，也可以寫陣列跟函氏
var objectname{
student:[
{
name:"ccj",
age:19,
school:"nqu"
},
{
name:"ccy",
age:22,
school:"nqu"
}
]
fnname:function{
console.log("Hello" + this.student[0].name) ;
}
}
Class模板
可撰寫class模板，方便新增相同類型物件
class Classname{
constructor(name, age, gender){
this.name = name ;
this.age = age ;
this.gender = gender ;
}
}
var student1 = new Classname('ccj', 19, 'male')
Document.write
可在畫面上直接增加文字
或在HTML文件裡增加HTML元素
document.write("Hello World!");
document.write("<p>Have a nice day!</p>");
Document.getElementById
getElementById、getElementByClassName、getElementByTagName
透過不同的標籤來取得元素，用於調整或改變元素的樣式
const myElement = document.getElementById("idname");
myElement.href = "https://github.com/ccccourse/wp110b";
myElement.innerText = "Hi";
myElement.style.color = "red";
Console.log
console是控制台，log是紀錄，就是把log顯示在console上
印出布林
let age = 18
console.log(age > 20) ==> false
印出變數
let age = 18
console.log(age) ==> 18
印出字串
let age = '18'
console.log(age) ==> 18
印出字串+變數
let age = '18'
console.log('age=', age) ==> age= 18
console.log('age='+ age) ==> age=18
加號要注意，若將字串和變數相加，就會自動轉換成全部都字串
let age = 18
let age1 = '22'
console.log(age + age1) ==> 1822
Prompt
可用於彈窗給使用者輸入資訊
var input = prompt(說明文字)
輸入值預設為字串，可透過parseInt和parseFloat轉換成需要的數字型態
Event listener(事件監聽)
用於監聽網頁任何的風吹草動，不論是按鈕或是滑鼠的動作都能監聽
寫在Html tag中
<button id="btn" onclick="fnname(this)">Click</button>
<script>
function fnname(element){
element.innerText="Clicked";
}
</script>
按鈕被按下時呼叫fnname函式並回傳元素
如果想對被監聽的元素進行調整，就要加this
寫在Html tag中，前面加on(原本為click)
寫在.js檔中
var btn = document.getElementById("btn")
btn.addEventlistener(click, fnname(){
this.innerText="Clicked";
})
上述兩種同樣動作不同寫法
除了click，還有change、mouseover......
詳細請參閱W3School/DOM Events
正規表達式(regular expression)
let re1 = /[0-9]/ 基礎正規表達式在兩個/之間建立
let re2 = /[0-9]+/ + 代表需連續出現
let re3 = /[0-9]+/g g 代表全域比對
let re4 = /:([0-9a-zA-Z])+/g : 代表比對的前面要有冒號 ; + 在外面代表分開比對各個條件
let re5 = /:([0-9a-zA-Z]+)/g : 代表比對的前面要有冒號 ; + 在裡面代表連續比對各個條件
let re6 = /:\w+/ \w 包含數字字母與底線，等同於[0-9a-zA-Z_ ]
let re7 = /:\d+/ \d 只含數字，寫法等同於 [0-9]
let re8 = /:\D+/g \D 非數字，寫法等同於 [^0-9]
let re9 = /\w+@[\w\.]+/g 可用來比對email
用 text.match(re) 選擇要比對的正規表達式