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>