黃芝晴的軟體工程師之路

Explore

JavaScript

intro to javascript
intro to javascript

⁠

HTML 和 CSS 是标记语言。标记语言用于描述和定义文档中的元素。JavaScript 是编程语言。编程语言用于向机器发出指令。编程语言可用于控制机器的行为和表达算法。

console.log

console.log用于向 JavaScript 控制台显示内容

⁠

⁠

在 JavaScript 中，值 true 和 false 非常重要。这些值叫做boolean，是 JavaScript 中的另一种数据类型。

// 这是一条单行注釋

/* 这是一条多行注释 */

distinct operators 運算子

(+, , , /, or %)

var totalAfterTax = 53.03; // 如果变量名由多个单词组成，使用驼峰命名法 var tip = 8; // 如果变量名是一个单词，则使用全小写字母

⁠

⁠

declaration宣告

⁠

⁠

⁠

⁠

把反斜線(\), 也就是轉譯符號放在具有特殊含义的字符前

⁠

⁠

\n換行

\t空格(不只空1格)

⁠

⁠

在查看某个字符串“大于”或“小于”另一个字符串时，JavaScript 根据数字值比较单个字符。

筆記:小寫字母在ascii的順位較後面喔!

⁠

⁠

⁠

⁠

(狹)數字可視為文字(廣)

(狹)true/false可視為1/0(廣)

(狹)true/false ⇒ 數字 ⇒ 文字 (廣)

implicit type conversion 隱式類型轉換

⁠

⁠

⁠

要进行绝对比较，只需在 == 和 != 运算符的末尾添加一个 =

⁠

⁠

⁠

我的理解是: 在javascript裡, 若不是進行絕對比較(ex比大小), 會盡可能將兩者變成相同data type進行比較

string變numeric 比大小時:boolean變numeric

不使用絕對比較的例子(問)

/* - Programming Quiz: Musical Groups (3-3) */ /* - QUIZ REQUIREMENTS - Your code should have a variable `musicians`, and include `if...else if...else` conditional statement - Your code should produce the expected output, as mentioned above. Read each condition carefully. */ // change the value of `musicians` to test your conditional statements var musicians = 2; // your code goes here if( musicians <= 0 ){ console.log( "not a group" ); }else if( musicians === 1 ){ console.log( "solo" ); }else if( musicians === 2 ){ console.log( "duet" ); }else if( musicians === 3 ){ console.log( "trio" ); }else if( musicians === 4 ){ console.log( "quartet" ); }else{ console.log( "this is a large group" ); }

total.toFixed 小數幾位四捨五入

/* - Programming Quiz: Out to Dinner (2-10) */ /* - QUIZ REQUIREMENTS - Your code should have the variables - `bill`, `tip`, and `total` - Your variables - `bill`, `tip`, and `total` should be declared using the `var` keyword - Your variable `bill` should be a number, having a value equal to the result of `10.25 + 3.99 + 7.15` - Your variable `tip` should be a number, having a value equal to 15% of the `bill` - Your variabe `total` should be a number, having a value equal to the `bill` and `tip` added together - Your code should print the total to the console */ // your code goes here var bill = 10.25 + 3.99 + 7.15; var tip = bill * 0.15; var total = bill + tip; console.log("$" + **total.toFixed**(2));

algorithm演算法

If else句型的題材

可以來自於已經有解決方案的狀況，將它設定為true的一方

問題

== 和 === 的使用沒有非常清楚

條件運算式conditional statement (if else/ else if)

謀殺之謎(卡)

/* * Programming Quiz: Murder Mystery (3-4) */ /* * QUIZ REQUIREMENTS * 1. Your code should have a variables - `room`, `suspect`, `weapon`, and `solved` * 2. Your code should include a conditional statement * 3. The variable `suspect` should use one of the provided values * 4. The variable `weapon` should be based on the `room` * 5. Your code should produce the expected output: __________ did it in the __________ with the __________! * Example: Mr. Parkes did it in the dining room with the knife! * * 6. For unmatching combination of the suspect and the room, print nothing on the console */ /* ****************************************** */ /* TESTING LOGIC */ // Change the value of `room` and `suspect` to test your code // A room can be either of - dining room, gallery, ballroom, or billiards room var room = "billiards room"; // A suspect can be either of - Mr. Parkes, Ms. Van Cleve, Mrs. Sparr, or Mr. Kalehoff // Test your code by giving matching as well as unmatching names of the suspect var suspect = "Ms. Van Cleve"; /* ****************************************** */ /* IMPLEMENTATION LOGIC*/ // Initial values var weapon = ""; var solved = false; /* * To help solve this mystery, write a combination of conditional statements that: * 1. sets the value of weapon based on the room and * 2. sets the value of solved to true if the value of room matches the suspect's room */ if ( room === "ballroom" ) { weapon = "poison"; if ( suspect === "Mr. Kalehoff" ){ solved = true; }else{ console.log(); } } else if ( room === "gallery" ) { weapon = "trophy"; if( suspect === " Ms. Van Cleve" ){ solved = true; }else{ console.log(); } } else if ( room === "billiards room" ) { weapon = "pool stick"; if( suspect === "Mrs. Sparr" ){ solved = true; }else{ console.log(); } } else { weapon = "knife"; if(suspect === "Mr. Parkes" ){ solved = true; }else{ console.log(); } } /* ****************************************** */ // The code below will run only when `solved` is true if (solved) { console.log( suspect + " did it in the " + room + " with the " + weapon + "!" ); }else{ console.log(); } /* ****************************************** */

邏輯運算符logical operator

⁠

⁠

⁠

short circuiting最少運算

⁠

⁠

冰淇淋 if(( || ) && ( || ))

/* * Programming Quiz: Ice Cream (3-6) * * Write a single if statement that logs out the message: * * "I'd like two scoops of __________ ice cream in a __________ with __________." * * ...only if: * - flavor is "vanilla" or "chocolate" * - vessel is "cone" or "bowl" * - toppings is "sprinkles" or "peanuts" * * We're only testing the if statement and your boolean operators. * It's okay if the output string doesn't match exactly. */ /* * QUIZ REQUIREMENTS * 1. Your code should have the variables `flavor`, `vessel`, and `toppings` * 2. Your code should have an `if` statement * 3. Your code should use logical expressions * 4. Your code should work with * - `flavor=vanilla`, `vessel=cone`, and `toppings=sprinkles` * - `flavor=vanilla`, `vessel=cone`, and `toppings=peanuts` * - `flavor=vanilla`, `vessel=bowl`, and `toppings=sprinkles` * - `flavor=vanilla`, `vessel=bowl`, and `toppings=peanuts` * * - `flavor=chocolate`, `vessel=cone`, and `toppings=sprinkles` * - `flavor=chocolate`, `vessel=cone`, and `toppings=peanuts` * - `flavor=chocolate`, `vessel=bowl`, and `toppings=sprinkles` * - `flavor=chocolate`, `vessel=bowl`, and `toppings=peanuts` * * 5. Your code should NOT log (print) anything when * - the flavor is something other than "vanilla" or "chocolate" * - the vessel is something other than "cone" or "bowl" * - the toppings is something other than "sprinkles" or "peanuts" * * 6. Your code should not be empty */ // change the values of `flavor`, `vessel`, and `toppings` to test your code var flavor = "vanilla"; var vessel = "plate"; var toppings = "sprinkles"; // Add your code here if(( flavor === "vanilla" || flavor === "chocolate" ) && ( vessel === "cone" || vessel === "bowl" ) && ( toppings === "sprinkles" || toppings === "peanuts" )){ console.log( "I'd like two scoops of " + flavor + " ice cream in a " + vessel + " with " + toppings + "." ); }

衣服尺寸:if(( >= ) && ( < ))

/* * Programming Quiz: What do I Wear? (3-7) * * Using if/else statements, create a series of logical expressions that logs the size of a t-shirt based on the measurements of: * - shirtWidth * - shirtLength * - shirtSleeve * * Use the chart above to print out one of the following correct values: * - S, M, L, XL, 2XL, or 3XL */ /* * QUIZ REQUIREMENTS * 1. Your code should have the variables `shirtWidth`, `shirtLength`, and `shirtSleeve` * 2. Your code should include an `if...else` conditional statement * 3. Your code should use logical expressions * 4. Your code should produce the expected output * 6. Your code should not be empty * 7. BE CAREFUL ABOUT THE EXACT CHARACTERS TO BE PRINTED. */ // change the values of `shirtWidth`, `shirtLength`, and `shirtSleeve` to test your code var shirtWidth = 18; var shirtLength = 29; var shirtSleeve = 8.47; /* * To gain confidence, check your code for the following combination of [shirtWidth, shirtLength, shirtSleeve, expectedSize]: * [18, 28, 8.13, 'S'] * [19.99, 28.99, 8.379, 'S'] * [20, 29, 8.38, 'M'] * [22, 30, 8.63, 'L'] * [24, 31, 8.88, 'XL'] * [26, 33, 9.63, '2XL'] * [27.99, 33.99, 10.129, '2XL'] * [28, 34, 10.13, '3XL'] * [18, 29, 8.47, 'NA'] */ // WRITE YOUR CODE HERE if(( shirtWidth >= 18) && ( shirtWidth < 20 ) && ( shirtLength >= 28 ) && ( shirtLength < 29 ) && ( shirtSleeve >= 8.13 ) && ( shirtSleeve < 8.38 )){ console.log( "S" ); }else if(( shirtWidth >= 20 ) && ( shirtWidth < 22 ) && ( shirtLength >= 29 ) && ( shirtLength < 30 ) && ( shirtSleeve >= 8.38 ) && ( shirtSleeve < 8.63 )){ console.log( "M" ); }else if(( shirtWidth >= 22 ) && ( shirtWidth < 24 ) && ( shirtLength >= 30 ) && ( shirtLength < 31 ) && ( shirtSleeve >= 8.63 ) && ( shirtSleeve < 8.88 )){ console.log( "L" ); }else if(( shirtWidth >= 24 ) && ( shirtWidth < 26 ) && ( shirtLength >= 31 ) && ( shirtLength < 33 ) && ( shirtSleeve >= 8.88 ) && ( shirtSleeve < 9.63 )){ console.log( "XL" ); }else if(( shirtWidth >= 26 ) && ( shirtWidth < 28 ) && ( shirtLength >= 33 ) && ( shirtLength < 34 ) && ( shirtSleeve >= 9.63 ) && ( shirtSleeve < 10.13 )){ console.log( "2XL" ); }else if(( shirtWidth >= 28 ) && ( shirtLength >= 34 ) && ( shirtSleeve >= 10.13 )){ console.log( "3XL" ); }else{ console.log( "NA" ); }

conditional statement 狀況語句

以下是所有假值的列表：

false null undefined 0 NaN ""

假值有限, 真值無限 ; 不是假值的就是真值

""字串 string 假

[]矩陣 array, {}物件 object 真

0.0 也是假

var isGoing = true;

var color;

if (isGoing) {

color = "green";

} else {

color = "red";

}

console.log(color);

使用 if(isGoing) 和使用 if(isGoing === true) 是一样的。

此外，使用 if(!isGoing) 和使用 if(isGoing === false) 是一样的。

ternary operator 三元運算符:

conditional ? (if condition is true) : (if condition is false)

https://www.youtube.com/watch?v=dj21ZwonMv0&t=24s⁠

⁠

食物鏈多重ternary operator

/* * Programming Quiz - Navigating the Food Chain (3-8) * * Use a series of ternary operator to set the category to one of the following: * - "herbivore" if an animal eats plants * - "carnivore" if an animal eats animals * - "omnivore" if an animal eats plants and animals * - undefined if an animal doesn't eat plants or animals * * Notes * - use the variables `eatsPlants` and `eatsAnimals` in your ternary expressions * - `if` statements aren't allowed ;-) */ /* * QUIZ REQUIREMENTS * - Your code should have the variables `eatsPlants`, `eatsAnimals` * - Your code should include ternary statements. Do not use if....else statement. * - Your code should produce the expected output * - Your code should not be empty * - BE CAREFUL ABOUT THE PUNCTUATION AND THE EXACT WORDS TO BE PRINTED. */ // change the values of `eatsPlants` and `eatsAnimals` to test your code var eatsPlants = true; var eatsAnimals = true; /* * Test your code agaist the followig possible input/output combinations of (`eatsPlants`, `eatsAnimals`, expected output): * - (true, true, omnivore) * - (false, true, carnivore) * - (true, false, herbivore) * - (false, false, undefined) */ var category = eatsPlants ? (category = eatsAnimals ? "omnivore" : "herbivore" ) : ( category = eatsAnimals ? "carnivore" : "undefined" ); console.log(category);

switch

switch 语句是另一种将多个基于相同值的 else if 语句放到一起，并且不用使用条件语句的方式，只是根据某个值切换每段代码。

if (option === 1) {

console.log("You selected option 1.");

} else if (option === 2) {

console.log("You selected option 2.");

} else if (option === 3) {

console.log("You selected option 3.");

} else if (option === 4) {

console.log("You selected option 4.");

} else if (option === 5) {

console.log("You selected option 5.");

} else if (option === 6) {

console.log("You selected option 6.");

}

↓

↓/*switch 语句是另一种将多个基于相同值的 else if 语句放到一起，

↓并且不用使用条件语句的方式，只是根据某个值切换每段代码。*/

↓

switch (option) {

case 1:

console.log("You selected option 1.");

case 2:

console.log("You selected option 2.");

case 3:

console.log("You selected option 3.");

case 4:

console.log("You selected option 4.");

case 5:

console.log("You selected option 5.");

case 6:

console.log("You selected option 6.");

}

.toLocaleString("en-US") ⇒ 59,124

薪資(switch)

/* * Programming Quiz: Back to School (3-9) * * Write a switch statement to set the average salary of a person based on their type of completed education. * */ /* * QUIZ REQUIREMENTS * - Your code should have the variables `education`, and `salary` * - Your code should include a switch statement * - Your code should produce the expected output * - Your code should not be empty * - BE CAREFUL ABOUT THE PUNCTUATION AND THE EXACT WORDS TO BE PRINTED. */ // change the value of `education` to test your code var education = 'a high school diploma'; // set the value of this based on a person's education var salary = 0; // your code goes here switch(education){ case "no high school diploma": salary = 25636; break; case "a high school diploma": salary = 35256; break; case "an Associate's degree": salary = 41496; break; case "a Bachelor's degree": salary = 59124; break; case "a Master's degree": salary = 69732; break; case "a Professional degree": salary = 89960; break; case "a Doctoral degree": salary = 84396; } console.log( "In 2015, a person with " + education + " earned an average of $" + salary.toLocaleString("en-US") + "/year." );

Loop

when to start

when to stop

how to get to the next item

forget anyone of them → infinite loop

while loop

var start = 0; // 何时开始

while (start < 10) { // 何时停止

console.log(start);

start = start + 2; // 如何进入下一个项目

}

输出： 0 2 4 6 8

Fizzbuzz類題

是否能整除 x % 2 = 0 → x可被2整除

从数字 1 循环访问到 20

如果数字可以被 3 整除，则输出 “Julia”

如果可以被 5 整除，则输出 “James”

如果可以同时被 3 和 5 整除，则输出 “JuliaJames”

如果不能被 3 或 5 整除，则输出该数字

//從數字1開始

var x = 1;

while( x <= 20 ){

if( x % 15 === 0 ){

console.log( "JuliaJames" );

}else if( x % 3 === 0 ){

console.log( "Julia" );

}else if( x % 5 === 0 ){

console.log( "James" );

}else{

console.log( x );

x = x + 1;

}

//note:值等於0時要用 === 絕對相等!

写一个输出以下歌曲的循环。从 99 开始，并在 1 个瓶时结束。

"99 bottles of juice on the wall! 99 bottles of juice! Take one down, pass it around... 98 bottles of juice on the wall!"

"98 bottles of juice on the wall! 98 bottles of juice! Take one down, pass it around... 97 bottles of juice on the wall!"

...

"2 bottles of juice on the wall! 2 bottles of juice! Take one down, pass it around... 1 bottle of juice on the wall!"

"1 bottle of juice on the wall! 1 bottle of juice! Take one down, pass it around... 0 bottles of juice on the wall!"

Your code should have a variable `num` with a starting value of `99`

var num = 99;

while( num >= 1 ){

if( num > 2 ){

console.log( num + " bottles of juice on the wall! " + num + " bottles of juice! Take one down, pass it around... " + (num - 1 ) + " bottles of juice on the wall!" );

}else if( num == 2 ){

console.log( "2 bottles of juice on the wall! 2 bottles of juice! Take one down, pass it around... 1 bottle of juice on the wall!" );

}else{

console.log( "1 bottle of juice on the wall! 1 bottle of juice! Take one down, pass it around... 0 bottles of juice on the wall!" );

}

num = num - 1;

}

/*写一个 while 循环，从 60 秒开始倒计时：

如果有正在执行的任务，则输出该任务（英文而不是翻译）

如果当前未执行任何任务，则输出 T-x seconds

Orbiter transfers from ground to internal power (T-50 seconds)

Ground launch sequencer is go for auto sequence start (T-31 seconds)

Activate launch pad sound suppression system (T-16 seconds)

Activate main engine hydrogen burnoff system (T-10 seconds)

Main engine start (T-6 seconds)

Solid rocket booster ignition and liftoff! (T-0 seconds)

var T = 60;

while( T >= 0 ){

if( T == 50 ){

console.log( "Orbiter transfers from ground to internal power" );

}else if( T == 31 ){

console.log( "Ground launch sequencer is go for auto sequence start" );

}else if( T == 16 ){

console.log( "Activate launch pad sound suppression system" );

}else if( T == 10 ){

console.log( "Activate main engine hydrogen burnoff system" );

}else if( T == 6 ){

console.log( "Main engine start" );

}else if( T == 0 ){

console.log( "Solid rocket booster ignition and liftoff!" );

}else{

console.log( "T-" + T + " seconds" );

}

T = T - 1;

}

for loop

⁠

⁠

for( var i = 0 ; i < 6 ; i = i + 1 ){

console.log( "Printing out i = " + i );

}

Printing out i = 0

Printing out i = 1

Printing out i = 2

Printing out i = 3

Printing out i = 4

Printing out i = 5

nested loop(嵌套循環)

⁠

⁠

for (var x = 0; x < 5; x = x + 1) {

for (var y = 0; y < 3; y = y + 1) {

console.log(x + "," + y);

}

输出：

0, 0

0, 1

0, 2

1, 0

1, 1

1, 2

2, 0

2, 1

2, 2

3, 0

3, 1

3, 2

4, 0

4, 1

4, 2

注意输出内容的顺序

x++ or ++x // 等同于 x = x + 1

x++ return x then increments it

++x increments x then return it

x-- or --x // 等同于 x = x - 1

x-- return x then decrements it

--x decrements x then return it

x += 3 // 等同于 x = x + 3

x -= 6 // 等同于 x = x - 6

x *= 2 // 等同于 x = x * 2

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.

intro to javascriptintro to javascript

console.log

declaration宣告

implicit type conversion 隱式類型轉換

邏輯運算符logical operator

ternary operator 三元運算符:

switch

Loop

while loop

for loop

nested loop(嵌套循環)

intro to javascript
intro to javascript