Blogger Information
Blog 26
fans 0
comment 2
visits 35283
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
JS基础演示(0224前端学习)
小辰
Original
757 people have browsed it

1.首先效果图

2.下面是我的代码

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>js基础演示</title>
  6. </head>
  7. <body>
  8. <li>实例演示变量声明与访问</li>
  9. <li>实例演示变量作用域与访问</li>
  10. <li>实例演示流程控制(分支与循环所有类型)</li>
  11. </body>
  12. <script>
  13. // 变量声明与访问
  14. var q =1314;
  15. console.log('变量y的值是:' + q);
  16. // 第二种声明,先定义,然后初始化
  17. var qa;
  18. qa=12;
  19. console.log('变量qa的值是:' + qa);
  20. // 不在函数申明的变量都默认为全局变量
  21. //全局变量的访问
  22. console.log(window);
  23. console.log(window.qa);
  24. //变量的作用域与访问
  25. function hi(){
  26. var w = 1256;
  27. }
  28. //函数外部不能访问函数内部的私有变量
  29. //console.log(w);
  30. if (qa=12) {
  31. var zz = 'zzzzz';
  32. }
  33. console.log(zz);
  34. //流程控制:分支+循环
  35. //单分支
  36. var hu = '';
  37. if (qa <13){
  38. hu = 'qa这个值小于13';
  39. }
  40. console.log(hu);
  41. //双分支
  42. var zh ='';
  43. if (qa<=6){
  44. zh='这个值小于等于6';
  45. }else {
  46. zh='这个值大于6';
  47. }
  48. console.log(zh);
  49. //双分支的简化
  50. kl = qa <= 6 ? '值小于6':'值大于6';
  51. console.log(kl);
  52. //多分支
  53. var zh ='';
  54. if (qa <6) {
  55. zh='这个值小于6';
  56. }else if(qa === 6){
  57. zh='这个值等于6';
  58. }else if (qa >6){
  59. zh='这个值大于6';
  60. }
  61. console.log(zh);
  62. //多分支的简化
  63. var zh ='';
  64. switch (true){
  65. case qa<6:
  66. zh='这个值小于6';
  67. break;
  68. case qa===6:
  69. zh='这个值等于6';
  70. break;
  71. default:
  72. zh='这个值大于6';
  73. break;
  74. }
  75. console.log(zh);
  76. //循环:for,while
  77. //for循环
  78. var sum =1;
  79. for (var i = 1; i <= 3; i++) {
  80. sum +=i;
  81. }
  82. console.log('累计结果: ' + sum);
  83. // 对于数组的循环
  84. var arr = ['123', '456', '789'];
  85. for (var i = 0; i < arr.length; i++) {
  86. console.log(arr[i]);
  87. }
  88. //while循环
  89. var sum = 3;
  90. var i = 0;
  91. while (i < 10) {
  92. i++;
  93. sum += i;
  94. }
  95. console.log('累计结果: ' + sum);
  96. //do..while
  97. var sum = 0;
  98. var i = 0;
  99. do {
  100. i++;
  101. sum += i;
  102. } while (i > 1) ;
  103. console.log('累计结果: ' + sum);
  104. //break和continue的使用
  105. // break: 终止循环,跳出
  106. var sum = 0;
  107. for (var i = 2; i < 6; i++) {
  108. if (i === 3) break;
  109. sum += i;
  110. }
  111. console.log('累计结果: ' + sum);
  112. // continue: 终止本次循环, 提前进入下一次
  113. var sum = 0;
  114. for (var i = 2; i < 6; i++) {
  115. if (i === 3) continue;
  116. sum += i;
  117. }
  118. console.log('累计结果: ' + sum);
  119. </script>
  120. </html>

3.小结
我感觉内容比较简单,还是很容易理解,就是内容有点多,或许是我把它们都写在一起的原因,还有很多作业会慢慢补齐的。

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