javascript入门第一节：JavaScript 介绍

最新推荐文章于 2024-09-13 08:33:26 发布

不能瞌睡呀

最新推荐文章于 2024-09-13 08:33:26 发布

阅读量468

点赞数 2

文章标签： javascript

本文链接：https://blog.csdn.net/qq_56897195/article/details/123502598

版权

文章目录

JavaScript 介绍

JavaScript 介绍

1. JavaScript 是什么？

目标：初步了解 JavaScript

1.1 JavaScript （是什么？）

是一种运行在客户端（浏览器）的编程语言，实现人机交互效果。

1.2 JavaScript的作用（做什么？）

网页特效 (监听用户的一些行为让网页作出对应的反馈)
表单验证 (针对表单数据的合法性进行判断)
数据交互 (获取后台的数据, 渲染到前端)
服务端编程 (node.js)
###1.3 JavaScript的组成（有什么？）

ECMAScript:
规定了js基础语法核心知识。
比如：变量、分支语句、循环语句、对象等等
Web APIs :

DOM：操作文档，比如对页面元素进行移动、大小、添加删除等操作
BOM：操作浏览器，比如页面弹窗，检测窗口宽度、存储数据到浏览器等等

1.4 总结：

JavaScript是什么？

JavaScript 是一种运行在客户端（浏览器）的编程语言

JavaScript组成是什么？

ECMAScript( 基础语法 )、web APIs （DOM、BOM）

2. JavaScript 书写位置

目标：知道如何向页面添加 JavaScript 在这里插入图片描述

2.1 内部 JavaScript

直接写在html文件里，用script标签包住

规范：script标签写在上面

拓展： alert(‘你好，js’) 页面弹出警告对话框

<script>
    alert('嗨，欢迎来学习前端技术！');
  </script>

注意：我们将

如果先加载的 JavaScript 期望修改其下方的 HTML，那么它可能由于 HTML 尚未被加载而失效。
因此，将 JavaScript 代码放在 HTML页面的底部附近通常是最好的策略。

2.2 外部 JavaScript

代码写在以.js结尾的文件里

语法：通过script标签，引入到html页面中。

<body>
  <!-- 外部形式：通过 script 的 src 属性引入独立的 .js 文件 -->
  <script src="demo.js"> </script>
</body>

注意：

script标签中间无需写代码，否则会被忽略！
外部JavaScript会使代码更加有序，更易于复用，且没有了脚本的混合，HTML 也会更加易读，因此这是个好的习惯。

2.3 内联 JavaScript

代码写在标签内部

语法：

<body>
     <button οnclick="alert('逗你玩~~~')">点击我月薪过万</button>
</body>

注意：此处作为了解即可，但是后面vue框架会用这种模式在这里插入图片描述

2.4综合应用

2.4.1 内部形式

通过 script 标签包裹 JavaScript 代码

举例1：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>JavaScript 基础 - 引入方式</title>
</head>
<body>
  <!-- 内联形式：通过 script 标签包裹 JavaScript 代码 -->
  <script>
    alert('嗨，欢迎来传智播学习前端技术！');
  </script>
</body>
</html>

举例2：

<!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>Document</title>

</head>
<body>
     <!-- 1.行内式的js直接写到元素的内部 -->
     <!-- 插入(input)一个按钮，按钮上的名字(value)是唐伯虎，点击(onclick)按钮的时候，出现一个标有秋香姐姐的弹出框(alert )-->

    <input type="button" value="唐伯虎" onclick="alert('秋香姐姐')">
</body>
</html>

2.4.2 外部形式

一般将 JavaScript 代码写在独立的以 .js 结尾的文件中，然后通过 script 标签的 src 属性引入

// demo.js
document.write('嗨，欢迎来传智播学习前端技术！');

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>JavaScript 基础 - 引入方式</title>
</head>
<body>
  <!-- 外部形式：通过 script 的 src 属性引入独立的 .js 文件 -->
  <script src="demo.js"></script>
</body>
</html>

** 如果 script 标签使用 src 属性引入了某 .js 文件，那么标签的代码会被忽略！！！** 如下代码所示：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>JavaScript 基础 - 引入方式</title>
</head>
<body>
  <!-- 外部形式：通过 script 的 src 属性引入独立的 .js 文件 -->
  <script src="demo.js">
    // 此处的代码会被忽略掉！！！！
  	alert(666);  
  </script>
</body>
</html>

2.4.3 综合

<!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>Document</title>
    <!-- 2.内嵌式的js -->
    <script>
        alert('嘟嘟');
    </script>

    <!-- 3．外部js script 双标签 -->
    <script src="my.js"></script>


</head>

<body>
    <!-- 1.行内式的js直接写到元素的内部 -->
    <!-- 插入(input)一个按钮，按钮上的名字(value)是唐伯虎，点击(onclick)按钮的时候，出现一个标有秋香姐姐的弹出框(alert )-->

    <input type="button" value="唐伯虎" onclick="alert('秋香姐姐')">
</body>

</html>