JavaScript语法详解

最新推荐文章于 2024-07-22 08:55:10 发布

红胡子海盗

最新推荐文章于 2024-07-22 08:55:10 发布

阅读量375

点赞数

分类专栏： JavaScript 文章标签： javascript 脚本语言

本文链接：https://blog.csdn.net/klnlkl12345/article/details/51347792

版权

JavaScript 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

JavaScript是用于网页开发的脚本语言（解释性语言），它是在客户端的浏览器执行的。

内部js：

它的代码可以随意放在HTML文件中任意位置，但一般是放到头部<head>里。代码格式如下：

<head>

内部JS：

<!--

windoe.alert("你好！")/*弹出对话框*/

//-->

</script>

外部JS：

</head>

JavaScript和JAVA语言类似，都是面向对象编程语言，都有类、方法、变量、数组、循环等等。

一、变量
在JS中变量统一用var表示，不管实际的数据类型。
var v1 = 456;//整数
var v2 = "你好";/*字符串*/
v3 = 789;//可以去掉var

var v4;//这样JS会理解为是一个没有定义的变量，表示符是undefined

window.alrt(typeof v1); //查看v1这个变量是什么数据类型

</script>

二、数据类型

1.基本数据类型：数值（Number）、字符串（String）、布尔型（Boolean）

2.复合数据类型：数组、对象

3.特殊数据类型：null（为空）、undefined（未定义）、NaN（不是数值）、Infinity（无穷大）

强制转换数据类型：

var a = 123; a="你好";//整数转字符串

var a = "123"; a = parseInt(a);//字符串转整数

三、运算符

如：+、-、*、/等等。。注JS的运算符的使用方法和其他语言一样，这里就不详细解释。

四、基础语句
1.if语句
var s = "ok";
if(s == "ok")//字符串比较相等时是用的==符号
{
window.alert("是ok");
}
else{
window.alert("不是ok");
}

2.switch语句
var a = 1;
switch(a)//对比时可以支持所有数据类型
{
case 1: window.alert("1"); break;
case "二": window.alert("2"); break;//case后的数据类型也可以任意
default: window.alert("0"); break;
}

3.for循环语句
for(var i=0;i<10;i++)
{
document.writeln("你好<br/>");
}

4.while循环/do while循环
var i=0;
while(i<10)//先判断在执行
{
document.writeln("你好<br/>");
i++;
}

do //先执行在判断
{
document.writeln("你好<br/>");
i++;
}while(i<10);

五、数组
JS中的数组，可以存放各种数据类型，即不区分数据类型。

1.一维数组
var sz = [1,2,"你好",4.4,true];

for(var i=0;i<sz.length;i++)
{
document.writeln(sz[i]);//遍历数组
break;//跳出for循环
}

for(var key in sz)
{
window.alert(sz[key]);//遍历数组数组的另一种方式（for..in），key表示元素的索引
}

sz[5]=55;//数组可以动态增长，即sz这个数组最大索引是4，你可以直接在后面加元素

2.二维数组
var szs = [[1,2],["a","b"]];

for(var i=0;i<szs.length;i++)
{
for(var j=0;j<szs[i].length;j++)
{
document.writeln(sz[i][j]);//遍历数组
}
}

var sss = [[1,2,3],["a","b"],[5]];//定义不规则数组
var kong = [];//定义空数组

六、方法（也叫函数）

1.语法
function fang1(str1,str2)//function关键字开头，fang1是方法名称，参数不带var，不支持重载即不管参数个数有多少，方法名称不能重名
{
document.writeln(str1);
return str2;//返回可写，可不写
}

fang1("你好","我好");//调用方法

2.可变参数
function fang2()//相当于不写传入参数，就变成可变参数
{
fo(var i=0;i<arguments.length;i++)
{
window.alert(arguments[i]);//打印所有传进来的参数，arguments是JS的一个数组，它可以访问所有传入值
}
}

fang2("你好","我好","大家好");//调用方法

3.js中一个方法可以赋值给一个变量，赋值后这个变量就可以当做方法来使用
var v1=fang1;
v1("你好","我好");

注：因为有上面这个特性，所以JS在传参的时候，除了传值，还可以传方法，传类

七、类

1.定义类
function cat()//它是一个类，也可以看作方法就看你怎么去调用（cat();//这样调用，那么它就是一个方法）
{
//1.私有变量和方法，外部不能直接调用
var age=3;
function fs()
{
window.alert(age);
}

//2.公开变量和方法，外部可以直接调用
this.color="白色";
this.fg=function()
{
window.alert(age);
}
}

2.操作类
(1)基本操作
var c = new cat(); //这样调用，那么它就是一个类
c.name="小白"; //动态添加成员及属性
window.alert(c.name); //访问变量的方式1
window.alert(c["name"]); //访问变量的方式2
window.alert(c.color); //可直接访问公有变量
c.fg(); //通过公开方法，访问私有变量
c=null;//被动释放对象内存
delete c.name;//主动释放对象的属性内存

(2)共享方法操作：共享方法相比较直接在类中写一个方法，要节约内存空间。
①创建一个独立的方法，此方法准备让所有类都可以调用，即相当于共享方法。
function fang()
{
window.alert("你好");
}

var a = new cat();
a.ff = fang;//这样就可以将一个外部方法，赋值给a这个类，相当于给a添加了一个新方法ff
a.ff();//调用新增的方法

var b = new cat();
b.ff = fang;//如果b对象没有执行这一步操作，那么它就不可以使用fang()这个方法
b.ff();

②使用prototype关键字给类绑定一个方法，那么所有新建的类都可以调用，即相当于共享方法。
cat.prototype.fang=function()
{
window.alert("你好");
}
var a = new cat();
var b = new cat();
a.fang();
b.fang();

(3)创建对象的几种方式
var aa = new cat();//常规创建一个已经定义好的类的对象
var bb = new object();//创建一个空类的对象，没有指定任何成员变量和方法
var cc = {name:"小花",age:5,fang1:function(){window.alert("你好")}};//创建一个简单类的对象，指定了成员变量和方法

八、继承
function a(name,age)//父类
{
this.name=name;
this.age=age;
this.shou=function()
{
window.alert(this.name+this.age);
}
}

function b(name,age)//子类
{
this.a = a;//第一步：把a类赋值给b类的this.a这个变量
this.a(name,age);//第二部：赋值之后，需执行调用一下this.a，就完成继承

//注：JS的继承特性，可以继承多个类

this.shou=function()
{
window.alert("ok"); //JS的方法是不能重载的，但可以覆盖父类的方法
}
}

九、事件
事件分类：鼠标事件、键盘事情、HTML事件、其他事件

例：用一个JS方法，控制两个按钮的点击监听事件（事件内容是点击按钮后，改变div的背景颜色）
<head>
<script language="javascript" type="text/javascript">

</script>
</head>

<body>
<div id="div1" style="width:400px;height:400px;background-color:red">颜色框</div>
<input type="button" value="黑色" οnclick="test(this)"/>
<input type="button" value="红色" οnclick="test(this)"/>
</body>