JS1-6

最新推荐文章于 2022-12-12 11:20:31 发布

CodeStarr

最新推荐文章于 2022-12-12 11:20:31 发布

阅读量194

点赞数

分类专栏： web

本文链接：https://blog.csdn.net/Ga4ra/article/details/79358260

版权

web 专栏收录该内容

27 篇文章 1 订阅

订阅专栏

JS 1-6

1.语法

1.1 使用

第一种
<html>
  <head>
  	<script>
      JS goes here...
    </script> 
  </head>
  <body>
    ...
  </body>
</html>


第二种
<html>
  <head>
  	<script src="file.js"></script> 
  </head>
  <body>
    ...
  </body>
</html>

第三种（最好）
<html>
  <head>
  </head>
  <body>
    ...
    <script src="file.js"></script> 
  </body>
</html>

程序设计语言分为解释性和编译型。

1.2 基本语法

statement;statement;

statement;
statement;


//注释  建议使用

/*多行
注释   建议使用*/


<!-- JS单行注释
<!-- html单行注释-->

驼峰格式是函数名、方法名和对象属性命名的首选格式。

给变量命名，用下划线来分隔各个单词。

字面量即常量。

js变量名允许包含字母数字下滑想和$，首字符不能为数字。

转义
'don\'t'
"don't"  不需转义

1.3 数据类型

1.3.1 字符串

1.3.2 数值

1.3.3 布尔值true/false

1.3.4 数组

var beatles=Array(4);
var beatles=Array();
beatles[0]="John"

var beatles=Array("John","...");
var beatles=["John","..."]

var lennon=["John",1940,false];
var beatles=[];
beatles[0]=lennon;

var lennon=Array();
lennon["name"]="John";

1.3.5 对象

var lennon=Object();
lennon.name="John";

var lennon={name:"John",year:1940}
var beatles={};
beatles.vocalist=lennon

1.4 操作

算数操作符

10+'20'=='1020'

即字符串+数值=字符串

条件语句

if(){
  
}else{
  
}

三元操作符
condition ? if true: if false

比较操作符

>=,<=,!=

var a=false
var b=''
//a==b true
//a===b false  全等操作符可比较类型

逻辑操作符

&&，||，！

1.5 循环语句

while(){
  
}

do{
  
}while()；

for(;;){
  
}

1.6 函数

function name(arguments){
  ...
  [return ...]
}
   
   函数中的变量有var，则是局部变量，否则是全局变量。

1.7 对象

object.property
object.method()

2.实践

2.1 平稳退化

平稳退化：让访问者在不支持js的浏览器上仍顺利浏览网站。

//在绝对必要的情况下可使用弹出窗口予以说明

window.open(url,name,features)
//eg.典型
function popUp(winURL){
  window.open(winURL,"popup","width=320,height=480")
}

/* 
调用popUp的一个方法是使用伪协议。真协议用来在因特网上的计算机之间传递数据报。
伪协议是非标准化协议，eg. 
<a href="javascript:popUp('http://www.example.com/');">example</a>

<a href="#" οnclick="javascript:popUp('http://www.example.com/');return false;">example</a>
'#' 是一个仅供文档内部使用的链接记号，这里是未指向任何目标的内部链接。

<a href="http..." οnclick="popUp(this.href);return false;">example</a>
*/

2.2 分离

渐进渐强：用额外信息层包裹原始数据。

2.3 向后兼容

方案是检测浏览器对JS的支持程度，即对象检测。

function func(){
  if(document.getElementById){
  	statement using document.getElementById
}
}
改进

if(!document.getElementById) return false;

//eg.
window.onload = function() {
  if (!document.getElementsByTagName) return false;
  var lnks = document.getElementsByTagName("a");
  for (var i=0; i<lnks.length; i++) {
    if (lnks[i].getAttribute("class") == "popup") {
      lnks[i].onclick = function() {
        popUp(this.getAttribute("href"));
        return false;
      }
    }
  }
}

2.4 性能

少访问DOM，尽量减少tag
合并脚本减少页面请求，放置<script>在文档末尾，</body>前，可以让页面更快
压缩脚本,有修改代码添加注释的工作副本和放在站点上的精简副本(file.min.js)

压缩工具：

Douglas Crockford的JSMin
Yahoo的YUI Compressor
Google的Closure Compiler

3.DOM

3.1 节点

节点主要有3种：

元素节点element node
文本节点text node
属性节点attribute node

获取节点有3种方法：

document.getElementById()
document.getElementsByTagName()/ somenode.getElementsByTagName()
document.getElementsByClassName()/ somenode.getElementsByClassName()

3.2 属性

object.getAttribute("title")
object.setAttribute("title","what to buy")

//childNodes属性
var body_element=document.getElementsByTagName("body")[0];
body_element.childNodes   //body元素的子元素数组

nodeType:

元素节点----1
属性节点----2
文本节点----3

//nodeValue属性
node.nodeValue本身值是Null
node.nodeValue.childNodes[0]是文本节点

//firstChild与lastChild属性
node.firstChild==node.childNodes[0]
node.lastChild==node.childNodes[node.childNodes.length-1]

6.改进

function addLoadEvent(func){
	var oldonload=window.onload;
	if(typeof window.onload!="function"){
		window.onload=func;
	}else{
		window.onload=function(){
			oldonload();
			func();
		}
	}
}