有关弱类型意识、DOM、动态语言与函数式编程

一、弱类型意识

 js变量是没有类型的

var a =1;   //a 就是一个变量  不要提类型

变量可以赋予任何类型的值，类型仅仅是值得性质  与变量无关

  js 的基本类型

变量未赋值时，其值为undefined

只有一个number类型表示数字，不区分整数还是小数

二、动态语言

动态语言针对不是变量，而是值！尤其是对象!

Var obj = {name:”yang”,age:3};
   //对象字面量

=后面的值是什么类型？

此时别提什么是弱类型，因为弱类型是针对变量的，此处问的是值是什么类型！

JS是动态语言，可以随意创建对象，而不需要有与之对应的类！

JS中没有类的概念（class）（ES6中新增加了class，但它实际上与java中的class是不一样的）

动态语言不仅可以随意创建对象，而且可以

随意向对象添加属性、方法等成员

向对象删除属性、方法等成员

这个特性对应java来说是不可想象的

三、函数式编程

  函数（方法）
可以作为参数传递给另一个函数  【函数也是值】

函数名实际上也是一个普通变量

普通变量也可以赋一个函数作为值

函数实际上是一个对象，这个对象中包含了它的源代码

函数名、以及调用这个源代码的方法

function add(a,b){

return a + b

}

add是变量吗？     是

函数是个对象吗？   是，函数是一个特殊的对象

 

原型

     原型存在的原因是因为JS中没有class，无法共享方法及静态成员

原型是一个容器（对象）可以存放被大量对象共享的方法及属性

JS定义了一条寻找属性/方法的规则：

先在对象本身上找，找到就使用，找不到就去原型中找，

原型中找不到就去原型的原型中找

...........

直到穷尽所有的原型为止（原型链）

DOM

Document Object Model 文档对象模型

实际就是给网页上的标签建立的模型，每一个都用一个对象来表示

每一个标签都是一个类

给网页上标签建模的目的是为了让JS能够以编程的方式控制、生成网页！

DOM是控制网页的API

  第一类API：获取标签对象

document.getElementById(“id”);

document.getElementsByTagName(“tagName”);

document.getElementsByName(“name”);

document.getElementsByClassName(“className”);

H5时代新增的2个方法

document.querySelector(CSS筛选器);   返回一个标签

document.querySelectorAll(CSS筛选器);
返回找到的所有标签

 

第二类API：操作标签的属性

tag.属性名 =
值;

Var value = tag.属性名;

tag.setAttribute(属性名，值);

var value =  tag.getAttribute(属性名);

 第三类API：控制标签的样式

tag.style.color=’red’;

tag.style.fontSize = ‘12px’;

错误写法：  tag.style.font-size

tag.style[‘font-size’] = ‘12px’

样式类

tag.classList.add(“样式类1”);    往上加

tag.classList.remove(“”)        去掉

tag.classList.toggle(“”)       没有就加上，有的话就去掉

tag.classList.contains(“”)     判断是否还有指定的样式类

第四类API：创建、添加、删除标签对象操作

var tag = document.createElement(标签名)

tag.属性名 =
值;

tag.setAttrribute(属性名,值);

parentTag.appendChild(tag); 追加到父标签中

tag.insertBefore();

tag.insertAdjecentElement(‘4种位置’, newTag);

tag.insertAdjecentHTML(‘4种位置’, html字符串);

tag.insertAdjectentText(‘4种位置’,文本字符串);

tag.remove();

第五类API：标签之间的关系

  tag.parentNode     上级标签

tag.children        下级标签

tag.childNodes      下级节点

tag.previousSibling    前面的兄弟标签

tag.nextSibling        后面的兄弟标签

   第六类API：监听事件

     鼠标事件

click(单击)  dblclick(双击)   context(右击)

mouseover(在上面)    mouseout(不在上面)

mouseenter(出进)   mouseleave(离开)

mousemove(移动)  mousewheel(滚动)

衍生出的拖拽事件：drag   dragstart   dragenter  dragleave   drop

衍生出的触控事件：touchstart   touchend   touchleave

键盘事件    

keyup(按键弹起)   keydown(按下不放手会连续触发)    keypress

窗口事件    

resize     close

 

打印相关事件、动画相关事件等

 

事件对象：当事件发生时浏览器会生成一个事件对象，将事件相关的数据都放到这个对象中，如哪个标签触发了事件
，事件发生时，鼠标的坐标位置，键盘按键的状态(ctrl、shift等是否按下，按下了哪个键)

 

监听事件：

    tag.on 事件名 = function(){

事件发生时会执行函数

}

//只能挂接一个监听函数

tag.addEventListener(‘事件名’,function(){

})

//可以为一个事件挂接多个个监听函数、

tag.removeEventListener(‘事件名’)