您的位置：首页 > Web前端 > JavaScript

JavaScript基础

2017-04-22 12:03 225 查看

JavaScript一种直译式脚本语言，是一种动态类型、弱类型、基于原型的语言，内置支持类型。它的解释器被称为JavaScript引擎，为浏览器的一部分，广泛用于客户端的脚本语言，最早是在HTML（标准通用标记语言下的一个应用）网页上使用，用来给HTML网页增加动态功能。

1、JavaScript的特点：
1、跨平台

2、安全性（JavaScript的代码不能直接访问硬盘的内容）

2、JavaScript是基于对象的语言。
JavaScript是解释型语言（不需要经过任何的编译过程），java是解释，编译型语言。

JavaScript是弱类型语言。java中声明的变量的时候，必须声明变量的类型，而JavaScript声明变量时不需要明确数据的类型，任何的变量都是使用一个关键字var去声明即可。

3、JavaScript组成部分
1、EMCScript（基本语法）

2、BOM(browser object Model)浏览器对象模型，浏览器对象模型中把浏览器的各个部分用了一个对象进行描述，如果我们要操作浏览器的一些属性，就可以通过浏览器对象模型的对象进行操作。

3、DOM(Document Object Model)文档对象模型，一个html页面被浏览器加载的时候，浏览器就会对整个html页面上所有标签都会创建一个对应的对象进行描述。

一、JavaScript的引入

方式1：可以在<script>标签内进行编写

<script type="text/javascript">
alert("hellow world!");
</script>

方式2：可以引入外部的JavaScript文件

<script src="test.js" type="text/javascript"></script>

方式2要注意的是：script标签是有开始标签和结束标签，不能在一个标签体内结束。标签体内不允许再写入内容(内容会无效)。一般我们会使用引入外部的JavaScript文件（复用性高），不会与其他的html代码混杂在一起。

网页的注释：

html <!– –>

css /* */

JavaScript //（单行注释）和/* */（多行注释）

二、JavaScript的基本语法

1、声明变量

//JavaScript的变量声明，格式： var 变量名=数据
//后定义的同名变量会覆盖前定义的同名变量
var a = 10;
var a = 11;
alert(a);

//声明变量可以不写var，可以省略。因为JavaScript中的变量数据类型是根据存储的数据类型决定的
var b = "狗娃";
b = true; //对b重复赋值为不同的数据类型是被允许的
document.write(b);

2、JavaScript的数据类型

typeof 查看变量的数据类型

使用格式：typeof 变量名

JavaScript的数据类型，全部数字都是number类型，全部字符都是String类型
number：小数和整数类型

string：字符和字符串类型

boolean：布尔类型

undefined：未定义类型（当一个变量没有经过定义的时候，使用typeof查看其数据类型的时候是undefined）

字符串转换数字的函数

parseInt（）

parseFloat（）

var a = 12;
alert(typeof parseInt(a));

//字符串中，数字更随着非数字字符，会去掉非数字字符
var b = "12a";
alert(parseInt(b));
//当字符串中，以非数字字符开头，会解析不成成功。
//会显示 NaN (not a number)
b = "a12";
alert(parseInt(b));

//以0x开头的字符串，会将其当做一个16进制的数据处理
b = "0x10"；
alert(parseInt(b));

//这里true与number类型相加，是作1使用的
var c = 1+true;
document.write(c);

//当我们==判断时，会将字符串转换数字进行比较，当转换不了的时候，则比较字符的长度

3、控制流程

这里一些与java一样的if-else，for，while，do-while，switch,break,continue等流程控制就不再做出讲解

//for-in循环，遍历一个数组
var array = [1,2,3,4]
for(var index in array){
document.write(arr[index]);
}

//2、还可以循环一个对象属性
//定义一个对象的构造方法
function Person(id , name){
this.id = id;
this.name = name;
}
//创建一个对象
var p = new Person(110,"Lee");
//循环输出一个对象的属性
for(var prop : p){
document.write(p[prop]);
}

with语句:在存储对象的属性和调用对象的方法就不用重复指定对象
with语句的格式：

with(对象){}

with（document）{
//省略document这个对象的书写，直接使用document的write方法
write（“123”）；
}

4、函数

函数的定义：function 函数名（形参列表）{函数体；}

1、在JavaScript中函数定义形参是不能使用var关键字

2、不需要表明返回值的类型

3、在JavaScript中是没有函数重载的，后面定义的同名的函数会覆盖前面的同名函数

4、在JavaScript中任何函数内部都隐式的维护了一个argument的对象，当调用函数传递数据的时候，是会先传递给argument的对象，再由argument对象分配给形参。

function add(a,b){
document.write(a+b);
return sum;
}
//调用函数，当没有返回值的时候，res接受到的值为undefined
var res = add(1,2);
document.write(res);

//即使没有定义形参，但我调用函数的时候依然能传递参数进去，因为其隐式地维护了一个argument对象
function test(){
document.write(argument.length);
for(var i=0;i<argument.length;i++){
document.write(argument[i]);
}
}
//当我们调用test时，传入参数的时候，时会先出传递给argument对象
//结果是 -> 3
test（1,2,3）;

三、JavaScript的内置对象

1、String对象

//比较的是对象，不是比较的是内容
var s1 = new String("hellow");
var s2 = new String("hellow");
document.write(s1==s2);

//当我们要比较值时,没有equals方法,必须调用String对象的toString方法来进行比较
document.write(s1.toString==s2.toString);

//Stirng对象常用的方法
//1、Anchor() 产生锚点，会将字符串产生一个<a>标签，并且将其命名为传入的字符串参数
document.write("123".Anchor("five"));

//2、bink() 为元素添加blink标签

//3、charAt 返回指定索引位置处的字符
document.write("123".charAt(1));

//4、cahrCodeAt返回一个整数，代表指定位置字符的编码

//5、Fontcolor() 给字符串添加一个<font>标签，并且设置其颜色属性值

//6、indexOf() 返回字符串中，第一次出现指定字符串的index

//7、lastIndexOf()返回字符串中，最后一次出现指定字符串的index

//8、italics() 给字符串添加一个<i>斜体标签

//9、link() 给字符串添加一个<a>标签
document.write("123".link("http://www.baidu.com"));

//10、Replace() 返回根据正则表达式进行文字替换后的字符串参数
document.write("123".replace(“”，“”));

//11、split() 切割字符串

//12、substr() 截取子字符串

//13、toUpperCase() toLowerCase() 转大小写

2、Date对象

<html>
<head>
<script type="text/javascript">
/*
最美的不是下雨天，而是曾与你躲过雨的屋檐。
*/

//获取当前系统时间
vat date = new Date();
document.write(date.toLocaleString());

function getCurrentTime(){
var time = new Date();
var span = document.getElementById("span");
span.innerHTML = time.toLocaleString();
}

</script>
</head>
<body>
<!--给span标签注册一个点击事件，获取当前时间-->
<span id="span" onclick="getCurrentTime()">点击这里获取当前时间...</span>
</body>
</html>

3、number对象

//格式：
//var num = new Number("数字");
//var num = "数字";

//常用的方法：
//1、toString();把数字转换成指定进制形式的字符串形式
document.write("二进制"+(new Number(1).toString(2)));

//2、toFixed();指定保留的小数位，四舍五入

4、数组对象

JavaScript中数组的长度是可以发生变化的

//创建数组对象
var a1 = new Array();
var a2 = new Array(100);即使指定长度，也可以改变长度
var a3 = new Array("元素1","元素2","元素3");
var a4 = ["元素1","元素2","元素3"];

//1、concat 将两个数组组成一个新的数组返回 arr1 = arr1.concat(arr2);

//2、join 返回一个字符串，包含着所有元素，并且元素由指定的分割符连接

//3、pop 移出数组中的最后一个元素，并且返回这个元素

//3、push 将新元素添加到一个数组中，并返回数组长度

//4、reverse 返回一个元素颠倒的新数组

//5、shift 移出数组的第一个元素，并且返回它

//6、slice 返回一个数组中的一段

//7、sort(sortfunction) 传入一个方法，来对数组进行排序。如果这个参数被省略，则元素按照 asc码排序

//8、splice 从数组中移出一个或多个元素，在所移出元素的位置插入新元素，返回所移出的元素（一个参数，开始删除元素的索引值，第二个参数就是删除元素的个数，第三个或多个参数是需要插入的元素）

5、prototype原型

prototype原型解决的问题是如何将一个方法，添加到一个对象中。
即是，当我们需要给JavaScript的内置对象添加一些方法时，就可以使用prototype原型来对JavaScript的内置对象添加自定义的方法
1、prototype是函数必备的属性（保留属性，只要实现function就有这个保留属性）

2、prototype的值是一个对象

3、可以任意修改函数的prototype属性的值

4、一个对象会自动拥有prototype的所有成员属性和方法

3、格式：Array.prototype.（方法名） = function(){函数体；}

//例如，对Array数组对象添加自定义方法
//Array对象获得了prototype属性的方法了
Array.prototype.eat = function(){
document.write("eat");
}

//现在初始化一个Array数组对象后，就能拥有个自定义方法了
var array = new Array();
//调用自定义的方法
var.eat();

四、BOM编程

BOM(Browser Object Model) 是指浏览器对象模型，浏览器对象模型中把浏览器的各个部分用了一个对象进行描述，如果我们要操作浏览器的一些属性，就可以通过浏览器对象模型的对象进行操作。

浏览器对象模型提供了独立于内容的、可以与浏览器窗口进行互动的对象结构。BOM由多个对象组成，其中代表浏览器窗口的Window对象是BOM的顶层对象，其他对象都是该对象的子对象。

浏览器对象：
1、window 代表一个窗口对象

2、location 代表了地址栏对象

3、screen 代表了整个屏幕的对象

1、window对象的常用方法

<html>
<head>
<script type="text/javascipt">
//window 对象的方法
//使用window对象的任何属性和方法，都可以省略window

//open方法 打开指定的html新页面，并且可以设置新窗口的一些属性
function showAd(){
window.open("ad.html","_blank","height=400px,width=400px,toolbar=no,location=no,top=200px");
}

//resizeTo() 将窗口大大小更改为指定的宽度和高度值

//moveBy() 相对于原来的窗口，移动指定的值

//moveTo() 将窗口，移动到指定的位置

//setInterval() 每经过指定毫秒值，就会自动执行指定代码。并返回该定时任务的ID
var id = window.setInterval("showAd()",1000)；

//clearInterval() 取消定时任务，根据任务的ID取消任务
window.clearInterval(id);

//setTimeout() 经过指定毫秒值后，执行指定的代码一次。
window.setTimeout("showAd()",2000);

</script>
</head>
<body>
<input type="button" onclick="showAd()" value="open">
</body>
</html>

2、window对象的注册事件

<html>
<head>
<script type="text/javascipt">
/*
注册事件的方式：
1、直接在html元素标签上直接注册
<body onload="ready()">
2、可以使用js代码，获得对应的标签对象进行注册
*/

//onload() 当页面加载完成的时候，就会调用该方法
function ready(){
document.write("当body元素被加载完毕，就会调用该方法。");
}

//这里要注意的是，html网页是从上而下加载的，因此<script>标签内自行该代码的时候，实际上body标签并没有被加载。因此，是获取不了该body的对象。
//解决的办法是，可以将<script>标签放到<body>标签后面。或者是，为body标签注册onload事件，当body加载完成之后调用该方法。
//获得对应的标签对象进行注册事件
var body = document.getElementById("body");
body.onload() = function(){
document.write("当body元素被加载完毕，就会调用该方法。");
}

</script>
</head>

<!--直接在html元素标签上直接注册,该onload事件是表明：当body标签加载完成后，就会调用该方法-->
<body id="body" onload="ready()">
</body>

</html>

3、window对象的常用事件

鼠标点击事件：
onclick() 单击事件

ondblclick() 双击事件

onmousedown() 鼠标点击事件

onmouseup() 鼠标起来事件

鼠标移动事件：
onmouseout() 当鼠标移出

onmousemove() 当鼠标移动

焦点相关：
onblur 在对象失去输入焦点触发

onfocus 在对象获取到了输入焦点触发

其他
onchange() 当对象或者选中区的内容改变时触发

onload() 在浏览器完成对象的装载后立即触发

onsubmit() 当表单将要被提交时触发

4、location对象

主要用于操作地址栏的

<html>
<head>
<script type="text/javascript">
/*
属性：
href        设置或获取整个url为字符串
protocol    设置或获取url的协议部分
href        设置或获取href属性中跟在问号后面的部分

方法：
reload()    重新加载当前页面
*/

function showURL(){
//获取当前的URL
alert(location.href);
}

//调用该方法能刷新页面
function refresh(){
location.reload();
}

</script>
</head>
<body>
<input type="button" onclick="showURL" value="显示当前网址..."/>
</body>
</html>

5、screen对象

screen对象的属性
availHeight 获取系统屏幕的工作区域的高度排除任务栏

avialWidth 获取体统屏幕的工作区域宽度，排除任务栏

height 获取屏幕的出自分辨率

width 获取屏幕的水平分辨率

五、Dom编程

文档对象模型（Document Object Model，简称DOM），是W3C组织推荐的处理可扩展标志语言的标准编程接口。在网页上，组织页面（或文档）的对象被组织在一个树形结构中，用来表示文档中对象的标准模型就称为DOM。

一个html页面被浏览器加载的时候，浏览器就会对整个html页面上所有标签都会创建一个对应的对象进行描述，在浏览器上看到的信息只不过就是html对象属性信息而已，我们只要能做找到对应对象的属性，则以改变浏览器当前显示的内容。

文档树的每一标签对象我们都称为一个节点node（）

例如，我们可以来获取一下一个html页面的标签节点，以及其属性。

<html><head><script type="text/javascript">

//document对象的集合属性：
//获取html文件中所有标签节点
var allNodes = document.all;
for(var i=0;i<allNodes.length;i++)
{
alert(allNodes[i].nodeName);
}

//获取html中所有的a标签的href属性
function test(){
var links = document.links;
for(var i=0;i<links.length;i++){
alert(links.href);
}
}

</script></head><body>

<a href="#">连接1</a><a href="#">连接2</a><a href="#">连接3</a>
<input type="button" onclick="test" value="添加连接..."/>

</body></html>

而我们获得html页面的各种节点，有两种方法：
1、根据属性寻找节点

2、通过关系找节点

1、根据属性寻找节点

<html>
<head><script type="text/javascript">
/*
通过html元素的标签属性寻找节点
document.getElementById("html元素的id");
document.getElementsByTagName("标签名");
document.getElementsByName("html元素的name");

innerHTML 是用于设置标签体的内容的
value 是用于设置标的value属性的
*/
function showImg(){
//根据标签名字获取节点
var images = document.getElementsByTagName("img");
for(var i =0;i<image.length;i++){
//设置该节点的属性
images[i].src="";
//此时是不用加上px
images[i].width="300";
}
}

</script></head><body>

<img src="#"/>
<input type="button" onclick="showImg()" value="添加图片.."/>
</body></html>

2、通过关系找节点

<html><head><script type="text/javascript">
/*
通过关系找标签
parentNode  获取当前元素的父节点
childNodes  获取当前元素的所有下一级子元素(空文本，注释也算作一个子节点)
firstChild  获取当前节点的第一个子节点
lastChild   获取当秦节点的最后一个子节点
nextSibling 获取当前节点的下一个节点
previousSibling 获取当前节点的上一个节点
*/

var bodyNode = document.getElementsByTagName("body")[0];
//获取父节点
var parentNode = bodyNode.parentNode;
//同时也会获取空白文本，注释的这些节点，所以我们需要进行排除
var children = bodyNode.childNodes;
//我们可以通过节点的类型进行判断筛选
/*
文本节点的类型 3
注释节点的类型 8
标签节点的类型 1
*/
for(var i=0;i<children.length;i++){
alert(children[i].nodeName+" "+children[i].nodeType());
}

</script></head><body>

</body></html>

3、创建与插入节点

<html><head><script type="text/javascript">
/*
创建节点
document.createElement("标签名");  创建新元素节点
elt.setAttribute("属性名","属性值")   设置属性
elt.appendChild(e);         添加元素到elt中的最后的位置

elt.insertBefore(new,child);        添加子节点到指定的child子节点的前面
elt.removeChild(child);     删除指定子节点
(这两个方法都必须要求elt是child的直接父节点)
*/
function add(){
//创建节点，并为其设置属性
var inputNode = document.createElement("input");
inputNode.setAttribute("type","button");
inputNode.setAttribute("value","newButton");

//获得<body>节点
var bodyNode = document.getElementsByTagName("body");
//为<body>节点添加子节点
bodyNode.appendChild(inputNode);

}

</script><body>

<input type="button" onclick="add()" value="add" >

</body></html>

<html><head><script type="text/javascript">
function addFile(){
//创建<tr>节点，两个<td>节点
var trNode = document.createElement("tr");
var tdNode1 = document.createElement("td");
var tdNode2 = document.createElement("td");

//为两个<td>节点添加内容（这里与其，特意地创建<input>和<a>节点添加到两个<td>节点当中，不如直接为其添加标签内容更加简便）
tdNode1.innerHTML= "<input type='file' />";
tdNode2.innerHTML="<a href='#' onclick='delFile(this)' />";

//将两个<td>节点添加到<tr>节点当中
trNode.appendChild(tdNode1);
trNode.appendChild(tdNode2);

//获取<tbody>节点和<table>标签里面最后面的<tr>标签，以达到将新创建的节点添加到指定位置
var tableNode = document.getElementsByTagName("tbody")[0];
var lastRow = document.getElementById("lastRow");
tableNode.insertBefore(trNode,lastRow);
}

//删除指定的<tr>节点
function delFile(aNode){
var trNode = aNode.parentNode.parentNode;
var tbodyNode = document.getElementsByTagName("tbody")[0];
tbodyNode.removeChild(trNode);
}

</script></head><body>

<!--table里面的元素，直接的父节点是tbody-->
<table>
<tr>
<td><input type="file"></td><td><a href="#" onclick="delFile(this)"></td>
</tr>

<tr id="lastRow">
<td colspan="2"><input type="button" onclick="addFile()" value="添加" /></td>
</tr>
</table>
</body></html>

4、操作节点的css

<html><head><script>
//获取相应的节点
var spanNode = document.getElementById("span");
//操作其style属性
spanNode.style.fontSize="100px";
spanNode.style.color="red";

</script></head><body>

<span id="span">1</span>

</body></html>

六、简单的JavaScript程序

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>test</title>
</head>
<body>
<!--
这里我们需要做的是一个，标签的联动。就是一个标签的状态的改变会导致其它标签的内容或属性发生改变。
比如，在<select id="province">标签选择不同的省份，则在<select id="city">标签里显示该省份的相应的一些城市
-->
<select onchange="change()" id="province">
<option>GuangDong</option>
<option>HuNan</option>
<option>HuBei</option>
</select><br>
<select id="city"></select>
</body>

<script type="text/javascript">
var citis = [["guangzhou","shenzhen","huizhou","dongguan"],["changsa","zhangjiajie"],["wuhan","jingzhou"]];

function change(){
//获取第一个select标签所选择的内容的索引值，获取对应的城市
var provinceNode = document.getElementById("province");
var city = citis[provinceNode.selectedIndex];

//直接设置select标签的option标签长度为零，清空第二select标签的长度
var cityNode = document.getElementById("city");
cityNode.options.length=0;

//创建城市标签，并加入对应的城市
for(var i=0;i<city.length;i++){
var option = document.createElement("option");
option.innerHTML = city[i];
cityNode.appendChild(option);
}
}

</script>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航