JS基础与进阶-优快云博客

JS学了也有两三周了，下面来总结一下JS所学内容吧

js组成

我们都知道， javascript 有三部分构成，ECMAScript，DOM和BOM，根据宿主（浏览器）的不同，具体的表现形式也不尽相同，ie和其他的浏览器风格迥异。

DOM 是 W3C 的标准； [所有浏览器公共遵守的标准]
BOM 是各个浏览器厂商根据 DOM
在各自浏览器上的实现;[表现为不同浏览器定义有差别,实现方式不同]
window 是 BOM 对象，而非 js 对象；

DOM（文档对象模型）是 HTML 和XML 的应用程序接口（API）。

BOM 主要处理浏览器窗口和框架，不过通常浏览器特定的JavaScript 扩展都被看做 BOM 的一部分。这些扩展包括：

JS基础

1.定位

position属性
static（默认）
Relative 原来文档流的位置做偏移
fixed（脱离文档流）相对定位
absolute（脱离文档流）绝对定位
与top、left、bottom和right连用
top（元素顶端与距离浏览器上边缘的距离）
left（元素顶端与距离浏览器左边缘的距离）
bottom（元素顶端与距离浏览器下边缘的距离）
right（元素顶端与距离浏览器右边缘的距离）
绝对定位默认是以浏览器作为参考，但是如果绝对定位再relative定位的元素中，那么就以这个元素为参考
绝对定位中位置的层次

2.display显示与隐藏以及设置显示样式

none、block（块）、inline（行级）
div、span

3.JavaScript

基础语法
DOM（文档对象模型）
BOM
jQuery (DOM、BOM)
js高级

4.javascript的数据类型（记）

&nbsp; &nbsp;基本类型：数字类型、布尔类型、字符串类型
&nbsp; &nbsp;引用类型：对象类型、函数类型
&nbsp; &nbsp;空类型：null和undefined

运算符：typeof
语法：string typeof（变量）；

5.JavaScript是一个弱类型的语言

弱类型不代表没有类型，不严格的检查类型
C#  //需要检查类型赋值如果不符合要求就报错，编译不通过
JS //不会检查类型，任何赋值都可以成功

6.使用函数（函数、方法）

函数的语法
&nbsp; &nbsp;声明式语法：

    function函数名（参数列表） {
        //函数体
        //如果有返回值直接return
    }
    Lambada函数（匿名函数）
    Var func =function(参数） {
        方法体
    };

DOM

BOM是browser object model的缩写，简称浏览器对象模型。是用来获取或设置浏览器的属性、行为，例如：新建窗口、获取屏幕分辨率、浏览器版本号等。比如 alert();弹出一个窗口,这属于BOM

BOM

DOM是Document ，简称文档对象模型。是用来获取或设置文档中标签的属性，例如获取或者设置input表单的value值。document.getElementById(“”).value; 这属于DOM

BOM和DOM区别

Dom相当于把html页面结构解析成一个对象，提供一个接口API，让你去操作所有的节点。其实就是document对象，没发现所有的页面元素选择基本上都是从document衍生出来的嘛。此外，Bom基本上就是指当前窗口对象，就是window对象啦。你看document也是挂在window对象了。什么关于窗口的一些东西都是挂在window的了，比如alert之类的。

DOM是一个使程序和脚本有能力动态地访问和更新文档的内容、结构以及样式的平台和语言中立的接口。,而BOM定义了JavaScript可以进行操作的浏览器的各个功能部件的接口。

最后，5月20号了，给大家分享两个html，以html格式打开就可以看到了哦

玫瑰

<html>  
<head>  
<title>Happy</title>  
<meta http-equiv="Content-Type" content="textml; charset=UTF-8">  
</head>  
<body style="margin-left:350px">  
<canvas id="c"></canvas>  
<script>  
var b = document.body;  
var c = document.getElementsByTagName('canvas')[0];  
var a = c.getContext('2d');  
document.body.clientWidth;  
</script>  
<script>  

with(m=Math)C=cos,S=sin,P=pow,R=random;c.width=c.height=f=600;h=-250;function p(a,b,c){if(c>60)return[S(a*7)*(13+5/(.2+P(b*4,4)))-S(b)*50,b*f+50,625+C(a*7)*(13+5/(.2+P(b*4,4)))+b*400,a*1-b/2,a];A=a*2-1;B=b*2-1;if(A*A+B*B<1){if(c>37){n=(j=c&1)?6:4;o=.5/(a+.01)+C(b*125)*3-a*300;w=b*h;return[o*C(n)+w*S(n)+j*610-390,o*S(n)-w*C(n)+550-j*350,1180+C(B+A)*99-j*300,.4-a*.1+P(1-B*B,-h*6)*.15-a*b*.4+C(a+b)/5+P(C((o*(a+1)+(B>0?w:-w))/25),30)*.1*(1-B*B),o/1e3+.7-o*w*3e-6]}if(c>32){c=c*1.16-.15;o=a*45-20;w=b*b*h;z=o*S(c)+w*C(c)+620;return[o*C(c)-w*S(c),28+C(B*.5)*99-b*b*b*60-z/2-h,z,(b*b*.3+P((1-(A*A)),7)*.15+.3)*b,b*.7]}o=A*(2-b)*(80-c*2);w=99-C(A)*120-C(b)*(-h-c*4.9)+C(P(1-b,7))*50+c*2;z=o*S(c)+w*C(c)+700;return[o*C(c)-w*S(c),B*99-C(P(b, 7))*50-c/3-z/1.35+450,z,(1-b/1.2)*.9+a*.1, P((1-b),20)/4+.05]}}setInterval('for(i=0;i<1e4;i++)if(s=p(R(),R(),i%46/.74)){z=s[2];x=~~(s[0]*f/z-h);y=~~(s[1]*f/z-h);if(!m[q=y*f+x]|m[q]>z)m[q]=z,a.fillStyle="rgb("+~(s[3]*h)+","+~(s[4]*h)+","+~(s[3]*s[3]*-80)+")",a.fillRect(x,y,1,1)}',0)  

</script>  
</body>  
<ml>

心

<!--保存为html后缀文件，浏览器中打开-->
<!doctype html>
<html>
<head>

<title>Heart</title>
<meta charset="UTF-8">
</head>
<body>
<canvas id="c"></canvas>
<script>
var c = document.getElementsByTagName('canvas')[0];
var a = c.getContext('2d');
</script>

<script>
e=[];h=[];O=c.width=innerWidth;Q=c.height=innerHeight;v=32;M=Math;R=M.random;C=M.cos;Y=6.3;for(i=0;i<Y;i+=0.2)h.push([O/2+180*M.pow(M.sin(i),3),Q/2+10*-(15*C(i)-5*C(2*i)-2*C(3*i)-C(4*i))]);
for(i=0;i<v;){x=R()*O;y=R()*Q;H=80*(i/v)+280;S=40*R()+60;B=60*R()+20;f=[];for(k=0;k<v;)f[k++]={x:x,y:y,X:0,Y:0,R:1-k/v+1,S:R()+1,q:~~(R()*v),D:2*(i%2)-1,F:0.2*R()+0.7,f:"hsla("+~~H+","+~~S+"%,"+~~B+"%,.1)"};e[i++]=f}
function _(d){a.fillStyle=d.f;a.beginPath();a.arc(d.x,d.y,d.R,0,Y,1);a.closePath();a.fill()}
setInterval(function(){a.fillStyle="rgba(0,0,0,.2)";a.fillRect(0,0,O,Q);for(i=v;i--;){f=e[i];u=f[0];q=h[u.q];D=u.x-q[0];E=u.y-q[1];G=M.sqrt(D*D+E*E);10>G&&(0.95<R()?u.q=~~(R()*v):(0.99<R()&&(u.D*=-1),u.q+=u.D,u.q%=v,0>u.q&&(u.q+=v)));u.X+=-D/G*u.S;u.Y+=-E/G*u.S;u.x+=u.X;u.y+=u.Y;_(u);u.X*=u.F;u.Y*=u.F;for(k=0;k<v-1;)T=f[k],N=f[++k],N.x-=0.7*(N.x-T.x),N.y-=0.7*(N.y-T.y),_(N)}},25);
</script>
</body>
</html>