JavaScript 简介


JavaScript 是互联网上最流行的脚本语言,这门语言可用于 HTML 和 web,更可广泛用于服务器、PC、笔记本电脑、平板电脑和智能手机等设备。

JavaScript 是脚本语言

JavaScript 是一种轻量级的编程语言。

JavaScript 是可插入 HTML 页面的编程代码。

JavaScript 插入 HTML 页面后,可由所有的现代浏览器执行。

JavaScript 很容易学习。

JavaScript:直接写入 HTML 输出流

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

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

JavaScript:对事件的反应

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

JavaScript:改变 HTML 内容

使用 JavaScript 来处理 HTML 内容是非常强大的功能。

实例
x=document.getElementById("demo"); //查找元素
x.innerHTML="Hello JavaScript"; //改变内容

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

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

您将在本教程的多个章节中学到有关 HTML DOM 的知识。

JavaScript:改变 HTML 图像

本例会动态地改变 HTML <image> 的来源(src):

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

以上实例中代码 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 元素的大多数属性,而不仅仅是图片。


JavaScript:改变 HTML 样式

改变 HTML 元素的样式,属于改变 HTML 属性的变种。

实例
x=document.getElementById("demo") //找到元素
x.style.color="#ff0000"; //改变样式

JavaScript:验证输入

JavaScript 常用于验证用户的输入。

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

以上实例只是普通的验证,如果要在生产环境中使用,需要严格判断,如果输入的空格,或者连续空格 isNaN 是判别不出来的。可以添加正则来判断(后续章节会说明):

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

您知道吗?

JavaScript 与 Java 是两种完全不同的语言,无论在概念上还是设计上。
Java(由 Sun 发明)是更复杂的编程语言。

ECMA-262 是 JavaScript 标准的官方名称。

JavaScript 由 Brendan Eich 发明。它于 1995 年出现在 Netscape 中(该浏览器已停止更新),并于 1997 年被 ECMA(一个标准协会)采纳。

JavaScript 简版-菜鸟中的菜鸟的更多相关文章

  1. JavaScript 简版-菜鸟中的菜鸟2

    JavaScript 输出 JavaScript 没有任何打印或者输出的函数. JavaScript 显示数据 JavaScript 可以通过不同的方式来输出数据: 使用 window.alert() ...

  2. Virtex6 PCIe 超简版基础概念学习(二)

    Virtex6 PCIe 超简版基础概念学习(二) 分类:FPGAPCIe (2081)  (0)  举报  收藏 文档版本 开发工具 测试平台 工程名字 日期 作者 备注 V1.0 ise14.7 ...

  3. typescript 简版跳一跳

    typescript 简版跳一跳 学习typescript,第一步应该是学习官方文档,理解最基础的语法.第二步开始用typescript实现一些js+css 或者canvas类型的游行.现在开始我们用 ...

  4. python练习_购物车(简版)

    python练习_购物车(简版) 需求: 写一个python购物车可以输入用户初始化金额 可以打印商品,且用户输入编号,即可购买商品 购物时计算用户余额,是否可以购买物品 退出结算时打印购物小票 以下 ...

  5. FFmpeg简易播放器的实现-最简版

    本文为作者原创:https://www.cnblogs.com/leisure_chn/p/10040202.html,转载请注明出处 基于FFmpeg和SDL实现的简易视频播放器,主要分为读取视频文 ...

  6. 【Spring源码解析】—— 简单工厂模式的BeanFactory的超简版实现

    一.什么是简单工厂模式 设计模式的核心是“分工”,通过分工将对象与职责划分的更细化,进而提升系统设计的可扩展性,使其更容易维护. 开闭原则:对扩展开放,对修改关闭:要增加一个新的处理逻辑,可以开一个新 ...

  7. JavaScript事件在WebKit中的处理流程研究

    本文主要探讨了JavaScript事件在WebKit中的注冊和触发机制. JS事件有两种注冊方式: 通过DOM节点的属性加入或者通过node.addEventListener()函数注冊: 通过DOM ...

  8. SpringBoot2+Netty打造通俗简版RPC通信框架(升级版)

    背景         上篇文章我简单的介绍了自己打造的通俗简版RPC通信框架,这篇是对简版的增强~         如果大家对此项目还感兴趣的话,可到码云上瞄瞄:Netty-RPC         上 ...

  9. SpringBoot2+Netty打造通俗简版RPC通信框架

    2019-07-19:完成基本RPC通信! 2019-07-22:优化此框架,实现单一长连接! 2019-07-24:继续优化此框架:1.增加服务提供注解(带版本号),然后利用Spring框架的在启动 ...

随机推荐

  1. vue跳转的两种方法

    1 标签跳转 <router-link to='two'><button>点我到第二个页面</button></router-link> 2 点击事件跳 ...

  2. Circle of Monsters(贪心)

    n个怪物围成一圈,每个怪物有自己的血量和爆炸伤害. 怪物在死后会对下一个怪物造成爆炸伤害,又死了又可以爆炸...... 你每发子弹可以对怪物造成1点伤害,求杀死所有怪物的最小子弹数. 传送门 \(\c ...

  3. AntDesignPro的权限控制和动态路由

    最近看了AntDesignPro关于权限控制的官方文档以及自己框架里权限控制的实现,总结一下. 先贴一下官网上关于权限控制的图有利于理解 步骤如下: 判断是否有 AccessToken 如果没有则跳转 ...

  4. VS Code的安装与配置

    VS Code的安装与配置 Visual Studio Code(VS Code)是微软旗下的一个开源文本编辑器,支持Windows.macOS.Linux操作系统.数量众多.种类多样的插件极大提高了 ...

  5. Synchronized加锁、锁升级和java对象内存结构

    首先了解一下JMM中定义的内存操作: 一个线程操作数据时候都是从主内存(堆内存)读取到自己工作内存(线程私有的数据区域)中再进行操作.对于硬件内存来说,并没有工作内存和主内存的区分,这都是java内存 ...

  6. vue+.netcore可支持业务代码扩展的开发框架 VOL.Vue 2.0版本发布

    框架介绍 这是一个基于vue.element-ui.iview..netcore3.1 可支持前端.后台动态扩展业务代码快速开发框架. 框架内置定制开发的代码生成器,生成的代码不需要复制也不需要更改, ...

  7. java中"no enclosing instance of type * is accessible"的解决方法

    这种情况一般发生在“在静态方法里面使用内部类” 测试代码: public class Test { public static void main(String[] args) { A a = new ...

  8. 写ssm项目的注意点

    注意事项: 输出台乱码 a链接以post提交 表单提交前验证 onsubmit 属性在提交表单时触发. onsubmit 属性只在 中使用. <form action="/demo/d ...

  9. ES6-10笔记(二)

    class类 Javascript是一种基于对象(object-based)的语言,你遇到的所有东西几乎都是对象.但是,它又不是一种真正的面向对象编程(OOP)语言,因为它的语法中没有class(类) ...

  10. Vue中如何监听组件的原生事件

    在首页开发中,右下角有一个返回顶部的小箭头,将它单独封装成一个BackTop组件,但是它何时出现需要依赖于首页的滑动,即另外一个Scroll组件.如果直接在BackTop组件里面监听,则需要通过thi ...