总结目前为止JavaScript所学的知识点以及问题

Posted 2020-10-30 tegong007

目前为止javascript所学的知识点以及问题

第一章：

1.1 JavaScript的应用

1)  通过学习鼠标的事件：onclick（点击事件）、onmouseover（鼠标放上）、onmouseout（鼠标移走）来操作动画特效。

2)   通过学习JS语法控制页面元素CSS样式。

1. JavaScript 能够直接写入 html 输出流中。
2. JavaScript 能够对事件作出反应。
3. JavaScript 能改变 HTML 元素的内容、样式。

1.2 JavaScript的特点

1)       了解关于JavaScript的特点。比如

1. 解释性：C语言为编译性。
2. 基于对象：什么是对象？
3. 事件驱动：onclick，onmouseover， onmouseout等。
4. 跨平台性：只跟浏览器有关。
5. 安全性：不允许访问本地硬盘，不能对网络文档进行修改和删除。

1.3 初探JavaScript

1)   了解编写JS流程。

1. 布局：HTML和CSS。
2. 样式：修改页面元素的样式，div1的display样式。
3. 事件：确定用户做什么操作。
4. 编写JS：在事件中，用JS来修改页面元素的样式
5. 原理：响应用户的操作，对页面元素进行样式修改

实列1：

 

 

分析：通过定义一个函数myFunction去改变HTML元素的内容。

问题1：为什么x=document.getElementById（”demo”）中x的不用var 定义仍然能使用？解决：先定义更好~

实列2:

问题2：为什么script写进body里仍然能生效？解决：写哪里都行，最好写上面

第二章：

2.1 JavaScript的组成

由ECMAScript、BOM、DOM三部分组成

2.2变量类型、变量类型显式、隐式转换

运用闭包、变量作用域、变量类型、变量类型显式、隐式转换做例子

2.3运算符 %

实列1:

彩条旗（运算符 求模的应用）

 分析：利用window.onload=function()页面加载出一个彩条旗，

利用循环，js控制元素颜色达到奇数列和偶数列不用颜色的效果。

2.4 Switch、break、continue、jason、真假

分析：Switch、break、continue与java中的运用一样，可以联想。

Jason是对象的意思; 通过循环，使jason这个数组达到单个连续输出

实列2:

 

2.5可变参、提取非行间样式、数组基础

分析：

实列3:

　　1.可变参arguments

 通过定义一个函数sum，传入数字1,2,3。利用arguments数组达到相加的结果 ，return出来的结果等于1+2+3=6

实列4：

 

　　A.参数个数不同，函数执行功能不同

 分析：定义一个gsstyle函数，在window..里的窗口运用gsstyle（）传入2个参数 “backgroundColor”“#f00”，function gsstyle（）具体操作（相当于backgroundColor.style=“#f00”）使body的div蓝色变成红色。

　　B.提取非行间样式。getComputedStyle（chrome+ff）很多兼容性问题可以解决。

实列5:

如下图，

 

CurrentStyle在IE里它是对象，谷歌是underfinder，所以需要getComputedStyle来处理兼容性问题。

 

1. 数组修改

定义一个数组 var arr=【1,2,3,4,5】

arr.push（9）；在数组最后加个数字9

arr.unshift(0)；在最前加个数字

arr.concat（brr）；实现2个数组的连接

arr.pop（）；删除并返回数组的第一个元素

arr.sort()；对数组元素进行排序

如：

arr.splice（）；删除元素，并向数组添加新的元素

toSourse把数组转化为字符串，并返回结果，

更多请自行百度哦。

第三章：

主要运用：定时器，动态定时器，qq

1)   对于定时器的操作，定时器有2个，

1. setInterval（函数名，时间），它具有间断性，间断的时间由用户输入的时间决定。(常用)

如：setInterval(show,1000);//1s

　　2.setTimeout（函数名，时间），它具有延迟性，

如可先定义var timer=setTimeout（）；这样使用方便

　　3.清除定时器：clearIntervar(定时器名);

实列1:

 

分析：

通过定义2个按钮input 属性是button；控制着2个按钮操作每隔3秒弹出提示框的操作。

点击btn1时：oBtn1.onclick=function() 

  {oTimer=setInterval(function(){alert("a");},3000);

  };//单击“start”按钮，每隔3秒弹出提示框

点击btn2时：oBtn2.onclick=function()  {

   clearInterval(oTimer);

  }//单击“stop”按钮，定时器关闭，不再弹出提示框

2)   动态定时器

 实列2：

 

 

效果：

 

 

分析:

1. Body中导入6个数字
2. function toDbl(num){

  　　  if (num<10)return "0"+num;

 　　   else return ""+num;}

先做这个东西，为后面出现的时间数组做铺垫，如果是个位数就在0在前面，“010203”的效果。

　　3.

　　　　a)   定义var aImage=document.getElementsByTagName("img");控制所有的图片

　　　　b)   定义一个函数tick；构建出image标签的src属性的取值，从而确定出时分秒的每一位应该使用哪一张图片

　　　　c)   var oDate=new Date();Date中国标准时间，使用前先new一下~

　　　　d)   var str=toDbl(oDate.getHours())+toDbl(oDate.getMinutes())+toDbl(oDate.getSeconds());获取时分秒

　　　　e)   for(var i=0;i<aImage.length;i++)  {  aImage[i].src="image/"+str.charAt(i)+".jpg";} 为了兼容，不试用str[i]. ，通过时间改变图片

问题1：

定义var aImage=document.getElementsByTagName("img");控制所有的图片时，该html就只有6个图片

循环中i<aImage.length，就是i<6; str.charAt(i)是通过时间来获取图片，最大只有5，如何获取6以上的图片呢？？？？

  解决：

此问题在于没有正确理解str.charAt(i)的意思，

charAt(i)获取第几个数字，如“012759”,当i=0是，获取第一个数字的数值，通过str

f)   setInterval(tick, 1000);设置定时器，每隔一秒调用tick函数构建图片的src属性值

g)   tick();为了处理页面加载的时6位时分秒全显示0的问题，先调用

3)   qq

实列3：

分析：定义了2个div，

当鼠标放上div1的时候div2出来

当鼠标从div1移走的时候，div2延时消失

当鼠标放上div2的时候，清除计时器，div2不消失

当鼠标移走div2的时候，div2延时消失

第四章：

主要内容 offsetleft，滚动效果，简易日历，选项卡

1)   offsetleft：所有的左边距

 

分析：this 代表 当前操作的对象

运用：setInterval(function(){  

var oDiv=document.getElementById("div1");

oDiv.style.left=oDiv.offsetLeft+10+"px";},30);

通过改变它的左边距+定时器可以实现滚动效果

2)   简易日历

实列1：

效果：

 

 

1. 通过body搭建出ul和12和li 定义一个总的div装起所有，下面的文字一个用h2，一个用p
2. 在css里设计样式

a)   要用到浮动使li排列

b)   若下面的英文用p而不是直接用li装，需要用到定义css p{ cursor:pointer} 意思是设定鼠标伸出时p的样式和上面h的文字样式一样

c)   若英文同p装，不要写p的定位，否则英文不出来

　　3.在js里

a)   定义一个   var arr=[         ‘一月活动安排1‘*12，..  ]装起所有的文字，让他边变色

b)   oTxt.innerHTML=‘<h2>‘+ (this.index+1)+‘月活动</h2><p>‘+arr[this.index]+‘</p>‘; 处理div里内容的显示;

innerHTML是一个字符串，用来设置或获取位于对象起始和接受的标签的html；

c)   this.className=‘active‘;  将当前的li的CSS样式处理为活动状态，利用循环，点击事件12个月份，初始化，活动等步骤实现简历日历。