JavaWeb开发3 - 技术栈

JavaScript

一门跨平台、面向对象的脚本语言，用来控制网页行为，能使网页可交互

js引入方式

内部脚本：将JS代码定义在HTML页面中
- JavaScript代码必须位于< script >< /script >
- 在HTML文档中，可以在任意地方，放置任意数量的< script >
- 一般会把脚本置于< body >元素的底部，可以改善显示速度

外部脚本：将JS代码定义在外部JS文件中，然后引入到HTML页面中
- 外部JS文件中，只包含JS代码，不包含< script >标签
- < script >标签不能自闭和

复制代码

<!--文件类型为HTML-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>焦点访谈</title>
<!--    内部脚本-->
<!--    <script>-->
<!--        alert("hello");-->
<!--    </script>-->

<!--    外部脚本-->
    <script src="JS/deno.js"></script>
</head>
<body>

</body>

</html>

JS书写语法

区分大小写：与Java一样，变量名、函数名及其他一切东西都是区分大小写的
每行结尾分号可有可无
注释
- 单行注释：//
- 多行注释：/* */
大括号表示代码块

输出语句

使用window.alert()写入警告框
使用document.write()写入HTML输出
使用console.log()写入浏览器控制台

复制代码

<!--文件类型为HTML-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>焦点访谈</title>

</head>
<body>

</body>

<script>
    window.alert("hello");
    document.write("hellojs");
    console.log("hello3")
</script>

</html>

JS变量

用var关键字来声明变量
弱类型语言，变量可以存放不同类型的值
变量名要遵循一定规则
- 组成字符可以是字母、数字、下划线或美元符号
- 数字不能开头
- 建议使用驼峰命名

ECMAScript6

新增了let关键字来定义变量。用法类似于var，但所声明的变量只在let关键字所在的代码块内有效，且不允许重复声明

新增了const关键字，用来声明一个只读的变量。一旦声明，常量的值就不能改变

复制代码

<!--文件类型为HTML-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>焦点访谈</title>

</head>
<body>

</body>

<script>
    // var a="zhangsan";
    // alert(a);
    // 作用域比较大，全局变量
    // 可以重复定义
    // {
    //     var x="ok";
    //     // alert(x);
    //     var x="aa";
    // }
    // alert(x);

    // {
    //     let x=1;
    //     // alert(x);
    //     // let x=2;
    // }
    // alert(x);

    {
        const pi=3.14;
        // pi=3.15;
        alert(pi);
    }
</script>

</html>

JS数据类型

JavaScript这分为原始类型和引用类型

原始类型
- number：数字
- string：字符串，单双引皆可
- boolean：布尔，true、false
- null：对象为空
- undefined：当声明的变量未初始化时，默认为undefined
使用typeof运算符可以获取数据类型

运算符

==会进行类型转换，===不会

类型转换

字符串类型转数字
- 如果字面值不是数字，则转为NaN
其他类型转boolean
- Number：0和NaN为false，其他为true
- String：空字符串为false
- Null和undefined：均转为false

流程控制语句

JS函数

函数是被设计为执行特定任务的代码块

通过关键字进行定义

复制代码

function functionName(参数){
    //要执行的代码
}

注意
- 形式参数不需要类型，JavaScript是弱类型语言
- 返回值不需要定义类型，可以直接return
调用：函数名称(实际参数列表)

定义方式二

复制代码

var functionName=function(参数){
    //要执行的代码
}

复制代码

<!--文件类型为HTML-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>焦点访谈</title>

</head>
<body>

</body>

<script>
    // function add(a,b) {
    //     return a+b;
    // }
    // var res=add(2,3);
    // alert(res);

    var add=function (a,b) {
        return a+b;
    }
    var res=add(1,2);
    alert(res);

</script>

</html>