1、初识JavaScript

com.li

已于 2023-07-30 12:06:39 修改

阅读量56

点赞数 1

分类专栏： JavaScript 文章标签： javascript

于 2023-07-30 11:48:48 首次发布

本文链接：https://blog.csdn.net/LIJINGPO/article/details/132005307

版权

JavaScript 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

初识JavaScript

JavaScript简介

Javascript （简称“JS”）是⼀种直译式脚本语⾔，⼀段脚本其实就是⼀系列指令，计算机通过这些指令来达成⽬标。它⼜是⼀种动态类型的编程语⾔。JS⽤来在⽹⻚中添加⼀些动态效果与交互功能。

Javascript 与 HTML 、 CSS 共同构成了我们所看到的⽹⻚，其中：

①.HTML ⽤来定义⽹⻚的内容，如：标题、正⽂、图像等；

②.CSS ⽤来控制⽹⻚的外观，如：颜⾊、字体、背景等；

③.Javascript ⽤来实时更新⽹⻚中的内容，让⽹⻚更加⽣动。如：从服务器获取数据并更新到⽹⻚中，修改某些标签的样式或其中的内容等。

JavaScript作用：

主要用于处理网页中的前端验证，也就是指检查用户输入的内容是否符合一定的规则，例如：用户名的长度、密码的长度、邮箱长度等。

JavaScript包含三部分

JavaScript实现包含三部分：ECMAScript、DOM和BOM；其中ECMScript是核心：提供语言的语法和基本对象；DOM：（文档对象模型）提供网页内容的方法和接口；BOM（浏览器对象模型）：提供与浏览器进行交互的方法和接口。

JavaScript特点

①解释性脚本语言②面向对象③弱类型④动态性⑤跨平台

JavaScript三种引入方式

JavaScript必须出现在以 .js 作为后缀名的⽂件中，或者出现在 html ⻚⾯的

5.1行内式：将JavaScript代码作为HTML标签的属性值使⽤。

<body>
    <!-- ⾏内式 -->
    <a href="javascript:alert('Suprise~')">点我有惊喜</a>
 </body>

5.2嵌入式：把<script>标签包裹成JavaScript代码，⽤户可以在 <script> 标签中直接编写 JavaScript代码

/*
步骤：
1.新建一个HTML文件
2.在</body>和</html>标签之间插⼊⼀个<script>标签
3.为 <script> 标签设置 type="text/javascript"属性
4.在 <script> 标签内输⼊JavaScript代码
*/
<body>
</body>
    <script type="text/javascript">
    // 此处编写JavaScript代码
    </script>
</html>

5.3外链式

/*
1.新建⽂本⽂件，后缀名为 .js，它表示该⽂本⽂件是JavaScript类型的⽂件
2.打开js⽂件，在⽂件中直接编写JS代码，不需要写<script>标签
3.保存JavaScript⽂件，在此建议把JavaScript⽂件和⽹⻚⽂件放在同⼀个⽬录下
4.新建HTML⽂档
5.在</body>和</html>标签中插⼊⼀个<script>标签。定义src属性，
设置属性值为指向外部JavaScript⽂件的路径。
*/
    
<!-- 外链式一定要写在嵌入式的上部 -->
    
<body> 
</body>
<script src="./textJS.js"></script>
</html>

JavaScript输出方式

/*
使⽤ window.alert() 函数弹出提示框
使⽤ window.confirm() 函数弹出对话框
使⽤ window.prompt() 函数弹出可以让⽤户输⼊的提示框
使⽤ console.log() 在浏览器的控制台输出内容
使⽤ document.write() ⽅法将内容写⼊到HTML⽂档中
*/

// 输出方式：
// 1.alter 弹出一个弹窗（只有一个确定按钮）
 window.alert("欢迎来到1988~");
 alert("欢迎来到1988~")

// 2.confirm 弹出一个弹窗（有确定和取消按钮）
 window.confirm("确定删除吗？");
 confirm("确定删除吗？")

// 3.prompt 弹出一个弹窗（显示提示文字和输入框）
 window.prompt("请输入体重：");
 prompt("请输入体重：");

// 4.console.log（打印在浏览器控制台上）
 window.console.log("欢迎来的到1994");
 console.log("欢迎来的到1994");

// 5.document.write(将内容写入网页中)
 document.write("将进酒");
 document.write("<h1 style='color:red'>将进酒</h1>");

JavaScript执行顺序

1.执行顺序：浏览器在解析 HTML ⽂档时，将根据⽂档流从上到下逐⾏解析和显示。 JavaScript 代码也是HTML ⽂档的组成部分，因此 JavaScript 脚本的执⾏顺序也是根据<script> 标签的位置来确定的。通常建议将JavaScript代码放在⽂档的最后部分。

/*
JavaScript在预编译期会先预处理声明的变量，但是变量的赋值操作发⽣在执⾏期 ，⽽不是预编译期。

JavaScript引擎的解析⽅式是：先解析代码，获取所有被声明的变量，
然后再⼀⾏⼀⾏地运⾏。这样，所有声明变量都会被提升到代码的头部，
就叫做 变量提升 （Hoisting）。
*/

<!DOCTYPE html>
    <script>
         alert("顶部脚本");
    </script>
<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>Document</title>
</head>
    <script>
         alert("头部脚本");
    </script>
<body>
     <h1>猿究院官网/h1>
     <script>
         alert("⻚⾯脚本");
     </script>
     <p>正⽂内容</p>
</body>
    <script>
         alert("底部脚本");
    </script>
</html>