JS语法详解

最新推荐文章于 2024-11-03 09:26:21 发布

原创最新推荐文章于 2024-11-03 09:26:21 发布 · 1.3k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#js

Web Desgin 专栏收录该内容

6 篇文章

订阅专栏

一、JS基于对象，弱类型，Java面向对象，强类型

二、JS与页面结合方式

1、内嵌：

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
　　<script type="text/javascript">
alert("js");
</script>
</head>

2、导入

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript" src="test.js">
	alert("js");
</script>
</head>

注意：当script标签中有src属性，且当前代码块中的代码不会执行

三、js也包括程序设计语言的一些基本组建

1、变量

2、语句

3、函数

4、数组

5、对象

注意：只是表现形式不一样

四、运算符

1、字符串与其他数字相加=连接

2、字符串与其他数字相减=算数运算

3、1为真，0为假，非空为真，

4、Typeof(a) 判断a胡类型

实例：99乘法表

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
td{
	border:1px solid red;
	padding:5px;}
</style>
<script type="text/javascript">
document.write("<table>");
for(var x=1;x<=9;x++) {
	document.write("<tr>");
	for(var y=1;y<=x;y++) {
			document.write("<td>"+x+"*"+y+"="+x*y+"</td>");
	}
	document.write("</tr>");
}
document.write("</table>");
</script>
</head>
<body>
</body>
</html>

效果图：

五、函数

1、格式

function 函数名(参数列表) {
//code
}
实例：
function add(a,b) {
　　return a+b;
}
实例：任意个数相加，arguments对象是专门存储函数调用时的实际参数，本质就一数组
<script type="text/javascript">
function add() {
	var sum = 0;
	for(var i=0;i<arguments.length;i++) {
			sum+=arguments[i];
	}	
	return sum;
}

alert(add(1,2,3,4));
</script>

js函数特殊部分
<script type="text/javascript">
function add() {
	var sum = 0;
	for(var i=0;i<arguments.length;i++) {
			sum+=arguments[i];
	}	
	return sum;
}

var str = add;
//alert(add);
//alert(str);
alert(str(1,23,4));
</script>
注意：直接打印函数名：就打印出了函数的申明，将函数名赋值给一个变量，相当于将该函数胡引用付给另一个变量，直接可以调用该变量函数

动态函数
<script type="text/javascript">
var show = new Function("x,y","sum = x + y; return sum;");
alert(show(2,3));

相当于：
function add(x,y) {
	return x+y;	
}
</script>

匿名函数：
<script type="text/javascript">
window.onload=function() {
	alert("run");	
};

相当于：
function fun() {
	alert("run");	
}
window.onload=fun;
</script>

六、数组

定义：

（1）var arr=[1,2,”aa”];
arr[5]=10;
For(var i=0;i<arr.length;i++) {
　　alert()arr[i];
}

（2）Var arr = new Array(4);
特点：
1、存储任意类型
2、长度可变

七、对象

1、String 请参考手册

2、Date

实例：计算两个日期间相隔天数

<script type="text/javascript">
function dates(a,b) {
	var a=new Date(a);
	var b = new Date(b);
	var c = b-a;
	return c/1000/60/60/24;
}

alert(dates("5-1-2013","6-1-2013")); //传递参数时，要以月日年的格式
</script>

3、Math对象

实例1：产生10个随机数

<script type="text/javascript">
function randoms() {
	for(var i=0;i<10;i++) {
		var i = parseInt(Math.random()*10+1);
		document.write(i+"<br/>");	
	}
}
randoms();
</script>

实例2:进制转换

<script type="text/javascript">
//将其他进制转成10进制
var a = parseInt("110",2);
alert(a);

//将10进制转成其他进制
var b = 60;
b = b.toString(16);
alert(b);
</script>

4、数组Array

请查阅手册

八、自定义对象

1、添加对象

<script type="text/javascript">
function Person() {}
var p = new Person();
//给对象添加属性
p.name = "lisi";
p.age = 12;

//给对象添加方法
p.show = function() {
	alert(p.name + "..." + p.age);
}

p.show();
</script>

封装对象
<script type="text/javascript">
function Person(name,age) {
	//添加属性
	this.age = age;
	this.name = name;	
	
	//添加方法
	this.show = function() {
		alert(this.age + "..." + this.name);	
	}
};

var p = new Person("lisi",12);
p.show();
</script>

九、给Array对象添加新功能

<script type="text/javascript">
//给数组的添加新功能，最大值
Array.prototype.getMax = function() {
	var max = this[0];
	for(var i=1;i<this.length;i++) {
			if(this[i] > max) {
					max = i
			}
	}
	return this[max];	
}
</script>

十、利用对象prototype属性实现继承

<script type="text/javascript">
//利用对象的prototype属性实现继承
//定义动物类
function Animal(name) {
	this.name = name;	
	
	//方法
	this.getName = function() {
		return this.name;	
	}
	this.setName = function(name) {
		this.name = name;
	}
	this.eat = function() {
		alert("吃");	
	}
}

//创建动物实例
var animal = new Animal("动物");
//alert(animal.getName());

//定义猫对象，并继承动物，还覆盖动物中吃的方法
function Cat() {}
Cat.prototype = animal;
//创建猫实例
var cat = new Cat();

//覆盖动物中吃的方
cat.eat = function() {
	alert("吃鱼");	
}
cat.setName("猫");
//alert(cat.getName());
//cat.eat();

//定义狗，并继承动物
function Dog() {}
Dog.prototype = animal; //制定狗的父类为动物
var dog = new Dog();

dog.setName("狗");
alert(dog.getName());
dog.eat();
</script>

十一、其他语句

1、for in 语句
格式：for (变量 in  被遍历的变量) {
//code
}
实例：
<script type="text/javascript">
//for in 语句 遍历对象
function Person() {
	this.name = "lisi";
	this.age = 12;
	this.get = function() {
		alert(this.name + "..." + this.age);	
	}	
}

//遍历
/*var p = new Person();
alert("name..." + p['name']);
for(t in p) {
		alert(t + "..." + p[t]);
}*/

//遍历数组
var arr = [1,5,4,5,7,6];

for(i in arr) {
	alert(i + "..." + arr[i]);
}
</script>

with语句
格式：with(对象) {

}
实例：
<script type="text/javascript">
var date  = new Date();
with(date) {
		alert(getFullYear() + "年" + getMonth() + "月" + getDate() + "日");
}
</script>