JavaSpcript基础

函数

代码的复用：写一遍多次使用》把特定的功能语句打包放在一起

语法：function 名字（0，1，1多个参数）{

执行的语句 }

返回值return，把语句返回给函数

例子：

function add（x，y）{

var z=x+y；

return z；

}

var rs=add（，）；

console.log（“+=”+rs）；

动态参数

function add（）{

      var z=0；

      for（var i=0；i<arguments.length；i++）{

      z + = arguments[i]；}

      return z

}

var rs=add (1,2,4,5,23);

console.log("1+2 4,5,23= "rs);

rs=add(3,4);

console.log("3+4= "+rs);

作用域：可访问变量的集合（对象、函数）

我们定义了一个变量，这个变量可以被使用的地府，可以使用的范围

var a=10；

全局作用域>全局变量>在函数外定义的变量>在所有地方都能被访问

局部作用域>局部变量>在函数里面的变量>函数里面被访问到

function add(){

y=100;//不设置var y=100的局部变量只设定y=100的时候 系统自动默认全

                                                                                          局变量

console.log("add():y="+y);

}

add();

console.log("全局y="+y)；

预解析：浏览器在获得JS文件的时候，不是立刻去执行代码，全篇快速扫描一遍

把变量预先解析

变量把变量的声明提前例如

console.log("x= "+x);

var x=10;

add();//函数也是变量

function add(){

console.log("add()");}

顺序不同也可以正常显示

但是如果在函数内部的全局变量加载顺序在console.log后面会报错。所以注意顺序

闭包：变量的私有化问题

<script type="text/javascript">//简化写法 函数声明和立即执行放在一起。

        var plus=(function() {

            var counter = 0;

            return function () {

                counter++;

                console.log("counter=" + counter);

            }

        })( );

        plus();

        plus();

        plus();

        console.log(counter);

对象

变量var

函数function：一对语句的集合

对象：一对变量+一堆函数的集合

var boj1={X：0，y:1，z：function（）{console.log（“”“”）；}}}

属性：名字：值。

名字：string：隐式转化为string

x123-> 可以不加引号

如果包含了特殊字符->必须加引号例如“first name”：“cc”

如果函数构造大体相同还可以创建类

例如var person2=new person（）；

对象：属性的基本操作：增加删除修改属性值查询获取属性的值遍历；

查询获取属性的点. [] 例子

var name = person1.name；->“xiaoming”只能用没有双引号的名称

name=person["name"];

name="xiaoming"

修改

person1["name"]="xiaoming2";

person1.name="xiaoming2";

增加：修改属性的时候，如果对象里面没有这条属性，自动加上

person1.height=170;

删除

delete person1.name

遍历：

for(var 属性名 in person1){

console.log("名"+pN);}

引用、自定义类

//定义了对象

//var person1 = {

      name:"xiaoming",

      sex:"male",

      age:"19",

      slogen:function(){

      console.log("w s x m");}}

//xiaohong 对象 人

//用类的形式创建对象

//人的类：class

//      var person2=new PersonClass（）；

//ES5 是 function -》ES6更新成class   F需要加（） C不需要加（）

//为了区分函数和类 类

function PersonClass(pName,pSex,pAge){

this.name="pName";

this.sex="pSex";

this.age="pAge"

this.slogan=function(){

console.log("w s"+this.name);}

}

//构造函数方式

var person1=new PersonClass("xiaoming","male","18");

var person2=new PersonClass("xiaohong","femle","15");

命名空间：多个人命名自己的创建的变量

var cc={}; cc.Age=100; cc可以是dd可以是ee，自己创建的

系统提供很多类->用的方法

//对象类自定义类

//对象和类

//对象var obj1={} //var obj2=new Object();//空的对象这两个创建的是同样的空对象

对象：值+方法

Object->打包最底层类

值万物都是对象+值+方法：类型转换

数字123 ->对象类型 Number

字符串“abc” String

布尔值true false Boolean

转换例子： var n1=123；var str1=n1.toString（）；更多的自己查属性词典

//时间相关；Date（）

//计算代码的性能：耗时

var time1=new Date（）；//获取了当前的时间本地电脑的时间

for（var i=0；<1000000；i++）{

t++；}

var time2=new Date（）；

var n=time2.getTime（）-time1.getTime();

*****Math -》数学相关 Math 对象并不像 Date 和 String 那样是对象的类，因此没有构造函数 Math()，像 Math.sin() 这样的函数只是函数，不是某个对象的方法。您无需创建它，通过把 Math 作为对象使用就可以调用其所有属性和方法。

随机数

Math.random()

DOM弹窗（浏览器的弹窗）

同步：阻断

alert（）弹窗直接弹出

confirm（）boolean类型弹窗，确定为ture 取消为false 例子如下

//var bcf=confirm（“confirm弹窗”）；

//console.log("点击："+baf)

//if（bcf）{提交}else

prompt（）

//var strpt=prompt（“prompt 输入：”，“默认是CC”）；

console.log（“填了：”+strpt）；

浏览器的导航栏的信息

//window.location 对象

//属性：url的各个部分

//location.href;

//location.toString()

//刷新页面，打开新的页面例子：

//var bcf=confirm("confirm弹窗")；

//if（bcf）{location.replace（“http：//www.baidu.com/”）}

//else location.reload();

浏览器的历史记录：前进后退

history

浏览器的信息：版本厂家

navigator

//计时器

循环执行：var sil=setInterval（函数名，时间）；意识是每隔多少时间执行一次函数

停掉：clearInterval（sil）；

一次执行：var sil=setTimeout（函数名，时间）；

clearTimeout（sil）；

例子 var num=0；

function add（）{

console.log("num="+ ++num);}

var sil = setInterval(add,1000);

function end(){

console.log("setTimeout clearInterval");

clearInterval(sil);}

setTimeout(end,10000);

Dom - > 文档对象模型

Dom树：

html文件 -》人 - 》网页的数据

浏览器 -》数据结构 - 》方便查找修改遍历

样子 - 》树

DOM树

数据结构：

线性：单链表循环列表队列栈数组

树形：二叉树平衡树红黑树

网状：有向图无向图 - 》寻路算法 A*算法

DOM树

document 节点：只有一个

标签节点元素节点：

文本节点：

标签节点元素节点：样子样式

找到这些节点

3中最常用的方法：

1通过ID来查找

2通过标签名来查找

3通过class来查找

// ID-》唯一性：

var p1 = document.getElementById("p1");

// JS时间线

var ps = document.getElementsByTagName("p1");//返回数组

var p1 = ps[ 0 ];节点

var ps = documentgetElementsByClassName("txt");//返回数组

ps【0】节点

******三个方法的区别：

1 ID -》节点

Tag（标签）Class -》数组

1.1 id-》document.getElementById只能用document来获取

Tag Class-》在标签任意节点上使用

创建节点，添加到DOM树删除节点

var div1 = document.getElementsByTagName("div1");

//创建一个标签

var p1 = document.createElement("p");创建标签类节点

//创建一个文本节点

var ptxt = document.creatTextNode("p1");创建文本类节点

p.appendChild(p1txt)；需要添加的节点

//添加节点

div1.appenChild（p）；父节点

//删除节点

removeChild（）；

例子删除div2

var div2 = document.getElementById("div2");

div1.removeChild(div2);

同样也可以用父节点元素进行删除操作

div2.parentNode.removeChild（div2）；

对节点的属性内容

html定义好的属性用点 . 对象的点获取修改

var img1 = document.getElementById("img1");

img1.id 通过获取img1 可以进行加. 进行修改

//class 因为在JS中是关键词类所以要用className地台

//img1.className=

//CSS样式的修改在style后面可以加·在加属性进行修改

例如：img1.style.width=“100px”

//获取属性修改自己创建的例如ID属性

img1.getAttribute("dat");

getAttribute()

ing1.setAttribute("dat(属性的名字)","1（属性的值）")

常用的操作属性：

getAttribute("") setAttribute("") removeAttribute("")

更改节点中文字或者其他例如<p id="p1"> p1 </p>中的p1文字里面可以添加任何东西也可以加超文本链接等等

var p1 = document.getElementById("p1");

p1.inner（ID=P1标签内的所有内容）HTML（代表格式） = "这是innerHTML"；

如果想单纯添加文字内容用 textContent

什么是事件：

JS-》交互人可以去操作界面

js -》事件驱动的方式

用户-》操作html元素-》产生一个事件-》事件主动的调用设定方法函数

事件源：产生事件的地方

事件的类型：点击键盘

事件对象：记录好信息

事件的处理程序：函数

两种方式：

1 html的属性：

属性名：on+时间的名字 onclick

属性值：方法

直接在html设定

通过js的元素对象来设定

点击事件例子：

var num =0;

function add(){

console.log("点击："+ ++num)；}

var div1 = docume.getelemengtById（“div1”）；

div1.onclick=add；

也可以删除 div1.onclick=null;

2 通过调用系统提供的方法

div1.addEventlistener(事件类型click，函数add，事件的处理方式可以不屑类型是布尔类型)

//事件函数：发生的时候-》操作 function

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

div1.addEventlistener("click",add);

事件对象 event:提供了事件的详细信息;

具体发生事件的元素,鼠标的位置,点击的状态,键盘的按键

function add(event){

console.log("事件函数");}

// var e = event || window.event; // IE8采用的方法

console.log（event）；

//想要取消默认打开的超链接页面

event.preventDefault(); 用对象方法时用这个

//return false；用on来绑定事件函数的时候用这个

}

var a1=document.getElementById("a1");

a1.addEventListener(“click”，add)；

//用绑定方法也可以替代上两行代码。取消默认方法时return false；

a1.onclick=add;

上述js代码相对应的Html代码是

<body>

<div id = "div1">div1</div>

      <input type="text" name="a" id="input1">

      <script src="19.js"></script>

      <a herf="http:www.baidu.com" target="_blank" id="a1">

              百度</a>

</body>

事件的传播：

多个标签，相互嵌套的，点击页面的时候，点击事件

是不是被点中的标签才会发生点击时间（在html文件中 div2的父元素是div1）

var div1 = document getElementById("div1");

var div1 = document getElementById("div2");

div1.addEventListener("click",div1click)；

div1.addEventListener("click",div2click)；

function div1Click（）{console.log（“div1 click”）}；

function div1Click（）{console.log（“div2 click”）}；

事件的传播：

在默认的情况下，点击页面的一个标签，处在传播路径上的标签都会监听到对应的事件

传播路径：就是dom树的分层结构图。结构下的都可以获取到

事件流：对应标签接受到事件的顺序

两大阶段：

捕获阶段：从起始点》目标阶段

冒泡阶段：目标位置》起始位置

例如head1.addEventListener（“click”，head1Click，事件的传播，false or true）

false》head1Click 对应的函数会在冒泡阶段执行

ture》 head1Click 对应的函数会在捕获阶段执行

H5文件

<head><style>

#div1{ width：200px；height：200px；background：green；}

#div2{margin-left：200px； width：100px；height：100px；background：red；}</style></head>

<body>

<div id="div1">div1<div id="div2">div2</div></div>

<script src="20.js"></script>

<ul>

<li>li1</li>

<li>li2</li>

<li>li3</li>

<li>li4</li>

<li>li5</li>

</ul>

</body>

JS文件

var div1 = document getElementById("div1");

var div1 = document getElementById("div2");

//捕获阶段

div1.addEventListener("click",div1clicktrue，true)；

div1.addEventListener("click",div2clicktrue，true)；

function div1Clicktrue（）{console.log（“捕获阶段 div1  click”）}；

function div1Clicktrue（）{console.log（“捕获阶段 div2  click”）}；

//冒泡阶段

var div1 = document getElementById("div1");

var div1 = document getElementById("div2");

div1.addEventListener("click",div1click，false)；

div1.addEventListener("click",div2click，false)；

function div1Click（）{console.log（“冒泡阶段 div1  click”）}；

function div1Click（）{console.log（“冒泡阶段 div2  click”）}；

//冒泡阶段事件代理利用冒泡流程机制

var ul1=document.getElementsByTagName("ul")[];

ul1.addEventListener("click",ulClick);

function ulClick(event){

          console.log(event.target);}

巴特西

JavaSpcript基础

最新文章

热门文章