JS基础知识（1）

最新推荐文章于 2023-03-27 11:12:14 发布

望望byte

最新推荐文章于 2023-03-27 11:12:14 发布

阅读量539

点赞数

分类专栏： JavaScript学习笔记文章标签： javascript

本文链接：https://blog.csdn.net/m0_53170889/article/details/118887668

版权

文章目录

简介：
JS使用：

简介：

JavaScript是属于HTML和Web的编程语言，
JavaScript是Web开发者必学的三种语言之一：

HTML定义网页的内容

CSS规定网页的布局

JavaScript对网页的行为进行编程

JS能够改变HTML的内容

==getElementById()==是多个JS HTML的方法之一
eg:通过该方法来查找“id=‘demo’ ”的HTML元素，并把元素的内容（innerHTML）更改为‘Hello JavaScript’

document.getElementById("demo").inerHTML="Hello JavaScript"

提示：JS同时接受双引号和单引号

JS能够改变HTML属性

eg通过getElementById获得Id为myImage的元素，修改元素的Src属性

<button onclick="docment.getElementById('myImage').src='/i/eg_bulbon.gif''>开灯</button>
<img id="myImage" border="o" src="/i/eg_bulboff.gif" style="text-align:center;">

JS能够改变HTML样式（CSS）

改变HTML元素的样式，是改变HTML属性的一种变种：
eg：

docment.getElementById("demo").style.fonsize="25px"

JS能够隐藏HTML元素

eg:可通过改变dispaly样式来隐藏HTML元素：

docment.getElementById("demo").style.dispaly="none"

JS 能够显示HTML元素

eg:可通过改变dispaly样式来显示隐藏HTML元素：

docment.getElementById("demo").style.dispaly="block"

JS使用：

在HTML中。JS代码必须位于标签之间
eg:

<script>
document.getElementById("demo").innerHTML = "我的第一段 JavaScript";
</script>

旧的JS例子也许会使用type属性：

JS函数和事件

JS函数是一种JS代码块，它可以在调用时被执行
eg当发生事件时调用函数，比如当用户点击按钮时

或中的JS

您能够在 HTML 文档中放置任意数量的脚本。

脚本可被放置与 HTML 页面的或 > > 部分中，或兼而有之。

中的JS

在本例中，JS函数被放置在HTML页面的部分，该函数会在按钮被点击时调用

<!DOCTYPE html>
<html>
<head>
<script>
function myFunction() {
   
    document.getElementById("demo").innerHTML = "段落已被更改。";
}
</script>
</head>

<body>

<h2>Head 中的 JavaScript</h2>

<p id="demo">一个段落。</p>

<button type="button" onclick="myFunction()">试一试</button>

</body>
</html>

中的JS

<!DOCTYPE html>
<html>
<body> 

<h1>A Web Page</h1>
<p id="demo">一个段落</p>
<button type="button" onclick="myFunction()">试一试</button>

<script>
function myFunction() {
   
   document.getElementById("demo").innerHTML = "段落被更改。";
}
</script>

</body>
</html>

外部脚本

脚本可放置于外部文件中
eg外部文件：myScript.js

function myFunction() {
   
   document.getElementById("demo").innerHTML = "段落被更改。";
}

外部脚本很实用，如果相同的脚本被用于许多不同的网页。

JavaScript 文件的文件扩展名是== .js==。
eg

您可以在或中放置外部脚本引用。
该脚本的表现与它被置于

<script src="myScript.js"> </script>

注释外部脚本中不能包含

外部JS的优势

在外部文件中放置脚本有如下优势：

分离了HTML和代码
使得HTML和JS更易于阅读和维护
已经缓存的JS文件可加速页面加载
如果需向一张页面添加多个脚本----使用多个

<script src="myScript1.js"></script>
<script src="myScript2.js"></script>

外部引用：

可以通过完整的URL引用外部脚本
可以通过相对于当前网页路径引用外部脚本
eg1使用完整的URL来连接脚本

<script src="https://www.w3school.com.cn/js/myScript1.js"></script>

eg2使用位于当前网站上指定文件夹中的脚本

<script src="/js/myScript1.js"></script>

eg3使用与当前页面相同文件夹的脚本：

<script src="myScript1.js"></script>

HTML文件路径：

路径	描述
<img src=“picture.jpg”	picture.jpg位于当前网页相同的文件夹
<src=“images/picture.jpg”>	picture.jpg位于当前文件夹的images文件夹中
<src="/images/picture.jpg">	picture.jpg 当前站点根目录的 images 文件夹中
<src="…/picture.jpg">	picture.jpg 位于当前文件夹的上一级文件夹中

文件路径描述了网站文件夹结构中某个文件的位置
文件路径会在链接外部文件中用到：

网页
图像
样式表
JavaScript

绝对路径：

绝对文件路径是指向一个因特网文件的完整 URL：
eg:

<img src="https://www.w3school.com.cn/images/picture.jpg" alt="flower">

相对路径：

相对路径指向了相对于当前页面的文件
好习惯：

使用相对路径是个好习惯（如果可能）。
如果使用了相对路径，那么您的网页就不会与当前的基准 URL 进行绑定。所有链接在您的电脑上 (localhost) 或未来的公共域中均可正常工作。

JS 输出

JS 不提供任何内建的打印或者显示函数

JS显示方案

JS能够以不同的方式“显示”数据

使用 window.alert() 写入警告框；
使用 document.wirte() 写入HTML输出
使用 innerHTML 写入HTML元素
使用 console.log() 写入浏览器控制台

使用innerHTML

访问HTML元素： JS可使用 document.getElementById(id) 方法。

<!DOCTYPE html>
<html>
<body>

<h1>我的第一张网页</h1>

<p>我的第一个段落</p>

<p id="demo"></p>

<script>
 document.getElementById("demo").innerHTML = 5 + 6;
</script>

</body>
</html>

tips： 更改HTML元素的innerHTML属性是在HTML中显示数据的常用办法

使用document.write()

处于测试的目的，使用 document。write()比较方便``

<!DOCTYPE html>
<html>
<body>

<h1>我的第一张网页</h1>

<p>我的第一个段落</p>

<script>
document.write(5 + 6);
</script>

</body>
</html>

在这里插入图片描述
注意： 在HTML文档完全加载后使用document.wirte 将删除所有已有的HTML；
tips
==document。write()方法仅用于测试
**eg： **

<!DOCTYPE html>
<html>
<body>

<h1>我的第一张网页</h1>

<p>我的第一个段落</p>

<button onclick="document.write(5 + 6)">试一试</button>

</body>
</html>

点击按钮前
点击按钮后

使用window.alert()

用警告框来显示数据

<!DOCTYPE html>
<html>
<body>

<h1>我的第一张网页</h1>

<p>我的第一个段落</p>

<script>
window.alert(5 + 6);
</script>

</body>
</html>

在这里插入图片描述

使用console.log()

在浏览器中，可以使用console.log()的方法显示数据
请通过 F12 来激活浏览器控制台，并在菜单中选择“控制台”。

**eg: **

<!DOCTYPE html>
<html>
<body>

<h1>我的第一张网页</h1>

<p>我的第一个段落</p>

<script>
console.log(5 + 6);
</script>

</body>
</html>

在这里插入图片描述

JS语句

在HTML中，JS语句是由Web浏览器“执行”的“指令”

var x, y, z;	// 语句 1
x = 22;		// 语句 2
y = 11;		// 语句 3
z = x + y;	// 语句 4

JS程序

计算机程序是由计算机“执行”的一系列“指令”。

在编程语言中，这些编程指令被称为语句。

JavaScript 程序就是一系列的编程语句。

注释：在 HTML 中，JavaScript 程序由 web 浏览器执行。

JS 语句：

JS语句由以下构成：

值
运算符
表达式
关键词
注释

大多数 JavaScript 程序都包含许多 JavaScript

最低0.47元/天解锁文章

望望byte

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
JS基础知识（1）

文章目录简介：JS能够改变HTML的内容JS能够改变HTML属性JS能够改变HTML样式（CSS）JS能够隐藏HTML元素JS 能够显示HTML元素JS使用：简介：JavaScript是属于HTML和Web的编程语言，JavaScript是Web开发者必学的三种语言之一：HTML定义网页的内容CSS规定网页的布局JavaScript对网页的行为进行编程JS能够改变HTML的内容==getElementById()==是多个JS HTML的方法之一eg:通过该方法来查找“id=‘dem
复制链接

扫一扫