Java菜鸟学习日记32

JS编程思想

弱类型意识

• JS中的变量是没有类型的
• 变量可以赋任何类型的值，类型仅仅是值的性质，与变量无关
• 基本类型
  • 变量未赋值时，其值为undefined
  • 只有一个number类型表示数字，不区分整数还是小数

动态语言

• 动态语言针对的不是变量，而是值！尤其是对象
  • var obj = {name:"changwei",age:3}：对象字面量
  • JS是动态语言，可以随意创建对象，而不需要有与之对应的类。JS中没有class（ES6中新增加了class，但它实际上与Java中的class是不一样的）
• 动态语言不仅可以随意创建对象，而且可以随意向对象添加属性、方法等成员。还可以从对象中删除属性及方法。这个特性对于Java来说是不可想象的

函数式编程

• 函数（方法）可以作为参数传递给另一个函数【函数也是值】
  • 函数名实际上也是一个普通变量
  • 普通变量也可以赋一个函数值
• 函数实际上是一个对象，这个对象中包含了它的源代码、函数名、以及调用这个源代码的方法

原型

• 原型存在的原因是因为JS没有class，无法共享方法及静态成员。
• 原型是一个容器（对象）可以存放被大量对象共享的方法及属性
• JS定义了一条寻找属性或方法的规则：
  • 先在对象本身寻找，找到则使用，找不到就去原型中找，找则用，找不到继续找，直到穷尽所有原型为止（原型链）

DOM（Document Object Model：文档对象模型）

• 实际就是给网页上的标签建立的模型
  • 每一个标签都用一个对象来表示
  • 每一类标签都是一个类
• 给网页上的标签建模的目的是为了让JS能够以编程的方式控制、生成网页
• DOM是控制网页的API
  • 第一类API：获取标签对象
    • document.getElementBuld("id");
    • document.getElementsByTagName("tagName");
    • document.getElementsByName("name");
    • document.getElementsByClassName("className");
    • H5时代新增的两个方法
      • document.querySelectot(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 = '12px';
    • tag.style[font-size] = '12px';
    • 样式类
      • tag.className = "样式类1 样式类2"
      • tag.classList.add(“样式类1”)：往上加
      • tag.classList.remove("");：去掉
      • tag.classList.toggle("");：没有的话就加上去，有的话就去掉
      • tag.classList.contains("");：判断是否有指定的样式
  • 第四类API：创建、添加、删除标签对象的API
    • var tag = document.createElement(标签名);
      • tag.属性名 = 值;
      • tag.setAttribute(属性名，值);
      • parentTag.appendChild(tag);：追加到父标签中
      • tag.insertBefore();
      • tag.insertAdjecentElement('四种位置',newTag);
      • tag.insertAdjecentHTMLL('四种位置',html字符串);
      • tag.insertAdjecentText('四种位置',文本字符串);
      • tag.remove();
  • 第五类API：标签之间的关系
    • tag.parentNode：上级标签
    • tag.children：下级标签
    • tag.childNodes：下级节点
    • tag.previousSibling：前面的（兄弟）同级标签
    • tag.nextSibling：后面的（兄弟）同级标签
  • 第六类API：事件监听
    • 鼠标事件
      • click：单击
      • delclick：双击
      • context：右击
      • mouseover：在上面
      • mouseout：不在上面
      • mouseenter：进入标签范围（标签遮盖，在上面不一定进入范围）
      • mouseleave：出去标签范围
      • mousemove：移动
      • mousewheel：滚轮
      • 衍生出的拖拽事件
        • drag：拖拽
          • dragstart：
          • dragenter：
          • dragleve：
          • drop
      • 衍生出的触控事件
        • touch：触控
          • touchstart：
          • touchenter：
          • touchleve：
    • 键盘事件
      • keyup：按键弹起
      • keydown：按下，不放手会连续触发
      • keypress：
• 窗口事件
  • resize：窗口尺寸变化
  • close：窗口关闭
• 打印相关事件
• 动画相关事件
• 事件对象：当事件发生时浏览器会生成一个事件对象，将事件相关的数据都放入到这个对象中，如那个标签触发了事件，事件发生时，鼠标的坐标位置，键盘按键的状态(ctrl、shift等是否按下，按下了那个键)
• 监听事件：
  • tag.on 事件名 = function(){

事件发生时会执行函数

}

只能挂接一个监听函数

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

})

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

• • tag.removeEventListener(‘事件名’)
  •