內容目錄
JavaScript basic 語法1-58 freecodecamp
console.log() 檢驗程式內容
利用這個程式碼檢查定義的變數var let const 還有寫好的功能 function
Comment Your JavaScript Code 寫註解的方法
// This is an in-line comment.
/* This is a
multi-line comment */
Declare JavaScript Variables 定義一個變數
var myName;
Storing Values with the Assignment Operator 將一個數值儲存到一個變數a
// Setup
var a;
a = 7;
// Only change code below this line
console.log(a)
Assigning the Value of One Variable to Another 將一個數值指定給另外一個變數 a = b
// Setup
var a;
a = 7;
var b;
b = a;
// Only change code below this line
console.log(b);
Initializing Variables with the Assignment Operator 定義a的值是9
var a = 9;
console.log(a);
9
Declare String Variables 定義一個字串變數
var myFirstName = “Hu”;
var myLastName = “Tong-Yu”;
console.log(myFirstName + ” ” + myLastName)
Hu Tong-Yu
Understanding Uninitialized Variables 未初始的變數
// Only change code below this line
var a = 5;
var b = 10;
var c =”I am a”;
// Only change code above this line
a = a + 1;
b = b + 5;
c = c + ” String!”;
console.log(a,b,c)
6 15 I am a String!
Understanding Case Sensitivity in Variables 適當的變數命名名稱宣告，大小寫要一致
// Variable declarations
var studlyCapVar;
var properCamelCase;
var titleCaseOver;
// Variable assignments
studlyCapVar = 10;
properCamelCase = “A String”;
titleCaseOver = 9000;
Explore Differences Between the var and let Keywords 使用let命名變數(ES6)
let catName = “Oliver”;
let catSound = “Meow!”;
如果是使用 let 就不能命名相同的變數第二次，但是使用 var 則可以
So unlike
var, when you use let, a variable with the same name can only be declared once.Declare a Read-Only Variable with the const Keyword 用const命名不能被取代
const FCC = “freeCodeCamp”; // Change this line
let fact = “is cool!”; // Change this line
fact = “is awesome!”;
console.log(FCC, fact); // Change this line
Add Two Numbers with JavaScript +
const sum = 10 + 10;
console.log(sum);
20
Subtract One Number from Another with JavaScript –
const difference = 45 – 33;
console.log(difference);
12
Multiply Two Numbers with JavaScript *
const product = 8 * 10;
console.log(product);
80
Divide One Number by Another with JavaScript /
const quotient = 66 / 33;
console.log(quotient);
2
Increment a Number with JavaScript
let myVar = 87;
// Only change code below this line
// myVar = myVar + 1;
myVar++;
Decrement a Number with JavaScript
let myVar = 11;
// Only change code below this line
// myVar = myVar – 1;
myVar–;
Create Decimal Numbers with JavaScript
const ourDecimal = 5.7;
// Only change code below this line
let myDecimal = 1.9;
Multiply Two Decimals with JavaScript
const product = 2.0 * 2.5;
console.log(product);
5
Divide One Decimal by Another with JavaScript
const quotient = 4.4 / 2.0; // Change this line
console.log(quotient);
2.2
Finding a Remainder in JavaScript
const remainder = 11 % 3;
console.log(remainder);
2
Compound Assignment With Augmented Addition
Compound Assignment With Augmented Subtraction
Compound Assignment With Augmented Multiplication
Compound Assignment With Augmented Division
Escaping Literal Quotes in Strings
Quoting Strings with Single Quotes
Escape Sequences in Strings 字串中的逃脫字元 \ 和 /
- To allow you to use characters you may not otherwise be able to type out, such as a carriage return.
- To allow you to represent multiple quotes in a string without JavaScript misinterpreting what you mean.
We learned this in the previous challenge.
| Code | Output |
|---|---|
\' |
single quote |
\" |
double quote |
\\ |
backslash |
\n |
newline |
\r |
carriage return |
\t |
tab |
\b |
word boundary |
\f |
form feed |
FirstLine
\SecondLine
ThirdLine
const myStr = “FirstLine\n\t\\SecondLine\nThirdLine”; // Change this line
Concatenating Strings with Plus Operator 兩個字串相加用 + 號
const myStr = “This is the start. ” + “This is the end.”; // Change this line >> start 前面有空格，可以顯示出空白
Concatenating Strings with the Plus Equals Operator 兩個字串相加用 +=號
let myStr = “This is the first sentence. “;
myStr += “This is the second sentence.”
Constructing Strings with Variables
const myName = “scott”;
const myStr = “My name is “+ myName + “and I am well!”;
Appending Variables to Strings
const someAdjective = “interesting”;
let myStr = “Learning to code is “;
myStr += someAdjective
Find the Length of a String
// Setup
let lastNameLength = 0;
const lastName = “Lovelace”;
// Only change code below this line
lastNameLength = lastName.length;
Use Bracket Notation to Find the First Character in a String
// Setup
let firstLetterOfLastName = “”;
const lastName = “Lovelace”;
// Only change code below this line
firstLetterOfLastName = lastName[0]; // Change this line
Understand String Immutability
// Setup
let myStr = “Jello World”;
// Only change code below this line
myStr = “Hello World”; // Change this line
// Only change code above this line
Use Bracket Notation to Find the Nth Character in a String
// Setup
const lastName = “Lovelace”;
// Only change code below this line
const thirdLetterOfLastName = lastName[2]; // Change this line
Use Bracket Notation to Find the Last Character in a String
// Setup
const lastName = “Lovelace”;
// Only change code below this line
const lastLetterOfLastName = lastName[lastName.length – 1]; // Change this line
Use Bracket Notation to Find the Nth-to-Last Character in a String
// Setup
const lastName = “Lovelace”;
// Only change code below this line
const secondToLastLetterOfLastName = lastName[lastName.length – 2]; // Change this line
Word Blanks 文字空白
const myNoun = “dog”;
const myAdjective = “big”;
const myVerb = “ran”;
const myAdverb = “quickly”;
// Only change code below this line
const wordBlanks = “The “+ myAdjective + ” ” + myNoun + ” ” + myVerb + ” ” + myAdverb + “.”; // Change this line >> 這邊要很小心文字的空白使用
// Only change code above this line
Store Multiple Values in one Variable using JavaScript Arrays
const sandwich = ["peanut butter", "jelly", "bread"];// Only change code below this line
const myArray = [“dog”, 5];
Nest one Array within Another Array
// Only change code below this line
const myArray = [[“dog”,5], [“cat”, 3]];
Access Array Data with Indexes
const myArray = [50, 60, 70];
console.log(myArray[0]);
const myData = myArray[0];
console.log(myArray);
Access Multi-Dimensional Arrays With Indexes
const myArray = [
[1, 2, 3],
[4, 5, 6],
[7, 8, 9],
[[10, 11, 12], 13, 14],
];
const myData = myArray[2][1];
console.log(myArray[2][1])
Manipulate Arrays With push() 把內容加入陣列中
// Setup
const myArray = [[“John”, 23], [“cat”, 2]];
myArray.push([“dog”, 3]);
// Only change code below this line
console.log(myArray);
Manipulate Arrays With pop() 把最後一個資料刪掉
// Setup
const myArray = [[“John”, 23], [“cat”, 2]];
const removedFromMyArray = myArray.pop()
// Only change code below this line
console.log(myArray);
console.log(removedFromMyArray);
[ [ ‘John’, 23 ] ]
[ ‘cat’, 2 ]
Manipulate Arrays With shift() 移除第一個index[0]的資料
// Setup
const myArray = [[“John”, 23], [“dog”, 3]];
const removedFromMyArray = myArray.shift();
// Only change code below this line
console.log(removedFromMyArray);
console.log(myArray);
[ ‘John’, 23 ]
[ [ ‘dog’, 3 ] ]
Manipulate Arrays With unshift() 在第一個index[0]加入資料
// Setup
const myArray = [[“John”, 23], [“dog”, 3]];
myArray.shift();
console.log(myArray);
myArray.unshift([“Paul”, 35]);
console.log(myArray);
// Only change code below this line
[ [ ‘dog’, 3 ] ]
[ [ ‘Paul’, 35 ], [ ‘dog’, 3 ] ]
Shopping List
const myList = [[“apple”, 10], [“banana”, 11], [“orange”, 12], [“grapes”, 13], [“guava”, 14]];
console.log(myList);
[ [ ‘apple’, 10 ],
[ ‘banana’, 11 ],
[ ‘orange’, 12 ],
[ ‘grapes’, 13 ],
[ ‘guava’, 14 ] ]
Write Reusable JavaScript with Functions 寫一個可以重複使用的功能函數
function reusableFunction() {
console.log(“Hi World”);
}
reusableFunction()
Hi World
Passing Values to Functions with Arguments 給一個數字給你的功能函數
function functionWithArgs(a, b) {
console.log(a+b);
}
functionWithArgs(1,2);
functionWithArgs(7,9);
3
16
Return a Value from a Function with Return
function timesFive(num) {
return num * 5;
}
const answer = timesFive(5);
console.log(answer);
25
Global Scope and Functions
// Declare the myGlobal variable below this line
let myGlobal = 10;
function fun1() {
// Assign 5 to oopsGlobal Here
oopsGlobal = 5
}
// Only change code above this line
function fun2() {
var output = “”;
if (typeof myGlobal != “undefined”) {
output += “myGlobal: ” + myGlobal;
}
if (typeof oopsGlobal != “undefined”) {
output += ” oopsGlobal: ” + oopsGlobal;
}
console.log(output);
}
myGlobal: 10
myGlobal: 10 oopsGlobal: 5
Local Scope and Functions
function myLocalScope() {
// Only change code below this line
var myVar = 10;
console.log(‘inside myLocalScope’, myVar);
}
myLocalScope();
// Run and check the console
// myVar is not defined outside of myLocalScope
console.log(‘outside myLocalScope’, myVar);
inside myLocalScope 10 ReferenceError: myVar is not defined
Global vs. Local Scope in Functions
// Setup
const outerWear = “T-Shirt”;
function myOutfit() {
// Only change code below this line
const outerWear = “sweater”
// Only change code above this line
return outerWear;
}
console.log(outerWear);
console.log(myOutfit());
T-Shirt
sweater
Understanding Undefined Value returned from a Function 沒有定義的回傳值
function addThree() {
sum = sum + 3;
}
// Only change code below this line
function addFive() {
sum = sum + 5;
}
// Only change code above this line
addThree();
addFive();
console.log(addThree());
console.log(addFive());
undefined
undefined
Assignment with a Returned Value 給一個回傳值
// Setup
let processed = 0;
function processArg(num) {
return (num + 3) / 5;
}
// Only change code below this line
processed = processArg(7)
console.log(processed);
2
Stand in Line
Write a function nextInLine which takes an array (arr) and a number (item) as arguments.
Add the number to the end of the array, then remove the first element of the array.
The nextInLine function should then return the element that was removed.
function nextInLine(arr, item) {
// Only change code below this line
arr.push(item);
var removed = arr.shift();
return removed;
// Only change code above this line
}
// Setup
const testArr = [1, 2, 3, 4, 5];
// Display code
console.log(“Before: ” + JSON.stringify(testArr));
console.log(nextInLine(testArr, 6));
console.log(“After: ” + JSON.stringify(testArr));
console.log(nextInLine(testArr, 10));
console.log(testArr[4]);
Before: [1,2,3,4,5]
1
After: [2,3,4,5,6]
2
10
Understanding Boolean Values
function welcomeToBooleans() {
// Only change code below this line
return true; // Change this line
// Only change code above this line
}
console.log(welcomeToBooleans());
true
留言