[JS] JavaScript由浅入深(1) 基本特性

1.全局变量的特性:

  在函数体内直接写的变量(未用var标志)自动升级为全局变量。

        (function func() {
            i = 100;
        }());
        alert(i);

  非常不建议不写var.

        var num = 1;
        (function func() {
            i = 100;
        }());
        delete i;
        delete num;
        if (typeof i != "undefined") alert(i);
        if (typeof num != "undefined") alert(num);

  

2.DOM操作

  a.什么是DOM(Document Object Model),文档对象模型。包括元素节点,文本节点,属性节点和注释节点。

  b.DOM操作:

        HTML:write(),innerHTML,innerText,getElementById()

        CSS:

    <div>text</div>
    <script>
        var e = document.getElementsByTagName(‘div‘)[0];
        e.style.background = ‘blue‘;
    </script>

        Event:事件有4种添加方式。

        所有事件:事件

3.异常:

try {
     throw ‘exception happend‘;
} catch (e) {
      alert(e);
}

  

4.类型:

  JS中5种基本类型:string number boolean undefined null  和一个复杂类型:object

  注意:

    typeof null 是object。

    因为null类型只有一个值null,null即代表一个类型,又代表一个空对象的指针。

    因为undefined类型只有一个值undefined,undefined代表一个类型,又代表一个未定义的变量.

  

    typeof Object 是function

    Object Function String都是构造函数。(推荐以后构造函数名Pascal命名,方法Camel命名)

5.内置对象

  JS中有7个Number String Date Array Boolean Math RegExp默认构造函数。通过new关键字,可以定义对应的对象。

   注意:

    prototype是用来向对象添加属性和方法。

    constructor是指向函数本身的指针。

6.事件

事件流:

  事件流是指在页面中接受事件的顺序。

  事件冒泡指从最具体的节点到最不具体的节点,事件捕获和事件冒泡完全相反。

事件对象:

  触发DOM事件时,会产生事件对象。

  type:事件类型      target:相当于sender      stopPropagation():阻止事件冒泡    preventDefault():阻止事件默认行为(如:a标签默认点击跳转事件)

添加事件:

  addEventListener(事件名,函数,是否冒泡)

  attachEvent(on事件名,函数)

  on事件 = 函数

a.直接在html上

    <div onclick="func()">text</div>
    <script>
          function func() {
            //todo
          }
    </script>

b.DOM0级处理

    <div >text</div>
    <script>
        var e = document.getElementsByTagName(‘div‘)[0];
        e.onclick = func;
        function func() {
            //todo
        }
    </script>

c.DOM2级处理

    <div >text</div>
    <script>
        var e = document.getElementsByTagName(‘div‘)[0];
        e.addEventListener(‘click‘, func);
        function func() {
            //todo
        }
    </script>

d.IE8以下

    <div >text</div>
    <script>
        var e = document.getElementsByTagName(‘div‘)[0];
        a.attachEvent(‘onclick‘, func);
        function func() {
            //todo
        }
    </script>

  

7.BOM

  BOM(BrowserObjectModel)浏览器对象模型。

  包括:windowtiminghistorylocationscreen

window:

  window对象代表浏览器窗口。DOM节点属于window对象的一个属性。所有的全局变量自动成为window对象的一个属性。

timing:

    <div>text</div>
    <div>text</div>
    <script>
        setInterval(function () {
            var e = getDivs()[0];
            e.innerHTML = new Date().toLocaleString();
        }, 500);

        setTimeout(function() {
            var e = getDivs()[1];
            e.innerHTML = new Date().toLocaleString();
        }, 500);

        function getDivs() {
            return document.getElementsByTagName(‘div‘);
        }
    </script>

8.DOM控制HTML:

  增:document.createElement(tagName);

  删:element.removeChild(element);

  改:element.setAttribute(attrName, attrValue);

  查:

    document.getElementById(elementId);     element.parentNode;    element.childNodes;

    document.getAttribute(attrName);

9.prototype(原型)

  除了基本类型外,都有prototype属性。

  prototype(包括原型链)中的属性会直接继承到对象上。

  

10.call和apply

  当用call和apply调用方法时,方法中的this可以由我们指定。

        function func(a, b) {
            this.sum = a + b;
            return this;
        }
        var o1 = {};
        var o2 = {};
        func.call(o1, 3, 5);
        func.apply(o2, [3, 4]);
        alert(o1.sum);
        alert(o2.sum);

时间:

  GMT(Greenwich Mean Time)——格林尼治标准时间,世界基准时间

  UTC 这几个字母是英文Coordinated Universal Time 和法语Temp UniverselleCoordinee 的混合体。世界时。原子时。

时间: 2024-11-08 21:47:51

[JS] JavaScript由浅入深(1) 基本特性的相关文章

[JS] JavaScript由浅入深(3) 进阶

本节,将围绕以下几点来讲. 知识点:多线程.作用域.闭包.this 先顶后看 1.多线程 在不支持H5的浏览器中.使用Concurrent.Thread.js. 在支持H5中,使用WebWork. 在H5以前,js是不支持多线程的.其中存在同步池和异步池的概念.当同步池处理完后,会调用异步池的事件,定时任务等. 以下很明显的区分js是否是多线程执行的 c# js <script> setInterval(function () { alert('1'); }, 1000); </scri

[JS] JavaScript由浅入深(2) jQuery

jQuery使用户能更方便地处理HTML(标准通用标记语言下的一个应用).events.实现动画效果,并且方便地为网站提供AJAX交互.jQuery还有一个比较大的优势是,它的文档说明很全,而且各种应用也说得很详细,同时还有许多成熟的插件可供选择. 官网API: http://api.jquery.com 下载: NuGet:Install-Package jQuery 1.主要功能 html选取,操作,css操作,事件,特效,遍历,ajax 2.版本 1.x:IE6+(本人测试,部分方法还是不

理解Javascript的动态语言特性

原文:理解Javascript的动态语言特性 Javascript是一种解释性语言,而并非编译性,它不能编译成二进制文件. 理解动态执行与闭包的概念 动态执行:javascript提供eval()函数,用于动态解释一段文本,并在当前上下文环境中执行. 首先我们需要理解的是eval()方法它有全局闭包和当前函数的闭包,比如如下代码,大家认为会输出什么呢? var i = 100; function myFunc() { var i = 'test'; eval('i = "hello."

JavaScript基础--面向对象三大特性(八):继承封装多态

一.构造函数基本用法:function 类名(参数列表){属性=参数值} 1 function Person(name,age){ 2 this.name = name; 3 this.age = age; 4 } 5 6 //创建Person对象的时候,可以直接给名字和年龄 7 var p1 = new Person('abc',80); 8 window.alert(p1.name); 9 var p2 = new Person('hello',9); 10 window.alert(p2.

node.js javascript理解原型继承

util.inherits util.inherits(constructor, superConstructor)是一个实现对象间原型继承的函数. JavaScript 的面向对象特性是基于原型的,与常见的基于类的不同.JavaScript 没有提供对象继承的语言级别特性,而是通过原型复制来实现的 var util = require('util'); function Base() { this.name = 'base'; this.base = 1991; this.sayHello =

Atitit.js javascript异常处理机制与java异常的转换.js exception process Voae

Atitit.js javascript异常处理机制与java异常的转换.js exception processVoae 1. 1. javascript异常处理机制 1 2. 2. Web前后台异常的统一处理 1 3.  java异常转换为js异常 1 3. -------------详细代码 2 1. 1. javascript异常处理机制 Throw str Not throw error  ..cause ie,ff error obj is diff.. 2. 2. Web前后台异常

Atitit.&#160;数据约束&#160;校验&#160;原理理论与&#160;架构设计&#160;理念模式java&#160;php&#160;c#.net&#160;js&#160;javascript&#160;mysql&#160;oracle

Atitit. 数据约束 校验 原理理论与 架构设计 理念模式java php c#.net js javascript mysql oracle 1. 主键1 2. uniq  index2 3. 检查约束 (Check Counstraint) 对该列数据的范围.格式的限制(如:年龄.性别等)2 4. 默认约束 (Default Counstraint) 该数据的默认值2 5. trigger2 6. 外键机制  参照完整性:2 7. 断言约束:不必与特定的列绑定,可以理解为能应用于多个表的

js javascript:void(0) 真正含义

http://www.cnblogs.com/opper/archive/2009/01/12/1373971.html js javascript:void(0) 真正含义 我想使用过ajax的都常见这样的代码:<a href="javascript:doTest2();void(0);">here</a>但这儿的void(0)究竟是何含义呢?Javascript中void是一个操作符,该操作符指定要计算一个表达式但是不返回值.void 操作符用法格式如下:1

JS - JavaScript和DOM操作

1.HTML元素标记 - 超文本标记语言 决定你网页中有哪些东西 2.CSS - 样式表 决定你网页中的这些元素标记的样式和布局 3.JS - JavaScript 决定你网页中的这些元素标记的功能和特效 3.1.onclick:单机 ondblclick:双击 function 执行函数 alert 显示框只有确定 confirm 显示框有确定和取消 prompt 显示框下面填写内容 var 万能变量 <body> <a onclick="a()"></