JavaScript学习笔记 - 第000天

JavaScript阅读书籍推荐

入门级 JavaScript权威指南 JavaScript高级程序设计 JavaScript精粹
JavaScript设计模式 JavaScript设计模式与开发实践 JavaScript框架设计
JavaScript & jQuery交互式web前端开发

JavaScript详解

JavaScript能做什么

1.访问内容 - 例如从表单中获得用户输入的值
2.修改内容 - 例如修改轮播广告的图片
3.编制规则 - 例如检查输入是否有效、设置计时器控制轮播广告
4.响应事件 - 例如响应按钮或链接的点击,处理表单的提交

ECMAScript

  • 变量和数据类型
    变量是用来存储数据的内存空间
    变量的命名规则与Java一致
    JavaScript中有6种数据类型,其中String、Number、Boolean、Undefined、Null属于基本数据类型,Object属于复杂数据类型,数组和函数都是Object。
    JavaScript是弱类型语言。

  • 数组
    数组是一种特殊的变量,可以用来存储多个值。
    数组是对象。

  • 表达式和运算符
    表达式可以产生一个值,产生值得过程中可以使用运算符进行运算。
    因为存在默认的类型转换机制,JavaScript中每个值都可以被当作true或false来处理。
    可以使用严格等于运算符和严格不等于运算符来避免默认的类型转换。
    在使用短路运算符时,如果获得了确定的结果,立刻就会停止运算(短路),但是返回的值不一定是true或false来处理。
    可以使用严格等于运算符和严格不等于运算符来避免默认的类型转换。
    在使用短路运算符时,如果获得了确定的结果,立刻就会停止运算(短路),
    但是返回的值不一定是true或false

  • 函数
    函数让我们可以将一系列的语句组织成一个整体以执行某项特定的任务。如果这些任务需要重复执行可以直接调用函数而不是书写重复的代码。
    可以使用匿名函数和函数表达式,还可以书写立即调用函数表达式。
    通过函数可以构造一个局部作用域,函数之外的变量拥有全局作用域。
    函数也是对象。

  • 对象
    对象将一组变量和函数结合起来,可以用来表达真实世界中的事务。
    创建对象可以使用字面量语法和构造函数语法。
    访问对象的属性和方法可以使用点语法。
    this关键字在不同的上下文环境中有不同的含义,它指向一个对象,通常是当前函数所操作的对象。
    JavaScript中有很多全局对象,例如:String、Number、Boolean、Date、Math、RegEx。

  • 分支和循环
    浏览器在遇到JavaScript时就会停止所有工作直到JavaScript代码执行结束,如果循环执行的时间很长或者出现了死循环就会影响到页面的加载,因此JavaScript代码一般放在网页的最后面。

BOM

DOM

文档对象模型规定了浏览器应该如何创建HTML页面的模型,以及JavaScript如何访问或修改浏

览器窗口中的内容。DOM既不是HTML的一部分,也不是JavaScript的一部分,而是一系列独立的

规则,所有浏览器制作商都是实现了这些规则。
DOM树是Web页面的模型,它包括了文档节点、元素节点、属性节点、文本节点。

  • 选择单个元素节点
    getElementById() / querySelector()

  • 选择多个元素
    getElementsByClassName() / getElementsByTagName() / querySelectorAll()、

  • 访问/更新文本节点
    nodeValue

  • 操作HTML内容
    innerHTML / textContent / createElement() / createTextNode() / appendChile() / removeChild()

  • 访问或更新属性值
    className / id / hasAttribute() / getAttribute() / setAttribute() / removeAttribute()

事件

事件分类

  • UI事件
    load / unload / error / resize / scroll
  • 键盘事件
    keydown / keyup / keypress
  • 鼠标事件
    click / dbclick / mousedown / mouseup / mousemove / mouseover / mouseout
  • 焦点事件
    focus(focusin) / blur(focusout)
  • 表单事件
    input / change / submit / reset / cut / copy / paste / select

事件流

  • 事件冒泡:事件从具体节点开始向外传播直到最顶层的节点,这是事件流默认的类型,被绝大多数浏览器所支持。
  • 事件捕获:事件从最顶层节点开始向内传播到具体事件节点。

绑定事件

将事件绑定到元素有三种方法:

  • HTML事件处理程序(不推荐)
  • 传统的DOM事件处理
  • 第2级DOM监听器
    element.addEventListener(事件,代码,事件流);

事件对象

  • 属性:target / type / cancelable
  • 方法:preventDefault() / stopPropagation()

jQuery

jQuery是一个JavaScript代码库,它提供了快速便捷的方法来实现很多常见的JavaScript任务,简单的选择器,用更少的代码来做更多的事情,并且可以在所有主流浏览器中保持兼容性,不需要书写繁琐的后备代码。

JavaScript
<script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
<script>
  window.jQuery || document.write('<script src="js/jquery-

1.10.2.min.js"></script>');
</script>

其他JavaScript库

  • DOM和事件

  • 用户界面

  • 图形和图表

  • 模板引擎

  • 前端MVC

预防冲突

Ajax和JSON

API

表单验证和正则表达式

例子

var a = 1.2; // number
var b = true; // boolean
var c = "'hello'" // string
var d = null; // object --> null
var e; // undefined
var f = new Date(); // object
var g = function() {}; // function --> object

document.write("<p>" + typeof a + "</p>");

var array = ['hello', 'apple', 'grape', 'zoo', 'juice'];
/*array[0] = 'apple';
array[1] = 'banana';
array[99] = 'zealot';*/
array.sort();
array.unshift('shit');
array.pop();
array.push('elephant')
array.shift();

/*for (var i = 0; i < array.length; i++) {
    console.log(array[i]);
}*/
for (var x in array) {
    console.log(array[x]);
}
var x = 1;
var y = '';
var foo = window.addEventListener || window.attachEvent;
if (y) {
    // window.alert("Good");
}
else {
    // swindow.alert("Shit");
}
// window.alert(x == y);
// window.alert(x === y);

console.log(add(1,2));
function add(a, b) {
    return a + b;
}
// 即时调用函数
(function (a, b) {
    // window.alert(a * b);
}(3, 4));

+function (a, b) {
    // window.alert(a * b);
}(3, 4);

var stu = {
    "name": "Kygo",
    "age": 20,
    "car": {
        "brand": "QQ",
        "maxSpeed": 120,
        "run": function() {
            // 错误 这里的this代表的是车
        //  window.alert(this.name + "正在开车");
        }
    },
    "friendName": ["苍井空", "小泽玛利亚"],
    "study": function(courseName) {
        window.alert(this.name + "正在学习" + courseName);
    }
};

function Student(name, age) {
    var obj = new Object();
    // obj ---> constructor --> Student
    if (this instanceof Student) {
        this.name = name;
        this.age = age;

        this.study = function(courseName) {
            window.alert(this.name + " is studying " + courseName);
        };      
    }

    Student.foo = function() {
        window.alert("调用静态方法foo");
    };

    Student.prototype.study = function(courseName) {
        window.alert(this.name + "正在学习" + courseName)
    };

    return obj;
}


var stu2 = new Student("kygo", 23);
// stu2.study("Java");
var stu2 = Student("kygo", 23);
// window.study("Java");

console.log(stu.name);
console.log(stu.age);
// stu.study("Java");
// stu.car.run;
// stu2.foo(); error
// Student.foo();

/*function showTime() {
    var elem = document.getElementById('time');
    var date = new Date();
    var year = date.getFullYear();
    var month = date.getMonth() + 1;
    var day = date.getDate();
    var hour = date.getHours();
    var minute = date.getMinutes();
    var second = date.getSeconds();
    elem.innerHTML = year + "年" + month + "月" + day + "日" +
    hour + ":" + minute + ":" + second;
    window.setTimeout(showTime, 1000)
}
window.addEventListener('load', showTime);*/
/*
window.addEventListener('load', function ) {
    var elem = document.getElementById('time');
    var date = new Date();
    var year = date.getFullYear();
    var month = date.getMonth() + 1;
    var day = date.getDate();
    var hour = date.getHours();
    var minute = date.getMinutes();
    var second = date.getSeconds();
    elem.innerHTML = year + "年" + month + "月" + day + "日" +
    hour + ":" + minute + ":" + second;
    window.setTimeout(arguments.callee, 1000)
});*/

function Clock() {
    this.reset();
}

Clock.prototype.reset = function() {
    var date = new Date();
    this.year = date.getFullYear();
    this.month = date.getMonth() + 1;
    this.day = date.getDate();
    this.hour = date.getHours();
    this.minute = date.getMinutes();
    this.second = date.getSeconds();
}

Clock.prototype.run = function() {
    this.second += 1;
    if (this.second == 60) {
        this.second = 0;
        this.minute += 1;
        if (this.minute == 60) {
            this.minute = 0;
            this.hour += 1;
            if (this.hour == 24 ) {
                this.reset();
            }
        }
    }
};

Clock.prototype.show = function() {
    return this.year + "年" + this.month + "月" + this.day + "日" +
    this.hour + ":" + this.minute + ":" + this.second;
}

var elem = document.getElementById('time');
var clock = new Clock();
window.addEventListener('load', function () {
    elem.innerHTML = clock.show();
    clock.run();
    window.setTimeout(arguments.callee, 1000);
});

var x = /^\w{6,20}$/;
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 203,098评论 5 476
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,213评论 2 380
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 149,960评论 0 336
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,519评论 1 273
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,512评论 5 364
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,533评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,914评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,574评论 0 256
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,804评论 1 296
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,563评论 2 319
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,644评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,350评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,933评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,908评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,146评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,847评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,361评论 2 342

推荐阅读更多精彩内容