web开发：javascript基础

一、js引入

二、变量的定义

三、三种弹出框

四、调试方式

五、数据类型

六、数据类型转换

七、运算符

八、分支机构

九、循环结构

十、异常处理

十一、函数

一、js引入

- ES: ECMAScript语法
- DOM: document对象模型 => 通过js代码与页面文档(出现在body中的所有可视化标签)进行交互
- BOM: borwser对象模型 => 通过js代码与浏览器自带功能进行交互

- 行间式

```
出现在标签中的全局事件属性中
this代表该标签, 可以访问全局属性, 再访问具体操作对象(eg: this.style.color = "red")
```

- 内联式

```
出现在script脚本标签中
可以通过标签的id唯一标识,在js代码块中操作页面标签
js采用的是小驼峰命名规范, 属于解释性语言(由上至下依次解释执行)
```

- 外联式

```
通过script标签的src属性链接外部js文件, 链接后, script标签本身内部的js代码块将会被屏蔽
在任何位置都可以使用this对象,当this对象不指向任意一个标签时,代表的是window对象
```

- js具体出现的位置

```
head标签的底部: 依赖性js库
body标签的底部(body与html结束标签的之间): 功能性js脚本

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <title>js引入</title>

    <!--js出现的第一个位置-->

    <script>

        // 一般为 依赖型JS库

    </script>

</head>

<body>

    <!--脚本:一段功能代码块, 可以嵌套在其他语言中使用, 完成一些额外的功能-->

    <!--js可以用来书写脚本, js就是脚本语言, 书写在script标签中-->

    <!--js三个组成部分：ES（ECMAScript）语法 | DOM（document object model） | BOM（browser object model）-->

    <script>

    </script>

    <!--1.行间式-->

    <!--i) 行间式代码块书写在一个个全局事件名属性中，没有script这样的一个全局属性-->

    <!--ii) 在某一个标签的某一个事件属性值中，出现的this代表该标签-->

    <!--iii) 该标签对象this可以访问该标签的任意全局属性（eg：style），

    然后再间接访问具体需要操作的对象（style.color）-->

    <div id="ddd" onmouseover="this.style.color = 'red'" onmouseleave="this.style.color = 'blue'">这是一个拥有行间式js的div</div>

    <!--2.内联式-->

    <!--i) 可以通过标签的id(唯一标识)，在js代码块中访问到该标签(js的选择器)-->

    <!--ii) js代码块中语法采用的是小驼峰命名法, 属性的值都是用字符串形式进行赋值-->

    <!--iii) js属于解释性语言，所有加载顺序会影响执行结构 => 内联式的script标签出现的位置-->

    <script>

        ddd.style.backgroundColor = "pink"

    </script>

    <!--3.外联式-->

    <!--i) 通过script标签的src数据链接外部js文件-->

    <!--ii) 使用外联的script(拥有src属性)标签，会屏蔽掉标签内部的js代码块-->

    <!--iii) 在js任意地方，均由this对象，this对象不指向任何标签时，指向的是window对象-->

    <script src="js/01.js">

        // 被屏蔽掉的代码块

        ddd.style.fontSize = "100px";

    </script>

</body>

<!--js出现的第二个位置-->

<script>

    // 一般为 功能性JS脚本

</script>

</html>

二、变量的定义

```js
四种定义变量的方式
语法: 关键词变量名 = 变量值

num = 10; // 省略关键词, 定义的为全局变量, 在任何位置定义, 在任何位置都可以访问, 但不建议使用
var num = 10; // var关键词, 无块级作用域, 定义在块级作用域中的变量, 外界也可以访问
let num = 20; // let关键词, 有块级作用域, 定义在块级作用域中的变量, 外界无法访问
const NUM = 30; // const关键词,有块级作用域, 定义在块级作用域中的变量, 外界无法访问, 且变量的值不能再被二次修改, 所以为常量

/* 产生块级作用域的方式
{
直接书写
}
if语句可以产生
while语句可以产生
for语句也可以产生
*/

// 函数可以产生局部作用域, 除了定义在局部作用域中的全局变量(没有关键字的变量声明), 外界可以访问, 其他定义方式, 外界都不可以访问
```

```js
// ES5 | ES6
// 是ECMAScript两个语法版本, ES6是ES5之后的一个版本, 但是对ES5向下兼容, ES6中支持ES5语法
```

```js
// 命名规范
// 变量命名规范
// 可以由哪些组成: 字母, 数字, _, $, 中文(一般不考虑)
// 可以以什么开头: 字母, _, $, 中文
// 不能出现什么: 关键字, 保留字
// 提倡什么书写规范: 小驼峰, 支持_连接语法
好的 = "真好";
console.log(好的);
```

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <title>变量的定义</title>

</head>

<body>

    变量的定义

</body>

<script>

    // python

    // 1.以换行标识语句的结束

    // 2.以同缩进标识附属关系

    // js

    // 1.以分号(;)标识语句的结束

    // 2.以作用域({})标识附属关系

    // 定义变量

    // py: 变量名 = 变量值

    // js: 声明关键词 变量名 = 变量值

    console.log(num);  // 注: 变量在未定义赋值之前也可以去使用,值为undefined

    // 定义变量: 在程序运行过程中, 值可以发生改变的量

    var num = 10;

    console.log(num);

    // 定义常量: 在程序运行过程中, 值不会被改变的量

    const NUM = 3.14;

    // JS中区分大小写

    console.log(num, NUM);

    // NUM是标标准准常量语法, 为只读的值, 不允许修改

    // NUM = 3.141592653;

</script>

<script>

    // 块级作用域

    // 定义变量

    // var无块级作用域

    {

        var a = 666;

    }

    // let有块级作用域

    {

        let b = 888;

        console.log(b);

    }

    console.log(a);

    // let定义的变量具有块级作用域, 在块级作用域之外无法访问

    // console.log(b);

    {

        const c = 999;

    }

    // const定义的=常量具有块级作用域, 在块级作用域之外无法访问

    // console.log(c);

    // 在ES6语法下, 定义变量(let)常量(const)都具有块级作用域

    // 在ES5语法下, 没有定义常量的概念, 且所有定义变量都不具有块级作用域

</script>

<script>

    // 局部作用域

    // ES5语法下, 只有方法(函数)才能产生局部作用域

    // ES6语法下, 块级作用域都可以为局部作用域

    // 块级作用域的范围 >= 局部作用域范围

    /* py

    def func():

        缩进

     */

    function func() {

        var aaa = 10;

        let bbb = 20;

        const ccc = 30;

        // 定义全局变量

        // 注: 定义全局变量与重新赋值语法相同, 容易混淆, 不建议使用

        ddd = 40;

    }

    func() // 执行一下函数, 所有的变量(常量)均产生了

    {

        ddd = 50;

    }

    // console.log("aaa>>>:", aaa)  // 不能被访问

    // console.log("bbb>>>:", bbb)  // 不能被访问

    // console.log("ccc>>>:", ccc)  // 不能被访问

    console.log("ddd>>>:", ddd)  // 可以访问

</script>

<script>

    // 变量命名规范

    // 可以由哪些组成: 字母, 数字, _, $, 中文(一般不考虑)

    // 可以以什么开头: 字母, _, $, 中文

    // 不能出现什么: 关键字, 保留字

    // 提倡什么书写规范: 小驼峰, 支持_连接语法

    好的 = "真好";

    console.log(好的);

</script>

</html>

三、三种弹出框

```js
// 普通弹出框
// alert("你丫真帅!!!");

// 输入框: 以字符串形式接收用户输入内容
// var info = prompt("请输入内容:");
// console.log(info)

// 确认框: 根据用户选择确认或取消, 得到 true | false 两个布尔结果
// var res = confirm("你是猪吗?");
// console.log(res)
```

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <title>三种弹出框</title>

</head>

<body>

三种弹出框

</body>

<script>

    // 普通弹出框

    // alert("你丫真帅!!!");

    // 输入框

    // var info = prompt("请输入内容:");

    // console.log(info)

    // 确认框

    // var res = confirm("你是猪吗?");

    // console.log(res)

    // window为顶级对象, 三种弹出框都是附属于window的

    // window.alert(123)

</script>

</html>

四、调试方式

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <title>调试方式</title>

</head>

<body>

    调试方式

</body>

<script>

    var a = 10;

    var b = a;

    var c = b;

    // console.log(a, b, c);

    // alert(a)

    // alert(b)

    // alert(c)

    // document.write(a, b, c)

    // debug 断点

</script>

</html>

五、数据类型

```js
// 值类型
var a = 10; // Number 10
var a = 'abc'; // String abc
var a = true; // Boolean true
var a = undefined // undefined undefined
// 引用类型
var a = function(){} // function f(){}
var a = {} // Object {}
var a = null // Null null

// 其他Object具体体现
Array | Date | RegExp
```

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <title>基本数据类型</title>

</head>

<body>

    基本数据类型

</body>

<script>

    // 值类型

    // 1.number类型

    var num = 10;

    // 类型, 值

    console.log(typeof(num), num)

    // 判断方式

    console.log(typeof num == 'number');

    num = 3.14;

    console.log(typeof(num), num);

    // 2.string类型

    var str = '单引号字符串';

    console.log(typeof(str), str);

    str = "双引号字符串";

    console.log(typeof(str), str);

    // 3.boolean类型

    var res = true;

    console.log(typeof(res), res);

    res = false;

    console.log(typeof(res), res);

    // 4.undefined类型

    console.log(typeof(abc), abc);

    var abc = undefined;

    console.log(typeof(abc), abc);

    // 引用类型

    // 5.function类型

    var fn = function (a, b) { return a + b; };

    console.log(typeof(fn), fn);

    // 6.object类型 (类字典方式来使用)

    var obj = {

        name: 'egon',

        age: 78

    };

    console.log(typeof(obj), obj);

    console.log(obj instanceof Object);

    // 其他形式对象

    // 7.null类型

    var xyz = null;

    console.log(typeof(xyz), xyz);  // object null

    console.log(xyz instanceof Object);  // false => Null类型

    // 具体的对象类型

    // Array类型

    var a = new Array(1, 2, 3, 4, 5);

    console.log(a, typeof a);

    // 判断方式

    console.log(typeof a == 'object');

    console.log(a instanceof Object);

    console.log(a instanceof Array);

    // Date类型

    var a = new Date();

    console.log(a, typeof a);

    // 判断方式

    console.log(typeof a == 'object');

    console.log(a instanceof Object);

    console.log(a instanceof Date);

    // RegExp类型

    var a = new RegExp('a');

    a = /[abc]/;

    console.log(a, typeof a);

    // 判断方式

    console.log(typeof a == 'object');

    console.log(a instanceof Object);

    console.log(a instanceof RegExp)

    // 使用正则

    console.log('abc'.match(a))

</script>

</html>

六、数据类型转换

```js
// 1.通过类型声明转换
Number() | String() | Boolean()

// 2.方法(函数)
parseInt('10') | parseFloat('3.14')
123..toString()

// 3.隐式转换
+'10' => 10
'' + 10 => '10'
```

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <title>数据类型转换</title>

</head>

<body>

    number | boolean | string 之间相互转换

</body>

<script>

    // 1. number 与 boolean类型

    // boolean类型的true就是数字1, false就是数字0

    console.log((true + true) * 10 * false)

    // number 中 0, NaN 可以直接当false来使用, 其他的都可以当true来使用

    // 2. string,boolean 转换为 number

    var a = '10'; // => 10

    a = '3.14';  // => 3.14

    a = '3.14.15';  // => NaN

    var b = true;

    var n1 = Number(a);

    console.log(n1)

    var n2 = Number(b);

    console.log(n2)

    a = '3.14.15';  // 3.14

    a = 'a3.14';  // NaN

    console.log(parseFloat(a));

    a = '3.94.15';  // 3

    console.log(parseInt(a));

    // 体现弱语言类型

    a = '10';

    var res = +a; // number 10

    console.log(typeof(res), res)

    // 3.number, string 转换为 boolean

    // 在分支或循环判断中, 系统会将数字与字符串类型自动转换为布尔类型

    // 不在判断中, 如何转换

    console.log(Boolean(""));

    console.log(Boolean(0));

    console.log(Boolean(NaN));

    console.log(Boolean(null));

    console.log(Boolean("1"));

    console.log(Boolean(-100));

    // 4.number, boolean 转换为 string

    console.log(String(true));

    console.log(String(1));

    var a = 123;

    console.log(a.toString());

    console.log(123..toString());

    console.log(3.14.toString());

    var c = 123 + "";

    console.log(typeof c, c);

    // 用例

    var z1 = 2 + +"5";  // 7

    z1 = 2 + "5"; // "25"

    // z1 = 2 ++"5";  // 语法错误 ++连在一起是 ++语法(了解)

    var z2 = "5" - 2;  // 3

    console.log(z1, z2);

    // 补充

    // NaN与NaN不相等

</script>

</html>