黑马JavaScript基础--Day3

Day3

  1. 遍历数组:使用for循环来便利数组。如果,array中没有内容,打印出来的为undefined
  2.    let array=['刘德华','刘晓庆','刘亦菲','刘若英']
  3. for(let i=0;i<array.length;i++)
  4.         {
  5.             document.write(`<h1>${array[i]}</h1>`)
  6.         }
  7. 退出循环:break;
  8. 循环可以嵌套,for里面还可以嵌套for循环,外层循环循环一次,内存循环循环一轮
  9. 打印出三角形星星:
  10. 九九乘法表:
  11. span{
  12.             width: 100px;
  13.             height: 35px;
  14.             text-align: center;
  15.             line-height: 35px;
  16.             display: inline-block;
  17.             border: 1px solid red;
  18.             padding: 5px 10px;
  19.             margin:5px;
  20.             border-radius: 12px;
  21.             box-shadow: 5px 5px 5px rgba(255, 192, 203);
  22. }
  23. <script>
  24.         for(let i=1;i<=9;i++)
  25.         {
  26.             for(let j=1;j<=i;j++)
  27.             {
  28.                 document.write(`<span>${j}*${i}=${i*j}</span>`)
  29.             }
  30.             document.write("<br>")
  31.         }
  32. </script>
  33. 数组的增、删、改、查:
  34. 数组的字面量声明: let arr=[1,2,”pink”,true]
  35. new Array 构造函数声明  let arr=new Array(1,2,3,4)
  36. 数组求和:
  37. let arr=[2,6,1,7,4  ]
  38.         let sum=0;
  39.         for(let i=0;i<arr.length;i++)
  40.         {
  41.             sum+=arr[i];
  42.         }
  43.         document.write(`<span>${sum}</span>`)
  44. 找数组中最大值,最小值
  45.  查·数组:通过数组的下标来查询。
  46. 改·数组:也是通过下标来找到数组的对应位置,进行修改。修改的值,会覆盖之前的值。
  47. 例如: arr[i]=arr[i]+”李成林” ,  把第i个位置的数组的值使用+,变成字符串相连接的形式,重新赋给,arr[i] 这个数组的位置。
  48. 增·数组:
  49. arr.push (  ), 方法将一个或者多个元素添加到数组的末尾,并且返回改数组的新长度。(直接输出arr.push(),可以知道现在的数组的长度)括号中直接输入改元素,数字类型直接输入,字串加”  ”,多个元素使用 , 分开
  50. arr.unshift (  ),在数组的最前面插入数据,并且也返回数组的长度。其余用法同上。
  51. 数组筛选案例:把某个数组中大于10的元素筛选出来,放入新数组。不能对原数组有影响。
  52.         // 筛选出大于10的元素
  53.         let arr=[2,0,6,11,77,0,52,0,25,7]
  54.         let newArr=[]   //声明一个空素组,要加[]
  55.         for(let i=0;i<arr.length;i++)
  56.         {
  57.             if(arr[i]>10)
  58.             {
  59.             newArr.push(arr[i])
  60.            }
  61.         }
  62.         for(let i=0;i<newArr.length;i++)
  63.         {
  64.            document.write(`<span>${newArr[i]}</span>`)
  65.         }
  66. 删·数组:
  67. arr.pop(  ):删除数组中的最后一个元素,并且返回该元素,一次只能删除一个。  括号里面不用参数,但是必须写。
  68. arr.shift(  ):删除数组中的第一个元素,并且返回该元素,一次只能删除一个。括号里面不用参数,不能省略。
  69. arr.splice(  ):删除指定元素。(参数1,参数2),第一个参数是删除的起始位置,从这里开始删除。第二个参数删除的个数,如果不写,默认全部删除。(抽奖,购物车删除商品)
  70. 案例:生成柱形图。
  71. 要求:
  72. 需要输入4次数据,放到一个数组里面。(循环)
  73. 遍历数组,根据数据生成4个柱形,渲染到页面。(柱形,就是div,设置宽度,高度,高度为用户输入的数据,,div里面包含数据和第几季度)
  74. 15、冒泡排序(双重循环):(5个数字)
  75. (1)外层循环:
  76. 外层循环表示趟数,5个数据走4趟,长度就是数组长度-1: arr.length-1;
  77. (2)内层循环:
  78. 第一趟:交换4次,
  79. 第二趟:交换3次
  80. 第三趟:交换2次
  81. 第四趟:交换1次
  82. 最终长度为:数组长度-次数,但是我们从0次开始
  83. arr.length-i-1
  84. 交换两个变量
  85. 从小到大排序,第一个数,大于第二个数才交换
  86. a[j]>a[j+1],才交换,交换采用第三个变量的方法。
  87.  
  88. 数组排序在开发中一般使用sort方法来排序:
  89.  arr.sort(function(a,b){ return a-b} )升序
  90.        arr.sort(function(a,b){ return b-a})降序
  91.  
  92.  
  93.  
  94.  

 

### 黑马程序员 JavaScript 学习资料汇总 以下是关于黑马程序员提供的 JavaScript 学习资源及相关知识点的详细介绍: #### 一、基础入门视频教程 可以通过 B 站上的系列课程快速掌握 JavaScript基础知识。推荐以下两个视频作为起点: - **【黑马程序员前端】JavaScript 入门到精通 (1)** – 提供了 HTML 和 JavaScript 基础理论的学习内容[^1]。 - **【黑马程序员前端】JavaScript 入门到精通 (2)** – 进一步深入讲解实际开发中的应用案例。 这些视频涵盖了从零开始学习 JavaScript 所需的核心概念,适合初学者逐步理解并实践。 #### 二、常见功能实现案例分析 在实战项目中巩固所学技能非常重要。以下是一些经典的功能模块及其对应的解决方案: - 轮播图效果:通过 Apis-day2 中提到的方法可以完成带有鼠标悬停暂停以及自动播放等功能的图片轮播组件[^2]。 - 小米官网风格搜索框交互设计:利用焦点事件监听输入状态变化来增强用户体验。 - 键盘按键触发评论提交机制:借助键盘事件捕获用户的敲击动作从而执行特定逻辑操作。 以上实例均来源于官方教学材料,并附带详尽说明便于模仿练习。 #### 三、基本语法结构与事件绑定方法 对于刚接触这门语言的人来说,了解如何正确书写代码至关重要。下面展示了一个简单的例子用于演示给 DOM 对象附加行为的过程: ```javascript // 获取页面内的某个 div 元素节点 var divElement = document.querySelector(&#39;div&#39;); // 定义当该元素被单击时要做的事情 function handleClick() { console.log("Div was clicked!"); } // 把上面定义好的函数设置成此 div 上发生 click 类型活动后的响应措施 divElement.onclick = handleClick; ``` 上述片段展示了标准方式之一去关联起始点同其后续可能产生的状况之间的联系[^3]。 #### 四、外部脚本文件加载技巧 为了保持网页主体简洁明了,在适当时候引入独立 js 文件成为必要手段。注意路径配置无误之后按照如下形式声明即可成功调用远端存储的内容[^4]: ```html <script type="text/javascript" src="/path/to/yourfile.js"></script> ``` 确保服务器能够正常提供请求过来的数据包;另外记得调整 MIME-Type 参数匹配目标类型(application/x-javascript 或 text/javascript)。 ---
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值