黃芝晴的軟體工程師之路

Explore

JavaScript

javascript basic
javascript basic

alert

最優先完成!

alert("HediHuangIsMe");

⁠

document(少用)

document.write("<h1>Document.write_test</h1>");

⁠

⁠

js加到html

建議嵌入js檔

若要先run js 就將<script src=""></script>放在<body>的最前面

若要先看到內容就放在</body>的前面

<head>

</head>

<body>

</header>

<main>

alert("hey I'm alert in index.html");

</script>

</main>

<!--

scrpit可以放在任何位置

執行順序依照上到下

可以遷入多個獨立js檔

-->

//js/script.js

alert("js workspace");

<body>

<h1>Nigga</h1>

</header>

<main>

</main>

</body>

<!--

script嵌入在</body>前面

可以先看到Nigga(所有內容)

然後再開始run js

-->

alert("Warning! This message will self-destruct in");

alert("3...");

alert("2...");

alert("1...");

document.querySelector("h1").textContent = "🔥BOOM!🔥";

console.log("Message destroyed!");

⁠

document.querySelector("h1").textContent = ""; //替代文字

declare variable 宣告變數

命名原則:

數量 count

const常數(優先考慮不能re-declare 不能reassign),

使用在product price, password, username等...

※如果出現:Uncaught TypeError:Assignment to constant vatiable 代表有對const variable重新給值

⁠

⁠

let(不能re-declare的)

※如果出現:Uncaught SyntaxError:Identifier ' ' has already been declared 代表有對let variable重新declare

⁠

⁠

let, const在function, scope裡常用

var

var a;

var a = b;

unique words__avoid-using when declare variable

⁠

⁠

開頭不可用數字不能用符號除了$和_ 複合字建議用_隔開 ex.local_queen或駝峰式(camel case)命名 ex.localQueen

⁠

⁠

prompt

var firstName = prompt("What is your first name?");

//當問答dialog輸入答案, 此答案會assign給firstName

string(treat as object)

用double quotion"或single quotion'都可以都一樣建議用法: 一律使用" " 但要搭配\使用

"<h1 class=\"headline\">My Headline</h1>"

特殊用法

contain HTML tags "<h1>Hello, I'm Hedi!</h1>"

轉譯符號\(特殊符號)

⁠

⁠

※如果出現:Uncaught SytaxError: Unexpected identifier

可能是因為string裡的特殊符號沒有搭配轉譯符號\使用

換行\n

縮排\t

若有很多文字

在編輯時想要換行不重新declare

可以這樣做

var message = " I have a lot to say,\

but I don\'t want newline,\

so I use \' \\ \'";

document.write( message );

⁠

string.property

.length 總character數量, 包含'空格'

console.log( "Hedi".length ); ⇒ 4 (也可, 因為string也視為object)

string.method

.toUpperCase()

.toLowerCase()

Capture input

prompt()

const name = prompt( "What is your name!" );

document.write( name );

⁠

concatenation並聯

Template Literals模板字符串(好用)

backtick` 反引號

‵ ${要放進string裡的非string元素}‵

const name = prompt( "What is your name?" );

let msg = "Hello ";

msg += name;

msg += "!\nI\'m glad to see you!";

console.log( msg );

const name = prompt( "What is your name?" );

const msg = `Hello ${name}!

I'm glad to see you!`;

console.log( msg );

⁠

display string

document.querySelector( "想放置在哪個html-tag" ).innerHTML = 想放置的內容

const stringToShout = prompt( "What do you want ti shout?" );

const shout = `<h2>The msg to shout is: ${stringToShout.toUpperCase()}!!</h2>`;

document.querySelector( "main" ).innerHTML = shout;

⁠

conditional

const ans = prompt( "What's my star sign?" );

if ( ans.toUpperCase() === "GEMINI" ){

document.write( "Not bad~" );

}else{

document.write( "Oops, you don't know me well~" );

}

⁠

Comparison Operators比較運算符

⁠

⁠

因為"a"<"b"

⁠

⁠

因為數字小於字母

⁠

⁠

== allow different type

=== must the same type

建議用!==不只用!=

⁠

⁠

⁠

boolean

true

false

logical operators

&& both true

|| one is true

Number

convert string to number

parseInt()

parseFloat()

⁠

⁠

Math.random()

0~1 不包含1

Math.random()*6

0~6 不包含6

Math.floor()

Math.floor(1.2) ⇒ 1

Math.floor( 2 ) ⇒ 2

Math.ceil()

Math.ceil(1.2) ⇒ 2

Math.ceil( 2 ) ⇒ 2

Math.floor(Math.random()*6)

0~6隨機取值並只保留整數

Math.floor(Math.random()*6) + 1

1~7隨機取值只保留整數

Math.round()

四捨五入

Math.round( 1.4 ) ⇒ 1

Math.round( 2.5 ) ⇒ 3

unary+

+true ⇒ 1

+false ⇒ 0

loops

while & do while

do while至少會run一次block code

while(){ }

do{ }while()

可用於重複執行直到符合要求

例:輸入密碼

alert

document(少用)

js加到html

document.querySelector("h1").textContent = ""; //替代文字

declare variable 宣告變數

const常數(優先考慮不能re-declare 不能reassign),

let(不能re-declare的)

var

prompt

string(treat as object)

Template Literals模板字符串(好用)

display string

conditional

Comparison Operators比較運算符

boolean

logical operators

Number

convert string to number

spread operator 以個別value的形式嵌入array(...)

.join() 把array變成string

.includes() 搜尋有無(大小寫matters!)

.indexOf() 搜尋序位(大小寫matters!)

.slice(start, end) 把現有array裡的部分array assign到另一個array裡

.concat() 合併array 成為巨大array

.isArray() 確認是否為array

spread operater(...) object也可用!

array of object 幫助閱讀

const 用於 array和object是可以modify的!

DRY(Don't repeat yourself)

Want to print your doc?
This is not the way.

Try clicking the ⋯ next to your doc name or using a keyboard shortcut (

CtrlP

) instead.

javascript basicjavascript basic

alert

document(少用)

js加到html

document.querySelector("h1").textContent = ""; //替代文字

declare variable 宣告變數

const常數(優先考慮 不能re-declare 不能reassign),

let(不能re-declare的)

var

prompt

string(treat as object)

特殊用法

轉譯符號\(特殊符號)

string.property

string.method

Capture input

concatenation並聯

Template Literals模板字符串(好用)

display string

conditional

Comparison Operators比較運算符

boolean

logical operators

Number

convert string to number

loops

while & do while

javascript basic
javascript basic

const常數(優先考慮不能re-declare 不能reassign),