首页 > 编程学习 > JavaScript概述(查阅菜鸟教程随笔)

JavaScript概述(查阅菜鸟教程随笔)

发布时间:2022/12/7 17:29:42
  • JavaScript 是 Web 的编程语言。
  • 所有现代的 HTML 页面都使用 JavaScript。

为什么学习 JavaScript?

JavaScript web 开发人员必须学习的 3 门语言中的一门:

  1. HTML 定义了网页的内容
  2. CSS 描述了网页的布局
  3. JavaScript 网页的行为

JavaScript 实例

  • JavaScript 实例
  • JavaScript 对象实例
  • JavaScript 浏览器支持实例
  • JavaScript HTML DOM 实例

JavaScript 参考手册

  • JavaScript 内置对象
  • Browser 对象
  • HTML DOM 对象

JavaScript:直接写入 HTML 输出流

<script>document.write("<h1>这是一个标题</h1>");document.write("<p>这是一个段落。</p>");
</script>

您只能在 HTML 输出中使用 document.write。如果您在文档加载后使用该方法,会覆盖整个文档。

JavaScript:对事件的反应

<button type="button" onclick="alert('欢迎!')">点我!</button>

alert() 函数在 JavaScript 中并不常用,但它对于代码测试非常方便。

JavaScript:改变 HTML 内容

<p id="demo">JavaScript 能改变 HTML 元素的内容。</p>
<script>function myFunction(){x=document.getElementById("demo");  // 找到元素x.innerHTML="Hello JavaScript!";    // 改变内容}
</script>
<button type="button" onclick="myFunction()">点击这里</button>

您会经常看到 document.getElementById("some id")。这个方法是 HTML DOM 中定义的。

DOM (Document Object Model)(文档对象模型)是用于访问 HTML 元素的正式 W3C 标准。

JavaScript:改变 HTML 图像

<script>function changeImage(){element=document.getElementById('myimage')if (element.src.match("bulbon")){element.src="/images/pic_bulboff.gif";}else{element.src="/images/pic_bulbon.gif";}}
</script>
<img id="myimage" onclick="changeImage()" src="/images/pic_bulboff.gif" width="100" height="180">
<p>点击灯泡就可以打开或关闭这盏灯</p>

JavaScript:改变 HTML 样式

<script>function myFunction(){x=document.getElementById("demo") // 找到元素x.style.color="#ff0000";          // 改变样式}
</script>
<button type="button" onclick="myFunction()">点击这里</button>

JavaScript:验证输入

<input id="demo" type="text">
<script>function myFunction(){var x=document.getElementById("demo").value;if(x==""||isNaN(x)){alert("不是数字");}}
</script>
<button type="button" onclick="myFunction()">点击这里</button>
<input id="demo" type="text">
<script>function myFunction(){var x=document.getElementById("demo").value;if(isNaN(x)||x.replace(/(^\s*)|(\s*$)/g,"")==""){alert("不是数字");}}
</script>
<button type="button" onclick="myFunction()">点击这里</button>

JavaScript 与 Java 是两种完全不同的语言,无论在概念上还是设计上。
Java(由 Sun 发明)是更复杂的编程语言。
ECMA-262 是 JavaScript 标准的官方名称。
JavaScript 由 Brendan Eich 发明。它于 1995 年出现在 Netscape 中(该浏览器已停止更新),并于 1997 年被 ECMA(一个标准协会)采纳。

<script>function changeImage(s){s.src = s.src.match('bulboff')?"/images/pic_bulbon.gif":"/images/pic_bulboff.gif";}
</script>
<img id="myimage" onclick="changeImage(this)" src="/images/pic_bulboff.gif" width="100" height="180">
<p>点击灯泡就可以打开或关闭这盏灯</p>

 


本文链接:https://www.ngui.cc/el/2274538.html
Copyright © 2010-2022 ngui.cc 版权所有 |关于我们| 联系方式| 豫B2-20100000