js介绍和js引入页面

学习前端脚本语言javascript的基本概念、页面引入方式、获取页面元素及操作元素属性的技巧,学习函数的基本定义方法和使用方法。

JavaScript介绍

JavaScript是运行在浏览器端的脚步语言,JavaScript主要解决的是前端与用户交互的问题,包括使用交互与数据交互。 JavaScript是浏览器解释执行的,前端脚本语言还有JScript(微软,IE独有),ActionScript( Adobe公司,需要插件)等。

前端三大块
1、HTML:页面结构
2、CSS:页面表现:元素大小、颜色、位置、隐藏或显示、部分动画效果
3、JavaScript:页面行为:部分动画效果、页面与用户的交互、页面功能

JavaScript嵌入页面的方式

1、行间事件(主要用于事件)

<input type="button" name="" onclick="alert('ok!');">

2、页面script标签嵌入

<script type="text/javascript">
var a = '你好!';
alert(a);
</script>

3、外部引入

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

引入js示例

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title> <!-- 第三种嵌入js的方式:外链js -->
<script type="text/javascript" src="js/hello.js"></script> <!-- 第二种嵌入js的方式:内嵌js -->
<script type="text/javascript">
alert("hello world too!");
</script> </head>
<body> <!-- 第一种嵌入js的方式:行间事件 -->
<input type="button" name="" value="点击" onclick="alert('hello world!')">
</body>
</html>

引入js示例

javascript语句与注释

1、一条javascript语句应该以“;”结尾

<script type="text/javascript">
var a = 123;
var b = 'str';
function fn(){
alert(a);
};
fn();
</script>

2、javascript注释

<script type="text/javascript">
// 单行注释
var a = 123; /*
多行注释
1、...
2、...
*/
var b = 'str';
</script>

JavaScript变量和操作元素

变量

JavaScript 是一种弱类型语言,javascript的变量类型由它的值来决定。 定义变量需要用关键字 'var':

 var a = 123;
var b = 'asd';
//同时定义多个变量可以用","隔开,公用一个‘var’关键字
var c = 45,d='qwe',f='68';

变量类型

5种基本数据类型:
1、number 数字类型
2、string 字符串类型
3、boolean 布尔类型 true 或 false
4、undefined undefined类型,变量声明未初始化,它的值就是undefined
5、null null类型,表示空对象,如果定义的变量将来准备保存对象,可以将变量初始化为null,在页面上获取不到对象,返回的值就是null

1种复合类型:
object

变量、函数、属性、函数参数命名规范

  1. 区分大小写
  2. 第一个字符必须是字母、下划线(_)或者美元符号($)
  3. 其他字符可以是字母、下划线、美元符或数字

js定义变量使用var定义,可以一行定义一个,也可以一个var定义多个变量;

匈牙利命名风格:

对象o Object 比如:oDiv
数组a Array 比如:aItems
字符串s String 比如:sUserName
整数i Integer 比如:iItemCount
布尔值b Boolean 比如:bIsComplete
浮点数f Float 比如:fPrice
函数fn Function 比如:fnHandler
正则表达式re RegExp 比如:reEmailCheck

js变量声明和类型实例

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript">
// 单行注释 /*
多行注释
下面将两个变量申明合成一句
*/ //var iNum = 12;
//var sTr = 'abc';
var iNum = 12, sTr = 'abc';
var iNum02;
//alert(iNum);
//alert(sTr);
alert(iNum02);
</script>
</head>
<body> </body>
</html>

js变量声明和类型实例

获取元素方法一

可以使用内置对象document上的getElementById方法来获取页面上设置了id属性的元素,获取到的是一个html对象,然后将它赋值给一个变量,比如:

<script type="text/javascript">
var oDiv = document.getElementById('div1');
</script>
....
<div id="div1">这是一个div元素</div>

上面的语句,如果把javascript写在元素的上面,就会出错,因为页面上从上往下加载执行的,javascript去页面上获取元素div1的时候,元素div1还没有加载,解决方法有两种:

第一种方法:将javascript放到页面最下边

....
<div id="div1">这是一个div元素</div>
....
<script type="text/javascript">
var oDiv = document.getElementById('div1');
</script>
</body>

第二种方法:将javascript语句放到window.onload触发的函数里面,获取元素的语句会在页面加载完后才执行,就不会出错了。

<script type="text/javascript">
window.onload = function(){
var oDiv = document.getElementById('div1');
}
</script>
....
<div id="div1">这是一个div元素</div>

如果我们要通过js给元素添加样式,比如设置font-size=30px;注意要将-的书写方式改为驼峰式的书写方式,比如fontSize,否则会报错;

js获取元素改变样式实例

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript">
window.onload = function () {
/*
document.getElementById('div1').style.color = 'red';
document.getElementById('div1').style.fontSize = '30px'
用变量简化代码:
*/
var oDiv = document.getElementById('div1'); oDiv.style.color = 'red';
oDiv.style.fontSize = '30px';
}
</script>
</head>
<body>
<div id="div1">这是一个div元素</div>
</body>
<!--<script type="text/javascript">-->
<!--var oDiv = document.getElementById('div1');-->
<!--oDiv.style.color = 'red';-->
<!--oDiv.style.fontSize = '30px';-->
<!--</script>-->
</html>

js获取元素改变样式实例

操作元素属性

获取的页面元素,就可以对页面元素的属性进行操作,属性的操作包括属性的读和写。

操作属性的方法

  1. “.” 操作
  2. “[ ]”操作

属性写法

  1. html的属性和js里面属性写法一样
  2. “class” 属性写成 “className”
  3. “style” 属性里面的属性,有横杠的改成驼峰式,比如:“font-size”,改成”style.fontSize”

通过“.”操作属性:
操作元素属性实例

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript">
window.onload = function(){
var oDiv = document.getElementById('div1');
var oA = document.getElementById('link');
var oDiv2 = document.getElementById('div2'); // 读取属性
var sId = oDiv.id;
alert(sId); // 写属性
oDiv.style.color = "red";
oA.href = "http://www.baidu.com";
oA.title = "这是去到百度网的链接"; // 操作class属性需要写成 className
oDiv2.className = "box2";
}
</script> <style type="text/css">
.box{
font-size:20px;
color:gold;
}
.box2{
font-size:30px;
color:pink;
}
</style>
</head>
<body>
<div id="div1">这是一个div元素</div>
<a href="#" id="link">这个一个链接</a>
<div class="box" id="div2">这是第二个div</div>
</body>
</html>

操作元素属性实例

通过“[ ]”操作属性:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript">
window.onload = function(){
var oDiv = document.getElementById('div1');
var sMystyle = 'fontSize';
var sValue = '30px';
// oDiv.style.fontSize = sValue; //这句话有效
/*
这一句没有作用:变量sMystyle被认为是一个属性
oDiv.style.sMystyle = sValue;
*/
/* 属性用变量来代替的话需要用[]来操作*/
oDiv.style[sMystyle] = sValue;
}
</script>
</head>
<body>
<div id="div1">这是一个div元素</div>
</body>
</html>

通过“[ ]”操作属性示例

改变元素内容

innerHTML
innerHTML可以读取或者写入标签包裹的内容
常用于从数据库读取内容,然后塞入标签内;

innerHTML只能修改标签内包裹的元素,不能修改已有的标签,但你可以向标签内再塞入标签。

innerHTML 示例

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript">
window.onload = function(){
var oDiv = document.getElementById('div1');
// 读取元素里面的内容
var sTr = oDiv.innerHTML;
alert(sTr);
// 写元素里面的内容
//oDiv.innerHTML = "修改的文字";
oDiv.innerHTML = "<a href='http://www.baidu.com'>百度一下</a>"
}
</script>
</head>
<body>
<div id="div1">这是一个div元素</div>
</body>
</html>

innerHTML 示例

JavaScript函数

函数的定义和调用

函数
函数就是可以重复执行的代码片。

函数定义与执行

<script type="text/javascript">
// 函数定义
function aa(){
alert('hello!');
}
// 函数执行
aa();
</script>

函数的定义和调用示例

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript"> //函数的定义
function fnMyalert()
{
alert('hello world!');
}
//函数调用执行
// fnMyalert(); function fnChange(){
var oDiv = document.getElementById('div1');
oDiv.style.color = "red";
oDiv.style.fontSize = "30px";
} </script>
</head>
<body>
<!-- 标签内调用 -->
<div id="div1" onclick="fnMyalert()">这是一个div元素</div>
<input type="button" name="" value="改变div" onclick="fnChange()">
</body>
</html>

函数的定义和调用示例

变量与函数预解析

JavaScript解析过程分为两个阶段,先是编译阶段,然后执行阶段,在编译阶段会将function定义的函数提前,并且将var定义的变量声明提前,将它赋值为undefined。

<script type="text/javascript">
aa(); // 弹出 hello!
alert(bb); // 弹出 undefined
function aa(){
alert('hello!');
}
var bb = 123;
</script>

变量和函数预解析示例

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript">
// 预解析会让变量的声明提前
alert(iNum); //弹出undefined // 使用一个未声明的变量,出错!
//alert(iNum02);
var iNum = 12; // 预解析会让函数的声明和定义提前
myalert(); function myalert(){
alert('hello world!');
}
</script>
</head>
<body> </body>
</html>

变量和函数预解析示例

提取行间事件

在html行间调用的事件可以提取到javascript中调用,从而做到结构与行为分离。

为什么要提取行间事件?
原来我们是将函数事件直接放在html代码里面,这样的话,在维护时容易误删导致函数不能正确执行;还有就是应该将js相关的放在一起,实现代码分离,方便观看和维护;

<!--行间事件调用函数   -->
<script type="text/javascript">
function myalert(){
alert('ok!');
}
</script>
......
<input type="button" name="" value="弹出" onclick="myalert()"> <!-- 提取行间事件 -->
<script type="text/javascript"> window.onload = function(){
var oBtn = document.getElementById('btn1');
oBtn.onclick = myalert;
function myalert(){
alert('ok!');
}
}
</script>
......
<input type="button" name="" value="弹出" id="btn1">

提取行间事件示例

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript">
window.onload = function(){
var oBtn = document.getElementById('btn01'); // 将事件属性和一个函数关联,函数不能写小括号,写了会马上执行
oBtn.onclick = fnChange; function fnChange(){
var oDiv = document.getElementById('div1');
oDiv.style.color = "red";
oDiv.style.fontSize = "30px";
}
}
</script>
</head>
<body>
<div id="div1">这是一个div元素</div>
<input type="button" name="" value="改变div" id="btn01">
</body>
</html>

提取行间事件示例

注意:

在行间调用函数时函数后面要写小括号;

提取行间事件时 oBtn.onclick = fnChange(); 是错误的,不能加括号,否则会不用点击,直接执行,正确的应该是oBtn.onclick = fnChange;

匿名函数

定义的函数可以不给名称,这个叫做匿名函数,可以将匿名函数直接赋值给元素绑定的事件来完成匿名函数的调用。
匿名函数适合是给某个元素做一件事情的情况,如果要为多个元素做事,就需要将函数命名,不能使用匿名函数了。

<script type="text/javascript">
window.onload = function(){
var oBtn = document.getElementById('btn1');
/*
oBtn.onclick = myalert;
function myalert(){
alert('ok!');
}
*/ // 直接将匿名函数赋值给绑定的事件
oBtn.onclick = function (){
alert('ok!');
}
}
</script>

实际上实现提取行间事件并不是函数的最终写法,我们用的比较多的是 匿名函数的写法,如下。

js匿名函数示例

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript">
window.onload = function(){
var oBtn = document.getElementById('btn01');
/* 提取行间事件写法
oBtn.onclick = fnChange;
function fnChange(){
var oDiv = document.getElementById('div1');
oDiv.style.color = "red";
oDiv.style.fontSize = "30px";
}
*/ // 最终写法-转化成匿名函数的写法:
oBtn.onclick = function(){
var oDiv = document.getElementById('div1');
oDiv.style.color = "red";
oDiv.style.fontSize = "30px";
};
}
</script>
</head>
<body>
<div id="div1">这是一个div元素</div>
<input type="button" name="" value="改变div" id="btn01">
</body>
</html>

js匿名函数示例

匿名函数综合示例-网页换肤

skin01.css
body{
background-color:green;
} input{
width:200px;
height:50px;
background-color:gold;
border:0;
} skin02.css
body{
background-color:#ddd;
} input{
width:200px;
height:50px;
border-radius:25px;
background-color:pink;
border:0;
} 网页换肤.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" type="text/css" href="css/skin01.css" id="link01">
<script type="text/javascript">
window.onload = function(){
var oBtn01 = document.getElementById('btn01');
var oBtn02 = document.getElementById('btn02');
var oLink = document.getElementById('link01'); oBtn01.onclick = function(){
oLink.href = "css/skin01.css";
};
oBtn02.onclick = function(){
oLink.href = "css/skin02.css";
}
}
</script>
</head>
<body>
<input type="button" name="" value="皮肤一" id="btn01">
<input type="button" name="" value="皮肤二" id="btn02">
</body>
</html>

匿名函数综合示例-网页换肤

函数传参

<script type="text/javascript">
function myalert(a){
alert(a);
}
myalert(12345);
</script>

函数传参示例

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript">
window.onload = function(){
function fnMyalert(a){
alert(a);
}
//fnMyalert('hello world!'); function fnChangestyle(mystyle,val){
var oDiv = document.getElementById('div1');
oDiv.style[mystyle] = val;
}
fnChangestyle('fontSize','30px');
fnChangestyle('color','red');
fnChangestyle('backgroundColor','pink');
}
</script>
</head>
<body>
<div id="div1">这是一个div元素</div>
</body>
</html>

函数传参示例

函数'return'关键字

函数中'return'关键字的作用:

  1. 返回函数执行的结果
  2. 结束函数的运行
  3. 阻止默认行为

return关键字使用示例

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript"> function fnAdd(a,b) {
var c = a + b;
// 返回c的值,然后结束函数的运行
return c; alert("函数内部的c="+c);
} var iResult = fnAdd(2,5);
alert(iResult);
</script>
</head>
<body> </body>
</html>

return关键字使用示例

分支语句

条件语句

通过条件来控制程序的走向,就需要用到条件语句。

运算符

  • 算术运算符: +(加)、 -(减)、 *(乘)、 /(除)、 %(求余)
  • 赋值运算符:=、 +=、 -=、 *=、 /=、 %=
  • 条件运算符:==、===、>、>=、<、<=、!=、&&(而且)、||(或者)、!(否)

if else

if else 的简单使用示例

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript">
var iNum01 = 12;
var iNum02 = 24; if(iNum01>iNum02){
alert('iNum01大于iNum02');
}
else{
alert('iNum01不大于iNum02');
}
</script>
</head>
<body> </body>
</html>

if else 点击按钮隐藏显示示例

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript">
window.onload = function(){
var oBtn = document.getElementById('btn01');
var oDiv = document.getElementById('box01');
// oDiv.style.display 是读取的标签里写的display属性值,如果没有写,这个值为空
oBtn.onclick = function(){
if(oDiv.style.display=='block'||oDiv.style.display=='')
{
oDiv.style.display = 'none';
}
else
{
oDiv.style.display = 'block';
}
}
}
</script>
<style type="text/css">
.box{
width:200px;
height:400px;
background-color:gold;
}
</style>
</head>
<body>
<input type="button" name="" value="切换" id="btn01">
<div class="box" id="box01"></div>
</body>
</html>

if else 点击按钮隐藏显示示例

else if 多重条件判读语句
多重条件判读语句示例

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript">
window.onload = function () {
var iWeek = 5;
var oBody = document.getElementById('body01'); if (iWeek == 1) {
oBody.style.backgroundColor = 'gold';
} else if (iWeek == 2) {
oBody.style.backgroundColor = 'green';
} else if (iWeek == 3) {
oBody.style.backgroundColor = 'pink';
} else if (iWeek == 4) {
oBody.style.backgroundColor = 'yellowgreen';
} else if (iWeek == 5) {
oBody.style.backgroundColor = 'lightblue';
} else {
oBody.style.backgroundColor = 'lightgreen';
}
}
</script>
</head>
<body id="body01"> </body>
</html>

多重条件判读语句示例

switch

switch语句的性能比else if语句的性能高;
switch语句网页换肤示例

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript">
window.onload = function(){
var iWeek = 3;
var oBody = document.getElementById('body01'); /*if(iWeek==1){
oBody.style.backgroundColor = 'gold';
}
else if(iWeek==2)
{
oBody.style.backgroundColor = 'green';
}
else if(iWeek==3){
oBody.style.backgroundColor = 'pink';
}
else if(iWeek==4){
oBody.style.backgroundColor = 'yellowgreen';
}
else if(iWeek==5){
oBody.style.backgroundColor = 'lightblue';
}
else{
oBody.style.backgroundColor = 'lightgreen';
}*/ switch (iWeek){
case 1:
oBody.style.backgroundColor = 'gold';
break;
case 2:
oBody.style.backgroundColor = 'green';
break;
case 3:
oBody.style.backgroundColor = 'pink';
break;
case 4:
oBody.style.backgroundColor = 'yellowgreen';
break;
case 5:
oBody.style.backgroundColor = 'lightblue';
break;
default:
oBody.style.backgroundColor = 'lightgreen';
}
}
</script>
</head>
<body id="body01"> </body>
</html>

switch语句网页换肤示例

运算符

加法运算练习

用.value()获取input输入的两个数字,提交后弹出加法结果

注意,从input框中输入的都是字符串,在js中需要使用 parseInt 转换成int类型;

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript">
window.onload =function(){
var oInput01 = document.getElementById('input01');
var oInput02 = document.getElementById('input02');
var oBtn = document.getElementById('btn'); oBtn.onclick = function(){
var iVal01 = parseInt(oInput01.value);
var iVal02 = parseInt(oInput02.value); alert(iVal01+iVal02);
}
}
</script>
</head>
<body>
<input type="text" name="" id="input01"> +
<input type="text" name="" id="input02"> <input type="button" name="" value="相加" id="btn">
</body>
</html>

加法运算练习示例

求余运算符
求余示例

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript">
var iNum01 = 11;
var iNum02 = 2;
//alert(iNum01%iNum02); // 弹出1 var iNum03 = 0;
var iNum04 = 10;
alert(iNum03%iNum04); // 弹出0
</script>
</head>
<body> </body>
</html>

求余示例

赋值运算符

赋值运算符示例

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript">
var iNum01 = 12; // iNum01 = iNum01 + 2; 可以简写成下面的写法:
iNum01 += 2;
alert(iNum01); // 弹出14 // iNum01 = iNum01 - 5; 可以简写成下面的写法:
iNum01 -= 5;
alert(iNum01); //iNum01 = iNum01*2; 可以简写成下面的写法:
iNum01 *= 2;
alert(iNum01); //iNum01 = iNum01/2;
iNum01 /= 2;
alert(iNum01); //iNum01 = iNum01%2;
iNum01 %= 2;
alert(iNum01); iNum01++; // 等同于 iNum01 += 1 ;
alert(iNum01);
</script>
</head>
<body> </body>
</html>

赋值运算符示例

条件运算符

在js中,==判断是否相等存在一个bug,就是数字的2和字符串的2使用==判断其实是True,所以我们需要用到===;

条件运算符示例

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript">
var iNum01 = 2;
var sNum01 = '2';
/*
用“==” 弹出相等
if(iNum01==sNum01){
alert('相等');
}
else{
alert('不相等');
}
*/ if (iNum01 === sNum01) {
alert('相等');
} else {
alert('不相等');
} if (3 != 4) {
alert(true);
} else {
alert(false);
} // 将逻辑运算的结果取反,比如运算是true,取反后就是false
if (!4 > 3) {
alert('大于')
} else {
alert('不大于')
}
// 多个条件运算,都是true,最终结果才是true
if (4 > 3 && 5 > 6) {
alert('都是大于')
} else {
alert('不是都大于')
} // 多个条件运算中只要有一个是true,最终结果就是true
if (4 > 3 || 5 > 6) {
alert('只有部分大于')
} else {
alert('都不大于')
}
</script>
</head>
<body> </body>
</html>

条件运算符示例

数组和循环语句

数组及操作方法

数组就是一组数据的集合,javascript中,数组里面的数据可以是不同类型的。

定义数组的方法

//对象的实例创建
var aList = new Array(1,2,3); //直接量创建
var aList2 = [1,2,3,'asd'];

操作数组中数据的方法

1、获取数组的长度:aList.length;

var aList = [1,2,3,4];
alert(aList.length); // 弹出4

2、用下标操作数组的某个数据:aList[0];

var aList = [1,2,3,4];
alert(aList[0]); // 弹出1

3、join() 将数组成员通过一个分隔符合并成字符串

var aList = [1,2,3,4];
alert(aList.join('-')); // 弹出 1-2-3-4

4、push() 和 pop() 从数组最后增加成员或删除成员

var aList = [1,2,3,4];
aList.push(5);
alert(aList); //弹出1,2,3,4,5
aList.pop();
alert(aList); // 弹出1,2,3,4

5、unshift()和 shift() 从数组前面增加成员或删除成员

var aList = [1,2,3,4];
aList.unshift(5);
alert(aList); //弹出5,1,2,3,4
aList.shift();
alert(aList); // 弹出1,2,3,4

6、reverse() 将数组反转

var aList = [1,2,3,4];
aList.reverse();
alert(aList); // 弹出4,3,2,1

7、indexOf() 返回数组中元素第一次出现的索引值

var aList = [1,2,3,4,1,3,4];
alert(aList.indexOf(1));

8、splice() 在数组中增加或删除成员

var aList = [1,2,3,4];
aList.splice(2,1,7,8,9); //从第2个元素开始,删除1个元素,然后在此位置增加'7,8,9'三个元素
alert(aList); //弹出 1,2,7,8,9,4

数组及操作方法示例

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript">
// 通过类实例化来创建数组
var aList01 = new Array(1, 2, 3); // 通过直接量的方式创建数组
var aList02 = ['a', 2, 3]; // 通过length来获取数组成员的个数
//alert(aList02.length); // 通过下标操作数组的某个成员
//alert(aList02[0]); // 通过push方法在数组的后面增加成员
aList02.push('b');
//alert(aList02); // 弹出a,2,3,b aList02.pop();
//alert(aList02); // 弹出a,2,3 aList02.unshift('b');
//alert(aList02); // 弹出b,a,2,3 aList02.shift();
//alert(aList02); // 弹出a,2,3 aList02.reverse();
//alert(aList02); // 弹出3,2,a var aList03 = ['a', 'b', 'c', 'd', 'a', 'b'];
//alert(aList03.indexOf('b')); //弹出1 // 第一个参数是开始的位置,第二个参是从起始位置删除多少个成员,第三个(包括第三个)之后是要增加的成员的值
aList03.splice(1, 0, 'e');
//alert(aList03); // 弹出 a,e,b,c,d,a,b aList03.splice(1, 2, 'f', 'g');
//alert(aList03); // 弹出 a,f,g,c,d,a,b var sTr = aList03.join("-"); // 数组执行方法后返回一个字符串
alert(sTr); var sTr2 = aList03.join("");
alert(sTr2);
</script>
</head>
<body> </body>
</html>

数组及操作方法示例

多维数组

多维数组指的是数组的成员也是数组的数组。

var aList = [[1,2,3],['a','b','c']];
alert(aList[0][1]); //弹出2;

多维数组示例

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript">
var aList = [[1,2,3,4],['a','b','c'],[6,7,8]];
//alert(aList.length);
alert(aList[0].length); alert(aList[1][0]);
</script>
</head>
<body> </body>
</html>

多维数组示例

循环语句

程序中进行有规律的重复性操作,需要用到循环语句。

for循环

for(var i=0;i<len;i++)
{
......
}

for循环简单示例

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript">
/* for(var i=0;i<5;i++)
{
alert('ok!');
}*/ var aList = ['a', 'b', 'c', 'd'];
var iLen = aList.length; for (var i = 0; i < iLen; i++) {
alert(aList[i]);
}
</script>
</head>
<body> </body>
</html>

for循环简单示例

for循环将数据放入页面列表中

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript">
window.onload = function () {
var oUl = document.getElementById('list');
var aList = ['美人鱼', '疯狂动物城', '魔兽', '美国队长3', '湄公河行动'];
var iLen = aList.length;
var sTr = ''; for (var i = 0; i < iLen; i++) {
sTr += '<li>' + aList[i] + '</li>';
}
oUl.innerHTML = sTr;
}
</script> <style type="text/css">
.list {
list-style: none;
margin: 50px auto 0;
padding: 0;
width: 300px;
height: 305px;
}
.list li {
height: 60px;
border-bottom: 1px dotted #000;
line-height: 60px;
font-size: 16px;
}
</style>
</head>
<body>
<ul class="list" id="list">
<!-- <li>美人鱼</li>
<li>美人鱼</li>
<li>美人鱼</li>
<li>美人鱼</li>
<li>美人鱼</li> -->
</ul>
</body>
</html>

for循环将数据放入页面列表中

while循环

var i=0;
while(i<){
......
i++;
}

数组去重

数组去重示例

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript">
var aList = [2, 3, 4, 3, 5, 6, 7, 8, 3, 4, 5, 2, 7, 8, 9, 3, 4, 5, 6, 3, 4, 8, 9];
var iLen = aList.length;
var aList2 = []; for (var i = 0; i < iLen; i++) {
if (aList.indexOf(aList[i]) == i) {
aList2.push(aList[i]);
}
}
alert(aList2);
</script>
</head>
<body> </body>
</html>

数组去重示例

前端之javascript1的更多相关文章

  1. 巨蟒python全栈开发数据库前端5:JavaScript1

    1.js介绍&变量&基础数据类型 2.类型查询&运算符&if判断&for循环 3.while循环&三元运算符 4.函数 5.今日总结 1.js介绍&am ...

  2. 前端笔记-javaScript-1

    一.JavaScript概述 1.JavaScript的历史 1992年Nombas开发出C-minus-minus(C--)的嵌入式脚本语言(最初绑定在CEnvi软件中).后将其改名ScriptEa ...

  3. 国内5款优秀的WEB前端框架

    1. JX(腾讯) 官网地址:http://alloyteam.github.io/JX/#home JX 是一个类似 Google Closure Library 的 Web 前端开发框架,服务于 ...

  4. web前端(13)—— 了解JavaScript,JavaScript的引入方式

    从本篇博文开始,将进入web前端方便最关键最重要的部分——javascript,学到后面你就知道它真的太重要了 什么是JavaScript JavaScript一种直译式的脚本语言,是一种动态类型.弱 ...

  5. 国内最火的五款HTML5前端开发框架

    2013-04-11 本文主要为大家推荐五款国内最火的HTML5前端开发框架,它们分别是腾讯团队开发的JX.淘宝团队开发的KISSY.百度团队开发的QWrap和Tangram,以及上海康尚实验室推出的 ...

  6. web前端安全机制问题全解析

    摘要 web前端安全方面技术含有的东西较多,这里就来理一理web安全方面所涉及的一些问题 目录[-] 摘要 web前端安全方面技术含有的东西较多,这里就来理一理web安全方面所涉及的一些问题 web安 ...

  7. 编程史话第四期-饱受争议的前端之王JavaScript的血泪成长史

    写在前面 这篇博文主要介绍javaScript的发展史,根据作者在B站发布的同名视频的文案整理修改而成,对视频感兴趣的博友可访问https://www.bilibili.com/video/av945 ...

  8. 2020最新的web前端体系和路线图,想学web前端又不知道从哪开始的快来瞧一瞧呀

    web前端其实是相对于服务器语言是简单的,并且对于初学者是非常友好的,因为在前期学习能够看到很好的效果.但是他的路线 也就是学习体系不成熟,所以导致很多初学者不知道怎么学?下面我就讲讲web前端的体系 ...

  9. 构建一个基本的前端自动化开发环境 —— 基于 Gulp 的前端集成解决方案(四)

    通过前面几节的准备工作,对于 npm / node / gulp 应该已经有了基本的认识,本节主要介绍如何构建一个基本的前端自动化开发环境. 下面将逐步构建一个可以自动编译 sass 文件.压缩 ja ...

随机推荐

  1. Java内存分析工具MAT

    MAT是一个强大的内存分析工具,可以快捷.有效地帮助我们找到内存泄露,减少内存消耗分析工具.内存中堆的使用情况是应用性能监测的重点,而对于堆的快照,可以dump出来进一步分析,总的来说,一般我们对于堆 ...

  2. Ubuntu16.04VIM无法补全错误记录

    先记录一下YouCompleteMe的安装过程. 按照教程进行安装 1. 安装 vundle # vundle是vim的包管理器,十分好用 cv@cv: ~$ git clone https://gi ...

  3. C++之封装继承和多态

    C++中非常重要的概念,尤其是相对于C语言而言,也是其具有如此高的工程使用性的重要原因. 封装 所谓封装是将某些东西隐藏起来,让外界无法直接使用,而必须通过某些特定的方式才能访问.也即是,将抽象得到的 ...

  4. str函数之不同变量之间如何连接,外加浮点运算注意事项

    最近看书了解到不同字符串之间可以用“+”号来连接,遂思考如何将不同变量连接起来,思考试验并上网查询后得出了结果,在此将所学分享给在阅读的各位. 数据类型的转换   常识可知,在python中,不同的数 ...

  5. MongoDB增删改查表文档

    MongoDB 是一个基于分布式文件存储的数据库.由 C++ 语言编写,是一个基于分布式文件存储的开源数据库系统.旨在为 WEB 应用提供可扩展的高性能数据存储解决方案. MongoDB 是一个介于关 ...

  6. fjnu2019第二次友谊赛 B题

    ### 题目链接 ### 题目大意: 给你一个 n * m 的地图以及小蛇蛇头的初始位置,告诉你它会往 上.下.左.右 四个方向走.若在走的过程中(包括结束时)会使得小蛇越界,则输出 "Ga ...

  7. JeeSite | 保存信息修改记录封装

    前面写过两篇关于“保存信息修改记录”的内容,分别如下: JeeSite | 保存信息修改记录 JeeSite | 保存信息修改记录续 回顾         第一篇文章通过类字段的比较返回一个有字段值不 ...

  8. python强大的绘图模块matplotlib示例讲解

    Matplotlib 是 Python 的绘图库.作为程序员,经常需要进行绘图,在我自己的工作中,如果需要绘图,一般都是将数据导入到excel中,然后通过excel生成图表,这样操作起来还是比较繁琐的 ...

  9. 构建和管理有效API市场的关键步骤

    API市场关键要点 各个行业的公司正在寻找通过外部API扩展服务来塑造数字业务的方法.然而,要获得API的真正好处,是需要超越基本的API管理,再到创建API市场,这是一种专注于连接生产者和消费者的专 ...

  10. CentOS环境下通过YUM安装软件,搭建lnmp环境

    安装nginx.php-fpm和mysql. yum install nginx yum install php-fpm yum install mysql CentOS下LNMP环境配置 1. 配置 ...