有关弱类型意识、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

 

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

 

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

 

监听事件:

    tag.on 事件名 = function(){

   事件发生时会执行函数

}

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

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

})

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

tag.removeEventListener(‘事件名’)

posted on 2017-11-19 15:56  杨先森的博客  阅读(185)  评论(0编辑  收藏  举报

导航