JavaWeb开发教程day02_JavaScript

最新推荐文章于 2025-08-27 15:43:51 发布

原创

最新推荐文章于 2025-08-27 15:43:51 发布 · 3.3k 阅读

13 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #开发语言 #ecmascript #html

1.概念

Web标准也称为网页标准，由一系列的标准组成，大部分由W3C（ World Wide Web Consortium，万维网联盟）负责制定。

三个组成部分

HTML：负责网页的基本结构（页面元素和内容）。
CSS：负责网页的表现效果（页面元素的外观、位置等页面样式，如：颜色、大小等）。
JavaScript：负责网页的行为（交互效果）。

什么是 JavaScript?

JavaScript（简称：JS）是一门跨平台、面向对象的脚本语言。是用来控制网页行为的，它能使网页可交互。

JavaScript 和 Java 是完全不同的语言，不论是概念还是设计。但是基础语法类似。

JavaScript 在 1995年由 Brendan Eich 发明，并于 1997 年成为 ECMA 标准。

ECMAScript6 (ES6) 是最主流的JavaScript 版本（发布于 2015 年)。

2. JS引入方式

2.1 内部脚本

将JS代码定义在HTML页面中

JavaScript代码必须位于<script></script>标签之间

在HTML文档中，可以在任意地方，放置任意数量的<script>

一般会把脚本置于<body>元素的底部，可改善显示速度

<script>
    alert("Hello JavaScript")
</script>

2.2 外部脚本

将 JS代码定义在外部 JS文件中，然后引入到 HTML页面中

外部JS文件中，只包含JS代码，不包含<script>标签

<script>标签不能自闭合

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

代码示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JS-引入方式</title>
    <!-- <script>
        alert("Hello JS");//定义弹出框
    </script> -->
   
</head>
<body>
    
    <!-- 内部脚本 -->
    <!-- <script>
        alert("Hello JS");//定义弹出框
    </script> -->
    
    <!-- 外部脚本 -->
    <script src="js/demo.js"></script>
</body>
</html>

<!-- <script>
    alert("Hello JS");//定义弹出框
</script> -->

js/demo.js如下

alert("Hello JS") //定义弹出框

演示效果
在这里插入图片描述

2. 基础语法

2.1 书写语法

区分大小写：与 Java 一样，变量名、函数名以及其他一切东西都是区分大小写的

每行结尾的分号可有可无

注释：

单行注释：// 注释内容

多行注释：/* 注释内容 */

大括号表示代码块

//判断
if(count == 3){
   
   
    alert(count);
}

2.2 输出语句

使用 window.alert() 写入警告框

使用 document.write() 写入 HTML 输出

使用 console.log() 写入浏览器控制台

<script>
    window.alert("Hello JavaScript"); //浏览器弹出警告框
    
    document.write("Hello JavaScript"); //写入HTML,在浏览器展示
    console.log("Hello JavaScript"); //写入浏览器控制台
</script>

在这里插入图片描述

2.3 变量

JavaScript 中用 var 关键字（variable 的缩写）来声明变量。

JavaScript 是一门弱类型语言，变量可以存放不同类型的值。

变量名需要遵循如下规则：组成字符可以是任何字母、数字、下划线（_）或美元符号（$）

数字不能开头

建议使用驼峰命名

  var 定义的是一个全局变量， 还可以重复声明
    {
   
   
        var a = 0;
        var a = "A";
    }
    alert(a);


    let 定义的是一个局部变量， 不可以重复声明
    {
   
   
        let a = 0;
        a = "A";

        alert(a);
    }

特点：JS是弱类型语言，变量可以存放不同类型的值
声明：
- var：声明变量，全局作用域/函数作用域，允许重复声明
- let：声明变量，块级作用域，不允许重复声明
- const：声明常量，一旦声明，常量的值不能改变

代码演示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JS-基础语法</title>
</head>
<body>
  


<script>
    //定义变量
    // var a = 0;
    // a = "A";

    // alert(a);

    // var 定义的是一个全局变量， 还可以重复声明
    // {
     
     
    //     var a = 0;
    //     var a = "A";
    // }
    // alert(a);
    

    // let 定义的是一个局部变量， 不可以重复声明
    // {
     
     
    //     let a = 0;
    //     a = "A";

    //     alert(a);
    // }
    
    //const 定义的是一个常量
    const pi = 3.14;
    //pi = 3.15;

    alert(pi);

</script>
</body>
</html>

效果演示
在这里插入图片描述

2.3 数据类型

JavaScript中分为：原始类型 和 引用类型

number：数字（整数、小数、NaN(Not a Number)）
string：字符串，单双引皆可
boolean：布尔。true，false
null：对象为空
undefined：当声明的变量未初始化时，该变量的默认值是 undefined

使用 typeof 运算符可以获取数据类型

代码示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JS-数据类型</title>
</head>
<body>

</body>
<script>

    //原始数据类型
    alert(typeof 3); //number
    alert(typeof 3.14);//number

    alert(typeof "A"); //string
    alert(typeof 'Hello');//string

    alert(typeof true);//boolean
    alert(typeof false);//boolean

    alert(typeof null);//object

    var a ;
    alert(typeof a);//undefined?
        
</script>
</html>

效果演示

在这里插入图片描述

2.4 运算符

算术运算符：+ , - , * , / , % , ++ , –

赋值运算符：= , += , -= , *= , /= , %=

比较运算符：> , < , >= , <= , != , == , ===

逻辑运算符：&& , || , !

三元运算符：条件表达式 ? true_value: false_value

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

var a = 10;
alert(a == "10"); //true
alert(a === "10"); //false
alert(a === 10); //true

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

代码示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JS-运算符</title>
</head>
<body>
    
</body>
<script>
    // var age = 20;
    // var _age = "20";
    // var $age = 20;
    
    // alert(age == _age); //true
    // alert(age === _age); //false
    // alert(age === $age); //true



    // 类型转换 - 其他类型转为数字
    // alert(parseInt("12")); //12
    // alert(parseInt("1222A45")); //1222后面的不会转换
    // alert(parseInt("A45")); //NaN




    // if(0){
     
     
    //     alert("If");
    // }


    // 类型转换 - 其他类型转为boolean
    // if(0){ //false
    //     alert("0 转换为false");
    // }

    // if(NaN){ //false
    //     alert("NaN 转换为false");
    // }

    // if(-1){ //true
    //     alert("除0和NaN其他数字都转为 true");
    // }

    // if(""){ //false
    //     alert("空字符串为 false, 其他都是true");
    // }
        
    // if(null){ //false
    //     alert("null 转化为false");
    // }

    // if(undefined){ //false
    //     alert("undefined 转化为false");
    // }

    /*
        false：
            0    NaN
            ""
            null
            undefined
    */

</script>
</html>

流程控制语句

if…else if …else…

switch

for

while

do … while

3. 函数

3.1 定义

介绍：函数（方法）是被设计为执行特定任务的代码块。

定义：JavaScript 函数通过 function 关键字进行定义，语法为：

function functionName(参数1,参数2..){    //要执行的代码}

//法1
function add(a , b){
   
   
    return a

最低0.47元/天解锁文章

新学期VIP享超值加赠

JavaWeb开发教程day02_JavaScript

文章目录

1.概念

2. JS引入方式

2.1 内部脚本

2.2 外部脚本

2. 基础语法

2.1 书写语法

2.2 输出语句

2.3 变量

2.3 数据类型

2.4 运算符

3. 函数

3.1 定义