JavaScript特点、三种引入方式(行内、内嵌、外部)、输入输出和变量的定义、常量

Bulut0907

已于 2024-04-01 08:31:45 修改

阅读量2k

点赞数 3

分类专栏： Javascript 文章标签： javascript 行内式外部式变量常量

于 2022-04-18 14:56:57 首次发布

本文链接：https://blog.csdn.net/yy8623977/article/details/121889007

版权

Javascript 专栏收录该内容

16 篇文章 1 订阅

订阅专栏

1. JavaScript特点

运行在客户端的脚本语言，由JS引擎(如Chrome的V8)进行解析和执行
能做动态表单验证和网页特效

2. Javascript组成

ECMAScript: 规定了js基础语法核心知识。比如变量、分支语句、循环语句、对象等
Web APIs:
1. DOM: 页面文档对象模型。操作文档，比如对页面元素进行移动、大小、添加删除等操作
2. BOM：浏览器对象模型。操作浏览器，比如页面弹窗，检测窗口宽度、储存数据到浏览器等

3. 三种引入方式

3.1 行内式

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>test title</title>
    
</head>
<body>

<input type="button" value="按钮" οnclick="alert('点击时弹出的显示框')">

</body>
</html>

点击按钮，弹出如下显示框
行内式

3.2 内嵌式

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>test title</title>

    <script>
        alert("我是一个弹出的显示框")
    </script>
</head>
<body>

</body>
</html>

运行以上程序，弹出一个显示框
内嵌式

3.3 外部式

index.html文件内容如下，其中script标签中不能放内容：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>test title</title>

    <script type="text/javascript" src="index.js"></script>
</head>
<body>

</body>
</html>

index.js文件内容如下：

alert("我是一个弹出的显示框");

显示效果如下：
外部式

4. 输入输出和变量的定义

说明如下：

输入方式: prompt输入
输出方式：
1. document.write向body内输出内容
2. console.log向控制台内输出内容
3. alert弹窗输出内容
alert和prompt会在页面渲染前执行。所以先执行alert和promt，再执行document.write
变量是区分大小写的。如let age和let Age是两个不同的变量
var目前很少使用，因为：
- 由于变量提升，可以先使用，再声明
- var声明过的变量可以重复声明
- 全局变量、没有块级作用域等

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<script type="text/javascript">

    // name变量在浏览器中有特殊含义, 不要使用
    let you_name;
    // 输入方式: prompt输入
    you_name = prompt("请输入你的名字: ");
    // 输出方式一: 向body内输出内容
    document.write(`<h2>${you_name}</h2>`)

    // 同时定义多个变量
    let age = 18, city;
    // 输出方式二: 向控制台内输出内容
    console.log(age);
    console.log(city);

    // 不推荐此方式定义变量
    score = 100;
    // 输出方式三: 弹窗输出内容
    // alert和prompt会在页面渲染前执行。所以先执行alert和promt，再执行document.write
    alert(score)

</script>

</body>
</html>

效果如下：

运行程序，页面没内容，控制台也没输出。出现下面的输入框，输入zhang_san，然后点击确定
控制台输出内容如下。同时弹出弹窗，点击弹窗的确认
3. 页面最后渲染出内容

5. 常量

常量定义的时候必需赋值

    const PI = 3.14
    console.log(PI)  // 3.14

Bulut0907

关注

3
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
JavaScript特点、三种引入方式(行内、内嵌、外部)、输入输出和变量的定义、常量

输入方式: prompt输入输出方式：向body内输出内容向控制台内输出内容alert弹窗输出内容alert和prompt会在页面渲染前执行。所以先执行alert和promt，再执行document.write变量是区分大小写的。如let age和let Age是两个不同的变量var目前很少使用，因为：由于变量提升，可以先使用，再声明var声明过的变量可以重复声明全局变量、没有块级作用域等
复制链接

扫一扫

专栏目录