学习笔记JavaScript基础

Posted 2020-09-17

【学习过程遇到疑问和延伸阅读】

 总结
变量->数组
代码块->判断分支执行->判断循环执行
嵌套分支、嵌套循环的灵活运用
分支类型-if，elseif，switch case
循环类型-while，do-while，for

数组和对象联系区别

成员vs对象

原型对象 vs 对象原型

 

【新概念，重要概念】

函数对象

延伸阅读：
http://www.cnblogs.com/huaan011/p/3669599.html

 

【实操知识点脉络】

1.数组
数组结构，存放一些数据，有逻辑关系的数据（有结构的）

下标-数据的位置

1.1创建数组的方式
var a = new Array();
var b = new Array(size);
var c = new Array(d1,d2,...dn);
var d = [d1,d2,...,dn];

1.2访问数组
[]运算符，可访问数组里的一个数据
a[0]，可以读可以写，放在等号左边是写，放在等号右边就是读。
索引从0开始

undefine

1.3数组长度
.length
表示目前数组占据了多少长度，数组最大的下标+1

.length可写，数组长度可修改
即可去掉数组后面某部分的东西或者增加长度

a[a.length]="xx";//可扩展性代码，不管将来需求怎么改，都不用改代码
在数组最后继续追加一个元素。

1.4转换数组为字符串
整个数组可以做输出
.toString() / .valueOf()
.join("||")

1.5堆栈
一种数据结构：先进后出
在javascript里面，
堆栈操作
数组实现了两个函数，
push(),pop()

队列操作
push(),shift()

排序-从小到大
sort()
把原来的顺序倒序
reverse()

数组操作
连接concat()
截取slice(x,x)

splice(开始位置，删除个数，插入元素...)
删除、插入、替换

2函数
函数就是一段代码，我们给它七个名字，
放起来，以后可以用

JavaScript有很多内置函数，
能帮助我们实现很多有用的功能
alert(),document.write()

2.1定义函数
function fun_name(){}
function fun_name(a,b){}
当某些事情会很经常地去做。可以定义为函数。
方便调用，反复地使用。

调用函数

2.2有返回值的函数
return

2.3函数变量
出了用function这个关键字定义函数，
还可以把函数定义成对象，叫做函数对象
var f= new Function("x","y","return x*y");
等价于
function f(x,y){return x*y};

既然可以把一个函数赋给一个变量，
也就是有可能将一个函数看成一个数，一个字符串
一样，传递到另一个函数内部去，
然后在另一个函数里头做运算。

写程序的时候，尽量基于自己已经定义好的函数，
来做新的函数。
尽量把你的函数分解为很多小的函数来执行。

2.4变量空间
函数外整个页面，函数内的变量不同
作用域不同

在函数内定义的变量，与外部无关，
即使和外部的同名。

3对象
3.1JavaScript的对象
对象是JavaScript的一种复合数据类型，
它可以把多个数据集中在一个变量中，
并且给其中的每个数据起名字。

对象是一个属性集合。

JavaScript并不像其他OOP语言那样有类的概念，
不是先设计类再制造对象。

直接有对象
往对象加入属性，
在运行中可以不断加入属性。

也可以定义函数，创建对象，看起来就像别的语言创建对象一样。

具有对象的语言，不是严格的面向对象的语言。

3.2创建对象
var o = new Object(); //对象1
var ciclr = {x:0,y:0,radius:2}; //对象2

3.3访问对象属性
一旦把对象创建出来以后，去访问属性。
和数组不一样的是，每个元素不是编号，
而是都取了名字。

所以可以用名字来使用它。
var book = new Object();
book.title = "HTML5"; //在左边的title在此之前，没有任何地方用过。
我们只要给book.title赋值，就有了title.

就跟数组的做法是一样的。

-即使构造的时候不存在的属性也可以在今后随时增加。
甚至在运行的时候，也可以给随时"系统对象"加属性。

3.4删除对象属性
delete book.chapter1;
book.chapter1 = null;

3.5遍历所有属性
for( var x in o)...
对于o里面的每一个属性都取出来，
循环的每一遍都把它作为x拿来给我用。
然后我就可以对这个x做些事情。

<script>
var o = new Object();
o.name = "John Mike";
o.age = 30;
alert(o);

for (var x in o){
alert(x);//o的属性的名字
//如何得到属性的值？o.x?o的叫x的属性？
alert(o[x]);//可以像数组一样用中括号来获得属性的值。
}

</script>

o[x]表明可计算的，我们写的程序可以很灵活。
x是运行时才知道的值，
o的属性的名字是动态的。

3.6 构造函数
在之前，我们创建一个对象，
是通过new Object()得到，
然后再往里面加上各种属性。

但是如果你要做很多个对象，
然后每个对象里面都要加各种属性。
这样，代码就很繁琐。

所以我们做一个构造方法的事情。

构造函数
(1)不直接制造对象
(2)通过this来定义成员
(3)没有return
例子：
function Rect(w,h){
this.width = w;
this.height = h;//
this.area = function(){ return this.width * this.height;};
};//在构造函数里面里面，除了可以有成员的属性以外，还可以有成员方法

var r = new Rect(5,10);
alert(r.area());

-一旦定义了构造函数，就可以构造任意数量的对象

3.7原型对象

做一个Person的构造函数；
在Person里面，我们就可以写Person.prototype.name
做出一个有原型的构造函数
而不用this，用构造函数名.prototype.属性名

通过有原型的构造函数里，
new两个对象，访问他们的同一个属性名，
得到同一个属性值。

实际上，所有的用prototype构造函数，
new 出来的对象，它里面的prototype的属性值是共享的。
是只有一份的。

除非你改写了某个对象，那么它就具有了自己的数据了。

原型prototype的会产生一些问题
比如说，我们看这个例子
这个原型有一点点复杂，
我们可以看到里面多个friends属性
这个属性的值是个数组

同样地，new两个对象后，
改写其中一个对象，
往数组push多一个元素后，
另一个对象的friends也同样被修改了。

push与赋值不同，不能改写，还是原来的数组。
没有让friends等于另外一个数组。

这样，就会产生一些问题，因为像数组这样的东西，
我们不希望它在几个成员之间是共享的，怎么办呢？

我们可以结合一下，【组合原型和构造方法】
我们可以让Person是有自己的东西，
比如说，我们现在这个写法
Person的这个构造器呢，
它this.xx,this.xx...这些都是对象自己的，它和别人不共享。
然后我们再给Person加个prototype

prototype说它有函数，那些函数是成员共享的。
因此之后，我们new一些person出来后，
在这些person里面，name,age,job,friend是自己的，
那个sayName()函数，是共享的。

person1的friends数组加入元素，
person2是不会变的。

当然，JavaScript的对象还有很多更细节的使用方法。
很多的使用是和具体的应用相关的，
所以在今后的开发当中，随着你需求的代入呢，
你会体会到各种方法使用的需要。

 

3.8浏览器中的JS
3.8.1全局对象
现在我们来看看在浏览器中的JavaScript
之前我们一直研究的是JavaScript本身语言的特性。

没有深入地去了解JavaScript与浏览器有什么样的关系。
它能够怎么样地操纵浏览器，怎么样操纵我们的页面。
我们之前做过的那些变量，
那些全局变量，实际上他不是真正的全局变量。

任何一个JavaScript的运行环境，都会提供一个
全局对象。
所以所谓的全局变量实际上是那个全局对象的成员变量，
因为和其他的语言不一样，我们要在JavaScript对象加入
新的成员是非常简单的。

那么，对于浏览器来说，它的全局对象是window

所以说，我们做的全局变量实际上就是window这个全局对象
的成员。

所以在浏览器中所有的东西，实际上都是window的成员。

3.8.2document
window.document表示浏览器窗口中的HTML页面
docment.write()将内容写入页面
页面中的元素就是docment里的成员
for(x in document){
document.write(x+ "<br/>");
}

document model
可以改变这里面的element，就可以看到页面的动态效果。

3.8.3HTML中的JavaScript
-在<script></script>标记中
-在<script>的scr属性或archive指定的外部文件中
-在某个HTML标记的事件处理器中

外部JavaScript文件
-比如<script src="util.js"></script>//告诉浏览器，找到叫util的js文件
-一个纯粹的代码文件，没有HTML标记
(如果代码中是定义函数的，那么页面就可以用；如果是执行
代码的话，文件加载进来就会执行。)

 

4事件处理器
在HTML中会有一些事件的处理器。
<p onMouseOver="alert(‘hi‘);">
onMouseOut

4.1body事件
onLoad
onUnload被关掉前

4.2简单对话框
alert()
confirm()
prompt()

4.3状态栏
status =
defaultStatus =
<p onMouseOver="status=‘网易云学习‘";></p>

4.4定时器
可以调用window的函数
setInterval()
这个函数，可以给两个参数，
第一个参数是你让它做什么动作。通常是个函数
第二个参数是事件间隔是多少。

我们把定时器做在了body onload事件上
然后在setInterval()里是一个update()的函数，
定义了update()会在count>0时，减1，并显示在status上。
做倒计时。
在head里定义update()和count全局变量。