JavaScript---学习一：简介与使用

最新推荐文章于 2024-11-02 15:39:50 发布

Ysmooth

最新推荐文章于 2024-11-02 15:39:50 发布

阅读量125

点赞数

分类专栏： JavaScript 文章标签： javascript html5 html

本文链接：https://blog.csdn.net/Ysmooth/article/details/119981082

版权

JavaScript 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

JavaScript---学习一：简介与使用

js简介
一、如何使用js？
- JavaScript函数和事件
二、js与DOM

js简介

回顾一下JavaScript的诞生。1995年，网景公司凭借其Navigator浏览器成为最著名的第一代互联网公司。网景公司希望能在静态HTML页面上添加一些动态效果，于是叫Brendan Eich在两周之内设计出JavaScript语言，事实上只用了10天时间。为什么起名叫JavaScript?原因是当时Java语言非常红火，所以网景公司希望借Java的名气来推广，但事实上JavaScript除了语法上有点像Java，其他部分基本上没啥关系。
一年后微软模仿JavaScript开发了JScript，为了让JavaScript成为全球标准，几个公司联合ECMA(European ComputerManufacturers Asso组织定制了JavaScript语言的标准，被称为ECMAScript标准。所以简单说来就是，ECMAScript是一种语言标准，而JavaScript是网景公司对ECMAScript标准的一种实现。那为什么不直接把JavaScript定为标准呢？因为JavaScript是网景的注册商标。不过大多数时候，我们还是用JavaScript这个词。如果你遇到ECMAScript这个词，简单把它替换为JavaScript就行了。
JavaScript有很多设计缺陷，后面会慢慢讲到。由于JavaScript的标准——ECMAScript在不断发展，最新版ECMAScript6标准(简称ES6)已经在2015年6月正式发布了，所以，讲到JavaScript的版本，实际上就是说它实现了ECMAScript标准的哪个版本。由于浏览器在发布时就确定了JavaScript的版本，加上很多用户还在使用IE6这种古老的浏览器，这就导致你在写JavaScript的时候，要照顾一下老用户，不能一上来就用最新的ES6标准写，否则，老用户的浏览器是无法运行新版本的JavaScript代码的。不过，JavaScript的核心语法并没有多大变化。我们的教程会先讲JavaScript最核心的用法，然后，针对ES6讲解新增特性。

一、如何使用js？

HTML中的脚本必须位于"<script>与</script>"标签之间。脚本可被放置在HTML页面的<body>和<head>部分中。
<script>标签
如需在HTML页面中插入JavaScript，要使用<script>标签。<script>和</script>会告诉JavaScript在何处开始和结束。
<script>和</script>之间的代码行包含了JavaScript:

    <script>
      alert("My FirstJavaScript");
   </script>

无需理解上面的代码。只需明白，浏览器会解释并执行位于之间的JavaScript。老旧的实例可能会在<script>标签中使用type="text/javascript"。现在已经不必这样做了。JavaScript是所有现代浏览器以及HTML5中的默认脚本语言。<head>或<body>中的JavaScript可以在HTML文档中放入不限数量的脚本。脚本可位于HTML的<body>或<head>部分中，或者同时存在于两个部分中。通常的做法是把函数放入<head>部分中，或者放在页面底部。这样就可以把它们安置到同一处位置，不会干扰页面的内容。
在本例中，JavaScript会在页面加载时向 HTML 的<body>写文本：

<!DOCTYPE html>
<html>
<body>
 <p>JavaScript 能够直接写入 HTML 输出流中：</p >
 <script>
  document.write("<h1>This is a heading</h1>");
  document.write("<p>This is a paragraph.</p >");
 </script>
 <p>
  您只能在 HTML 输出流中使用 <strong>document.write</strong>。
  如果您在文档已加载后使用它（比如在函数中），会覆盖整个文档。
 </p >
</body>
</html>

JavaScript函数和事件

`<head>`中的JavaScript函数

本例中：按钮触发

<!DOCTYPE html>
<html>
  <head>
    <script>
      function myFunction() {
        document.getElementById("demo").innerHTML = "My First JavaScript Function";
      }
    </script>
  </head>
<body>
 <h1>My Web Page</h1>
 <p id="demo">A Paragraph.</p >
 <button type="button" onclick="myFunction()">点击这里</button>
</body>
</html>

`<body>`中的JavaScript函数

本例中：按钮触发
提示：我们把 JavaScript放到了页面代码的底部，这样就可以确保在<p>元素创建之后再执行脚本。

<!DOCTYPE html>
<html>
<body>
    <h1>My First Web Page</h1>
    <p id="demo">A Paragraph.</p >
    <button type="button" onclick="myFunction()">点击这里</button>
    <script>
       function myFunction() {
         document.getElementById("demo").innerHTML = "My First JavaScript Function";
       }
 </script>
</body>
</html>

也可以把脚本保存到外部文件中。外部文件通常包含被多个网页使用的代码。外部 JavaScript文件的文件扩展名是.js。

外部的JavaScript

如需使用外部文件，在<script>标签的"src"属性中设置该.js文件
在<head>或<body>中引用脚本文件都是可以的。实际运行效果与您在<script>标签中编写脚本完全一致。外部脚本不能包含<script>标签。

<!DOCTYPE html>
<html>
<body>
 <h1>My Web Page</h1>
 <p id="demo">A Paragraph.</p >
 <button type="button" onclick="myFunction()">点击这里</button>
  <p>
    <b>注释：</b>myFunction 保存在名为 "myScript.js" 的外部文件中。
  </p >
  
  <script type="text/javascript" src="/js/myScript.js"></script>
</body>
</html>

二、js与DOM

HTML DOM树

通过 HTML DOM，可访问 JavaScript HTML文档的所有元素。
当网页被加载时，浏览器会创建页面的文档对象模型(Document Object Model)。HTML DOM模型被构造为对象的树。

通过可编程的对象模型，JavaScript获得了足够的能力来创建动态的HTML。
1 JavaScript能够改变页面中的所有HTML元素
2 JavaScript 能够改变页面中的所有 HTML 属性
3 JavaScript能够改变页面中的所有CSS 样式
4 JavaScript能够对页面中的所有事件做出反应

改变HTML样式

语法：document.getElementById(id).style.property=new style;

改变<p>元素的样式：

<!DOCTYPE html>
<html>
<body>
 <p id="p1">Hello World!</p >
 <p id="p2">Hello World!</p >
 <script>
  document.getElementById("p2").style.color = "blue";
  document.getElementById("p2").style.fontFamily = "Arial";
  document.getElementById("p2").style.fontSize = "larger";
 </script>
 <p>上面的段落已被一段脚本修改。</p >
</body>

</html>

改变id="id1"的HTML元素的样式：

<!DOCTYPE html>
<html>
<body>
 <h1 id="id1">My Heading 1</h1>
 <button type="button"
  onclick="document.getElementById('id1').style.color='red'">
  点击这里！</button>
</body>
</html>

创建和删除HTML元素

创建步骤：首先创建该元素，然后向一个已经存在的元素追加该元素。

<!DOCTYPE html>
<html>
<body>
 <div id="div1">
  <p id="p1">这是一个段落。</p >
  <p id="p2">这是另一个段落。</p >
 </div>
 <script>
  var para = document.createElement("p");
  var node = document.createTextNode("这是新段落。");
  para.appendChild(node);
  var element = document.getElementById("div1");
  element.appendChild(para);
 </script>
</body>
</html>

删除步骤：首先获取该元素的父元素。

<!DOCTYPE html>
<html>
<body>
 <div id="div1">
  <p id="p1">这是一个段落。</p >
  <p id="p2">这是另一个段落。</p >
 </div>
 <script>
  var parent = document.getElementById("div1");
  var child = document.getElementById("p1");
  parent.removeChild(child);
 </script>
</body>

</html>

查找HTML元素

通常，通过JavaScript，您需要操作HTML元素。为了做到这件事情，您必须首先找到该元素。有三种方法来做这件事：
1、通过id 找到 HTML 元素；
2 、通过标签名找到 HTML 元素；
3、通过类名找到 HTML 元素。（在IE5,6,7,8无效）

JavaScript 通常用于操作 HTML 元素。如需从 JavaScript访问某个HTML元素，您可以使用document.getElementByld(id)方法。请使用“id"属性来标识 HTML元素。下面例子通过指定的 id来访问HTML元素，并改变其内容。JavaScript由web 浏览器来执行。在这种情况下，浏览器将访问id="demo"的 HTML元素，并把它的内容(innerHTML)替换为"My First JavaScript"。
通过id 找到 HTML 元素，代码如下（示例）：

<!DOCTYPE html>
<html>
<body>
 <h1>My First Web Page</h1>
 <p id="demo">My First Paragraph.</p >
 <script>
  document.getElementById("demo").innerHTML = "My First JavaScript";
 </script>
</body>
</html>

<!DOCTYPE html>
<html>
<body>
 <p id="intro">Hello World!</p >
 <p>
  本例演示 <b>getElementById</b> 方法！
 </p >
 <script>
  x = document.getElementById("intro");
  document.write('<p>id="intro" 的段落中的文本是：' + x.innerHTML + '</p >');
 </script>
</body>
</html>

通过标签名找到 HTML 元素，代码如下（示例）：

<!DOCTYPE html>
<html>
<body>
 <p>Hello World!</p >
 <div id="main">
  <p>The DOM is very useful.</p >
  <p>
   本例演示 <b>getElementsByTagName</b> 方法。
  </p >
 </div>
 <script>
  var x = document.getElementById("main");
  var y = x.getElementsByTagName("p");
  document.write('id 为 "main" 的 div 中的第一段文本是：' + y[0].innerHTML);
 </script>
</body>

</html>

写到HTML文档输出

下面的例子能够创建动态的HTML内容，代码如下（示例）：

<!DOCTYPE html>
<html>
<body>
 <script>
  document.write(Date());
 </script>
</body>

</html>

下面的例子能够改变HTML元素的属性，代码如下（示例）：

<!DOCTYPE html>
<html>
<body>
 < img id="image" src="/i/eg_tulip.jpg" />
 <script>
  document.getElementById("image").src = "/i/shanghai_lupu_bridge.jpg";
 </script>
 <p>原始图片是郁金香（eg_tulip.jpg），但是已被修改为卢浦大桥（shanghai_lupu_bridge.jpg）。</p >
</body>

</html>

下面的例子直接把<p>元素写到HTML文档输出中，代码如下（示例）：

<!DOCTYPE html>
<html>
 <body>
    <h1>My First Web Page</h1>
   <script>
     document.write("<p>My First JavaScript</p >");
   </script>
 </body>
</html>

<!DOCTYPE html>
<html>
<body>
 <p id="p1">Hello World!</p >
 <script>
  document.getElementById("p1").innerHTML = "New text!";
 </script>
 <p>上面的段落被一条 JavaScript 脚本修改了。</p >
</body>

</html>

请使用 document.write()仅仅向文档输出写内容。如果在文档已完成加载后执行document.write，整个HTML页面将被覆盖。代码如下（示例）：

<!DOCTYPE html>
<html>
 <body>
   <h1>My First Web Page</h1>
   <p>My First Paragraph.</p >
   <button onclick="myFunction()">点击这里</button>
  <script>
    function myFunction() {
      document.write("糟糕！文档消失了。");
    }
  </script>
 </body>
</html>

onload和onunload事件

事件是文档或者浏览器窗口中发生的，特定的交互瞬间。事件是用户或浏览器自身执行的某种动作，如click，load和mouseover都是事件的名字。事件是javaScript和DOM之间交互的桥梁。你若触发，我便执行——事件发生，调用它的处理函数执行相应的JavaScript代码给出响应。典型的例子有：页面加载完毕触发load事件；用户单击元素，触发click事件。

<!DOCTYPE html>
<html>
<body>
 <h1 onclick="this.innerHTML='谢谢!'">请点击该文本</h1>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
<script>
 function changetext(id) {
  id.innerHTML = "谢谢!";
 }
</script>
</head>
<body>
 <h1 onclick="changetext(this)">请点击该文本</h1>
</body>
</html>

onload 和 onunload 事件会在用户进入或离开页面时被触发。onload事件可用于检测访问者的浏览器类型和浏览器版本，并基于这些信息来加载网页的正确版本。onload和onunload事件可用于处理 cookie。

<!DOCTYPE html>
<html>
<body onload="checkCookies()">
 <script>
  function checkCookies() {
   if (navigator.cookieEnabled == true) {
    alert("已启用 cookie")
   } else {
    alert("未启用 cookie")
   }
  }
 </script>
 <p>提示框会告诉你，浏览器是否已启用 cookie。</p >
</body>
</html>

onchange事件

常结合对输入字段的验证来使用

<!DOCTYPE html>
<html>
<head>
<script>
 function myFunction() {
  var x = document.getElementById("fname");
  x.value = x.value.toUpperCase();
 }
</script>
</head>
<body>
 请输入英文字符：
 <input type="text" id="fname" onchange="myFunction()">
 <p>当您离开输入字段时，会触发将输入文本转换为大写的函数。</p >
</body>

</html>