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

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

JavaScript 是脚本语言

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

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

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

JavaScript 很容易学习。

JavaScript：写入 HTML 输出

<!DOCTYPE html>

<html>

<body>

<p>

JavaScript 能够直接写入 HTML 输出流中：

</p>

<script>

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

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

</script>

<p>

您只能在 HTML 输出流中使用 <strong>document.write</strong>。

如果您在文档已加载后使用它（比如在函数中），会覆盖整个文档。

</p>

</body>

</html>

JavaScript 能够直接写入 HTML 输出流中：

效果:

This is a heading

This is a paragraph.

您只能在 HTML 输出流中使用 document.write。 如果您在文档已加载后使用它（比如在函数中），会覆盖整个文档。

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

JavaScript：对事件作出反应

<!DOCTYPE html>

<html>

<body>

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

<p>

JavaScript 能够对事件作出反应。比如对按钮的点击：

</p>

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

</body>

</html>

效果:

我的第一段 JavaScript

JavaScript 能够对事件作出反应。比如对按钮的点击：

点击这里

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

onclick 事件只是您即将在本教程中学到的众多事件之一。

JavaScript：改变 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

JavaScript 能改变 HTML 元素的内容。

点击这里

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

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

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

JavaScript：改变 HTML 图像

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

The Light bulb

点击灯泡就可以打开或关闭这盏灯

<!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>

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

效果:

点击灯泡来点亮或熄灭这盏灯

JavaScript：改变 HTML 样式

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

<!DOCTYPE html>

<html>

<body>

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

<p id="demo">

JavaScript 能改变 HTML 元素的样式。

</p>

<script>

function myFunction()

{

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

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

}

</script>

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

</body>

</html>

效果:

我的第一段 JavaScript

JavaScript 能改变 HTML 元素的样式。

点击这里

JavaScript：验证输入

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

<!DOCTYPE html>

<html>

<body>

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

<p>请输入数字。如果输入值不是数字，浏览器会弹出提示框。</p>

<input id="demo" type="text">

<script>

function myFunction()

{

var x=document.getElementById("demo").value;

if(x==""||isNaN(x))

    {

    alert("Not Numeric");

    }

}

</script>

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

</body>

</html>

效果:

我的第一段 JavaScript

请输入数字。如果输入值不是数字，浏览器会弹出提示框。

点击这里

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

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

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

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

前端之JavaScript第一天学习(1)-JavaScript 简介的更多相关文章

  1. 前端之JavaScript第一天学习(3)-JavaScript输出

    JavaScript 通常用于操作 HTML 元素. 操作 HTML 元素 如需从 JavaScript 访问某个 HTML 元素,您可以使用 document.getElementById(id) ...

  2. 前端之JavaScript第一天学习(2)-JavaScript 使用

    HTML 中的脚本必须位于 <script> 与 </script> 标签之间.脚本可被放置在 HTML 页面的 <body> 和 <head> 部分中 ...

  3. JavaScript第一阶段学习心得

    开始接触JavaScript是从慕课网开始的,基础篇学完.懵了一逼,可能是自己太蠢.感觉跟没学差不多,属性,方法,对象,什么都不懂.有的方法知道起的是什么效果,但是原理什么的都不知道. 还好,基础篇学 ...

  4. Javascript 第一阶段 学习使用总结

    JavaScript 是一种轻量级的编程语言.JavaScript 是可插入 HTML 页面的编程代码.脚本可被放置在 HTML 页面的 <body> 和 <head> 部分中 ...

  5. 前端框架Vue------＞第一天学习、Vue学习的路径、Vue官网（1）

    文章目录 1.学习目标 2.前端知识体系 2.1 前端三要素 2.2.MVVM 3.第一个Vue程序 4.Vue实例的生命周期 vue的官方文档:https://cn.vuejs.org/ 1.学习目 ...

  6. 前端框架Vue------＞第一天学习（3）

    文章目录 8 .使用Axios实现异步通信 9 .表单输入绑定 9.1 . 什么是双向数据绑定 9.2 .为什么要实现数据的双向绑定 9.3 .在表单中使用双向数据绑定 8 .使用Axios实现异步通 ...

  7. 前端框架Vue------＞第一天学习（2） v-if

    API:https://cn.vuejs.org/v2/api/#key 文章目录 5.条件渲染 5.1 . v-if 5.2 . v-else-if 6 .列表渲染 7 .事件监听 5.条件渲染 5 ...

  8. JavaScript 权威指南-学习笔记（一）

    本文所有教程及源码.软件仅为技术研究.不涉及计算机信息系统功能的删除.修改.增加.干扰,更不会影响计算机信息系统的正常运行.不得将代码用于非法用途,如侵立删! ## JavaScript 权威指南-学 ...

  9. 5月31日 python学习总结 JavaScript概述

    JavaScript概述 ECMAScript和JavaScript的关系 1996年11月,JavaScript的创造者--Netscape公司,决定将JavaScript提交给国际标准化组织ECM ...

随机推荐

  1. CentOS学习笔记--Tomcat安装

    Tomcat安装 通常情况下我们要配置Tomcat是很容易的一件事情,但是如果您要架设多用户多服务的Java虚拟主机就不那么容易了.其中最大的一个问题就是Tomcat执行权限.普通方式配置的Tomca ...

  2. JqueryMobile动态生成listView并实现刷新的两种方法

    本篇文章主要是对JqueryMobile动态生成listView并实现刷新的两种方法进行了介绍,需要的朋友可以过来参考下,希望对大家有所帮助 JqueryMobile动态生成listView并实现刷新 ...

  3. Sublime Text 2 常用快捷键

    Sublime Text 2 常用的快捷键 (不包含插件快捷键) Ctrl+P 打开文件搜索框,可以直接输入文件名搜索,或者输入@funcName 可以直接到函数定义处,输入#key 可以直接查找,输 ...

  4. Sql Server 常用的查询

    基本常用查询 --select select * from student; --all 查询所有 select all sex from student; --distinct 过滤重复 selec ...

  5. 多屏判断css改写

    function replaceBodyClass(){ for(var i in map){ if(map[i](width)){ document.body.className = documen ...

  6. 关于MongoDb Replica Set的故障转移集群——理论篇

    自从10 gen用Replica Set取代Master/Slave方案后生活其实已经容易多了,但是真正实施起来还是会发现各种各样的小问题,如果不小心一样会栽跟头. 在跟Replica Set血拼几天 ...

  7. 配置NTP服务ntpd/ntp.conf（搭建Hadoop集群可参考）

    本文拟定是在一个局域网内(比如一个Hadoop集群)设定一台NTP服务器作为整个网络的标准时间参考,使用网络(集群)内的所有机器保持时间一致!以下是详细的操作步骤: 1. 修改选定的服务器的本地时间 ...

  8. 仿酒仙网的一款jQuery侧栏弹出导航栏特效

    仿酒仙网的一款jQuery侧栏弹出导航栏特效 一款常用于商城左侧商品导航的jquery菜单导航特效. 非常不错的一款商品分类特效.大家可以拿去研究研究 . 注意:该特效还支持挨千刀的IE6啊,之强大. ...

  9. PHP面向对象之旅：static变量与方法

    static关键字声明一个属性或方法是和类相关的,而不是和类的某个特定的实例相关,因此,这类属性或方法也称为“类属性”或“类方法”. 如果访问控制权限允许,可不必创建该类对象而直接使用类名加两个冒号“ ...

  10. mybatis动态sql中的trim标签的使用(转)

    trim标记是一个格式化的标记,可以完成set或者是where标记的功能,如下代码: 1. select * from user <trim prefix="WHERE" p ...