6.网页前端之javascript一-CSDN博客

本文链接：https://blog.csdn.net/d3582077/article/details/136009171

Javascript的语法
这里我只把跟C#基本语法不一样的地方总结出来，其它的循环语句for,while，判断语句if等都是一样的，就不做说明了。
变量的数据类型：
先来看看Javascript的数据类型
有Number类型的，就是数字，比如25,50.5这些都是数字类型的，不区分浮点和整型。
String类型：字符串类型，如："abcdefg"，包括'c';
Boolean类型的，true和false
Javascript是区分大小写的，关键字，和变量的定义，使用，它们的大小写都要严格一致。
变量的定义：
可以不需要类型声明，因为在给变量赋值的时候，Javascript可以识别是什么类型的变量，像下面这样，直接拿个变量使用了。
i=5;
其实暗地里，Javascript还是给你定义好了的。也可以显式的定义,如:
var i=5;//数字类型
var str="12345";//字符串类型
var flag=true;//布尔类型
全都用var类型声明，反正Javascript可以自动识别变量类型，var类型的，感觉就好像个指针，随便可以指向什么类型的数据。
比如像下面这样：
var a=1234;
a="abcdefg";
在定义的时候，a赋值为1234那么它就是个数字类型，后来被赋值"abcdefg"，那么此时a就变成了字符串类型的。
脚本代码是写在script标签里的，如：
<script type="text/javascript">
var a=1234;
</script>
type属性指定是什么脚本，它有javascript,vbscript,php等，在上面指定的是javascript。
document对象的write方法，这个方法就是输出字符串到网页，可以把浏览器看作一个控制台，然后write就是输出字符串
到控制台（浏览器的客户端），但这个比喻不怎么恰当，应该是write把字符串写入到网页的代码中，然后浏览器再翻译网页
的代码，这个就实现了动态的编写网页(客户端javascript级的动态，非服务端那种内容的动态)，网页的内容不是一成不变的，像静态网页，制作好了后，如果要更改里面的代码，
那么就得手动修改网页里的代码。
看下示例：
<body>
<script type="text/javascript">
for(var i=0;i<3;i++)
document.write(i+"<hr />");
</script>
</body>
执行后的结果是这样：
<script type="text/javascript">
1<hr />
2<hr />
3<hr />
</script>
看结果图：

注释符：Javascript的注释有//和/**/，用法跟C#一样。
Javascript的对象：
Javascript有许许多多的对象，这里我只选三个对象来做说明，数据类型对象String和Number还有数组对象Array。
是对象那就是有方法和属性，来看看String对象的几个方法和属性：
charAt方法：返回指定位置的字符
toLowerCase方法：把字符串转换为小写
length属性：字符串的长度
看用法示例：

var lerStr=str.toLowerCase();//转换为小写字符串
document.writeln(lerStr+"<br/>");//输出小写字符串
document.writeln(str.length);//输出字符串的长度
</script>

效果图：

上面新建了一个String对象，并把它赋给var定义的变量(var是能容纳任何数据类型的，当然new出来的String对象也可以接收)
str存储的是字符串，那么这样不使用new，直接给str赋字符串也是可以的，比如var str="ABCDEFG"，像这个str依然能使用
String对象里的方法和属性。

我这里给个地址，可以查到String对象的所有方法和属性：http://www.w3school.com.cn/js/jsref_obj_string.asp

Number对象的方法和属性的使用，也参照那里面的资料吧，这里不提了。
Array数组对象

Array数组对象
使用new创建数组
var ary=new Array();
此时ary数组的大小为0，可以输出ary.length来查看，可以显式的指定大小:
var ary=new Array(10);数组大小为10，在运动期间也可以动态的修改，
比如这样的使用：
var ary=new Array(10);
ary[100]=10;//此时ary数组的大小就变为101了
数组里每个元素可以赋不同类型的值，比如：ary[0]=20;ary[1]="kdjfkd";ary[2]='c';
数组定义时初始化：
var ary=new Array(1,2,3,4,5);
不通过new的数组：
var ary=[1,2,3,4,5];这个ary数组大小为5,ary[0]是1，ary[1]是2，依次.
二维数组的定义：
var ary=[[1,2,3],[4,5,6]];
for(var i=0;i<2;i++)
for(var j=0;j<3;j++)
document.write(ary[i][j]);
也可以是：
var ary=new Array(2);
ary[0]=new Array(1,2,3);
ary[1]=new Array(4,5,6);
或者：
var ary=new Array(new Array(1,2,3),new Array(4,5,6));
不管怎么变，都是一样的，依据的是var可以容纳任何数据类型。

函数的定义：
函数名前加function，参数不需要类型声明，如下：
<script type="text/javascript">
function add(a,b)
{
return a+b;
}
document.write(add(5,3));
</script>

函数也可以这样定义：

var objFun=function()
{
alert("kjdfkdj");
}

其实是objFun接收了函数的对象，因为每一个函数可以看作是一个对象，就像C++里的函数指针，或者C#的委托。
a标签的onclick事件
onclick是a标签的一个事件属性，其它的标签也有，可以给给onclick指定一个函数，也就是当发生了onclick事件，就执行
哪个函数(onclick事件是当鼠标在元素盒子内单击时产生)
看示例：
<head>
<script type="text/javascript">
function add()
{
window.alert("你单击了这个链接!!!");
}
</script>
</head>
<body>
<a href="" οnclick="add()">点击弹出消息提示框</a>
</body>
当单击链接时，就弹出一个提示框，alert是window对象的一个方法，用于消息提示。
这时只提了一个onclick事件，更多关于a标签的事件请参考：http://www.w3school.com.cn/tags/tag_a.asp
对象
在之前提到过的对象有document和window,这些都是HTML对象，当然还有String,Number等，这些都是Javascript的对象。
像网页中的元素也是对象。那么我们就可以获得这些对象，然后访问它们的属性了。
比如document.images就存储有网页中所有图片标签img的对象（如果有），它是一个数组，数组里按钮顺序存储图片对象。
看下例就明白了：
<head>
<script type="text/javascript">
function add()
{
var str;
//获得所有img对象，并输出它们的图片路径
for(var i=0;i<document.images.length;i++)
{
str+=document.images[i].src;
str+="\n";
}
window.alert(str);
}
</script>
</head>
<body>
<a href="" οnclick="add()">点击弹出消息提示框</a>
<img src="d:/Image/qq1.jpg" />
<img src="d:/Image/qq2.jpg" />
<img src="d:/Image/qq3.jpg" />
</body>
效果图：

可以得到属性，当然也可以设置属性，如上面，我们还可以动态的更改图片对象的src属性，也就是图片的路径，
比如：document.images[0].src="d:\image\aaa.gif";
具体每个标签的对象有哪些属性，可以到DreamWeaver里去查看，比如查看img对象有哪些属性，就是下图所示：

获取更多的html对象请参考：http://www.w3school.com.cn/htmldom/dom_obj_document.asp
另外window对象下的方法和属性，使用的话，前面不需要加window也可以，比如window.alert("abc")写成alert("abc")是允
许的。

document对象的getElementById,getElementsByName和getElementsByTagName方法

getElementById根据id属性值来获取元素的对象，比如一个标签的id="qq2"，那么getElementById("qq2")就是获取这标签的对象

了，如果同时有多个标签id使用了qq2这个名称，那么getElementById只承认第一个元素的合法性，也就是获得第一个元素的对象，

这一点是跟name不一样的，像前面我们是用id和name来指定内部样式的，这两个也可以用来给标签取名，如果名称不是某个样式名称的话。

看示例：

<head>

script type="text/javascript">
function Mess()
{
var imgObj=document.getElementById("qq2");
alert(imgObj.src);
}
</script>
</head>
<body>
<a href="" οnclick="Mess()">显示信息</a>
<img id="qq2" src="d:/image/qq2.jpg" />
</body>

而getElementsByName是根据name属性值来获取对象，它返回的是一个数组，因为可能有多个标签使用同一个name，

getElementsByName是允许这种情况的，这一点跟id是不同的。

看示例：

<head>

getElementsByTagName是根据标签名来获取对象的，返回的是一个数组。比如获取所有img标签的对象就是：

document.getElementsByTagName("img")

getElementsByTagName对任何元素对象都有效，比如一个ul对象调用getElementsByTagName("li")，就是获取这个ul对象下的

所有li元素对象，而不是整个HTML的li元素。

id和class区别

之前介绍过了id和class，但没讲过它们有什么区别，现在来说说它们的一些区别。

class属性在对象里的名字是className，看示例：

上面在a标签里的onclick属性里,在函数后面有一个"return false"，这个意思禁止onclick事件的默认处理，a标签的onclick事件默认处理是，

当单击了元素，就链接到href属性指定的网址，所以我们禁止掉这个默认处理，当单击链接的时候，就不会链接到href指定的网址了。

class可以指定多个样式，样式名称用空格分开，如果属性有冲突的话，比如一个样式设置color为red,后面一个样式设置

color为yellow，那么是以后面的为准的，color的颜色为yellow。而id只可以指定一个样式。

看示例：class指定两个样式

display可以决定元素是内联元素还是块元素，这一点在前面说过了，也提到display:none可以隐藏元素，那么我们可以通过控制display来模仿一个菜单功能的显示功能，先来显示个简单的工具栏：

当鼠标进入a标签元素里就执行Display函数，在这个函数给div添加一个具有display:block属性的样式，当鼠标离开的时候执行Hidden函数，

在这个函数里隐藏div元素。

效果:

鼠标放上去:

这里有些问题没解决，比如鼠标离开a元素就隐藏div，应该是鼠标不在a元素和div元素内，才隐藏div元素。

解决这个问题的方法是把div放到a标签内就行了如：

<a οnmοuseοver="Display()" οnmοuseοut="Hidden()">显示工具栏
<div class="tool" id="idtool">
新建  打开  保存  另存为
</div>
</a>

这样div也属于a元素的一份子了。

如果要给div里加a标签的话，那么把最外头的a标签换成li，不然点击不到div里的a标签，如下：

<ul style="list-style:none;margin: 0px; padding: 0px;">
<li οnmοuseοver="Display()" οnmοuseοut="Hidden()"">
<a href="" οnclick="return false;">显示工具栏</a>
<div class="tool" id="idtool">
<a href="http://www.baidu.com" target="_blank">百度</a>
<a href="http://www.g.cn" target="_blank">谷歌</a>
</div>
</li>
</ul>