您的位置:首页 > Web前端 > JavaScript

分享一下我从零基础开始学习javascript的7天学习过程和内容

2016-06-06 12:05 501 查看
说明一下 我看的教程是电子文档+视屏教程 结合起来 然后做案例慢慢理解  以下的内容只能说是我已经学了

大部分是已经理解了 但是并不是所有的都理解透彻了 我只是分享一下我的学习经验以及学习内容 

学习比较快由于以前有过C的基础所以学起来速度要稍微快一些

第一天

学会了改input里面value的文字

利用按钮修改div颜色

然后用if判断 一个按钮当显示的时候隐藏 当隐藏的时候显示

然后函数传参改颜色

第二天主要学习了
innerHTML的使用读取与提取
设置宽高增加与颜色的变换三个功能
利用for循环把一组div里面所有元素颜色更改
全选 和反选 和全不选功能的实现
选项卡tab获取一组元素getElementsByTagName
数组的使用以及getElementsByTagName[]的使用
.length长度获取
window.onloadfunction(){}
提取行间事件innerHTML 
选项卡 tab

第三天主要学习
onmouse鼠标事件
onmouseover 移入事件
onmouseout 移出事件
this当前发生事件的元素
数组 arr=['' '' ''];
自定义标签 比如index=‘1’
js简历日历
ECMAScript 翻译 核心 解释器 的概念
DOM DOCUMENT OBJECT mODEL 文档对象模型html的概念
BOM document object Modl 浏览器对象模型 window的概念
typeof 查看变量类型
类型 string number bollean(布尔)function object undefind
undefined 出现的两种原因1.没定义 2.没给值 
显示类型转换(强制转换)parseInt()转换成数字 
遇到非数字就跳出 否则提示NaN Not a Number
isNAN() 判断是否为NaN
parseInt只可以转化为整数
parsefloat可以转化为小数
continue是跳过本次继续
隐式类型转换==
json:类似于数组和类 json={a:11,b:24,c:asd} json.a++
json没有length 就是一个数据集合 
数组的循环 for in 
for(var i in arr) 可以用于json 
==是先转化类型在比较 ===是不转换在比较
%求摸 就是取余

简单案例制作
秒转化成时间
判断是双数还是单数 利用三目运算 余数
利用switch接受 如果是男的提示男士你好 女的相反
利用&&和||还有!代表否 判断数字是否为两位数
练习!--------文本框输入两个数字点击按钮求和 弹出值
输入有误提示第几个有错
隔行变色 
不定参可以代替参数 runter代替argyments
练习!用argyments求和
作用域 全局 局部 闭包父函数子函数 就是子函数调用父函数的局部变量
取非行间样式(不能用来设置)currentStyle
getComputedstyle和currenstyle一样功能一个IE 一个火狐等
函数的封装

第四天

复合样式 比如background boeder float 

单一样式 比如width height 

---------------------------------------------------

数组的length可以设置 不如清空数组的数据就赋0就可以了

push()数组的尾部添加比如 var a=[1,2,3] a.push(4);

pop() 数组的尾部删除比如 var a=[1,2,3] a.pop(); 

shitf() 数组的头部删除

unshift()数组的尾部删除

splice(起点,删除)删除

splice(起点,长度,添加的东西)插入

splice(起点,删除,更改的东西)更改替换

concat 数组的连接 比如concat 数组1(数组2)

join 数组的连接符

sort 数组的排序 比如var a='[float','width','alpha']; a.sort();

数组数字的排序function () {retunr ni-n2}

----------------------------------------------------

定时器的使用

setInterval(函数,时间)会无限执行下去

setTimeout(函数,时间)会延迟执行一次

停止定时器

clearInterval

clearTimeout

日期对象Data-------------------------

var Odate=new Date();

alert(Odate.getHours());获取小时

getMinutes()获取分钟

getSeconds()获取秒钟

--------------offset------------------------ 

offsetLeft可以获取物体的左边距

offsetTop依次一样

offsetWidth

offsetHeight

----------------------------------------------

第五天
主要是学习的DOM
css里面是dom标签 js里面是控制dom元素 dom节点
文本节点.元素节点 
DOM 就是document
---------------------------
dom节点
获取子节点
childNodes 是一个数组存的是所有节点包括 文本节点 空节点 元素节点
nodeType 这个是节点类型 当他=3的时候是文本节点 =1是元素节点
children 只获取元素结点可以替代上面两个

获取父节点
parentNode 获取父节点
offsetParent 获取带有定位的父节点

首尾字节点
firstChild firstElementChild 获取首节点 兼容性问题
lastChild lastElementChild 获取尾节点

dom方式操作元素
setAttribute(参数名字,值); 设置元素的值如果只有一个值就是获取
removeAttribute(名称) 删除
className的使用

创建DOM元素
createElement(标签名) 创建一个节点
appendChild(节点) 追加一个节点
例子为ul插入li

插入元素
insertBefore(节点,原有节点) 在已有元素前插入
例子:倒叙插入li

删除DOM元素
removeChild(节点) 删除一个节点
例子:删除li

文档碎片 document.createDocumentFragment() 很少使用

第六天

元素运动 利用定时器实现

运动框架 在开始运动的时候要先关闭原来的定时器 然后if else

加速缓冲

Math.ceil(4.4)向上取整 结果是5Math.ceil(-5.6)结果-5

Math.floot(4.9)向下取整 结果是4

event对象和事件冒泡IE认识 ev火狐认识

clientX 和clientY坐标

事件流 事件冒泡

var Event =ev||event· 事件对象 兼容处理

oEvent.cancelBubble=true; 阻止冒泡 

onmousemove 鼠标移动事件

onkeydown 键盘按键按下事件

onkeup 键盘按键抬起事件

接着更新
lz学习js是第七天
首先要说一句抱歉。。由于lz在公司的静态页面已经搭建完了 公司要让我用asp做后台所以现在已经终止了对js的学习了 又要开始再次学习asp了 由于之前学asp的时候只是以了解的心态去学习的所以对asp只有一些概念上的了解我会在接下的内容中继续更新我的asp学习的一些进度和遇到的难题!
当然也不是放弃学习js asp里面也会用到js的
然后就是js学习的第七天
第七天啥也没看做了一个贪吃蛇没有食物的版本地图我是用LI画的 然后自己利用位置判断做了一个简单的墙壁碰撞提示 然后又制作了一个无缝滚动的特效 还有一些其他的很简单的特效 最后又把前面做过的而一些学过的特效大部分做了一遍 有一些没做完 现在公司要让我用asp做后端
包括一些分页技术之内的所以lz现在已经终止学习js了。。很可惜。。最后希望大家可以一起努力学习!
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: