了解基本的JavaScript代码,简要指南

2021年4月1日15:19:46 发表评论 570 次浏览

JavaScript插入网页非常类似于插入任何其他HTML内容。用于在HTML中添加JavaScript的标签是<script>和</script>。由<script>和</script>标记包围的代码称为脚本博客。

<script>标记可以放在<head>和</head>标记之间, 也可以放在<body>和</body>标记之间。

类型属性是<script>标记的最重要属性。但是, 它不再使用。浏览器了解<script>标记中包含JavaScript代码。

<script type="text/javascript">

如何编写, 保存和运行代码:

方法1:

1.使用任何笔记编辑器,如Notepad, notepad++来编写代码。

2.用.html扩展名保存页面,并在web浏览器中加载。

方法2:

1.创建一个.js文件, 然后使用你喜欢的编辑器在该文件中编写JS代码

2.添加<script src =" relative_path_to_file /file_name.js"> </script>到HTML文件内<body>标记的末尾。

将页面涂成浅蓝色的代码

<!DOCTYPE html>
<html>
   <head>
     <title></title>
   </head>
   <body bgcolor = "white">
    <p>Paragraph 1</p>
    <script type = "text/javascript">
    document.bgColor ="lightblue";
    </script>
   </body>
<html>

输出如下:

了解基本的JavaScript代码。1

网页的颜色为浅蓝色, 但是定义了开始正文标签以将背景色设置为白色。

<body bgcolor="white">

页面的背景色为浅蓝色, 因为使用JavaScript将文档的背景色设置为浅蓝色。

document.bgcolor="lightblue";

从代码中学习:

1.为了在网页中编写脚本, 页面被称为文档。

2.可以通过写文档, 后跟点, 后跟属性名称来引用文档的属性。该文档具有许多属性。

3.在<script>标签之后, 浏览器开始将文本解释为JavaScript, 直到</script>出现。

使用JavaScript将内容写入网页的代码:

让我们写

"你好, 世界!"

使用JavaScript转到空白页。

在网页上显示结果。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
  Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  <html xmlns="http://www.w3.org/1999/xhtml">
   <head>
     <title></title>
   </head>
   <body>
    <p id = "ResultsP"></p> 
    <script type = "text/javascript">//Script Block 1
    document.getElementById('ResultsP').innerHTML ='Hello World!';
    </script>
   </body>
<html>

输出如下:

了解基本的JavaScript代码。2

从代码中学习:

1.以下行已添加到此代码中。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml">

这使Web浏览器知道用户正在使用XHTML。它实际上对代码没有任何影响;如果没有多余的行, 它就可以正常工作。

2.请注意, 已使用id属性为<p>标记赋予了id。

<p id="ResultsP">

该ID在网页中必须是唯一的, 因为JavaScript使用它来标识以下行中的特定HTML元素:

document.getElementById(‘ResultsP’).innerHTML = ‘Hello World!’;

该代码仅表示:"获取具有id ResultsP的document元素, 并将该元素内的HTML设置为Hello World!"

重要的是, 访问该段落的代码应在该段落之后, 否则, 该代码将试图在该段落存在于页面中之前对其进行访问, 并会引发错误。


木子山

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: