前端开发之JavaScript基础篇二

主要内容：

　　1、流程控制条件语句和switch语句

　　2、for循环和while循环

　　3、Break语句和Continue语句

　　4、数组和数组常用方法

　　5、函数

　　6、对象

一、流程控制条件语句和switch语句

　　1、条件语句（用于基于不同的条件来执行不同的动作）　　

if 语句 - 只有当指定条件为 true 时，使用该语句来执行代码
if...else 语句 - 当条件为 true 时执行代码，当条件为 false 时执行其他代码
if...else if....else 语句- 使用该语句来选择多个代码块之一来执行
switch 语句 - 使用该语句来选择多个代码块之一来执行

　　（1）if语句

　　　　只有当指定条件为 true 时，该语句才会执行代码。

　　　　语法如下：　　　

if (condition)
{
    当条件为 true 时执行的代码
}

　　　注意：请使用小写的 if。使用大写字母（IF）会生成 JavaScript 错误！

　　　　实例：　　

// 当年龄小于18岁时，禁止入内！
if(age<18)
{
    alert("你未满18周岁，不得入内！");
}    

　　（2）if...else 语句

　　　　使用 if....else 语句在条件为 true 时执行代码，在条件为 false 时执行其他代码。

　　　　语法：　　

if (condition)
{
    当条件为 true 时执行的代码
}
else
{
    当条件不为 true 时执行的代码
}

　　　　实例：　　

//当年龄小于18岁时，打印“禁止入内！”，否则，打印“允许入内！”

if(age<18)
{
    alert("禁止入内！");
}
else
{
    alert("允许入内！");
}

　　（3）if...else if...else语句

　　　　使用if...else if...else语句来选择多个代码块之一来执行。

　　　　语法：　　　

if (condition1)
{
    当条件 1 为 true 时执行的代码
}
else if (condition2)
{
    当条件 2 为 true 时执行的代码
}
else
{
  当条件 1 和 条件 2 都不为 true 时执行的代码
}

　　　   实例：

// 如果年龄小于18岁，打印“未成年人！”；年龄大于18，小于40岁，打印“青年人！”；否则打印“中老年人！”
if(age<18)
{
     document.write("<b>未成年人！</b>")
}
else if(age>=18 && age<=40)
{
    document.write("<b>青年人！</b>");
}
else
{
    document.write("<b>中老年人！</b>");
}

　2、switch语句（switch 语句用于基于不同的条件来执行不同的动作）

　　使用 switch 语句来选择要执行的多个代码块之一。

　　语法：　

switch(n)
{
    case 1:
        执行代码块 1
        break;
    case 2:
        执行代码块 2
        break;
    default:
        执行与case 1和case 2 不同时的代码
}
工作原理：首先设置表达式 n（通常是一个变量）。随后表达式的值会与结构中的每个 case 的值做比较。如果存在匹配，则与该 case 关联的代码块会被执行。

注意记得使用 break 来阻止代码自动地向下一个 case 运行。

　　实例：　

//显示今天的星期名称。请注意 Sunday=0, Monday=1, Tuesday=2, 等等：
var d=new Date().getDay();
switch (d)
{
  case 1:document.write（"今天是星期一" ）;
  break;
  case 2:document.write（"今天是星期二" ）;
  break;
  case 3:document.write（"今天是星期三" ）;
  break;
  case 4:document.write（"今天是星期四" ）;
  break;
  case 5:document.write（"今天是星期五" ）;;
  break;
  default:
   document.write("哈哈！今天是周末(＾－＾)")
}

　　default关键词（ default 关键词来规定匹配不存在时做的事情）

　　实例：　

//如果今天不是星期六或星期日，则会输出默认的消息：
var d=new Date().getDay();
switch (d)
{
    case 6:x="今天是星期六";
    break;
    case 0:x="今天是星期日";
    break;
    default:
    x="期待周末";
}
document.getElementById("demo").innerHTML=x;

　　几种特殊情况：

　　（1）当两种情况相同时，switch 语句的使用，当两种情况相同时，可以只在第二种情况中写要执行的代码。

　　　　案例如下：

//测试 switch语句，当 两种情况相同时，比如下面的10或者11，都会走 alert("10或者11") 这里
function testSwich() {
      var number = document.getElementById("test").value;
      number=parseInt(number);
      switch (number){
            case 1: alert(1);
            break;
            case 10:
            case 11:alert("10或者11"); //number = 10 或者 = 11执行相同的操作
            break;
            default :alert("既不是1，10，11");
      }
}

　　（2）忘记写 break 时的情况。当忘记写 break 时，代码将会执行后面所有 case 分支里面的代码，前面的 case 会跳过。

　　　　案例如下：

// 测试不使用break跳出循环
function testSwichNotBreak() {
      var number = document.getElementById("test").value;
      number=parseInt(number);
      switch (number){
            case 1: document.write(number);
            case 2: document.write(number)
            case 3:document.write(number);
            case 4:document.write(number);
            case 5:document.write(number);
            default :document.write(number);
      }
}

二、for循环和while循环

　　1、while循环（在指定条件为真时循环执行代码块）

　　　　while循环执行的流程分三个步骤：　　　　　

（1）初始化循环变量
（2）判断循环条件
（3）更新循环变量

　　　　语法：　　

while(条件)
{
     需要执行的代码
}

　　　   实例：

var a = 1;
while(a<=9)
{
    if(a%3==0)
        {
          console.log(a);
        }
}

　　2、do...while循环

　　　　do/while 循环是 while 循环的变体。在检查条件是否为真之前，该循环会执行一次代码块；然后如果条件为真的话，就会重复这个循环。

　　　　语法：　　　

do {
        需要执行的代码
    }while(条件)；

　　　　实例：　　　

var i = 2；
do{
        console.log(i);
    }while(i<2);

// 输出 2

　　3、for循环（可以将代码块执行指定的次数）

　　　　如果您希望一遍又一遍地运行相同的代码，并且每次的值都不同，那么使用循环是很方便的。

　　　　比如你想输出大于0，小于7的数：　　　

// 如果不用循环的话
console.log(1);
console.log(2);
console.log(3);
console.log(4);
console.log(5);　　
console.log(6)

// 使用for循环的话
for(var i = 1;i<7;i++)
{
    console.log(i);
}

　　　　for循环的语法

for(语句1；语句2;语句3)
{
    被执行的代码块
}

// 语句 1 在循环（代码块）开始前执行

// 语句 2 定义运行循环（代码块）的条件

// 语句 3 在循环（代码块）已被执行之后执行

　　　　实例：　　

// 求出1到100以内的奇数
for(var i=1;i<100;i++)
{
    if(i%3==0)
    {
       console.log(i);
    }
}

　　　　练习1：输出正立的等边三角形

    //打印正立的等边三角形
    for( var n=1;n<=5;n++) // 行数
    {
        for( var i=5-n+1;i>=0;i--) // 空格
        {
            document.write("&nbsp");
        }
        for( var j=1;j<2*n;j++)  // 打印“*”号
        {
            document.write("*");
        }
        document.write("<br>");  // 换行
    }

　　　　练习2：输出倒立的等边的三角形

// 方法一：
    for(k=5;k>0;k--) // 行数
    {
        for(i=0;i<5-k;i++)  // 空格
        {
            document.write("&nbsp");
        }
        for(j=2*k-1;j>0;j--)
        {
            document.write("#"); // 打印“*”号
        }
        document.write("<br>"); // 换行
    }

// 方法二：
    for(var n=0;n<5;n++) // 行数
    {
         for(var i=0;i<n;i++)  // 空格
        {
            document.write("&nbsp");
        }
        for(var j=9-n;j>n;j--) // 打印“*”号
        {
            document.write("*");
        }
        document.write("<br>"); // 换行

    }

三、Break语句和Continue语句　　　　　

break 语句用于跳出循环。

continue 用于跳出循环后，会继续执行该循环之后的代码（如果有的话。）

　　1、Break语句

　　实例：

    for (i=0;i<10;i++)
{
    if (i===3)
    {
        break;
    }
    document.write("The number is " + i + "<br>");
} 

// 输出：
The number is 0
The number is 1
The number is 2

　　2、Continue语句

　　实例：

    for (i=0;i<10;i++)
{
    if (i===3)
    {
        continue;
    }
    document.write("The number is " + i + "<br>");
}
// 输出：
The number is 0
The number is 1
The number is 2
The number is 4
The number is 5
The number is 6
The number is 7
The number is 8
The number is 9

　　3、javaScript标签（对 JavaScript 语句进行标记）

　　　　　如需标记JavaScript语句，请在语句之前加上冒号，如下所示：

label:
statements

　　　　break 和 continue 语句仅仅是能够跳出代码块的语句。

　　　　语法如下：

break labelname; 

continue labelname;

　　　　注意：

continue 语句（带有或不带标签引用）只能用在循环中。

break 语句（不带标签引用），只能用在循环或 switch 中。

通过标签引用，break 语句可用于跳出任何 JavaScript 代码块：

默认标签的情况（除了默认标签情况，其他时候必须要有名标签，否则会有惊喜）

当 break 和 continue 同时用于循环时，没有加标签，此时默认标签为当前"循环"的代码块。

当 break 用于 switch 时，默认标签为当前的 switch 代码块:　　

　　有名标签的实例：

cars=["BMW","Volvo","Saab","Ford"];
list:
{
    document.write(cars[0] + "");
    document.write(cars[1] + "");
    document.write(cars[2] + "");
    break list;
    document.write(cars[3] + "");
    document.write(cars[4] + "");
    document.write(cars[5] + "");
}

　　上述break list;会跳出list的代码块。如果将break换成continue会有惊喜，违反了明确中的第二点，因为list只是个普通代码块，而不是循环。

　　除非list写成如下形式 list:　

for(var i=0; i<10; ++i)
{
    continue list;
}　　

　　有了标签，可以使用break和continue在多层循环的时候控制外层循环。

　　例如下面：

outerloop:
for (var i = 0; i < 10; i++)
{
    innerloop:
    for (var j = 0; j < 10; j++)
    {
        if (j > 3)
        {
            break;
        }
        if (i == 2)
        {
            break innerloop;
        }
        if (i == 4)
        {
            break outerloop;
        }
        document.write("i=" + i + " &nbsp j=" + j + "");
        document.write("<br><br>");
    }
}

四、数组和数组常用方法

　　类似python中的列表，js中数组如同一个容器，用来装东西。

　　1、数组的创建方式

　　（1）字面量方式创建（推荐方式）

var colors = ['red','color','yellow'];
console.log(colors);

　　　　创建空数组　

var emptyArray = [];

　　（2）使用构造函数的方式创建，使用new关键字对构造函数进行创建

var colors2 = new Array();
var colors3 = new Array("red","green","blue");
console.log(colors2,colors3);

　　2、数组赋值

var arr = [] ;
arr[0] = 666;
arr[1] = "hello";
arr[2] = "world";
arr[3] = "China";
console.log(arr[1]);

//通过下标取到相对应的值
console.log[arr[2]]
console.log(arr.length); //

　　3、数组的遍历

for(i=0;i<=arr.length;i++)
{
    console.log(arr[i]);
}

　　4、数组的常用方法

　　（1）数组的合并　

var first = ['hello','everyone'];
var last = ['I','am','congcong'];
var FullStr = first.concat(last);
console.log(FullStr);
// 输出：
['hello','everyone','I','am','congcong']

　　（2）将数组转成字符串

var score = [66,67,68,69,70];
console.log(score);

　　（3）toString()直接转换为字符串，每个元素之间用逗号隔开

var str = score.toString();
console.log(score);

　　（4）join() 方法，将数组中的元素使用指定字符串（默认是逗号），连接起来，它会形成一个新的字符串。

var arr = score.join("-");
console.log(arr);

　　（5）查找下标

　　　　第一种：indexOf（） 正向查找

var index = score.indexOf(66);
console.log(index); // 0 (索引从0开始)
var index2 = score.indexOf(9);
console.log(index2); //  -1,如果查找的数值不存在，返回-1

　　　　第二种：lastIndexOf() 反向查找（得到的结果仍然是从左之右的顺序）

var lastIndex = score.lastIndexOf(66);
 console.log(lastIndex); //

　　（6）数组排序

var names = ['frank','alen','blank','alm'];
// reverse() 反转数组（将原数组里的元素位置倒置）
var reverseName = names.reverse();
console.log(reverseNames); //  ["alm", "blank", "alen", "frank"]
console.log(names); // ["alm", "blank", "alen", "frank"]----> 特别注意：反转后，原来的数组也会被改变

// sort() 按照26个字母排序
var sortNames = names.sort();
console.log(sortNames); // ["alen", "alm", "blank", "frank"]

　　（7）从开头移除元素（ shift() ）和添加元素（unshift() ）　　　

// shift() 移除我们的第一个元素，返回的结果是移除的第一个元素
特别注意：原来数组中的第一个元素也会被移除。
firstName = sortNames.shift();
console.log(firstName); // alen
console.log(sortNames); //  ["alm", "blank", "frank"]

// unshift() 向数组开头添加一个或多个元素，并返回新的长度
var newNames = name.unshift("cc");
 console.log(names,newNames); // ["cc", "alm", "blank", "frank"]  4
var newNames2 = names.unshift('hello','everybody');
console.log(names,newNames2); // ["hello", "everybody", "cc", "alm", "blank", "frank"]   6

　　（8）push()、pop()　　

 // push() 向数组的末尾添加一个或多个元素，并返回新的长度
var lastNames = names.push('baby');
console.log(names,lastNames);  ["hello", "everybody", "cc", "alm", "blank", "frank", "baby"] 

 var lastName2 = names.push('I','comeback');
console.log(names,lastName2) // ["hello", "everybody", "cc", "alm", "blank", "frank", "byby", "I", "comeback"] 9

// pop() 从数组的末尾删除一个元素
var popName= names.pop(); // popName表示被删除的元素
console.log(popName); // comeback
console.log(names.pop(),popName)  // I（pop()删除数组的最后一个元素）     comeback

　　小练习：反转字符串

　　例如输入 “there is a will,there is well” ，

　　　　输出“well is will,there a is there”。

　　解答：　

var str = 'there is a will,there is well';
console.log(str.split(' ').reverse().join(' ')); // well is will,there a is there

　五、函数

　　函数是由事件驱动的或者当它被调用时执行的可重复使用的代码块。

　　1、JavaScript 函数语法

　　　　函数就是包裹在花括号中的代码块，前面使用了关键词 function：　　　

function functionname()
{
执行代码
}

当调用该函数时，会执行函数内的代码。

可以在某事件发生时直接调用函数（比如当用户点击按钮时），并且可由 JavaScript 在任何位置进行调用。

　　注意：JavaScript 对大小写敏感。关键词 function 必须是小写的，并且必须以与函数名称相同的大小写来调用函数。　　

　　2、在javascript中，函数是一等公民，函数在JavaScript中是一个数据类型，而非像c#中或其他描述性语言那样仅仅作为一个模块来使用。

　　　　javaScript的函数声明，有声明，就一定有调用。

　　　　主要有下几种形式：

　　　　（1）函数声明不带参数　　　

        function add() {
            alert('函数被调用了额！');
            alert(this) // 当前的this指向了windows
        }
        add(); // 函数执行

        或者 var add = function(){
            alert('函数被调用了的');
        }

　　　　　（2）函数声明带参数

 function add2(a,b) {
            alert(a+b);
        }
        add2(3,4);

　　　　　（3）函数声明带参数并且有返回值

        function add3(a,b) {
            return a+b;
        }
        var sum = add3(6,9);
        alert(sum);

六、对象

　　1、JavaScript 对象是拥有属性和方法的数据。

　　例如：真实生活中，一辆汽车是一个对象。

　　　　　汽车这个对象有它的属性，如重量和颜色等，方法有启动停止等:

　　　　　所有汽车都有这些属性，但是每款车的属性都不尽相同。

　　2、在 JavaScript中，几乎所有的事物都是对象。　　　

　　　　对象也是一个变量，但对象可以包含多个值（多个变量）

　　　　比如：　　　

var car = {type:"Fiat", model:500, color:"white"};

　　　　在以上实例中，3 个变量 (type, model, color) 赋予变量 car；3 个值 ("Fiat", 500, "white") 赋予变量 car。

　　　　注意：定义 JavaScript 对象可以跨越多行，空格跟换行不是必须的：　　　

var person = {
    firstName:"John",
    lastName:"Doe",
    age:50,
    eyeColor:"blue"
};

　　3、对象属性

　　（1）关于对象属性的几点理解：

　　　　可以说 "JavaScript 对象是变量的容器"。

　　　　但是，我们通常认为 "JavaScript 对象是键值对的容器"。

　　　　键值对通常写法为 name : value (键与值以冒号分割)。键值对在 JavaScript 对象通常称为 对象属性。

　　　　所以我们可以说JavaScript对象是属性变量的容器。

　　　　对象键值对的写法类似于：Python中的字典，C语言的哈希表，Java中的哈希映射。

　　 （2）访问对象属性

　　　　有两种方式访问对象属性,即使用 .property或者["property"]

　　　　第一种：

person.lastName;

　　　　第二种：　

person["lastName"];

　　　　完整案例：　

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>

<p>
有两种方式可以访问对象属性：
</p>
<p>
你可以使用 .property 或 ["property"].
</p>
<p id="demo"></p>
<script>
var person = {
    firstName : "Jack",
    lastName : "France",
    id : 5566
};
document.getElementById("demo").innerHTML =
    person["firstName"]+ " " + person.lastName;
</script>

</body>
</html>

　　（3）对象方法　　　

　　　　对象的方法定义了一个函数，并作为对象的属性存储。

　　　　对象方法通过添加 () 调用 (作为一个函数)。

　　　　访问person对象的fullName方法，实例如下：　　

name = person.fullName(); // 必须加()，否则返回的只是返回定义函数的字符串，而函数并不执行

　　　　完整实例：　　

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>

<p>创建和使用对象方法。</p>
<p>对象方法作为一个函数定义存储在对象属性中。</p>
<p id="demo"></p>
<script>
var person = {
    firstName: "John",
    lastName : "Doe",
    id : 5566,
    fullName : function()
    {
       return this.firstName + " " + this.lastName;
    }
};
document.getElementById("demo").innerHTML = person.fullName();
</script>

</body>
</html>

　　（4）访问对象方法

　　　　创建对象方法：　　　

methodName : function() { code lines }

　　　　使用以下语法访问对象方法：

objectName.methodName()

　　　　注意：fullName() 是作为 person 对象的一个方法， fullName 是作为一个属性。