Blogger Information
Blog 119
fans 3
comment 1
visits 94605
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
JS基础 变量和流程控制------PHP培训十期线上班 学号:510251 02月24日作业
赵大叔
Original
582 people have browsed it

JS变量和流程控制

1、JS变量

1.1 变量的声明
JS中声明与初始化/赋值分开,第一次赋值叫初始化,第一次以外叫更新和修改,
声明 + 初始化 = 定义。
只要不是在涵数中发声明的变量都默认是全局变量,浏览器的全局对象就是window窗口。
量标示符规则和php一样,大小写英文字母 $ _
不区分大小写; 保持区分(控制台中区分)。

  • 语句:分号结束(可选)var n = 100;
  • 表达式:var n = 50 +50;
  • 括号()控制优先级
  • 空语句合法:;;;

1.2 变量的作用域
代码块:由一对大括号包装起来的代码块,可以为空
JS支持函数作用域,ES5/5.1没有块作用域
ES6中支持块作用域,变量用let/const

  1. <script>
  2. console.log('php中文网欢迎');
  3. console.log('我是学员,很高兴能到php中文网学习');
  4. // <script src="">导入外部脚本
  5. //1、语句:分号结束(可选)
  6. var n = 100;
  7. console.log('变量n的值是:' + n); //JS用+拼接字符串
  8. //表达式:
  9. var n = 50 +50;
  10. console.log('变量n的值是:' + n);
  11. //括号()
  12. var n = (50 + 50) * 2;
  13. console.log('变量n的值是:' + n);
  14. ;;;//空语句合法
  15. //2、变量:由名称和值组成
  16. //变量标示符规则和php一样
  17. //不区分大小写; 保持区分(控制台中区分)
  18. //name 是window全局属性
  19. var name = 'zhaodashu';
  20. console.log(name);
  21. //变量使用步骤
  22. //php中声明+初始化/赋值 合在一起: $name = 'zhaodashu';
  23. //JS中声明与初始化/赋值 分开: var name;
  24. var site;//声明后会有个默认值:undefined
  25. console.log(site);
  26. //第一次赋值叫初始化
  27. site = 'php中文网';
  28. console.log(site);
  29. //第一次以膈叫更新和修改
  30. site = 'php,cn';
  31. console.log(site);
  32. //声明 + 初始化 = 定义
  33. var email = 'admin@php.cn';
  34. //site, email 只要不是在涵数中发声明的变量都默认是全局变量
  35. //浏览器的全局对象就是window窗口
  36. console.log(window);
  37. console.log(window.site);
  38. console.log(site);
  39. console.log(window.email);
  40. //变量
  41. console.log(salary);
  42. var salary; //会自动提升到当前作用域顶部
  43. //等价代码
  44. // var salary;
  45. // console.log(salary);
  46. // salary = 5500;
  47. //标识符:大小写英文字母 $ _
  48. //代码块:由一对大括号包装起来的代码块,可以为空
  49. //JS支持函数作用域,ES5/5.1没有块作用域
  50. //ES6中支持块作用域,变量用let/const
  51. function f() {
  52. var x = 8;
  53. }
  54. //console.log(x); 不能访问
  55. if(true){
  56. var y = 100;
  57. }
  58. console.log(y);//可以访问
  59. </script>

2、JS流程控制

2.1 分支

1.单分支:if()
2.双分支:if(){...}else{...}
3.多分支:if(){...}else if(){...}else if(){...}else{...}
4.switch:switch(){case:'';...;break;...; default:...;}

  1. <script>
  2. //1、单分支
  3. var grade = 60;
  4. var res = '';
  5. if(grade >= 60) {
  6. res = '60分及格万岁!'
  7. }
  8. console.log(res); //单分支,如果条件不满足则没有输出
  9. //2、双分支
  10. var grade = 59;
  11. var res = '';
  12. if(grade >= 60) {
  13. res = '60分及格万岁!' //条件满足执行
  14. }else{
  15. res = '59分也是犯罪。'//条件不满足执行
  16. }
  17. console.log(res);
  18. //双分支简化:三元运算符
  19. //条件 ? true : false;
  20. var grade = 61;
  21. var res = '';
  22. res = grade >= 60 ? res = '60分及格万岁!' : res = '59分也是犯罪。';
  23. console.log(res);
  24. //3、多分支
  25. var grade = 99;
  26. var res = '';
  27. if(grade >= 60 && grade <= 69) {
  28. res = '合格!';
  29. }else if (grade >= 70 && grade <= 79) {
  30. res = '中!';
  31. }else if (grade >= 80 && grade <= 89) {
  32. res = '良!';
  33. }else if (grade >= 90 && grade <= 100){
  34. res = '优!';
  35. }else{
  36. res = '成绩输入的误!';
  37. }
  38. console.log(res);
  39. //4、switch
  40. var grade = 88;
  41. var res = '';
  42. switch (true) {
  43. case grade >= 60 && grade <= 69 :
  44. res = '合格!';
  45. break;
  46. case grade >= 70 && grade <= 79 :
  47. res = '中!';
  48. break;
  49. case grade >= 80 && grade <= 89 :
  50. res = '良!';
  51. break;
  52. case grade >= 90 && grade <= 100 :
  53. res = '优!';
  54. break;
  55. default :
  56. res = '成绩输入的误!';
  57. }
  58. console.log(res);
  59. //switch更多应用场景是单值判断
  60. var salary = '高级技工';
  61. switch(salary) {
  62. case '高管':
  63. case '高级技工': //可以两个CASE执行同一代码
  64. salary += ': 工资15k-25k';
  65. break;
  66. case '中层' :
  67. salary += ': 工资8k-12k';
  68. break;
  69. case '主管' :
  70. salary += ': 工资5k-8k';
  71. break;
  72. case '管理' :
  73. salary += ': 工资3k-5k';
  74. break;
  75. default :
  76. salary += ': 工资2k-8k';
  77. }
  78. console.log(salary);
  79. </script>

2.2 循环

1.for():比较适合处理确定数量的对象,数组
2.whlie():
3.do{...}whil():条件不满足也执行一次循环体
4.break:终止循环,跳出
5.continue: 终止本次循环,提前进入下一次

  1. <script>
  2. //5、循环:for/while/ 对象:for-in(); 数组:for-of\forEach
  3. //for():比较适合处理确定数量的对象,数组
  4. var sum = 0;
  5. for(var i = 0; i < 5; i++){
  6. sum += i;//+会判断是连接还是运算
  7. }
  8. console.log(sum);
  9. var arr = [1,3,5,7,9];
  10. console.log(arr.length);
  11. for(var i = 0; i < arr.length; i++){
  12. console.log(arr[i]);
  13. }
  14. //6、while()
  15. var arr = [2,4,6,8,0];
  16. var i = 0;//初始化循环变量
  17. while(i < arr.length){ //循环条件
  18. console.log(arr[i]);
  19. i++;//更新循环条件
  20. }
  21. //do-while():条件不满足也执行一次
  22. var arr = [2,4,6,8,0];
  23. var i = 0;//初始化循环变量
  24. do{
  25. console.log(arr[i]);
  26. i++;//更新循环条件
  27. } while(i > arr.length);//循环条件
  28. //break:终止循环,跳出
  29. var sum = 0;
  30. for(var i = 0; i < 10; i++){
  31. if(i === 5) break;//终止i=5后的循环
  32. sum += i;
  33. }
  34. console.log(sum);
  35. //continue: 终止本次循环,提前进入下一次
  36. var sum = 0;
  37. for(var i = 0; i < 10; i++){
  38. if(i === 5) continue;//终止i=5的循环
  39. sum += i;
  40. }
  41. console.log(sum);
  42. </script>

PHP欠下很多课程,先把JS开个头(毕竟万事开头难)。

Correcting teacher:天蓬老师天蓬老师

Correction status:qualified

Teacher's comments:知识是学不完的, 什么开始都不晚, 不必担心
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post