JavaScript 学习总结

JavaScript 学习总结

第一章 认识JavaScript

1,JavaScript是什么

JavaScript是一种可以用来给网页增加交互性的编程语言。

脚本语言(Scripting language)

<script> </script>标签

包含在HTML页面内部(通常放在<head>部分)

存储在外部文件中<script src=“外部文件名”>

2,Java和Javascript区别

Java和Javascript的区别就像印度和印度尼西亚的区别,名字中有点相同的东西。

3,关于Ajax

Ajax(Asynchronous Javascript XML)异步JavaScript和XML:是一种创建交互式网页应用的网页开发技术。

包括技术

XHTML

CSS

使用JavaScript访问DOM

XML

XMLHttpRequest

4,JavaScript与面向对象

对象、属性和方法组合在一起:点号语法(的)

document.getElementById('div1').style.display

5,处理事件

事件(event):用户在访问页面时执行的操作。

例如:

当鼠标移入时,display属性取值block;鼠标移出时dispay属性取值为none。

onmouseover="document.getElementById('div1').style.display='block';" onmouseout="document.getElementById ('div1').style.display='none';" 

div和span:标识范围

div:块级元素,元素周围自动换行

span:行内元素,前后不会换行

class和id选择器区别

class样式可以使用多次,id样式只能使用一次,id选择器的优先级大于类别选择器

6,值和变量

typeof检测变量类型   

用法:alert(typeof a);

undefined类型:未定义;或者虽然定义了但未赋值。

什么叫Object?

简单解释:不是基本类型,是复合类型。除了number(整数、实数),string,boolean,undefined,其他的都是Object。

注意:

JavaScript区分大小写。

变量值: JavaScript弱类型。规范:一个变量应该只存放一种类型的数据。

==:先把两边的东西转成一样的类型,然后再比较(隐式类型转换)

===:不转换,直接比较

加法:字符串连接、数字加法。优先选择第一种。

命名规范及必要性

可读性——能看懂

规范性——符合规则(字母数字下划线$,不能以数字开头)

匈牙利命名法

类型前缀

首字母大写

例如:alert(parseInt(n/60)+'分'+n%60+'秒'); parseInt将字符串转换成整数

赋值:=、+=、-=、*=、/=、%=

关系:<、>、<=、>=、==、===、!=、!==

逻辑:&& 与、|| 或、! 否

运算符优先级:括号

7,结构,表现和行为(这是核心)

结构、表现和行为相分离

HTML(结构):包含页面的内容和结构

CSS(表现):控制页面的外观和表现

JavaScript(行为):控制页面的行为

例子:

在页面中使用CSS样式表

<link id="link1" href="css1.css" rel="stylesheet" type="text/css" />

单击事件:onclick

onclick="document.getElementById('link1').href='css1.css';" 

将行为分离出来(把JS代码放在标签里,放在行间,代码可读性差,修改起来工作量过大。)

window.onload=function(){

var oBtn1 = document.getElementById('btn1');

oBtn1.onclick=function(){

document.getElementById('link1').href='css1.css';

}

var oBtn2 = document.getElementById('btn2');

oBtn2.onclick=function(){

document.getElementById('link1').href='css2.css';

}

}

将JavaScript代码写在.js文件中

<script src="changeskin.js"/>

补充:

取值用value

alert(oTxt1.value+oTxt2.value);

关于NaN的手册信息:NaN  not a number

var a=parseInt('abc');

var b=parseInt('aaa');

alert(a==NaN);   //false

alert(a==b);  //false

处理:isNaN()函数

var a=parseInt('abc');

alert(isNaN(a));  //true

变量作用域(作用范围)

局部变量:只在本函数内使用。

全局变量:不定义在任何一个函数里,可以在任何地方使用(尽量不要使用全局变量)

什么是闭包

子函数可以使用父函数中的局部变量

实例:隔行变色(aLi相当于数组,aLi.length是表示数组里面有多少元素)

例子:

<script>

window. (){

var oUl=document.getElementById('ul1');

var aLi= oUl.getElementsByTagName('li');

var i=0;

for(i=0;i<aLi.length;i++){

if(i%2==0) { //0,2,4,6,8,10...

        aLi[i].style.background='#CCC';

}

}

};

</script>

</head>?

<body>

<ul id="ul1">

<li></li>

<li></li>

<li></li>

<li></li>

<li></li>

<li></li>

<li></li>

</ul>

</body>

综合总结如下:

js的组成:

ECMAScript

DOM:操作文档(页面)

BOM:操作窗口

关于变量:

var 

typeof():number,string,boolean,object,undefined,null,function

关于运算:

隐式:==,-

显式: parseInt/NaN

==/===

关于事件:

事件的处理不放在行间

window.onload=function(){...}

元素名.事件名 =function(){...}

获取元素:

getElementById(元素的id名字) 

getElementsByTagName("")  按标签名字取-〉数组

数组.length

关于数组:

数组.sort()

字符串.split(解析分隔符)

数组.join(元素之间的连接符)

关于样式:

style.display=block/none

style.background=颜色

复选框.checked=true/false

结构、表现、行为相分离:

1、布局---html

2、样式---<link   href=""  >  (.css)

   <style>

   </style>

3、js

   <script> </script>  (<head>)

   <script src="">  (.js)

文本转换为数字的方法

    parseInt

    parseFloat

原理:从最左侧的字符开始,到第一个不是数字的字符为止(即使文本中包含非数字,也可以转化)

    当不能转化时,返回一个NaN

判断NaN的方法: 使用isNaN()函数

第二章,程序流程控制,数组,函数

1,什么是真、什么是假:

真:true、非零数字、非空字符串、非空对象

假:false、数字零、空字符串、空对象、undefined

2,分支

if

switch

?:

3,循环

while

for

do-while

for…in:通常用来枚举对象的属性

例子:

<script type="text/javascript">

window.onload=function(){

var oBtn = document.getElementById('btn');

var aInput=document.getElementsByTagName('input');  //通过标签名获取元素

?

oBtn.onclick=function(){

//alert(aInput.length);

for(var i=0; i<aInput.length; i++)

aInput[i].checked=true;

}

};

</script>

4,数组

数组的定义

使用Array关键字定义

例如:var arr=new Array();

             var arr=new Array(1,2,3,4);

使用[]定义

例如:var arr=[1,2,3,4]

数组的属性

数组的长度:length属性

数组的方法

push:向数组尾部添加元素

pop:从数组尾部弹出一个数据

shift:从数组头部删除一个元素

unshift:向数组头部添加一个元素

sort:排序

排序规则:字母序对字符串进行排序

比较函数

concat:连接两个数组

split:解析字符串为数组

join:输出数组时元素之间的分隔符

例子:

数组的排序,从小到大排序

<script type="text/javascript">

var arr=[96, 8, 12, 72, 33, 118];

arr.sort(function (num1, num2){

return num1-num2;

});

alert(arr);

</script>

5,函数

函数的返回值

没有return/return ;:undefined

规则:令一个函数只返回一种类型的值

函数的参数

一般的参数:

参数类型

参数个数

arguments:参数数组,可变参,不定参

例子:

<script type="text/javascript">

function show(){

alert(arguments[1]);

}

show(12, 5);

</script>

上面会显示5,数组里面的第2个元素

例子:

模拟“重载”的处理

<script type="text/javascript">

function sum(){

var result=0;

var i=0;

for(i=0;i<arguments.length;i++){

result+=arguments[i];

}

alert(result);

}

sum(12, 5, 7, 8, 12, 5, 7, 8, 12, 5, 7, 8, 12, 5, 7, 8, 12, 5, 7, 8, 12, 5, 7, 8, 12, 5, 7, 8, 12);

</script>

6,CSS函数

css(‘background’)

css(‘background’,’red’);

第三章,DOM(Ducument Object Model)

1,获取节点

getElementById

获取子节点:childNodes

子节点的个数

操作子节点

例子:

window. (){

var oUl=document.getElementById('ul1');

oUl.childNodes[0].style.background=yellow';//ul的第一个子节点,也就是下面的li

}

2,检测节点的类型

nodeType

元素节点:1

文本节点:3

属性节点:2

例子:

<script type="text/javascript">

window. () {

alert(document.body.childNodes[1].nodeType);

}

</script>

3,父节点parentNode

父节点只有一个

例子:隐藏父节点

window. (){

var aA=document.getElementsByTagName('a');

var i=0;

for(i=0;i<aA.length;i++) {

aA[i]. () {

this.parentNode.style.display='none';

}

}

}

this:指向调用该方法或属性的对象。

4,offsetParent

获取当前元素用于定位的父节点

5,子节点

firstChild,firstElementChild

lastChild, lastElementChild

例子:

window. (){

var oUl=document.getElementById('ul1');

//IE低版本

//oUl.firstChild.style.background='red';

//FF,IE11

//oUl.firstElementChild.style.background='red';

var oFirst=oUl.firstElementChild||oUl.firstChild;

oFirst.style.background='red';

}

6,DOM元素的查找

用id选择元素

用tagName选择元素

用className选择元素

选出所有元素

利用if做筛选

封装为函数

function getByClass(oParent, sClass){

var aEle=oParent.getElementsByTagName('*');

var aResult=[];   //可能存在多个,放在数组中

var i=0;

for(i=0;i<aEle.length;i++) {

if(aEle[i].className==sClass){

aResult.push(aEle[i]);

}

}

return aResult;

}

window. (){

var oUl=document.getElementById('ul1');

var aBox=getByClass(oUl, 'box');

var i=0;

for(i=0;i<aBox.length;i++){

aBox[i].style.background='yellow';

}

}

7,创建、插入和删除元素

创建DOM元素

createElement(标签名) 创建一个节点

appendChild(节点)

追加一个节点

例子:为ul插入li

window. (){

var oBtn=document.getElementById('btn1');

var oTxt=document.getElementById('txt1');

var oUl=document.getElementById('ul1');

oBtn. () {

var oLi=document.createElement('li');

oLi.innerHTML=oTxt.value;

oUl.appendChild(oLi);

}

}

InnerHTML是一个标签内部的东西

<div  id="div1">

   这里是标签内部的东西,存储在innerHTML中

</div>

插入元素

insertBefore(节点, 原有节点) 在已有元素前插入

例子:倒序插入li

window. (){

var oBtn=document.getElementById('btn1');

var oTxt=document.getElementById('txt1');

var oUl=document.getElementById('ul1');

oBtn. () {

var oLi=document.createElement('li');

var aLi=oUl.getElementsByTagName('li');

oLi.innerHTML=oTxt.value;

if(aLi.length==0){

oUl.appendChild(oLi);

}

else{

oUl.insertBefore(oLi, aLi[0]);

}

}

}

删除DOM元素

removeChild(节点) 删除一个节点

例子:删除li

window. (){

var aA=document.getElementsByTagName('a');

var oUl=document.getElementById('ul1');

var i=0;

for(i=0;i<aA.length;i++) {

aA[i]. () {

oUl.removeChild(this.parentNode);

}

}

}

第四次课 处理事件

1,在document上加事件

document. (){

alert('a');

}

2,从event对象获取点击坐标(考虑到不同浏览器的兼容性问题)

document.onclick=function(ev){

if(ev){

alert(ev.clientX+","+ev.clientY);

}else{

alert(event.clientX+","+event.clientY);

}

}

3,或运算

非0---true   0/null/false

12 || false   12

0 || ’abc’    ‘abc’

‘’ || true     true

12 || 0         12

12 || null    12

null || ’abc’    ‘abc’

‘abc’ || 12      ‘abc’

利用或运算处理浏览器兼容性

document. (ev){

var oEvent=ev||event;       //将特殊的放在前面

alert(oEvent.clientX+', '+oEvent.clientY);

};

4,事件流

事件像冒泡一样从DOM层次结构的底层往上一级级升

事件处理:避免事件冒泡带来的干扰

window. (){

var oBtn=document.getElementById('btn1');

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

oBtn. (ev){

var oEvent=ev||event;

oDiv.style.display='block';

oEvent.cancelBubble=true;   //阻止冒泡

};

document. (){

oDiv.style.display='none';

};

};

5,鼠标事件

鼠标位置

document. (ev)

{

var oEvent=ev||event;

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

oDiv.style.left=oEvent.clientX+'px' ;

oDiv.style.top=oEvent.clientY+'px' ;

};

滚动位置

鼠标跟随改进:

document. (ev){

var oEvent=ev||event;

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

var scrollTop =document.documentElement.scrollTop  || document.body.scrollTop;

        var scrollLeft=document.documentElement.scrollLeft || document.body.scrollLeft;

oDiv.style.left=oEvent.clientX+scrollLeft+‘px’ ;  //横向滚动处理

oDiv.style.top=oEvent.clientY+ scrollTop +‘px’ ;  //纵向滚动处理

};

6,键盘事件

对比鼠标事件:onclick=onmousedown+onmouseup

键盘事件:onpress= onkeydown+onkeyup

键值keycode

document.onkeydown=function (ev){

var oEvent=ev||event;

alert(oEvent.keyCode);

}

offsetWidth: div的宽度

border:1px;            +

padding(内边距):10px    +

margin(外边距):20px      -

offsetLeft:div的左边距

offsetTop

offsetRight

键盘控制移动:上下左右移动

document.onkeydown=function (ev){

var oEvent=ev||event;

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

if(oEvent.keyCode==37){//左

oDiv.style.left=oDiv.offsetLeft-10+'px';

}else if(oEvent.keyCode==39) {

oDiv.style.left=oDiv.offsetLeft+10+'px';

}else if(oEvent.keyCode==38) {

oDiv.style.left=oDiv.offsetTop-10+'px';

}else if(oEvent.keyCode==40) {

oDiv.style.left=oDiv.offsetTop+10+'px';

}

};

使用鼠标点击留言:

window. (){

var oBtn=document.getElementById('btn1');

var oTxt1=document.getElementById('txt1');

var oTxt2=document.getElementById('txt2');

oBtn. () {

oTxt1.value+=oTxt2.value+'\n';

oTxt2.value='';

};

};

Enter键留言:

window. (){

……

oTxt2.onkeydown=function (ev){  //注意加事件的对象

var oEvent=ev||event;

if( oEvent.keyCode==13){

oTxt1.value+=oTxt2.value+'\n';

oTxt2.value='';

}

};

};

ctrl+enter提交:

window. (){

……

oTxt2.onkeydown=function (ev){  //注意加事件的对象

var oEvent=ev||event;

if( oEvent.ctrlKey  && oEvent.keyCode==13){

oTxt1.value+=oTxt2.value+'\n';

oTxt2.value='';

}

};

};

7,默认行为

什么是默认行为?

不需要自己编写,浏览器自己即具备的功能。

右键打开快捷菜单(oncontextmenu事件(上下文菜单):右键菜单)

文本框输入

表单提交

阻止默认行为的一般的写法:return false

弹出自定义右键菜单:

document.oncontextmenu=function (ev){

var oEvent=ev||event;

var oUl=document.getElementById('ul1');

var scrollTop =document.documentElement.scrollTop  || document.body.scrollTop;

               var scrollLeft=document.documentElement.scrollLeft || document.body.scrollLeft;

oUl.style.display='block';

oUl.style.left= oEvent.clientX+scrollLeft+‘px’ ;;

oUl.style.top= oEvent.clientY+ scrollTop +‘px;

return false;  //阻止系统右键菜单

};

弹出自定义右键菜单:

document. (){

var oUl=document.getElementById('ul1');

oUl.style.display='none';

};

8,拖拽

存储距离

onmousemove:根据距离计算DIV最新位置

<script>

window. ()

{

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

var disX=0;

var disY=0;

oDiv. (ev)

{

var oEvent=ev||event;

disX=oEvent.clientX-oDiv.offsetLeft;

disY=oEvent.clientY-oDiv.offsetTop;

document. (ev)//放在onmousedown事件下,防止鼠标移出去

{

var oEvent=ev||event;

var l=oEvent.clientX-disX;

var t=oEvent.clientY-disY;

if(l<0)

{

l=0;

}

else if(l>document.documentElement.clientWidth-oDiv.offsetWidth)

{

l=document.documentElement.clientWidth-oDiv.offsetWidth;

}

if(t<0)

{

t=0;

}

else if(t>document.documentElement.clientHeight-oDiv.offsetHeight)

{

t=document.documentElement.clientHeight-oDiv.offsetHeight;

}

oDiv.style.left=l+'px';

oDiv.style.top=t+'px';

};

document. ()

{

document.onmousemove=null;

document.onmouseup=null;

};

return false;

};

};

</script>

最后总结:

1、事件对象--注意兼容性

   function(ev)

   var oEvent = ev ||event;

2、事件流  

   父节点,子节点 相同事件

   oEvent.cancelBubble=true; 阻止事件冒泡

3、鼠标事件

   鼠标点击位置:

   oEvent.clientX  鼠标距可视区的左边距

   oEvent.clientY  鼠标距可视区的上边距

   带滚动条的滚动位置(注意兼容性):

   var scrollLeft = document.documentElement.scrollLeft || document.body.scrollLeft;

   var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;

   div定位: oDiv.style.left= scrollLeft+oEvent.clientX +'px';

             oDiv.style.top = scrollTop+oEvent.clientY +'px';

4、键盘事件 

   oEvent.keyCode

   取值:测试

   常用取值:13--回车

第5次课  BOM

1,打开窗口

window.open(页面地址, 打开方式);

打开方式:在哪个框架中打开?

_blank:新窗口,默认

_self:当前窗口

例子:

oBtn. (){

window.open(‘ www.126.com/', '_self');

};

运行代码:

document.write():向页面输出内容

举例:document.write(‘aaa’);  

运行并查看页面源代码

window. (){

var oTxt=document.getElementById('txt1');

var oBtn=document.getElementById('btn1');

oBtn. () {

var oNewWin=window.open('about:blank');

oNewWin.document.write(oTxt.value);

};

};

<body>

<textarea id="txt1" rows="10" cols="40"></textarea><br />

<input id="btn1" type="button" value="运行" />

</body>

2,关闭窗口

window.close()

window. (){

var oBtn=document.getElementById('btn1');

oBtn. () {

window.close();

};

};

<body>

<input id="btn1" type="button" value="关闭" />

</body>

3,常用属性

window.navigator.userAgent:浏览器版本号

window.location:当前页面地址

读  

alert(window.location);

window.location='http://www.126.com/'

4,系统对话

var b = confirm('今天下雨了吗?');

alert(b);

var str = prompt('请输入你的姓名', ‘song');

alert(str);

5,尺寸及坐标

可视区尺寸

document.documentElement.clientWidth

document.documentElement.clientHeight

滚动距离

document.body.scrollTop

document.documentElement.scrollTop

侧边栏例子:

window.onscroll=function (){

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

var scrollTop=document.documentElement.scrollTop||document.body.scrollTop;

var t=(document.documentElement.clientHeight-oDiv.offsetHeight)/2;

oDiv.style.top=scrollTop+t+'px';

};

<style>

#div1 {width:100px; height:100px; background:red; position:absolute; right:0;}

</style>

需要解决的问题

页面刚加载

页面大小改变

window.onresize=window.onload=……接上面,这样无论怎样都可以居中右靠

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏JavaEdge

全面入门jQuery最佳实践(二)-jQuery的属性与样式1 .attr()与.removeAttr()2 html()及.text()

每个元素都有一个或者多个特性,这些特性的用途就是给出相应元素或者其内容的附加信息。如:在img元素中,src就是元素的特性,用来标记图片的地址。

1073
来自专栏小狼的世界

CSS3 Transition介绍

CSS3提供了一种全新的方式来定义CSS属性改变时的过渡效果,通常在:hover、:focus的条件下触发。过去,为了实现这种平滑的过渡效果,我们需要借助于Fl...

942
来自专栏码洞

Go 语言切片的三种特殊状态 —— 90% 的开发者都忽视了

我们今天要来讲一个非常细节的小知识,这个知识被大多数 Go 语言的开发者无视了,它就是切片的三种特殊状态 —— 「零切片」、「空切片」和「nil 切片」。

902
来自专栏小壮和前端

js写2048游戏代码

3402
来自专栏九彩拼盘的叨叨叨

学习纲要:ES6系列:箭头函数和对象方法简写

882
来自专栏码洞

《快学 Go 语言》第 5 课 —— 神奇的切片

切片无疑是 Go 语言中最重要的数据结构,也是最有趣的数据结构,它的英文词汇叫 slice。所有的 Go 语言开发者都津津乐道地谈论切片的内部机制,它也是 Go...

752
来自专栏mini188

学习笔记 :DrawText

最近在做一个TStringGrid的自绘处理,在画文字处理上遇到了高度的计算问题。后来经过一段时间还是找到了一些方法: 1、使用TLabel   这个方法是有点...

2575
来自专栏xingoo, 一个梦想做发明家的程序员

【web必知必会】—— DOM:四个常用的方法

 终于开始复习DOM的知识了,这一阵忙乎论文,基本都没好好看技术的书。   记得去年实习的时候,才开始真正的接触前端,发现原来JS可以使用的如此灵活。 ...

1945
来自专栏JavaEdge

深入了解React.js的JSX1 JSX 与HTML2 JSX 和HTML 的不同之处

2265
来自专栏JadePeng的技术博客

MarkDown 常用语法教程

MarkDown 语法说明 [TOC] 标题 标题1 ====== 标题2 ----- ## 大标题 ### 小标题 #### 小标题 列表 无序列表 ...

2754

扫码关注云+社区

领取腾讯云代金券