有关弱类型意识、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(‘事件名’)