JavaScript概述（一）

鬼鬼不同路

已于 2022-08-26 16:56:09 修改

阅读量216

点赞数 2

分类专栏：笔记文章标签： javascript 前端开发语言

于 2022-08-25 21:47:16 首次发布

本文链接：https://blog.csdn.net/m0_51892736/article/details/126532447

版权

笔记专栏收录该内容

6 篇文章 1 订阅

订阅专栏

JavaScript概述（一）

JavaScript的语言特征及编程注意事项
- 特征
- 注意
JavaScript的组成
入门案例
JavaScript引入方式

JavaScript的语言特征及编程注意事项

特征

JavaScript无需编译，直接浏览器解释并执行
JavaScript无法单独运行，必须嵌入到HTML代码中运行
JavaScript的执行过程由上到下依次执行

注意

JavaScript没有访问系统文件的权限（安全）
由于JavaScript无需编译，是由上到下依次解释执行，所以在保证可读性的情况下，允许使用链式编程
JavaScript与Java没有直接关系

JavaScript的组成

ECMAScript(核心）：规定了JS的语法和基本组成对象
DOM 文档对象模型：处理网页内容的方法和接口，标记型文档
BOM 浏览器对象模型：与浏览器交互的方法和接口

入门案例

代码展示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        //int a=10;
        var a=10;
        //int b=20;
        var b=20;
        //int temp=a+b;
        var temp=a+b;
        //System.out.println(temp);
        alert(temp);
    </script>
</head>
<body>

</body>
</html>

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

JavaScript引入方式

JavaScript 引入方式就是 HTML 和 JavaScript 的结合方式。JavaScript引入方式有两种：

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

内部脚本

在 HTML 中，JavaScript 代码必须位于 < script> 与 < /script> 标签之间
代码如下：
alert(数据) 是 JavaScript 的一个方法，作用是将参数数据以浏览器弹框的形式输出出来。

  <!DOCTYPE html>
  <html lang="en">
  <head>
  			<meta charset="UTF-8">
  			 <title>Title</title> 
  </head> 
  <body> 
  <script> 
			alert("hello js1"); 
  </script>
  </body> 
  </html>

效果如下：
在这里插入图片描述

外部脚本（一）

在HTML文档中，通过< script src=“” >标签引入js文件

格式：<script type="text/javascript” src="javascript文件路径”>< /script>

代码展示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script  src="01demo1.js"></script>
</head>
<body>

</body>
</html>

01demo1.js:

alert("你好");

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

注:外部引用时script标签内不能有script代码，I即使写了也不会执行。
示例:

外部脚本（二）

开发规范规定，script标签的放置位置为 body结束标签前。

代码展示：

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


</head>
<body>
        <h5>欢迎</h5>
        <script src="01demo1.js">

        </script>
        <script>
            alert("标签内部的你好");
        </script>
</body>
</html>

01demo1.js：