JavaScript基础视频教程总结(041-050章)

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8" />
  5. <title>041-050章总结</title>
  6. </head>
  7. <body>
  8. <pre>
  9. 041. 嵌套的for循环
  10. </pre>
  11. <script type="text/javascript">
  12. console.log("第041");
  13. //这个for循环执行几次,图形的高度就是多少
  14. for (var i=0;i<5;i++) {
  15. // 在循环的内部再创建一个循环,用来控制图形的宽度
  16. for (var j=0;j<5-i;j++) {
  17. document.write("* ")
  18. }
  19. document.write("<br>")
  20. }
  21. </script>
  22. <pre>
  23. 042. 练习
  24. </pre>
  25. <script type="text/javascript">
  26. console.log("第042");
  27. /*
  28. * 1.打印99乘法表
  29. * 1*1=1
  30. * 1*2=2 2*2=4
  31. * 1*3=3 2*3=6 3*3=9
  32. * 1*4=4 2*4=8 3*4=12 4*4=16
  33. * ....9*9=81
  34. */
  35. for (var i=1;i<=9;i++) {
  36. for (var j=1;j<=i;j++) {
  37. document.write( j +"*"+ i + "= " + i*j +" ,");
  38. }
  39. document.write("<br>")
  40. }
  41. </script>
  42. <pre>
  43. 043. for循环练习
  44. </pre>
  45. <script type="text/javascript">
  46. console.log("第043");
  47. // 打印出1-100之间所有的质数
  48. for (var i=2;i<=100;i++) {
  49. //创建一个布尔值,用来保存结果,默认i是质数
  50. var flag=true;
  51. //判断i是否是质数
  52. //获取到2-i之间的所有的数
  53. for (var j=2;j<i;j++) {
  54. if( i%j==0 ){
  55. flag =false;
  56. break;
  57. }
  58. }
  59. //如果是质数,则打印i的值
  60. if(flag){
  61. console.log(i);
  62. }
  63. }
  64. </script>
  65. <pre>
  66. 044. break和continue
  67. </pre>
  68. <script type="text/javascript">
  69. console.log("第044");
  70. /*
  71. * break关键字可以用来退出switch或循环语句。
  72. * 不能在if语句中使用break和continue,循环内的if内可以使用。
  73. * break关键字,会立即终止离他最近的那个循环语句。
  74. */
  75. for(var i=0 ; i<5 ; i++){
  76. if(i == 2){
  77. break;
  78. }
  79. console.log(i); //0 1
  80. }
  81. for(var i=0 ; i<5 ; i++){
  82. console.log("@外层循环"+i)
  83. for(var j=0 ; j<5; j++){
  84. break;
  85. console.log("内层循环:"+j);
  86. }
  87. }
  88. /*
  89. * 可以为循环语句创建一个label,来标识当前的循环
  90. * label:循环语句
  91. * 使用break语句时,可以在break后跟着一个label,
  92. * 这样break将会结束指定的循环,而不是最近的
  93. */
  94. outer1:
  95. for(var i=0 ; i<5 ; i++){
  96. console.log("@外层循环"+i);
  97. inner1:
  98. for(var j=0 ; j<5; j++){
  99. break outer1; // 外层循环终止了,内侧也终止。
  100. console.log("内层循环:"+j);
  101. }
  102. }
  103. /*
  104. * continue关键字可以用来跳过当次循环
  105. * 同样continue也是默认只会对离他最近的循环循环起作用
  106. */
  107. /*for(var i=0 ; i<5 ; i++){
  108. if(i==2){
  109. continue;
  110. }
  111. console.log(i);
  112. }*/
  113. outer2:
  114. for(var i=0 ; i<5 ; i++){
  115. //console.log("@--->"+i);
  116. for(var j=0 ; j<5 ; j++){
  117. if(j==3){
  118. continue outer2;
  119. }
  120. //continue outer2;
  121. console.log("-->"+j);
  122. }
  123. console.log("@--->"+i);
  124. }
  125. </script>
  126. <pre>
  127. 045. 质数练习的改进
  128. </pre>
  129. <script type="text/javascript">
  130. console.log("第045");
  131. //测试如下的程序的性能
  132. //在程序执行前,开启计时器
  133. //console.time("计时器的名字")可以用来开启一个计时器
  134. //它需要一个字符串作为参数,这个字符串将会作为计时器的标识
  135. console.time("test");
  136. for ( var i=2; i<=10000; i++ ) {
  137. //console.log(zhi);
  138. var flag = true;
  139. for ( var j=2; j<Math.sqrt(i); j++ ) { // 可以通过Math.sqrt()对一个数进行开方11.4ms
  140. if( i%j==0 ){
  141. // 如果进入判断则证明i不是质数,修改flag值为false
  142. flag = false;
  143. // 一旦进入判断,则证明i不可能是质数了,此时循环再执行已经没有任何意义了,使用break来结束循环
  144. break;// 不加221ms,加上break为24ms
  145. }
  146. }
  147. if(flag){
  148. //console.log(i);
  149. }
  150. }
  151. //终止计时器
  152. //console.timeEnd()用来停止一个计时器,需要一个计时器的名字作为参数
  153. console.timeEnd("test");
  154. </script>
  155. <pre>
  156. 046. 对象的简介
  157. 如果使用基本数据类型的数据,我们所创建的变量都是独立,不能成为一个整体。
  158. 对象属于一种复合的数据类型,在对象中可以保存多个不同数据类型的属性。
  159. 对象的分类:
  160. 1.内建对象
  161. - 由ES标准中定义的对象,在任何的ES的实现中都可以使用
  162. - 比如:Math String Number Boolean Function Object....
  163. 2.宿主对象
  164. - 由JS的运行环境提供的对象,目前来讲主要指由浏览器提供的对象
  165. - 比如 BOM DOM
  166. 3.自定义对象
  167. - 由开发人员自己创建的对象
  168. </pre>
  169. <script type="text/javascript">
  170. console.log("第046");
  171. //创建对象
  172. /*
  173. * 使用new关键字调用的函数,是构造函数constructor
  174. * 构造函数是专门用来创建对象的函数
  175. * 使用typeof检查一个对象时,会返回object
  176. */
  177. var obj1 = new Object();
  178. console.log(obj1)
  179. console.log(Object)
  180. </script>
  181. <pre>
  182. 047. 对象的基本操作
  183. </pre>
  184. <script type="text/javascript">
  185. console.log("第047");
  186. //在对象中保存的值称为属性
  187. // 向对象添加属性 语法:对象.属性名 = 属性值;
  188. var obj2 = new Object()
  189. obj2.name = "孙悟空";
  190. obj2.gender = "男";
  191. obj2.age = 18;
  192. //读取对象中的属性 语法:对象.属性名
  193. //如果读取对象中没有的属性,不会报错而是会返回undefined
  194. console.log(obj2.gender);
  195. console.log(obj2.hello); //undefined
  196. //修改对象的属性值语法:对象.属性名 = 新值
  197. obj2.name = "tom";
  198. // 删除对象的属性 语法:delete 对象.属性名
  199. delete obj2.name;
  200. console.log(obj2.name);
  201. console.log(obj2.age);
  202. </script>
  203. <pre>
  204. 048. 属性名和属性值
  205. </pre>
  206. <script type="text/javascript">
  207. console.log("第048");
  208. var obj3 = new Object();
  209. /*
  210. * 属性名:
  211. * - 对象的属性名不强制要求遵守标识符的规范,什么乱七八糟的名字都可以使用
  212. * - 但是我们使用是还是尽量按照标识符的规范去做
  213. */
  214. obj3.name = "孙悟空";
  215. obj3.var = "var";
  216. console.log(obj3.var)
  217. /*
  218. * 如果要使用特殊的属性名,不能采用.的方式来操作
  219. * 需要使用另一种方式:语法:对象["属性名"] = 属性值
  220. * 读取时也需要采用这种方式
  221. * 使用[]这种形式去操作属性,更加的灵活,
  222. * 在[]中可以直接传递一个变量,这样变量值是多少就会读取那个属性
  223. */
  224. obj3["123"] = 789;
  225. obj3["nihao"] = "你好";
  226. var n = "nihao";
  227. console.log(obj3[n]);
  228. //属性值 JS对象的属性值,可以是任意的数据类型 甚至也可以是一个对象
  229. obj3.test = true;
  230. obj3.test = null;
  231. obj3.test = undefined;
  232. //创建一个对象
  233. var obj4 = new Object();
  234. obj4.name = "猪八戒";
  235. //将obj4设置为obj3的属性
  236. obj3.test = obj4;
  237. console.log(obj3.test.name);
  238. console.log(obj3);
  239. /*
  240. * in 运算符
  241. * - 通过该运算符可以检查一个对象中是否含有指定的属性 如果有则返回true,没有则返回false
  242. * - 语法:"属性名" in 对象
  243. */
  244. console.log(obj3.test2); // undefined
  245. //检查obj3中是否含有test2属性
  246. console.log("test2" in obj3);
  247. console.log("test" in obj3);
  248. console.log("name" in obj4);
  249. </script>
  250. <pre>
  251. 049. 基本数据类型和引用数据类型
  252. 基本数据类型
  253. String Number Boolean Null Undefined
  254. 引用数据类型
  255. Object
  256. JS中的变量都是保存到栈内存中的,
  257. 基本数据类型的值直接在栈内存中存储,
  258. 值与值之间是独立存在,修改一个变量不会影响其他的变量
  259. 对象是保存到堆内存中的,每创建一个新的对象,就会在堆内存中开辟出一个新的空间,
  260. 而变量保存的是对象的内存地址(对象的引用),如果两个变量保存的是同一个对象引用,
  261. 当一个通过一个变量修改属性时,另一个也会受到影响.
  262. </pre>
  263. <script type="text/javascript">
  264. console.log("第049");
  265. var a = 123;
  266. var b = a;
  267. a++;
  268. console.log("a = "+a); //124
  269. console.log("b = "+b); //123
  270. var obj5 = new Object();
  271. obj5.name = "孙悟空";
  272. var obj6 = obj5;
  273. //修改obj的name属性
  274. obj5.name = "猪八戒";
  275. console.log(obj5.name); // 猪八戒
  276. console.log(obj6.name); // 猪八戒
  277. //设置obj6为null
  278. obj6 = null;
  279. console.log(obj5);
  280. console.log(obj6);
  281. var c = 10;
  282. var d = 10;
  283. //console.log(c == d);
  284. var obj7 = new Object();
  285. var obj8 = new Object();
  286. obj7.name = "沙和尚";
  287. obj8.name = "沙和尚";
  288. console.log(obj7);
  289. console.log(obj8);
  290. /*
  291. * 当比较两个基本数据类型的值时,就是比较值。
  292. * 而比较两个引用数据类型时,它是比较的对象的内存地址,
  293. * 如果两个对象是一摸一样的,但是地址不同,它也会返回false
  294. */
  295. console.log(obj7 == obj8); //false
  296. </script>
  297. <pre>
  298. 050. 对象字面量
  299. 使用对象字面量,可以在创建对象时,直接指定对象中的属性
  300. 语法:{属性名:属性值,属性名:属性值....}
  301. 对象字面量的属性名可以加引号也可以不加,建议不加,
  302. 如果要使用一些特殊的名字,则必须加引号
  303. 属性名和属性值是一组一组的名值对结构,
  304. 名和值之间使用:连接,多个名值对之间使用,隔开
  305. 如果一个属性之后没有其他的属性了,就不要写.
  306. </pre>
  307. <script type="text/javascript">
  308. console.log("第050");
  309. // 使用对象字面量来创建一个对象
  310. var obj9 = {};
  311. obj9.name = "孙悟空";
  312. var obj10 = {
  313. name:"猪八戒",
  314. age:13,
  315. gender:"男",
  316. test:{name:"沙僧"},
  317. conprint: function(){
  318. console.log(this.age)
  319. }
  320. };
  321. console.log(obj10.test);
  322. console.log(obj10.conprint());
  323. </script>
  324. </body>
  325. </html>
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值