JavaScript从零学起1-2

开始

第2周：函数、条件与循环语句

学习目标

• 1.学会声明函数（函数表达式）。
• 2.掌握 if/else、switch 条件语句和 for/while 循环。
• 3.理解作用域链和闭包基础概念。

GO GO GO

1.函数（Functions）

js中的函数与python中的函数类似 python中定义函数的语法：

def showMessage():
    print("bg4jts.github.io")
    # 声明了一个函数，然后调用这个函数

print(showMessage()) # 调用函数
# 此时运行结果为： bg4jts.github.io

js中的函数定义与声明方式：

function showMessage(){
    alert("bg4jts.github.io");
}
// 声明了一个函数，然后调用这个函数

showMessage();// 调用函数
// 此时运行结果为： bg4jts.github.io

js函数也可以有参数和返回值：

function showMessage(name,age){
    alert("你好，我是"+name+"，今年"+age+"岁了");
}
// 在函数声明是可以指定参数的，参数之间用逗号隔开
// 声明了一个函数，然后调用这个函数

showMessage("bg4jts","25");// 调用函数
// 此时运行结果为： 你好，我是bg4jts，今年25岁了

1.1 函数中的变量

函数内部声明的变量，只能在函数内部访问，外部不能访问。

function showMessage(name,age){
let message = "你好，我是"+name+"，今年"+age+"岁了";
    alert(message);
}
// 在函数内部声明了一个局部变量message
alert(message);//*报错*

这看似没问题，但是实际上，message变量只能在函数内部访问，外部不能访问，所以会报错ReferenceError: message is not defined 不过函数可以调用和修改全局变量：

let message = "hello world";
function showMessage(){
    alert(message);//*输出：hello world*
    message = "你好，我是bg4jts，今年25岁了";
}
showMessage();
alert(message);//*输出：你好，我是bg4jts，今年25岁了*
//先输出了hello world，然后调用showMessage函数，修改了message的值，最后再次输出message的值为*你好，我是bg4jts，今年25岁了*

1.2 函数参数

借用javascript.info中的例子：

function showMessage(from, text) { // 参数：from 和 text
  alert(from + ': ' + text);
}

showMessage('Ann', 'Hello!'); // Ann: Hello! (*)
showMessage('Ann', "What's up?"); // Ann: What's up? (**)

这是一个简单的例子，函数接受两个参数，并将它们组合成一个字符串，然后用alert()函数显示出来。

我们还可以使用默认值来定义函数参数：

function showMessage(from, text = 'hello!') { // 参数：from 和 text
  alert(from + ': ' + text);
}

showMessage('Ann', "What' s up?");
// Ann: What's up? 
showMessage('Ann'); 
// Ann: hello! 

//在调用函数时，如果没有传入text参数，则使用默认值'hello!'。

1.3函数返回值

函数可以返回一个值，这个值可以被其他代码使用。

function add(a, b) {
  alert("计算a+b...");
  return a + b;
}
alert(add(2, 3)); // 5

函数add()接受两个参数a和b，并将它们相加，然后返回结果。这个结果可以被其他代码使用，比如alert()函数 但在此之前 程序会先执行函数中的语句。

1.4 函数命名

在写代码时，我们尽量使用规范名称，函数名应该具有描述性，能够准确反映函数的功能。 正确示范： 函数是一个行为，函数名应该以动词开头，如showMessage()、calculateSum()、fetchData()等。

函数是一个动作，函数名应该以动词开头，如alert()、prompt()、confirm()等。

函数是一个对象，函数名应该以名词开头，如Date()、Math.random()、document.getElementById()等。

javascript.info中的示例

"get…" —— 返回一个值，

"calc…" —— 计算某些内容，

"create…" —— 创建某些内容，

"check…" —— 检查某些内容并返回 boolean 值，等。

2.判断

javascript.info | 条件分支：if 和 ‘?’

2.1 if 语句

if(...)的逻辑如下

if (条件表达式) {
  // 条件表达式为true时执行的代码

}

例子：

let Button_clicked = true;

if (Button_clicked) {
  alert("你点击了按钮");
}

if(Button_clicked)的条件表达式为true，所以执行alert("你点击了按钮")语句。

2.2 if…else 语句

if...else的逻辑如下:

if (条件表达式) {
  // 条件表达式为true时执行的代码 
} else {
  // 条件表达式为false时执行的代码
}

例子：

let age = 25;

if (age >= 18) {
  alert("你已满18周岁");
} else {
  alert("你还未满18周岁");
}

if(age >= 18)的条件表达式为true，所以执行alert("你已满18周岁")语句。

2.3 if…else 语句

if...else if...else的逻辑如下:

if (条件表达式1) {
  // 条件表达式1为true时执行的代码 
  // 后续的条件表达式不再执行
} else if (条件表达式2) {
  // 条件表达式2为true时执行的代码 
    
} else if (条件表达式3) {
  // 条件表达式3为true时执行的代码 
  
} else {
  // 所有条件表达式都为false时执行的代码
  }

例子：

let age = 25;

if (age >= 18) {
  alert("你已满18周岁");
} else if (age >= 16) {
  alert("你已满16周岁");
} else {
  alert("你还未满18周岁");
}

if(age >= 18)的条件表达式为false，所以执行else if(age >= 16)语句。if(age >= 16)的条件表达式为true，所以执行alert("你已满16周岁")语句。

其实大部分语言里的if…else都大差不差，只是语法上有些区别。

2.4 switch 语句

switch语句的逻辑如下:

switch (表达式) {
  case 值1:
    // 当表达式的值等于值1时执行的代码
    break;
  case 值2:
    // 当表达式的值等于值2时执行的代码
    break;
  //...
  default:
    // 当没有匹配的值时执行的代码
    break;
}

例子w3school：

let day = "星期日";

switch (day) {
  case "星期一":
    alert("今天是星期一");
    break;
    case "星期二":
    alert("今天是星期二");
    break;
  case "星期三":
    alert("今天是星期三");
    break;
  case "星期四":
    alert("今天是星期四");
    break;
  case "星期五":
    alert("今天是星期五");
    break;
  case "星期六":
    alert("今天是星期六");
    break;
  case "星期日":
    alert("今天是星期日");
    break;
  case "星期天":
    alert("今天是星期天");
  default:
    alert("6");
    break;
}

switch(day)的表达式的值为”星期日”，所以执行case "星期日":语句。alert("今天是星期日")语句被执行。

2.5 条件运算符

条件运算符的逻辑如下:

let result = 条件表达式 ? 表达式1 : 表达式2;

例子：

let age = 25;
let message = (age >= 18) ? "你已满18周岁" : "你还未满18周岁";

alert(message); // 输出：你已满18周岁

条件表达式为true，所以表达式1被执行，输出”你已满18周岁”。

3.循环

javascript.info | 循环：for 和 while

3.1 for 循环

for循环的逻辑如下:

for (初始化表达式; 条件表达式; 迭代表达式) {
  // 循环体
}

例子：

for (let i = 0; i < 5; i++) {
  alert(i);
}

for(let i = 0; i < 5; i++)的初始化表达式为let i = 0，条件表达式为i < 5，迭代表达式为i++，所以执行alert(i)语句，输出0，1，2，3，4。

3.2 while 循环

while循环的逻辑如下:

while (条件表达式) {
  // 循环体
}

例子：

let i = 0;
while (i < 5) {
  alert(i);
  i++;
}

while(i < 5)的条件表达式为true，所以执行alert(i)语句，输出0，1，2，3，4(程序员喜欢从0开始计数QwQ)

3.3 do…while 循环

我们不常使用do...while循环，通常我们更倾向于使用另一个形式：while(…) {…} do...while循环的逻辑如下:

do {
  // 循环体
  } while (条件表达式);

例子：

  let i = 0;
  do {
    alert(i);
    i++;
  } while (i < 5);

do{alert(i);i++;}while(i < 5)的条件表达式为true，所以执行alert(i)语句，输出0，1，2，3，4。

3.4 循环控制语句

break语句可以用来跳出循环，continue语句可以用来跳过当前循环，label可以用来标记语句块。

break例子(javascript.info)：

let sum = 0;
while (true) {
  let value = +prompt("Enter a number", '');// 输入数字
  if (!value) break; // 如果输入为空，则跳出循环
  sum += value;
}

alert( 'Sum: ' + sum );

continue例子(javascript.info)：

for (let i = 0; i < 10; i++) {

  //如果为真，跳过循环体的剩余部分。
  if (i % 2 == 0) continue;

  alert(i); // 1，然后 3，5，7，9
}

解释：

if (i % 2 == 0) continue;的条件表达式为真，所以执行continue语句，程序跳过alert(i)语句，然后进入下一次循环。

label例子(javascript.info)：

outer: for (let i = 0; i < 3; i++) {
//``outer``标签标记了外层循环。
  for (let j = 0; j < 3; j++) {

    let input = prompt(`Value at coords (${i},${j})`, '');

    // 如果是空字符串或被取消，则中断并跳出这两个循环。
    if (!input) break outer; // (*)

    // 用得到的值做些事……
  }
}

alert('Done!');

${i},${j})是一个模板字符串，用来显示坐标。

break outer;语句中，outer是外层循环的标签，所以它会跳出两个循环。

4.交互

javascript.info | 交互：alert、prompt 和 confirm 特别简单，不做过多介绍。

4.1 alert()

alert("Hello, world!");

弹出一个模态窗，显示”Hello, world!”,进行交互，直到他们处理完窗口。在上面示例这种情况下 —— 直到用户点击“确定”按钮

4.2 prompt()

prompt 函数接收两个参数：

name = prompt("What is your name?", "John");

第一个参数是提示信息，第二个参数是默认值。

如果用户点击“取消”按钮或Esc，则返回 null。

如果用户输入了内容，则返回输入的内容。

4.3 confirm()

confirm 函数接收一个参数：

let result = confirm("Are you sure?");

如果用户点击“确定”按钮，则返回 true。

如果用户点击“取消”按钮，则返回 false。

---

有任何问题欢迎指出~

–THE END–