精彩点评
-
一日三秋推荐
中等感觉，算是一本不错的快速入门书籍，有些作者说的地方我希望大家伙看的时候都能上手试一试
-
乐推荐
作者讲的很详细，重要知识点都会详细讲解，不重要的一笔带过，还讲了一些技巧，快速上手名副其实，适合作为入门书，不适合进阶。
-
李文山推荐
# Text ## Part 1 语法基础 ### C1 JavaScript简介 - 嵌入到HTML页面中的编程语言，由浏览器一边解释一边执行 - HTML用于控制网页的结构，CSS用于控制网页的外观，而JavaScript控制着网页的行为 - “没用的知识绝对不会啰唆，但是重要的知识会反复提醒。”, 很好的学习方式 - 不是“会动”的页面就叫动态页面，静态页面和动态页面的区别在于是否与服务器进行数据交互 - 学完JavaScript入门(也就是本书内容)后，不要急于去学习JavaScript进阶的内容而应该先去学习jQuery。经过jQuery的学习，可以让我们对JavaScript的基础知识有更深一层的理解。学完了jQuery，再去学习JavaScript进阶的内容会更好 - 引入 - 外部js, 与CSS不同的时, js既可以在head中引入, 又可以在body中引入 - 内部js, 放在script中间的js代码 - 元素属性js, 在元素的事件属性中直接编写js或调用函数 - document.write(): 在页面输出一个内容 - alert(): 弹出一个对话框 ### C2 语法基础 - 变量与常量 - 标识符, [a-zA-Z0-9_$], 数字不开头 - var 变量名=值; - var 大写常量名=值; - 数据类型 - 基本数据类型, 数字, 字符串, 布尔值, 未定义值, 空值 - 引用数据类型, 对象(数组是对象的一种) - 数字不分整型和浮点型 - 字符串用单引号or双引号括起来 - 布尔值只有true/false - 未定义值, 声明了但是没赋值, 不知道什么类型, 未定义, undefined - var n = null; 空值, 没给它分配内存空间 - 运算符 - num+num=num, str+str=str, num+str=str - 其他运算符和Java的没啥区别 - 类型转换 - 字符串转数字, Number转纯数字, parseInt和parseFloat接收首字母是数字的串 - 数字转字符串, 与空串相加, toString() - 转义字符和注释也都和Java一样 ### C3 流程控制 - 同Java ### C4 认识函数 - 定义函数的关键字, function - js的函数调用和Java有区别, 4种调用方式 - 直接调用 - 在表达式中调用, 返回值参与表达式运算 - 在超链接中调用, a元素的href="javascript: 函数名", 点击就调用 - 在事件中调用, 比如单击按钮, 写在按钮的事件属性里 - 嵌套函数, 闭包, 都是js有的 ### C5 字符串对象 - 内置对象, 字符串对象String, 数组对象Array, 日期对象Date, 数值对象Math - str.length - str.toLowerCase(), toUpperCase() - str.charAt(n) - str.substring(begin, end), 半开半闭 - str.replace(子串, 想要替换子串的串) - str.replace(正则表达式, 替换串) - str.split("分隔符"), 返回一个数组 - str.indexOf(串), str.lastIndexOf(串), 不存在返回-1 ### C6 数组对象 - var arr = new Array(a1, a2, ..., an); - var arr = [a1, a2, ..., an]; 语法糖 - arr.length - arr.slice(begin, end), 切片[begin, end) - arr.unshift(a1, a2), arr.push(a3, a4), 在开头添加和在结尾添加 - arr.shift(), arr.pop(), 在开头/结尾删一个 - arr.sort(自定义函数名), - arr.reverse(), 颠倒 - arr.join("连接符"), 把arr连接成str ### C7 时间对象 - var date = new Date(); - 方法, getXXX(), setXXX() - 你不需要把所有的知识都记住，记住常用的就可以走得很远 ### C8 数学对象 - Math.PI, 角度 * Math.PI / 180 -> 弧度制, 实际开发中用的都是弧度 - max/min/floor/ceil/ - sin/cos/atan2 - atan2(x)和atan(x)是不一样的，atan2(x)能够精确判断角度对应哪一个角，而atan(x)不能。因此在高级动画开发中，我们大多数用的是atan2(x)，基本用不到atan(x) - random, [0, 1) ## Part 2 核心技术 ### C9 DOM基础 - DOM，全称是“Document Object Model(文档对象模型)”，它是由W3C定义的一个标准 - 树型结构, 我们在操作元素时，其实就是把这个元素看成一个对象，然后使用这个对象的属性和方法来进行相关操作 - nodeType, 元素节点1, 属性节点2, 文本节点3 - 获取元素, getElementBy - Id, getElementById( )获取的是一个DOM对象，我们在给变量命名的时候，习惯性地以英文“o”开头，以便跟其他变量区分开，这可以让我们一眼就看出这是一个DOM对象 - TagName, 通过标签名获取, 返回多个元素, 注意有s, getElementsByTagName() - 返回一个类数组, 只能用下标和length, 方法不能用 - ClassName, 也是s, - querySelector[All]("选择器") - ByName, 表单元素有name - 实际上，getElementById()和getElementsByTagName )有以下3个明显的区别(很重要，认真理解)。 - getElementById()获取的是1个元素，而getElementsByTagName()获取的是多个元素(伪数组)。 - getElementById()前面只可以接document，也就是document.getElementById()。getElementsByTagName()前面不仅可以接document，还可以接其他DOM对象 - getElementById()不可以操作动态创建的DOM元素，而getElementsByTagName()可以操作动态创建的DOM元素。 - document.title, document.body - 创建元素, createElement()创建元素节点, createTextNode()创建文本节点 - 在操作动态DOM时，设置元素class用的是className而不是class，这是初学者最容易忽略的地方。为什么JavaScript不用class，而是用className呢？其实我们在“2.2变量与常量”这一节介绍过，JavaScript有很多关键字和保留字，其中class已经作为保留字了(可以回顾一下),所以就另外取了一个className来用 - a.appendChild(b), 让b成为a的子节点, 插到末尾 - a.insertBefore(b, c), 在c前面插入b - 动态DOM, 以实现动画效果 - 删除元素, a.removeChild(b) - 复制元素, obj.cloneNode(bool), bool true/1, 递归赋值元素及其子元素 - 替换元素, A.replaceChild(new, old); ### C10 DOM进阶 - HTML属性操作(对象属性), 使用js来操作一个元素的HTML属性 - class属性用className来代替, 因为class已经作为js的关键字了 - 两种方式, “对象属性方式”和“对象方法方式”，这两种方式都可以操作静态HTML的属性，也可以操作动态DOM的属性。只有“对象方法方式”才可以操作自定义属性 - 获取CSS属性, getComputedStyle(obj).attr - 为什么这么麻烦要用个方法呢, 因为css的计算很麻烦, 直接用属性获取, 无法获取外部样式中的设置 - 设置CSS属性, obj.style.attr="value" - DOM遍历, 查找父子兄弟 - innerHTML, innerText - innerHTML后面的字符串可以换行写, 只需要在字符串每一行后面加上个反斜杠（\）就可以了 ### C11 事件基础 = 在JavaScript中，一个事件包含3部分 - 事件主角：是按钮？还是div元素？还是其他？ - 事件类型：是点击？还是移动？还是其他？ - 事件过程：这个事件都发生了些什么？ - 鼠标事件 - onclick单击, 并不是只有按钮有, 任何元素都可以添加单击事件 - onmouseover鼠标移入, onmouseout鼠标移出 - onmousedown鼠标按下, onmouseup鼠标松开 - 键盘事件 - onkeydown键盘按下, onkeyup键盘松开 - 表单事件 - onfocus获取焦点, onblur失去焦点, 比如点文本框想输入东西, 文本框获取光标, 只有表单和超链接有焦点事件 - 编辑事件 - oncopy, onselectstart, oncontextmenu - 页面事件 - onload, onbeforeunload - 在默认情况下，浏览器是从上到下来解析一个页面的。当解析到“var oBtn = document.getElementById（"btn"）;”这一句时，浏览器找不到id为btn的元素，就会感到很疑惑：怎么半路杀出个不认识的程咬金来呢, 需要onload来解决 - 浏览器从上到下解析HTML文档，当它解析到函数的定义部分时，它也会直接跳过。如果浏览器立刻解析，函数岂不是自动执行了？会自动执行的，这还是函数吗？ ### C12 事件进阶 - 如果我们要给元素添加一个事件，一般会通过操作HTML属性的方式来实现，这种方式其实也叫作“事件处理器” - 缺点, 不能为一个元素添加多个相同事件 - 事件监听器, 可以为同一个元素添加多个相同的事件 - obj.addEventListener(type, fn, false) - type是个string, 事件类型, 比如"click", 不需要加on - fn是个函数名, 或者是个匿名函数 - false表示事件冒泡阶段调用 - ogj.removeEventListener(type, fn, false), 解绑, fn一定需要是函数名, 不能是匿名函数 - 在实际开发中，我们有可能会多次使用window.onload，但是会发现JavaScript只执行最后一次window.onload。为了解决这个问题，我们可以使用addEventListener（ ）来实现 - window.addEventListener("load", fn, false); - 或者用自定义的addLoadEvent - event对象, 一个事件对应一个event对象 - event对象在IE8浏览器及以下版本还有一定的兼容性, 可能还需要采取“var e=e||window.event;”来处理 - type事件类型 - keyCode 键码值 - shiftKey 是否按下Shift - ctrlkey 是否按下Ctrl - altKey 是否按下Alt - this - 哪个DOM对象（元素节点）调用了this所在的函数，那么this指向的就是哪个DOM对象 ### C13 window对象 - 一个窗口就是一个window对象，这个窗口里面的HTML文档就是一个document对象，document对象是window对象的子对象 - window对象及下面这些location、navigator等子对象，由于都是用于操作浏览器窗口的，所以我们又称之为“BOM”，也就是Browser Object Module(浏览器对象模型) - 常用方法 - 对于window对象，无论是它的属性，还是方法，都可以省略window前缀 - window.alert() -> alert(w - window.open(url, target), 返回一个窗口对象w, 这个返回的窗口对象w.document.write, 就可以写东西啦 - url指的是新窗口的地址，如果url为空，则表示打开一个空白窗口。空白窗口很有用，我们可以使用document.write()往空白窗口输出文本，甚至输出一个HTML页面 - target表示打开方式，它的取值跟a标签中target属性的取值是一样的，常用取值有两个：_blank和_self。当target为“_blank(默认值)”时，表示在新窗口中打开；当target为“_self”时，表示在当前窗口中打开 - 有一点需要提醒大家：如果你打开的是同一个域名下的页面或空白窗口，就可以像上面那样操作新窗口的元素或样式；但是如果你打开的是另外一个域名下的页面，是不允许操作新窗口的内容的，因为涉及跨域的问题 - w.close() - 对话框, alert("abc\n"), comfirm("abc\n")用户点确定返回true, 点取消返回false, prompt("abc\n")返回一个用户输入的字符串 - 定时器 var timer = setTimeOut(code, time), clearTimeout(timer) - code可以放 - 需要引号的, '一段代码', '函数名()' - 无需引号的, 匿名函数, 函数名 - time的单位是ms - setInterval, clearInterval - location对象 -> 当前窗口的URL - href, -> window.location.href - search ?后面的内容 - hash #后面的内容 - navigator对象, 获取浏览器的类型 ### C14 document对象 - document.title, document.body - document.URL只读, window.location.href读写 - A跳到B, 在B用document.referrer获取A的地址 - 方法, write, writeln
-
磐水推荐
太好了，比那些网上所谓的神书更好，更适合新手，强力推荐，我看过网上所谓的程序设计和权威指南，只能说不适合新手，再次强烈推荐
-
🔥realJaydenCheng推荐
写的非常好，通俗易懂，用几天坐地铁的时间把js几本掌握了能写点东西了。有编程基础的朋友可以直接从dom部分开始看，前面的语法部分和c挺像的。