JS 简介

JavaScript 是世界上最流行的编程语言。

这门语言可用于 HTML 和 web，更可广泛用于服务器、PC、笔记本电脑、平板电脑和智能手机等设备。

avaScript 是脚本语言

  • JavaScript 是一种轻量级的编程语言。
  • JavaScript 是可插入 HTML 页面的编程代码。
  • JavaScript 插入 HTML 页面后，可由所有的现代浏览器执行。
  • JavaScript 很容易学习。

JavaScript：写入 HTML 输出

document.write("<h1>This is a heading</h1>");

document.write("<p>This is a paragraph</p>");

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

JavaScript：对事件作出反应

<button type="button" onclick="alert('Welcome!')">点击这里</button>

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

JavaScript：改变 HTML 内容

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

x=document.getElementById("demo")  //查找元素

x.innerHTML="Hello JavaScript";    //改变内容

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

DOM（文档对象模型）是用以访问 HTML 元素的正式 W3C 标准。

<!DOCTYPE html>

<html>

<body>

<h1>我的第一段 JavaScript</h1>

<p id="demo">

JavaScript 能改变 HTML 元素的内容。

</p>

<script>

function myFunction()

{

x=document.getElementById("demo");  // 找到元素

x.innerHTML="Hello JavaScript!";    // 改变内容

}

</script>

<button type="button" onclick="myFunction()">点击这里</button>

</body>

</html>


<!DOCTYPE html>

<html>

<body>

<h1>我的第一段 JavaScript</h1>

<p id="demo">

JavaScript 能改变 HTML 元素的内容。

</p>

<script>

function myFunction()

{

x=document.getElementById("demo");  // 找到元素

x.innerHTML="Hello JavaScript!";    // 改变内容

}

</script>

<button type="button" onclick="myFunction()">点击这里</button>

</body>

</html>

JavaScript：改变 HTML 图像

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

<!DOCTYPE html>

<html>

<body>

<script>

function changeImage()

{

element=document.getElementById('myimage')

if (element.src.match("bulbon"))

  {

  element.src="/i/eg_bulboff.gif";

  }

else

  {

  element.src="/i/eg_bulbon.gif";

  }

}

</script>

<img id="myimage" onclick="changeImage()" src="/i/eg_bulboff.gif">

<p>点击灯泡来点亮或熄灭这盏灯</p>

</body>

</html>


<!DOCTYPE html>

<html>

<body>

<script>

function changeImage()

{

element=document.getElementById('myimage')

if (element.src.match("bulbon"))

  {

  element.src="http://www.w3school.com.cn/i/eg_bulboff.gif";

  }

else

  {

  element.src="http://www.w3school.com.cn/i/eg_bulbon.gif";

  }

}

</script>

<img id="myimage" onclick="changeImage()" src="http://www.w3school.com.cn/i/eg_bulboff.gif">

<p>点击灯泡来点亮或熄灭这盏灯</p>

</body>

</html>

JavaScript 能够改变任意 HTML 元素的大多数属性，而不仅仅是图片。

JavaScript：改变 HTML 样式

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

x=document.getElementById("demo")  //找到元素

x.style.color="#ff0000";           //改变样式

JavaScript：验证输入

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

if isNaN(x) {alert("Not Numeric")};

提示：JavaScript 与 Java 是两种完全不同的语言，无论在概念还是设计上。

Java（由 Sun 发明）是更复杂的编程语言。

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

JavaScript 由 Brendan Eich 发明。它于 1995 年出现在

Netscape 中（该浏览器已停止更新），并于 1997 年被 ECMA（一个标准协会）采纳。

JS 简介的更多相关文章

  1. prototype.js简介

    prototype.js简介 2007-11-21 14:22 prototype.js是一个很强大的Javascript函数库,它可以让你很轻松的使用一些特效,实现AJAX的功能.虽然prototy ...

  2. HTML基础--JS简介、基本语法、类型转换、变量、运算符、分支语句、循环语句、数组、函数、函数调用.avi

    JS简介 1.JavaScript是个什么东西? 它是个脚本语言,需要有宿主文件,它的宿主文件是HTML文件. 2.它与Java什么关系? 没有什么直接的联系,Java是Sun公司(已被Oracle收 ...

  3. 01 Node.js简介, 安装&配置

    Node.js 简介 Node.js 是什么 Node.js 有着强大而灵活的包管理器(node package manager,npm) 目前, 已经有强大第三方工具模块, 例如数据库连接, 网站开 ...

  4. Vue.js简介

    Vue.js简介 Vue.js的作者为Evan You(尤雨溪),任职于Google Creative Lab,虽然是Vue是一个个人项目,但在发展前景上个人认为绝不输于Google的AngularJ ...

  5. Gulp.js简介

    Gulp.js简介 我们讨论了很多关于怎么减少页面体积,提高重网站性能的方法.有些是操作是一劳永逸的,如开启服务器的gzip压缩,使用适当的图片格式,或删除一些不必要的字符.但有一些任务是每次工作都必 ...

  6. 《React Native 精解与实战》书籍连载「Node.js 简介与 React Native 开发环境配置」

    此文是我的出版书籍<React Native 精解与实战>连载分享,此书由机械工业出版社出版,书中详解了 React Native 框架底层原理.React Native 组件布局.组件与 ...

  7. vue学习（一）、Vue.js简介

    Vue.js 五天 汤小洋一. Vue.js简介1. Vue.js是什么Vue.js也称为Vue,读音/vju:/,类似view,错误读音v-u-e 版本:v1.0 v2.0 是一个构建用户界面的框架 ...

  8. Zepto.js简介

    Zepto.js简介 一.总结 一句话总结: Zepto.js语法和jquery起码百分之90相似,主要做移动端框架,和jquery mobile是一个类型的概念 1.Zepto.js做移动端的特点? ...

  9. 在electron中使用sqlite：sql.js简介

    在electron中使用sqlite:sql.js简介 在开发electron应用的时候如果想要使用sqlite3,步骤上除了npm安装以外还要rebuild,比较麻烦.如果你想找一个开箱即用的sql ...

随机推荐

  1. RecyclerView 添加自定义分割线

    默认的浅灰色的分割线在某些时候并不能满足我们的要求,这时就需要自定义分割线了. 我们可以通过两种方式来实现:调用 DividerItemDecoration.setDrawable 方法或者继承实现 ...

  2. DFA最小化，语法分析初步

    1.将DFA最小化:教材P65 第9题 2.构造以下文法相应的最小的DFA S→ 0A|1B A→ 1S|1 B→0S|0 语言:(01 | 10)*(01 | 10) 自动机图: DFA状态转换矩阵 ...

  3. Sqlite—Python接口

    #!/usr/bin/env python # -*- coding:utf-8 -*- import sqlite3,os,time import traceback class Sqlite(): ...

  4. MYSQL 游标学习及使用实例

    who?(游标是什么?)游标(cursor)官方定义:是系统为用户开通的一个数据缓冲区,存放sql执行结果.每个游标区都有一个名字,用户可以通过sql语句逐一从游标中获取记录,并赋值给变量,交由主语言 ...

  5. electron初探问题总结

    使用electron时间不是很久,随着使用的深入慢慢的也遇到一些问题,下面总结一下遇到的问题与大家分享,避免趟坑. 主要问题汇总如下: webview与渲染进程renderer间通信 BrowserW ...

  6. 利用keras自带路透社数据集进行多分类训练

    import numpy as np from keras.datasets import reuters from keras import layers from keras import mod ...

  7. php的swoole和rpc区别

    RPC是远程过程调用(Remote Procedure Call)的缩写形式. SAP系统RPC调用的原理其实很简单,有一些类似于三层构架的C/S系统,第三方的客户程序通过接口调用SAP内部的标准或自 ...

  8. IT兄弟连 HTML5教程 “无意义”的HTML元素div和span

    HTML只是赋予内容的手段,大部分HTML标签都有其意义(例如,标签a创建链接,标签h1创建标题等),然而div和span标签似乎没有任何内容上的意义,听起来就像一个泡沫做成的锤子一样无用.但实际上, ...

  9. 持续集成（CI）：Jmeter+Ant+Jenkins定时构建

    这里Jenkins的安装部署以及工程项目的整体配置不做赘述,其它博文已经说明,这里主要是赘述Ant的相关配置,build.xml文件配置以及项目中的部分配置 一.build.xml 在Ant的安装目录 ...

  10. C# 32位程序 申请大内存

    后期生成事件命令行代码: cd /d $(DevEnvDir)cd..cd..cd VC\bineditbin /largeaddressaware $(TargetPath)