『笔记』JavaScript基础学习笔记 1

前言

学无止境，继续加油！

代码块

{
  alert("hello");
  document.write('class="link"')
  }
{
  var a = 10;
  alert("hello");
  document.write('class="link"')
  }
console.log("a = "+a)

流程控制语句

通过流程控制语句可以控制程序执行流程，使程序可以根据一定的条件来选择执行

一、条件判断语句

在执行某个语句之前进行判断，成立才会执行语句，不成立则语句不执行
注意：条件判断语句不要使用赋值运算符 = 否则会直接返回true

（一）语法一：if语句

if(条件表达式){
  语句…
}

var a = 20;
if(a > 10 && a <= 20){
  alert("a比10大,并且小于等于20"); 
}

（二）语法二：if…else语句

if(条件表达式){
  语句…
}else{
  语句…
}

var age = 60;
if(a >= 60){
  alert("你已经退休了"); 
}else{
  alert("你还要继续工作")
}

（三）语法三：if…else if…else语句

if(条件表达式){
  语句…
}else if{
  语句…
}else if{
  语句…
}else{
  语句…
}

var age = 60;
if(a > 100){
  alert("活着挺没意思"); 
}else if(a > 60){
  alert("你该退休了");
}else if(a > 50){
  alert("你还要继续工作");
}else if(a > 17){
  alert("你已经成年了");
}else{
  alert("你还只是个孩子");
}

4、prompt()函数

var score = prompt("参数");
alert(score);

（四）实例练习：

1、练习一
输入0-100的成绩后进行判断并输出相应的结果

var score = prompt("请输入成绩");
// 排除小于0大于100的值，同时排除非数字number类型的值
if(score >100 || score < 0 || isNaN(score)) {
  alert("毙了");
}else{
  if(score ==100) {
    alert("奖励BMW");
  }else if(score >= 80){
    alert("奖励手机");
  }else if(score >= 60){
    alert("奖励参考书");
  }else{
    alert("啥都没有");
  }
}

2、练习二
输入三个数据后进行判断并输出相应的结果

var height = prompt("请输入身高（cm）");
var money = prompt("请输入财富（万）");
var face = prompt("请输入颜值（px）");
if(height >180 && money > 1000 && face > 500) {
  alert("一定嫁");
}else if(height >180 || money > 1000 || face > 500) {
  alert("将就一下");
}}else{
  alert("坚决不嫁");
}

3、练习三
输入三个数据后进行排序并从小到大输出

var num1 = +prompt("请输入第一个数");
var num2 = +prompt("请输入第二个数");
var num3 = +prompt("请输入第三个数");
if(num1 < num2 && num1 < num3) {
  // num1最小，比较num2和num3
  if(num2<num3){
    alert(num1 + "，" +num2 +" ，"+num3);
  }else{
    alert(num1 + "，" +num3 +" ，"+num2);
  }
}else if(num2 < num1 && num2 < num3) {
  // num2最小，比较num1和num3
  if(num1<num3){
    alert(num2 + "，" +num1 +" ，"+num3);
  }else{
    alert(num2 + "，" +num3 +" ，"+num1);
  }
}else{
  // num3最小，比较num1和num2
  if(num1<num2){
    alert(num3 + "，" +num1 +" ，"+num2);
  }else{
    alert(num3 + "，" +num2 +" ，"+num1);
  }
}

二、条件分支语句

条件分支语句也叫 switch 语句

（一） switch 语法

switch(条件表达式){
  case 表达式:
    语句…
    break;
  case 表达式:
    语句…
    break;
  default:
    语句…
    break;
}

(1)switch…case 语句执行时，会依次将case后的表达式的值和switch后的表达式的值进行全等比较

① 如果比较结果为true则从当前case处开始执行代码
② 如果比较结果为false则从继续向下比较
③ 如果所有的比较结果都为false，则执行default后的语句

(2)使用 break; 可以退出switch语句
(3)Switch语句和if语句有重复，可以互相代替

var num = 1;
switch(num){
  case 1:
    console.log("壹")
    break;
  case 2:
    console.log("贰")
    break;
  default:
    console.log("数据不合法")
    break;
}

（二）实例练习：
对大于60分的输出“合格”，低于60分的输出“不合格”

var score = 61;
switch(parseInt(score/10)){
  case 10:
  case 9:
  case 8:
  case 7:
  case 6:
    console.log("合格")
    break;
  default:
    console.log("不合格")
    break;
}

第二种方法

var score = 61;
switch(ttrue){
  case sscore>=60:
    console.log("合格")
    break;
  default:
    console.log("不合格")
    break;
}

三、循环语句

（一） while 循环
语法：

while(条件表达式){
  语句……
}

（1）while在语句执行时，先对条件表达式进行求值判断

（2）将条件表达式写死为true的循环叫做死循环，该循环不会停止，除非关闭浏览器
（3）可以使用 break; 来终止循环

while(true){
  alert(n++);
  //判断n是否为10
  if(n == 10){
    //退出循环
    break;
  }
}

（4）创建一个循环，往往需要三个步骤

//① 创建一个初始变量
var n = 0;
//② 在循环中设置一个条件表达式
while(n < 10){
  //③ 定义一个更新表达式，每次更新初始化变量
  document.write(n++ +'</br>');
}

（二） do…while 循环
语法：

do{
  语句……
}while(条件表达式);

（1）do…while 循环会先执行循环体，再对while后的表达式进行判断

（2）do…while 可以保证循环体至少执行一次

var n = 11;
do{
  document.write(n++ +'</br>');
}while(n <= 10);

（3）死循环

（4）while 实战练习

① 假如投资年利率为5%，试求从1000增长到5000需要多少年

//定义一个变量，表示当前钱数
var money = 1000;
//定义个一个计数器
var count = 0；
while(money < 5000){
  money *= 1.05;
  //使count自增
  count++;
}
console.log("一共需要"+count+"年")

②输入0-100的成绩后进行判断并输出相应的结果

while(true){
  var score = prompt("请输入成绩");
  // 判断用户输入的值是否合法
  if(score >=0 && score <= 100) {
    //满足该条件则证明用户的输入合法，退出循环
    break;
  }
  alert("请输入有效的分数");
}
if(score ==100) {
    alert("奖励BMW");
}else if(score >= 80){
    alert("奖励手机");
}else if(score >= 60){
    alert("奖励参考书");
}else{
    alert("啥都没有");
}

（三） for 循环

在for循环中，提供了专门的位置来放 初始化表达式 、 条件表达式 、 更新表达式

1、语法：

for(①初始化表达式;②条件表达式;④更新表达式){
  ③语句……
}

（1）执行流程

① 执行初始化表达式，初始化变量（只会执行一次）
② 执行条件表达式，判断是否执行循环
如果为true则执行循环语句③，如果为false则终止循环
④执行更新表达式，更新表达式执行完毕继续重复执行条件表达式②

（2）for循环中的三个表达式可以省略，也可以写在外部
如果在for循环中不写任何表达式，只写两个;;则变成死循环。慎用！！！

for(var i = 0 ; i < 10 ; i++ ){
  alert(i);
}
for(;;){
  alert("hello");
}

2、实例练习
（1）打印1-100之间所有奇数之和

for(var i=1 , sum=0; i<=100 ; i++){
  //判断i是否是奇数（不能被2整除的数就是奇数）
  //如果i除以2余数不为0则为奇数
  if(i%2 != 0){
    sum = sum+i;
  }
}

（2）打印1-100之间所有7的倍数的个数及总和

for(var i=1 , sum=0 , count=0; i<=100 ; i++){
  //如果i除以7余数为0则就是7的倍数
  if(i%7 == 0){
    sum += i;
    //使计数器自增
    count++;
  }
}
console.log("总和为"+sum); // 输出总和
console.log("总数量为"+count); // 输出总和

（3）打印所有水仙花数（一个3位数，它的每个位上的数字的3次幂之和等于它本身） 例如1^3+5^3+3^3=153

//打印所有的三位数
for(var i=100; i<1000; i++){
  //获取i的百位数字
  var bai= parseInt(i/100);
  //获取十位数字
  var shi= parseInt((i-bai*100)/10);
  //获取个位数字
  var ge= i % 10;
  //判断i是否为水仙花数
  if(bai*bai*bai + shi*shi*shi + ge*ge*ge == i){
    console.log(i);
  }
}

（4）质数练习： 判断是否为质数（大于1的自然数，除了1和它本身不能被其他自然数整除的数叫做质数）

var num =prompt("请输入一个大于1的整数");
//判断这个值是否合法
if(num <= 1){
  alert("该值不合法");
}else{
  // 判断num是否是质数
  for(var i=2 ; i<num ; i++){
    // 判断num是否能被i整除
    if(num % i == 0){
      // 如果num能被i整除则说明该值一定不是质数（反向证明）
      flag = false;
    }
  }
  
  // 创建一个变量来保存当前的数的状态，默认当前num为质数
  var flag = true;
  //如果num是质数则输出
  if(flag){
    alert(num+ "是质数");
  }else{
    alert("这个数不是质数");
  }
}

3、嵌套的的 for循环

（1）外部循环执行1次，内部循环就执行5次

//向页面中输出内容
for(var i=0; i<5; i++){
  for(var n=0; n<i+1; n++){
    document.write("星 &nbsp;");
  }
  //输出一个换行
  document.write("<br/>");
}

（2）实例练习
打印99乘法表

<javascript>
for(var i=1; i<=9; i++){
  for(var n=1; n<=i; n++){
    document.write("<span>"+ n+ "*" + i+ "=" + i*n +"</span>");
  }
}
</javascript>
<style>
  //添加span的属性
span{
  display: inline-block;
  width: 80px;
}
</style>

四、 `break` 和 `continue`

1、break关键字

（1）break关键字可以用来退出switch或循环语句
（2）不能在 if语句 中使用break和continue关键词
（3）break关键字会立即终止离它最近的循环语句（不影响外层循环）

for(var i=0; i<5; i++){
  console.log("外层循环"+i);
  for(var j=0; j<5; j++){
    break;
    console.log("内层循环"+j);
  }
}

（4）可以为循环语句创建一个label，来标识当前的循环

label:循环语句

使用break语句时，可以在break后跟着一个label，这样break将会结束指定的循环，而不是最近的

outer:
for(var i=0; i<5; i++){
  console.log("外层循环"+i);
  for(var j=0; j<5; j++){
    break outer;
    console.log("内层循环"+j);
  }
}

2、continue关键词

outer:
for(var i=0; i<5; i++){
  for(var j=0; j<5; j++){
    if(j == 1){
      continue outer;
    }
    console.log("内层循环"+j);
  }
  console.log("外层循环"+i);
}

3、测试程序执行时间

//开启计时器
console.time("test");

//停止计时器
console.timeEnd("test");

4、 质数练习的改进

质数（大于1的自然数，除了1和它本身不能被其他自然数整除的数叫做质数）

可以通过 Math.sqrt() 对一个数进行开方

//开启计时器
console.time("test");
for(var i=2; i<1000; i++){
  var flag = true;
  for(var j=2; j<=Math.sqrt(i); j++){
    if(i%j==0){
      flag = false;
      //一旦进入判断，则证明i不可能位质数了，此时循环没有再执行的意义
      //可以使用break来结束循环
      break;
    }
  }
  if(flag){
    console.log(i);
  }
}
//停止计时器
console.timeEnd("test");