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);}