Js入门知识点笔记

最新推荐文章于 2024-11-11 19:29:13 发布

L'.

最新推荐文章于 2024-11-11 19:29:13 发布

阅读量45

点赞数 1

文章标签： javascript 笔记开发语言

本文链接：https://blog.csdn.net/m0_74359055/article/details/132416316

版权

JavaScript概述

1.JavaScript组成部分

在这里插入图片描述

JavaScript是由ECMAScript、文档对象模型（Document Object Model:DOM）、浏览器对象模型（Brower Object Model:BOM）三部分构成。

1.ECMAScript，描述了该语言的基础语法和基本对象(包含内置对象)，JavaScript的核心，描述了语言的基本语法和数据类型。ECMAScript是一套标准。

2.文档对象模型（DOM），描述处理网页内容的方法和接口。DOM 将把整个页面规划成由节点层级构成的文档。HTML 或 XML 页面的每个部分都是一个节点的衍生物。

3.浏览器对象模型（BOM），描述与浏览器进行交互的方法和接口。

2.JavaScript特点

弱类型、解释性、基于对象、简单性、事件驱动和动态性、跨平台性。

3.引入方式

html中的脚本必须位于 <script> 与 </script> 标签之间。

脚本还可以被放在 body 和 <head> 部分中。

如要引入JavaScript要使用script标签

<script> 标签用于定义客户端脚本，script 元素即可包含脚本语句，又可通过 src 属性指向外部脚本文件。

在页面上使用js时，必须使用 script 标签，把源码放在script和/script之间。

script的标签属性有两种：

type：指定脚本的类型。

src：指定外部脚本的url。

<script>
    //定义JS代码
 </script>

//引入外部JS文件
<script src="url"></script>

3.1行内引入JS

在标签事件属性中填写JavaScript代码或调用函数时，调用函数时不是事件=函数名，而是事件=函数名 +()

<button onclick="alert('我是一个警告框')" type="button">点击这里</button>

3.2内部引入JS

脚本可以位于或部分中。

通常的做法是把函数放入部分中，或者放在页面底部。这样就可以把它们安置到同一处位置，不会干扰页面的内容。

<body>
    <h1>我的第一个js页面</h1>
    <p id="demo">我的第一个段落</p>
    <button onclick="alert('我是一个警告框')" type="button">点击这里</button>
    <!-- 内部引用 -->
    <script>
        document.write("我是h1的内容")
        document.getElementById("demo").innerHTML="段落已修改"
    </script>
</body>

3.3外部引入JS

可以把脚本保存到外部文件中。外部文件的扩展名是.js文件：

<!DOCTYPE html>
<html>
  <body>
       <script src="myScript.js"></script>
  </body>
</html>

🚨注：引用外部js文件的script标签中不可以写JavaScript代码。

扩展知识点

1.向文档中写入内容

document.write()常用操作：

1.输出文字。

2.除了直接输出文字外，它还支持带有HTML标签的输出内容。

直接输出一个标题
在输出内容中加入br换行标签
输入一张图片
…

<body>
  <script>
    document.write('<h1>输出一个一级标题<h1>')
  </script>
</body>

在这里插入图片描述

2.警告框

alert()方法：

alert()方法会弹出警告框。
可以添加多个alert();他们会按照顺序依次执行。

<body>
  <script>
      alert('我是警示框')
  </script>
</body>

在这里插入图片描述

3.控制台输出

console.log():

写入到浏览器的控制台。
如果您的浏览器支持调试，你可以使用 console.log() 方法在浏览器中显示 JavaScript 值。
浏览器中使用 F12 来启用调试模式，在调试窗口中点击 “Console” 菜单。

<body>
  <script>
      console.log(6+1)
  </script>
</body>

在这里插入图片描述

4.向标签设置内容

**innerHTML：**写入内容到HTML元素

<html>
  <body>
    <h1>我的第一个 Web 页面</h1>
    <p id="demo">我的第一个段落</p>
    <script>
       document.getElementById(id) 方法。
       document.getElementById("demo").innerHTML = "段落已修改。";
    </script>
  </body>
</html