登录

JavaScript是Web的编程语言,所有现代的HTML页面都使用JavaScript,非常容易学

1970-01-01 ·JavaScript

JavaScript,Web编程语言,JavaScript教程

JavaScript 教程

JavaScript 是 Web 的编程语言。

所有现代的 HTML 页面都使用 JavaScript。

JavaScript 非常容易学。

JavaScript 实例

1、
<script>
function displayDate(){
document.getElementById("goodtext").innerHTML=Date();
}
</script>
<p id="goodtext">www.goodtext.org</p>
<button type="button" onclick="displayDate()">显示日期</button>

2、

<script>
document.write(‘www.goodtext.org’);
</script>

3、

<p id="goodtext">这里修改成www.goodtext.org</p>
<script>
document.getElementById("goodtext").innerHTML="已修改为www.goodtext.org";
</script>

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

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

JavaScript 是互联网上最流行的脚本语言,这门语言可用于 HTML 和 web,更可广泛用于服务器、PC、笔记本电脑、平板电脑和智能手机等设备。
JavaScript 是脚本语言
JavaScript 是一种轻量级的编程语言。
JavaScript 是可插入 HTML 页面的编程代码。
JavaScript 插入 HTML 页面后,可由所有的现代浏览器执行。
JavaScript 很容易学习。

JavaScript:直接写入 HTML 输出流
document.write("<h1>这里输出标题,标题决定内容</h1>");
document.write("<p>这里输出内容,内容决定形式</p>");
JavaScript:对事件的反应实例
<button type="button" onclick="alert("onclick 事件")">点我!</button>

JavaScript:改变 HTML 内容实例
使用 JavaScript 来处理 HTML 内容是非常强大的功能。
x=document.getElementById("goodtext");  //查找元素
x.innerHTML="Hello JavaScript";    //改变内容

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


JavaScript:改变 HTML 图像实例
动态地改变 HTML <image> 的来源(src):

点亮灯泡1
<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">


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

点亮灯泡3
<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>

实例中代码 element.src.match("bulbon") 的作用意思是:检索 <img id="myimage" onclick="changeImage()" src="/images/pic_bulboff.gif" width="100" height="180"> 里面 src 属性的值有没有包含 bulbon 这个字符串,如果存在字符串 bulbon,图片 src 更新为 bulboff.gif,若匹配不到 bulbon 字符串,src 则更新为 bulbon.gif

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


JavaScript:验证输入实例
JavaScript 常用于验证用户的输入。

if isNaN(x) {
    alert("不是数字");
}

<p>请输入数字。如果输入值不是数字,浏览器会弹出提示框。</p>
<input id="goodtext" type="text">
<script>
function myFunction()
{
var x=document.getElementById("demo").value;
if(x==""||isNaN(x))
{
alert("不是数字");
}
}
</script>
<button type="button" onclick="myFunction()">点击这里</button>

JavaScript:验证输入正则判断实例:

if(isNaN(x)||x.replace(/(^\s*)|(\s*$)/g,"")==""){
    alert("不是数字");
}

<p>请输入数字。如果输入值不是数字,浏览器会弹出提示框。</p>
<input id="goodtext" type="text">
<script>
function myFunction()
{
var x=document.getElementById("goodtext").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(一个标准协会)采纳。
ECMAScript 版本
JavaScript 已经由 ECMA(欧洲电脑制造商协会)通过 ECMAScript 实现语言的标准化。

年份 名称 描述
1997 ECMAScript 1 第一个版本
1998 ECMAScript 2 版本变更
1999 ECMAScript 3 添加正则表达式 
添加 try/catch
ECMAScript 4 没有发布
2009 ECMAScript 5 添加 "strict mode",严格模式
添加 JSON 支持
2011 ECMAScript 5.1 版本变更
2015 ECMAScript 6 添加类和模块
2016 ECMAScript 7 增加指数运算符 (**)
增加 Array.prototype.includes
ECMAScript 6 也称为 ECMAScript 2015。
ECMAScript 7 也称为 ECMAScript 2016。

· END ·

TAG:JavaScript,Web编程语言,JavaScript教程 来源:网络

热门标签

首页 - 导航 - 免责 - 官方微信 - 用户反馈

© 2019 GOODTEXT.CN