JavaScript语法知识学习
在网页中使用JavaScript。主要有两种方式：1-在HTML网页中嵌入JS脚本，此时需要使用script标签，在script标签中编写JavaScript代码。2-编写单独的JavaScript文件，然后通过Script标签导入HTML文档。
下面演示在HTML中嵌入JS脚本，创建test.html，在其中使用script标签定义js脚本。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--在HTML中使用js，必须使用script标签-->
<script type = "text/javascript">
function hi(){
document.write("<h1> Hello World</h1>") ;
}
function hi1(){
window.alert("Hello world") ;
}
hi() ;
hi1() ;
</script>
</head>
<body>
</body>
</html>
编写单独的JavaScript文件，然后通过Script标签导入HTML文档。创建test.js文件，并编写js代码，新建test.html，在test.html中使用script标签将test.js导入test.html
function f1() {
document.write("<h1>Hello World!!!</h1>") ;
}
function f2() {
window.alert("Hello World") ;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<body>
<script type = "text/javascript" src = "test.js"></script>
<script>
f1() ;
f2() ;
</script>
</body>
</html>
所有scrip标签都会按照它们在HTML中出现的先后顺序依次被浏览器解析，在不使用sdript标签的defer和async属性的情况下，只有在解析完前面的script代码之后，才会解析后面的，为了防止延迟现象，一般把js的引用放到body中网页内容之后，这样在解析JS代码之前，页面的内容将完全呈现在浏览器，会感觉打开页面的速度加快了。
至于基本变量定义，条件选择，循环之类的和Java几乎一模一样，不再赘述。
下面看看函数的使用：
定义函数有两种方法：1-使用function语句声明函数。2-通过Function对象构造函数。在实际开发中，使用function语句声明函数更方便，且执行效果更好。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<body>
<script>
var say = function(name, say){
document.write("<h1>" + name + ":" + say + "</h1>") ;
}
say("王国栋", "以梦为马的少年,终将拥有抵达宇宙星辰的答案") ;
</script>
</body>
</html>
对象是无序的数据集合，而数组是一组有序的数据集合，它们之间不可以相互转换，但是数组用户大量的方法，适合完成一些复杂的运算。
定义数组通过Array()和运算符new来实现。
下面实现了一些数组的基本操作,从末尾插入，从头部插入，删除，在指定位置插入和删除元素，数组翻转，逆序，排序，连接等。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<body>
<script>
var a = [] ;
a.push(1,2,3) ;
a.push(4,5,6) ;
a.pop() ;
document.write(a + "<br>") ;
var b = [] ;
b.unshift(1,2,3) ;
b.unshift(4,5,6) ;
b.shift() ;
document.write(b + "<br>") ;
var c = [1,2,3,4,5] ;
var d = new Array(2,3,4,5) ;
c.splice(2,1) ;
d.splice(0,1) ;
document.write(c + "<br>") ;
document.write(d + "<br>") ;
var e = [1,2,3] ;
e.splice(3,0,4,5,6) ;
document.write(e + "<br>") ;
var f = [1,2,3,4,5] ;
f = f.join("-") ;
document.write("f的类型 = " + typeof(f) + "</br>") ;
document.write("f的值 = " + f + "<br>") ;
g = f.split("-") ;
document.write("g的类型 = " + typeof(g) + "</br>") ;
document.write("g的值 = " + g + "</br>") ;
var h = [1,2,3,4] ;
var h = h.reverse() ;
document.write("h = " + h + "</br>") ;
var j = [1,2,3,4,5] ;
var i = function(x,y){
return y - x ;
}
var res = j.sort(i) ;
document.write(res + "<br>") ;
var r1 = [1,2,3] ;
var r2 = [4,5,6] ;
document.write(r1.concat(r2) + "<br>") ;
var r3 = [1,2,3,4,5,6,7,8,9] ;
var r4 = r3.slice(2,5) ;
document.write(r4 + "</br>") ;
</script>
</body>
</html>
使用constructor检测数据类型
对于对象，数组等复杂数据，可以使用Object对象的constructor属性进行检测。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<body>
<script>
var a = [] ;
var b = {} ;
alert(a.constructor == Array) ;
alert(b.constructor == Object) ;
var value = 1 ;
alert(typeof value) ;
alert(value.constructor == Number) ;
</script>
</body>
</html>
使用toString检测数据类型可以进一步设计一种更安全的检测JS数据类型的一种方法，用户还可以根据开发进一步补充检测来信的范围。
1-编写函数输出1-10000之间的所有对称数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<body>
<script>
function symmetry(num){
var res = [] ;
while(num >= 1){
var reverseNum = num.toString().split('').reverse().join('') ;
if(reverseNum == num){
res.unshift(num) ;
}
num -- ;
}
return res ;
}
var r = symmetry(10000) ;
var i = 0;
for(i=0; i<r.length; i++){
document.write(r[i] + "<br>") ;
}
</script>
</body>
</html>
2-JS中检测一个变量是否是String类型。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<body>
<script>
function isString(str){
return (typeof str == String || str.constructor == String) ;
}
alert(isString(1)) ;
alert(isString("Hello World")) ;
alert(isString(new String(1))) ;
</script>
</body>
</html>
3-使用Arguments对象
Arguments对象表示参数集合，它是一个伪数组，拥有与数组类似的结构，通过数组下标的形式访问函数实参值。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<body>
<script>
function f(){
for(var i =0; i<arguments.length; i++){
alert(arguments[i]) ;
}
}
f(3,4,5) ;
</script>
</body>
</html>
|