zoukankan      html  css  js  c++  java
  • 有关弱类型意识、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(‘事件名’)

  • 相关阅读:
    cobalt strike
    php学习
    windows免费?linux免费?赶紧过来看吧
    python实现文件加密
    python写一个能生成三种一句话木马的脚本
    hardentools
    TensorFlow实战——个性化推荐
    对比深度学习十大框架:TensorFlow 并非最好?
    YCSB性能测试工具使用(转)
    Python文件夹与文件的操作(转)
  • 原文地址:https://www.cnblogs.com/yangxiansen/p/7860015.html
Copyright © 2011-2022 走看看