JavaScript基础入门1

最新推荐文章于 2024-10-01 20:12:28 发布

初学小徐

最新推荐文章于 2024-10-01 20:12:28 发布

阅读量51

点赞数

文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/weixin_48735790/article/details/132837965

版权

1.介绍

JavaScript简称JS，是一种编程语言，主要是参与构建web前端。

JavaScript 是一种脚本编程语言，它可以在网页上实现复杂的功能，网页展现给你的不再是简单的静态信息，而是实时的内容更新——交互式的地图、2D/3D 动画、滚动播放的视频等等——JavaScript 就在其中。

HTML是一种标记语言，用来结构化我们的网页内容并赋予内容含义，例如定义段落、标题和数据表，或在页面中嵌入图片和视频。
CSS是一种样式规则语言，可将样式应用于 HTML 内容，例如设置背景颜色和字体，在多个列中布局内容。
JavaScript是一种脚本语言，可以用来创建动态更新的内容，控制多媒体，制作图像动画，还有很多。（好吧，虽然它不是万能的，但可以通过简短的代码来实现神奇的功能。）

组成

ECMAScript：规定JavaScript的基础语法核心知识
WebAPIs
1. DOM (页面文档模型)：操作文档，比如页面元素进行移动、大小、添加删除等操作
2. BOM (浏览对象模型):操作浏览器，比如页面弹窗，检测窗口宽度到浏览器等

2.JavaScript书写的位置

内部JavaScript

在HTML的</head> 标签结束前插入以下代码:

<script>
  // 在此编写 JavaScript 代码
</script>

直接在 <script> 元素中添加一些 JavaScript 代码，如以下代码:

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

外部JavaScript

想要将JavaScript代码放置在外部文件

1.首先，在目录中创建一个后缀为.js的新文件。确保文件是.js为后缀，只有这样才能被识别为JavaScript代码。如新建一个s.js的新文件

2.在s.js文件中添加一些 JavaScript 代码，如以下代码:

alert('第一个JavaScript练习')

3. 在HTML文档中将 <script> 元素替换为：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
    <script src="s.js" defer></script>
   
</body>

</html>

内行JavaScript

内联处理器是指在HTML代码中嵌入JavaScript代码，通过HTML元素的事件来触发JavaScript代码的执行。例如，当用户点击一个按钮时，就会触发该按钮的点击事件，进而执行与该事件相关联的JavaScript代码。例如以下代码：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
   <button onclick="createParagraph()">点我！</button>
   <script>
      function createParagraph() {
      const para = document.createElement("p");
      para.textContent = "你点击了按钮！";
      document.body.appendChild(para);
      }
   </script>
</body>
</html>

3.注释、结束符

就像HTML和CSS，在编写JavaScript代码中也是可以加入注释，浏览器会自动忽略它们。注释能够提供关于代码如何工作的指引。注释是分为两类

单行注释：指的是在双斜杠(//)后添加单行注释，比如：

// 我是一条注释

多行注释：指的是可以将多行代码全部注释，使用的是/*和*/，比如：

/*
  我也是
  一条注释
*/

4. 输入和输出语句

输入语句

在JavaScript中， prompt(）弹出输入框，让用户输入内容，返回用户输入的内容字符串。我们使用的输入语句的代码如下：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body> 
    <script>     
         prompt('输入你的名字')
    </script>
</body>
</html>

输出语句

输出语句分为三种，分别为页面输出，弹窗输出以及控制台输出

页面输出

就是将用户的数据直接在页面上展示出来，输出内容覆盖当前页面内容。使用的语句是document.write('')，在单引号中除了可以直接添加语句以外，还可以加入标签，代码如下

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
    <script>
       document.write('加油，朋友！')
    </script>
</body>
</html>

弹窗输出

在页面弹出警告框，常用于用户交互时，给出提示信息。代码如下:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
    <script>
       alert('加油，朋友！')
    </script>
</body>
</html>

控制台输出

向控制台输出信息，常用于调试时输出变量的值或者返回值。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
    <script>
       console.log('你好')
    </script>
</body>
</html>