day 32 JavaScript

1.1. JavaScript介绍

HTML：定义网页的结构

CSS：美化网页

JavaScript：实现用户交互；

1.1.2 JavaScript特点

n 安全性较高

n 跨平台，兼容性好

1.2 JavaScript的组成

JavaScript主要由三部分组成：ECMAScript、DOM、BOM。

　　ECMAScript：描述了JavaScript的基本语法（所有浏览器都支持）；

　　DOM：文档对象模型。提供了处理网页内容的方法；

　　BOM：浏览器对象模型。提供了与浏览器进行交互的方法；

1.3 如何编写JavaScript代码

方式一：在HTML页面中编写JavaScript代码

<!DOCTYPE html>
<html >
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <script>
        document.write('HelloWorld')
    </script>
</body>
    <script>
        alert('你好')
    </script>
</html>

script标签可以放在head标签中，也可以放在body标签中。而且，在一个HTML页面中，可以存在多个script标签。

方式二：引入外部的JS文件

<!DOCTYPE html>
<html >
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <script type="text/javascript" src="js/JavaScript.js"></script>
</body>
</html>

注意事项：

1）在js文件中编写js代码，不需要写<script>标签；

2）开始的script标签和结束标签不能够写在一起；

3）如果在HTML页面中引入了外部的js文件，那么该script标签就不能再编写js代码，而且应该在另外一个script标签中编写；

方式三：在HTML元素中编写js代码

<input type="button" value="click me" onclick="document.write('惊不惊喜');"/>

二、ECMAScript

2.1注释

HTML: <!—注释 -->

CSS: /*注释*/

JavaScript：//单行注释或 /*多行注释*/

2.2 变量

javascript是一门弱类型的语言。所以，在javascript中声明变量不需要指定类型。

语法格式：

var 变量名 [= 初始值];

<script>
    var aa = 10;
    document.write(aa);
    document.write(typeof(aa))
</script>

注意事项：

1） var关键字可以不写。变量的类型是根据它的值来确定的。

2）变量名必须以字母或下划线开头；

3） js的变量是区分大小写的；

4） js变量必须要先声明后使用；

5） js变量的类型会随着它的值的改变而发生变化；

js的数据类型：

number：数值型，包含小数、整数、NaN(非数字)

string：字符串类型；

boolean：布尔类型，它的值可以是true或false；

object：对象类型；

undefined：该变量没有定义或初始化的时候，那么就是undefined

运算符

++ 自加

-- 自减

注意：前++和前--是先对变量执行++或--操作，然后再对结果进行运算。

后++和后--是先对变量执行运算，运算后再对变量执行++或--操作。

补充：+除了可以作为算术运算符以外，还可以字符串连接符。

比较运算符

=== 三个等号，全等（值和类型都相等）

三目运算符：

条件表达式 ? ‘内容1’ : ‘内容2’;

说明：如果条件成立，就返回内容1，否则返回内容2。

 var gender = 1;
 document.write(gender == 1 ? '男': '女');

2.4.1 条件判断

语法格式：

if (条件表达式) {

      

} else if (条件表达式) {

} …

else {

      

}

<!DOCTYPE html>

<script>
   var socre = '你好';
   if (socre >= 60) {
       document.write('及格')
   } else if (socre < 60) {
       document.write('不及格')
   } else {
       document.write('输入错误')
   }
</script>

示例

2.4.2 条件选择

switch (变量) {
    case 值1:
        …
        break;  //退出switch
    case 值2:
        …
        break;
    ..
    default:  //如果上面case条件都不满足，就执行default后面的js代码。
    …
}

var fruit = 'orange';
        switch (fruit) {
            case 'apple':
                document.write('苹果')
                break;
            case 'orange':
                document.write('橘子')
                break;
            default:
                document.write('其他')
        }

示例

2.4.3 循环语句

while循环：

　　先判断条件是否成立。如果条件成立就重复执行大括号中的js代码。直到条件不成立为止。

while (条件) {

       ….

}  document.write('结果')

  var num = 1;
    var total = 0;
    while (num<=10) {
        total+=num;
        num++
    }document.write('结果为' + total)

1加到10

do..while循环：

　　先执行大括号中的js代码，然后再判断条件是否成立。如果条件成立就继续执行大括号中的js代码。直到条件不成立为止。

do {

} while (条件);

 var num = 1;
    var total = 0;
    do {
        if (num % 2 == 1) {
            total += num;
        }
        num++
    }while (num <= 10);
    document.write('结果' + total)

1~10基数相加

for循环：

　　先执行初始化语句，再判断条件是否成立。如果条件成立，就执行大括号中的js代码。执行完js代码后，再执行循环后的语句。接着，再判断条件是否成立，如果成立就继续执行大括号中的js代码。直到条件表达式不成立为止。

for ([初始化语句]; [初始化语句]; [初始化语句]) {

}

注意：初始化语句只会执行一次。如果没有变量需要初始化，初始化语句可以没有。但是，初始化语句后面的分号一定要有。

 var total = 0;
        for (i=1; i<=10; i++) {
            if (i % 2 == 0 ) {
                total += i;
            }
        }document.write('结果为' + total)

1~10偶数相加

函数：

function 函数名(参数列表) {

函数体…

}

<script>
    // 定义一个函数
    function sayHello() {
        alert("hello javascript")
    }
    sayHello()
    //定义一个带参数的函数
    function sayHello(name) {
        alert("hello " + name)
    }
    sayHello('javascript')

</script>

 function sayHello(name) {
        return "我是返回值"
    }
    var username = sayHello('javascript');
    document.write(username)

带返回值的函数

Ø 注意事项：

1）定义函数的时候不需要定义它的返回值类型。如果函数需要返回结果，那么可以使用return命令直接返回即可；

2）函数的形参定义不需要使用var；

3） js函数是没有重载（重载：可以存在重名的函数），后面定义的函数会覆盖前面定义的函数。所以，在一个js文件中，不要出现重复的函数定义。

方式二：定义函数变量

Ø 语法格式：

var 函数名 = function(参数列表) {

}

 var sayHello = function (name) {
        return "我是返回值"
    }
    document.write(sayHello())


也是定义函数的一种方法

全局变量，局部变量

局部变量：在函数内部定义，只能在当前函数中使用。注意：在函数中定义局部变量，必须加上var。如果没有加var，那么浏览器会再全局中定义该变量

<script>
    // var num = 10;  //全局变量，两个函数都可以引用
    function a() {
        var num = 1; //局部变量，只有当前函数可以引用  如果不加var，浏览器就会在全局中定义该变量，test2就可以访问
        alert(num)
    }
    function b() {
        alert(num)
    }
    a()
    b()
</script>

自定义对象

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
    function Person() { }
    //用new关键字创建对象
    var user = new Person(); //创建person对象，赋值给user变量
    user.name = "echo"; //给user对象添加name属性
    user.age = 18;  //给user对象添加age属性
    user.eat = function () {  //给user对象添加eat方法
        alert(this.name + "正在吃饭。。。")  //this代表当前调用者对象，类似self
    };
    //调用对象属性
    alert(user.name + "," + user.age);
    //调用对象的方法
    user.eat()
</script>

function 函数名(参数列表) {

函数体…

}