JS语法详解

来源：互联网发布：做优化发展环境维护人编辑：程序博客网时间：2024/04/24 19:02

一、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>