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. DOM事件流的三个阶段

    事件发生时会在元素节点之间按照特定的顺序传播,这个传播过程即DOM事件流. DOM事件流分为三个阶段,分别为: 捕获阶段:事件从Document节点自上而下向目标节点传播的阶段: 目标阶段:真正的目标 ...

  2. 1.Android-入门之系统架构介绍

    1.Android 系统架构 android分为四个层,从高层到低层分别是应用程序层.应用程序框架层.系统运行库层和linux核心层,如下图所示: 2.application应用程序层 该层提供一些核 ...

  3. Linux下执行脚本文件出现-bash: ./startup.sh: /bin/sh^M: 坏的解释器: 没有那个文件或目录

    原因:脚本文件是在Windows环境下编辑的,windows环境下,每一行的结尾是\n\r,而Linux环境下,每一行结尾是\n.使用cat  -A  filename 可以看到每行的结尾后面多出了一 ...

  4. Cross-Site Scripting:Persistent 跨站点脚本:持久性

  5. 【每天一题】LeetCode 0028. 字符串匹配

    开源地址:https://github.com/jiauzhang/algorithms 题目描述 * https://leetcode-cn.com/problems/implement-strst ...

  6. 如何在 Chrome中导出、导入书签和密码

    目录 书签 密码 书签 1.导出 点击浏览器右上角的三小点,选择"书签",再选择"书签管理器",进入如下页面 点击蓝色书签栏右上角的三小点,选择"导出 ...

  7. Redis 常用知识

    Redis 介绍 Redis 一个开源的使用ANSI C语言编写.遵守BSD协议,内存中的数据结构存储系统,它可以用作Key-Value数据库.缓存和消息中间件,并提供多种语API. 支持多种数据结构 ...

  8. golang 自动下载所有依赖包

    go get -d -v ./... -d标志只下载代码包,不执行安装命令: -v打印详细日志和调试日志.这里加上这个标志会把每个下载的包都打印出来: ./...这个表示路径,代表当前目录下所有的文件 ...

  9. forEach和map的区别,简单写了IE低版本的原形封装

    今天有点'不务正业',旧的没有写完又开新的,没办法 -0- 今天遇到这个特感兴趣嘛入正题了 forEach 和 map 的区别 参考:http://blog.csdn.net/boysky0015/a ...

  10. 简单使用vue-cli

    上一篇我们简单的看了看vue的基本用法,就是三步,首先就是用<script>标签引入vue的依赖,然后就是写html标签,在标签中用vue指令绑定一些属性,最后就是new Vue(xxx) ...