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. springboot windows10风格 activiti 整合项目框架源码 shiro 安全框架 druid

     官网:www.fhadmin.org  此项目为Springboot工作流版本 windows 风格,浏览器访问操作使用,非桌面应用程序. 1.代码生成器: [正反双向](单表.主表.明细表.树形表 ...

  2. CROSS-ENV不同环境配置

    项目背景 为了适应h5环境搭建需求,需要动态配置开发,测试,生产三种对应域名及其及打包命令.使用cross-env可以让配置环境更加清晰明了还好管理. 简介 cross-env的作用是不需要全局配置N ...

  3. 位域-isa指针

    一.isa指针结构 union isa_t { isa_t() { } isa_t(uintptr_t value) : bits(value) { } Class cls; uintptr_t bi ...

  4. PHP中使用date获取上月最后一天出现的问题

    上次做项目时,发现一个问题,这里记录一下: 问题: 在使用date函数获取上一个月最后一天或下个月最后一天时,如果当前日期是31号,获取的数据有问题. // 2019-12-01 正确应该是 2019 ...

  5. Vue自定义指令使用场景

    当你第一次接触vue的时候,一定会使用到其中的几个指令,比如:v-if.v-for.v-bind...这些都是vue为我们写好的,用起来相当的爽.如果有些场景不满足,需要我们自己去自定义,那要怎么办呢 ...

  6. IT兄弟连 HTML5教程 CSS3属性特效 3D变换2

    3  perspective-origin景深基点 perspective-origin景深基点属性时3D变形中另一个重要属性,主要用来决定perspective属性的源点角度.它实际上设置了X轴和Y ...

  7. SpringBoot2 整合 Drools规则引擎，实现高效的业务规则

    本文源码:GitHub·点这里 || GitEE·点这里 一.Drools引擎简介 1.基础简介 Drools是一个基于java的规则引擎,开源的,可以将复杂多变的规则从硬编码中解放出来,以规则脚本的 ...

  8. Linux - CentOS 7 通过Yum源安装 Nginx

    添加源 sudo rpm -Uvh http://nginx.org/packages/centos/7/noarch/RPMS/nginx-release-centos-7-0.el7.ngx.no ...

  9. Dynamics 365 Customer Engagement导入解决方案时出错:Microsoft.Crm.CrmException: Plug-in assembly does not contain the required types or assembly content cannot be updated.

    我是微软Dynamics 365 & Power Platform方面的工程师罗勇,也是2015年7月到2018年6月连续三年Dynamics CRM/Business Solutions方面 ...

  10. TSC打印机防重码在线检测系统

    条码标签作为产品的一个身份标识,被应用得越来越普及,但随着使用量的增大,在打印条码流水号的过程中,偶尔会出现打印重复号码的标签出现,这样对产品生产及管理过程中会产生极大的混乱,会收到严重的客诉及返工, ...