2023年Javascript学习笔记.docx

精通HTML语言，擅长css+div布局，css3+html5,响应式布局，能快速手写兼容各类常用浏览器的前端代码。
精通Photoshop、Dreamweaver、Flash等美工制作软件。
对各类常用Javascript效果,query框架有一定的研究，熟悉java和JSP编程，SQL语言，数据库
面试题
1. Class="box"与 .Box{} 这两者有区别，大小写必须一致
3. 剃刀文献是一个 .js 文献
4. Js只写在行为层，html只写在结构层，不要串写。
5. 选项卡，水平菜单
6. 什么是函数：一个程序块，执行一项单一任务或一系列任务。好处是具有重用性，减少程序复杂度。
7. 什么是闭包：有权限访问另一个函数作用域的变量的函数。创建闭包的常见方式就是在一个函数a内部创建另一个函数b，即内部函数。当内部函数在定义它的作用域的外部被引用时，就创建了该内部函数的一个闭包。称外部函数的调用环境为封闭闭包的环境。假如内部函数引用了位于外部函数中的变量，相称于授权该变量可以被延迟使用。因此，当外部函数调用完毕后，这些变量的内存不会被释放（最后的值会保存），闭包仍然需要使用它们。闭包的作用就是在a执行完并返回后，闭包使得Javascript的垃圾回收机制GC不会收回a所占用的资源，由于a的内部函数b的执行需要依赖a中的变量。
8. (1) var s = confirm(); (2) var s; s = confirm();
(1)方法声明变量立即赋值更好
2. 书写CSS样式环节：
a.先做reset样式（将浏览器内置的样式复位，即覆盖）
b.按照结构层盒子的嵌套，并列关系写好盒子关系
c.按照效果图分析效果给每个盒子添加相应的属性和值
9. 页面一：alert(s); //报错，找不到
页面二：var s ; alert (s) ; //undefined
页面三：alert(window.XMLHttpRequest) ; //不报错，弹出内容
10. 面向对象：无需关心内部如何，只要知道如何使用它
封装、抽象（把重要的内容抽出，创建对象，再进行封装）、继承（子级继承父级的属性和方法）
用面向对象做选项卡
11. 属性和变量的区别，函数和方法的区别
属性和方法是属于某对象，是私有的；变量是自由自在的。变量能变成属性，属性不能变成变量。全局变量和函数相称于window的属性：var a == window.a function aa() == window.aa=function ()
面向对象叫"方法"，面向过程叫"函数"，函数是有返回值的方法
用对象调用的叫方法（this），直接调用函数名的叫函数
事件：就是文档或浏览器窗口中发生的一些特定的交互瞬间。
事件解决程序的名字以"on"开头，因此click 事件的事件解决程序就是onclick。
分类：
读取事件
页面载入事件onload ，对象window
用户事件
1. onmouseover onmouseout onmousemove onmouseup onmousedown onclick onkeydown onkeyup oncontextmenu（环境菜单）对象document
2. onsubmit 对象form onsubmit在form上加，不能在submit按钮上加
3. keycode clientX clientY button（指示哪一个鼠标键被按下[0无、1左、2右、4中]） offsetX offsetY pageX pageY 对象event
clientX clientY 以可视区域来定坐标
4. clientWidth可视区域的宽度 clientHeight 对象documentElement (html)
offset 可读不可写
offsetWidth 物体自身宽度，包含边框，填充，不包边界
offsetLeft 左偏移量，包含左边界
scroll
scrollTop 滚动离开顶端的距离
scrollWidth
onfocus onblur onreadystatechange
setTimeout setInterval 对象window
设立定期器前可以先关定期器，解决许多问题
cookie 对象document 火狐，查看页面信息
function eventHandler(e){
//获取事件对象
e = e || window.event; //IE和Chrome下是window.event FF下是e
//获取事件源
var target = e.target || e.srcElement; //IE和Chrome下是srcElement FF下是target
}
用CSS3做简朴的动画效果但兼容性低，Javascript做复杂的动画效果，JQuery也可做动画效果且兼容性高。
8个div 语义化不强
表格 加载速度慢
列表 ul li span a ; dl dt dd 最佳
解决样式冲突。
Javascript 最佳实践
交互就是网页的元素针对用户的特定行为，产生指定的变化。响应事件。
1. 是什么？
JS是用来实现交互的。它是纯文本的，用任何的纯文本编辑器都能编辑它；同时它是网页的一部分，随着一个html页面被请求，JS脚本也随之下载到了用户的计算机本地，在用户计算机本地渲染运营。它是可读的。
2. 不是什么？
（1）Javascript不是Java。
Javascript是轻量级运营在浏览器中的语言，而Java是跨平台的开发多种应用的语言。Jsp网站、安卓都是Java开发的。
（2）Javascript和php,asp,jsp完全不同。
Javascript是运营在用户计算机中的，是前台的脚本；php,asp,jsp是运营在服务器上的。Javascript的功能单一，仅仅是用来开发页面效果的；php等语言可以与数据库交互，开发网站程序的。
（3） 有Javascript的网页是静态网页，不是动态网页。动态，静态是指是否与数据库产生交互。只有php,asp,jsp这些网页，才是动态网页。
3. 学习重点
引用类型 高级程序设计121页
Object Array Date RegExp Function
对象 小铅笔第六章
内置对象(DOM)Object Array Date String Event Number Math Boolean Function Global RegExp
Math 对象是一个固有的对象，无需创建它，直接把 Math 作为对象使用就可以调用其所有属性和方法。这是它与Date,String对象的区别。
浏览器对象(BOM)document window
作用域 局部、全局 作用：控制读写操作
域：空间 范围 只有script内（或js文献内）和函数内叫域
对读写操作可控范围的一个描述
浏览器对js程序的解析机制：碰到域就会发生的操作
（1） JS预解析
先把函数和变量以及参数（var function）提取出来，放入库中
alert(a); //undefined
alert(fn1); //function fn1(){alert(1);}
var a=1;
function fn1() {alert(1);} //a=未定义 fn1=function fn1(){alert(1);}
（2） 逐行读代码
表达式会修改预解析的值
正则表达式往往配合search match replace方法使用；小写和大写字母相反；
Search只能查位置 match可以返回字符、数组；
[asd]pc => apc spc dpc
ECMAScript 通过RegExp 类型来支持正则表达式：
var expression = / pattern / flags ; //Perl
pattern--正则表达式 flags--g（全局模式） i（不区分大小写模式） m（多行模式）
Ecmascript规范
要执行什么事情，就要找负责这个事情的对象：
DOM 文档对象模型 Document Object Model（统一） 在页面中可见，负责一切和文档相关的事
BOM 浏览器对象模型（不统一） 负责一切和浏览器窗口相关的事
Console负责一切和控制台有关的事
面试：
window的对象：document, event, frame, history, location, navigator, screen
document的对象：anchor, applet, area, embed, form及其属性, image, link
1. JS对象
JavaScript 中的所有事物都是对象：字符串、数值、数组、函数... 允许自定义对象
提供多个内建对象： Object Array Date RegExp String event Number Math等
对象只是带有属性和方法的特殊数据类型。
自定义属性：oP.name=""; oP[i].index=i;
2. 创建对象的几种方法 164页
（1） 工厂模式
function createPerson(name, age, job){ //形参
var o = new Object();
o.name = name; //属性，形参
o.age = age;
o.job = job;
o.sayName = function(){ alert(this.name);};
return o;}
var person1 = createPerson("Nicholas", 29, "Software Engineer");//对象
var person2 = createPerson("Greg", 27, "Doctor");
工厂模式虽然解决了创建多个相似对象的问题，但却没有解决对象辨认的问题（即如何知道一个对象的类型）。
（2） 构造函数模式 this发生在当前事件上的对象
function Person(name, age, job){
this.name = name;
this.age = age;
this.job = job;
this.sayName = function(){ "我的名字叫："+this.name;}; }
var person1 = new Person("Nicholas", 29, "Software Engineer");
var person2 = new Person("Greg", 27, "Doctor");
此方法没有显式地创建对象；直接将属性和方法赋给了this 对象；没有return 语句。
调用构造函数：必须使用new 操作符。
构造函数的重要问题，就是每个方法都要在每个实例上重新创建一遍。
（3） 原型模式prototype 170页
function Person(){ } //构造函数成了空函数
Person.prototype.name = "Nicholas";
Person.prototype.age = 29;
Person.prototype.job = "Software Engineer";
Person.prototype.sayName = function(){
alert(this.name); };
var person1 = new Person();
person1.sayName(); //"Nicholas"
var person2 = new Person();
person2.sayName(); //"Nicholas"
alert(person1.sayName == person2.sayName); //true
同时使用hasOwnProperty()方法和in 操作符，就可以拟定该属性到底是存在于对象中，还是存在于原型中。
简化原型模式：
function Person(){ }
Person.prototype = {
name : "Nicholas",
age : 29,
job: "Software Engineer",
sayName : function () { alert(this.name); } };
原型模式的局限性：它省略了为构造函数传递初始化参数这一环节，结果所有实例在默认情况下都将取得相同的属性值；它最大问题是由其共享的本性所导致，原型中所有属性是被很多实例共享的，这种共享对于函数非常合适，然而，对于包含引用类型值的属性来说，问题就比较突出了。
（4） 组合使用构造函数模式和原型模式（推荐）176页
（5） 动态原型模式
（6） 寄生构造函数模式
（7） 稳妥构造函数模式（安全）
常见的三种节点：元素节点(p)，属性节点(id)，文本节点(text) （查找时的先后顺序）
<p id="p1" class="">text</p>
4. 如何学？
增 删 改 查（读 写）对html css
innerHTML createTextNode appendChild parentNode insertBefore
childNodes nodeValue
行为层的样式优先级最高。
Js控制css 用 style（行间样式） ，className ，setAttribute
oP.style.background=""; 设立行间样式
.para{} oP.className="para"; 设立外部样式
oP.setAttribute("class","para"); 设立外部样式
对象（名词）=属性+方法 +事件 万物皆是对象。
属性（名词）：描述对象特性 无（） 相称于变量用
方法（动词）：描述对象的行为 有（） 相称于函数用，函数名（参数）
事件：指令
表达式：由运算符和操作数链接起来的式子
对象.属性 = "新的值"; 赋值
对象.方法("参数"); 调用方法
JS对大小写敏感
一个盒子可以响应单击事件，也称为为它添加了事件监听。如：<div onlick="bianbiaoti()"></div>
事件的三要素：
事件源：有监听的HTML标签，即能响应事件的HTML标签。如<div>
事件名：用户的特定行为。如：onclick , onmouseover
事件的响应：一个个function
HTML事件解决：在标记上加事件然后调用函数（写在结构层）
DOM0级事件解决 例：window.onload.html
事件源（事件发生在谁身上） ie下window.event.srcElement 标准下event.target
nodeName：找到元素标署名
循环影响性能，找东西放循环体外性能更好
事件委托（让别人做）：运用冒泡原理，把事件加到父级上，触发执行效果。
浏览器解析：事件捕获-》目的阶段-》冒泡阶段
事件委托好处：1. 提高性能 2. 新添加的元素还会有之前的事件
性能好：代码少，完毕的功能多
window.onload = function()
{ var oUl = document.getElementById("ul");
var aLi = oUl.getElementsByTagName("li");
var oBtn = document.getElementById("btn");
var iNow = 4;
oUl.onmouseover = function(ev)
{ var ev = ev || window.event;
var target = ev.target || ev.srcElement; //alert(target.innerHTML);
if(target.nodeName.toLowerCase() == "li")
{ target.style.background = "red"; } }
oUl.onmouseout = function(ev)
{ var ev = ev || window.event;
var target = ev.target || ev.srcElement; //alert(target.innerHTML);
if(target.nodeName.toLowerCase() == "li")
{ target.style.background = ""; } }
oBtn.onclick = function()
{ iNow ++;
var oLi = document.createElement("li");
oLi.innerHTML = 1111 *iNow;
oUl.appendChild(oLi); } }
函数：内置函数（系统中的函数）、自定义函数
有名函数（可实现函数重用）、匿名函数
A. 三个对话框方法（内置函数）：alert(); confirm(); prompt();
这三个方法是window对象的方法。
如何学习函数：
1. 掌握该函数的功能
2. 函数有没有返回值
（1）var s = alert(true); 警告框
document.write(s); //得出undefined 变量不加引号，如s
（2） var s = confirm("你拟定吗？"); 确认框
document.write(s); //得出true或false
（3） var s = prompt("请输入你的大名",""); 提醒框
document.write(s); //得出第二个参数的值或null
3. 函数的参数（参数的数据类型及参数的个数）
4. 函数的定义和调用（针对自定义函数）
B. 自定义函数的定义和调用
简朴格式
function abc(){
功能语句
var i = 2;
var j = 1;
var s = i + j;
alert(s);
}
调用函数的格式
abc();
执行环境及作用域：
var color = "blue";
function changeColor()
{
var anotherColor = "red";
function swapColors()
{
var tempColor = anotherColor;
anotherColor = color;
color = tempColor;
// 这里可以访问color、anotherColor 和tempColor
}
// 这里可以访问color 和anotherColor，但不能访问tempColor
swapColors();
}
// 这里只能访问color
changeColor();
注：无论全局环境还是changeColor()的局部环境都无权访问tempColor，但在swapColor()内部可访问其他两个环境中的所有变量，由于他们是它的父执行环境。
使用var 声明的变量会自动被添加到最接近的环境中。在函数内部，最接近的环境就是函数的局部环境；在with 语句中，最接近的环境是函数环境。假如初始化变量时没有使用var 声明，该变量会自动被添加到全局环境。JS高级程序设计 第三版 94页
JavaScript 变量可以用来保存两种类型的值：基本类型值和引用类型值。基本类型的值源自以下几种基本数据类型：Undefined、Null、Boolean、Number 、String、function
编写利器：sublime, webstorm
Sublime:
Html:5 div ... Ctrl+e
Ctrl+滚动鼠标 调整字号
按鼠标中键可以多行编辑
Ctrl+shift+K 删除当前行
Ctrl+shift+D 复制当前行
Ctrl+shift+上下键 调整当前行的位置
Ctrl+alt+[ 让CSS格式进行转换（单行，多行）
DOM:
alert(images.length); //输出图像的数量
alert(images[0].src); //输出第一个图像元素的src 特性
aler t(images.item(0).src); //输出第一个图像元素的 src 特性
<img src = "myimage.gif" name = "myImage" />
var myImage = images.namedItem("myImage");
或写 var myImage = images["myImage"];
特殊集合：
Document.forms，包含文档中所有的<form>元素，与document.getElementsByTagName("form")得到的结果相同；
Document.images，包含文档中所有的<img>元素，与document.getElementsByTagName得到的结果相同；
document.links，包含文档中所有带href 特性的<a>元素。
document.anchors，包含文档中所有带name 特性的<a>元素。
<div id="myDiv" class="bd" title="Body text" lang="en" dir="ltr"></div>
元素中指定的所有信息，都可以通过下列JavaScript 代码取得：html-dom写法
var div = document.getElementById("myDiv");
alert(div.id); //"myDiv""
alert(div.className); //"bd"
alert(div.title); //"Body text"
alert(div.lang); //"en"
通过为每个属性赋予新的值，也可以修改相应的每个特性：
div.id = "someOtherId";
div.className = "ft";
div.title = "Some other text";
div.lang = "fr";
注：在通过JavaScript 以编程方式操作DOM 时，开发人员经常不使用getAttribute()，而是只使用对象的属性。只有在取得自定义特性值的情况下，才会使用getAttribute()方法，如：my_special_attribute="hello!"--div.getAttribute("my_special_attribute");。