20天学习架构javascript知识点
2021-05-26 15:38:01 12 举报AI智能生成
20天学习架构javascript知识点
作者其他创作
大纲/内容
第一天
变量的声明(var)
全局变量(成员变量)
局部变量
隐式变量
变量声明提升
声明变量的时候，有var和没var的区别
1.有var的时候，变量为私有的，和外界没有任何关系。
2.没var的时候，变量不是私有的,会向上级作用域查找，看是否为上级的变量，不是，继续向上查找，一直到window为止(我们把这种机制叫做：'作用域链')，也就是我们在私有的作用域中操作的这个非私有变量，是容易被比人修改的。
数据类型
基本数据类型
string
number
boolean
null
undefined
引用数据类型
Object
Array
Function
Date
函数(function )
分支主题
参数
返回值
回调函数
事件
事件对象
...
数组
存放一系列值的集合 [ ]
获取dom元素
document.getElementById(id)
document.getElementsByTagName(标签 )
document.getElementsByClassName(类名)
页面加载事件
window.onload = function(){}
第二天
函数
概念
可重复利用的代码块
function foo(){ } 定义函数(方法 , api)
foo() 调用函数(方法,api)
参数传递
形参
实参
返回值 return
arguments
在函数作用域里面，可以获取实参信息
回调函数
把function(){} 函数体作为参数(实参)传递
常用语句
判断语句
循环语句
控制流语句
第三天
运算符的学习
比较运算符
> < == != ===
逻辑运算符
|| 或 只要有一个是true结果就是true
&& 与 只要有一个是false结果就是false
! 非 取反
算数运算符
++ -- a++ 和 ++a不一样
-= 在自身上减少
+= 在自身上增加
% 余数是多少
三目运算
条件？执行代码1 ： 执行代码2
设置/获取元素的文本内容
innerHTML
innerText
value
案例
查找名人影视剧
淘宝输入框
开关灯效果
第四天
循环语句
for(){}
while(){}
do{}while()
属性绑定
dom.index = 0
数组
添加元素
arr.push( '元素' )
arr.unshift( '元素' )
删除元素
arr.shift() 删除第一个元素
arr.pop() 删除最后一个元素
案例
遍历数组
渲染qq头像
tab切换
第五天
案例
页面排版（发送信息）
循环语句
字符串的拼接
var str = '<div>'+变量+'</div>'；
第六天
函数
函数的定义
var foo1 = function(){}
window.foo4=function(){}
function foo2(){}
var foo3 = new Function('console.log("hello")')
参数
实参
arguments
形参
回调函数
返回值
return
dom操作
获取元素
document.getElementById()
document.getElementsByTagName()
document.getElementsByClassName()
创建元素
document.createElement('标签名称')
添加元素
dom.appendChild(指定的元素)
删除元素
dom.removeChild(指定的元素)
类名操作
dom.classList.remove('类名')
dom.classList.contains('类名')
dom.classList.add('类名')
排他思想
把所有元素的类名/样式重置掉
案例
下拉菜单
第七天
排他思想
定时器函数
var timer = setInterval(function(){},毫秒值)
clearInterval(timer)
var timer2 = setTimeout(function(){},毫秒值)
clearTimeout(timer2)
获取css属性API
window.getComputedStyle(dom , null)
获取标签属性值/设置标签属性值
getAttriblute('key')
removeAttribute('key')
setAttribute('key','value')
第八天
回顾定时器
dom操作属性
dom.parentNode;
dom.previousElementSibling;
dom.nextElementSibling;
dom.children;
dom.nodeType
日期对象
new Date()
getDate() 获取日 1-31
getMonth () 获取月 0-11（1月从0开始）
getFullYear () 获取完整年份（浏览器都支持）
getMinutes () 获取分钟 0-59
getSeconds () 获取秒 0-59
getHours ()获取小时 0-23
getMilliseconds () 获取毫秒 （1s = 1000ms）
getTime() 返回累计毫秒数(从1970/1/1午夜)
getDay () 获取星期 0-6（0代表周日）
数学对象
Math
Math.ceil() // 向上取整
Math.abs();//取绝对值
Math.random();//0-1之间随机数
Math.round();//四舍五入
Math.sin(弧度) ;//正弦
Math.tan(弧度);//正切
Math.cos(弧度);//余弦
Math.floor()// 向下取整
案例
制作时钟
动画原理
删除记录
第九天
事件对象
event.pageX , event.pageY
鼠标在页面的x和y坐标
包含（属性和方法的）集合
三大家族-offset
offsetTop
获取元素距离浏览器的顶部间距
offsetLeft
获取元素距离浏览器的左边间距
offsetHeight
获取元素的高度(padding + border + content)
offsetWidth
获取元素的宽度(padding + border + content)
案例
鼠标按下移动元素
随机点名册
浮窗广告
动画改变元素样式
第十天
三大家族-scroll
scrollTop和scrollLeft
网页，被浏览器遮挡的头部和左边部分。
被卷去的头部和左边部分。
ScrollWidth和scrollHeight
检测盒子的宽高。（调用者：节点元素。属性。）
盒子内容的宽高。（如果有内容超出了，显示内容的高度）
兼容写法
var stop= window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0;
三大家族-client
clientLeft：盒子的左border
clientTop：盒子的上boder
clientHeight = height + padding
clientWidth = width + padding
在无DTD情况下
document.body.clientWidth、document.body.clientHeight
显示的是body可视范围的宽和高；
document.documentElement.clientWidth、document.documentElement.clientHeight
显示的是body的高和body可视范围的宽（IE中显示的都是body可视范围的宽和高）
不管有没有DTD：
window.innerWidth、window.innerHeight：
显示的都是浏览器可视范围的宽和高，包括浏览器的头部和滚动条部分（IE678无法识别window.innerWidth）
在有DTD情况下：
document.body.clientWidth、document.body.clientHeight：
显示的是body的宽和高
document.documentElement.clientWidth、document.documentElement.clientHeight：
显示的是body可视范围的宽和高
案例
元素跟随鼠标移动
第二十天
ajax 编程
请求数据的地址
请求失败执行的回调函数
请求成功执行的回调函数
是否异步
请求方式
面向对象
正则表达式
cookie
第十九天
客户端/服务端介绍
协议、域名、端口
php基础
ajax学习
封装ajax
异步方法对象XMLHttpRequest()
第十八天
案例
商品排序（单价最高/销售最高/信用最高）
双重for循环
简单排序
选择排序
快速排序
冒泡排序
第十七天
案例
全选反选
手风琴广告
旋转木马
手风琴下拉菜单
typeof/instanceof
封装getElementsByClassName()方法
回顾闭包
第十六天
回顾三大家族
offset/client/scroll
自执行函数
(function(){})()
闭包
概念
tab点击
垃圾回收机制/内存泄漏
递归
浅拷贝
深拷贝
栈内存/堆内存
第十五天
案例
BOM编程API
location
screen
navigator
history
getComputedStyle(dom,null)[属性]
运算符的使用
第十四天
绘制心形
window全局对象
字符串操作
function/var/定义函数
缓动函数封装
轮播图制作
第十三天
案例
第三方登录排版
广告切入切出
控制元素的样式
DOM编程API(补充)
数组的应用
事件对象/event.target/
函数/参数/作用域/返回值/回调函数
全局变量/局部变量/隐式变量
第十二天
案例：
定时器
模拟考试选择题
键盘事件产生随机颜色
绘制十字架
tab切换栏
封装获取兄弟元素的方法
数组存值
第十一天
数组操作
new Array()
常用API
删除元素
arr.pop();//往数组尾部删除元素
arr.shift();//往数组头部删除元素
查找指定元素的索引值
indexOf('')
合并数组
截取数组指定元素
arr.slice()
arr.splice()
添加元素
arr.unshift();//往数组头部添加元素
arr.push(); //往数组尾部添加元素
空数组 []
字符串操作
常用API
字符串的链接
新字符串 = str1.concat(str2)；
字符串的转换
String(变量);
“”+变量
变量.toString();
字符串的截取
slice，参数：1，截取位置【必须】，2终结点）
substring 同slice（参数1，参数2); 两个参数都是索引值
substr，参数：1，截取位置【必须】，2截取长度）
给字符查索引
indexOf，从前向后索引字符串位置（参数： 索引字符串）
学习技巧
调用者
参数
返回值
功能
缓动原理
目标值=当前值+步长
步长=（目标值-当前值）/ 10
职业：暂无
0 条评论
下一页
