学习来源：https://www.runoob.com/js/js-tutorial.html

JavaScript 教程

JavaScript 是 Web 的编程语言。

所有现代的 HTML 页面都使用 JavaScript。

JavaScript 非常容易学。

本教程将教你学习从初级到高级JavaScript知识。

JavaScript 简介

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

document.write("<h1>这是一个标题</h1>");

document.write("<p>这是一个段落。</p>");

JavaScript：对事件的反应

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

JavaScript：改变 HTML 内容

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

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

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

JavaScript：改变 HTML 图像

<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="" height="">

JavaScript：改变 HTML 样式

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

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

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

JavaScript：验证输入

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

if isNaN(x) {

    alert("不是数字");

}

JavaScript 用法

HTML 中的脚本必须位于 <script> 与 </script> 标签之间。

脚本可被放置在 HTML 页面的 <body> 和 <head> 部分中。

<script>

alert("我的第一个 JavaScript");

</script>

<body> 中的 JavaScript

在本例中，JavaScript 会在页面加载时向 HTML 的 <body> 写文本：

实例

那些老旧的实例可能会在 <script> 标签中使用 type="text/javascript"。现在已经不必这样做了。JavaScript 是所有现代浏览器以及 HTML5 中的默认脚本语言。

　　 <body>

        <script>

            document.write("aa");

        </script>

    </body>

JavaScript 函数和事件

上面例子中的 JavaScript 语句，会在页面加载时执行。

通常，我们需要在某个事件发生时执行代码，比如当用户点击按钮时。

如果我们把 JavaScript 代码放入函数中，就可以在事件发生时调用该函数。

您将在稍后的章节学到更多有关 JavaScript 函数和事件的知识。

在 <head> 或者 <body> 的JavaScript

您可以在 HTML 文档中放入不限数量的脚本。

脚本可位于 HTML 的 <body> 或 <head> 部分中，或者同时存在于两个部分中。

通常的做法是把函数放入 <head> 部分中，或者放在页面底部。这样就可以把它们安置到同一处位置，不会干扰页面的内容。

<head> 中的 JavaScript 函数

在本例中，我们把一个 JavaScript 函数放置到 HTML 页面的 <head> 部分。

该函数会在点击按钮时被调用：

　　<script>

        function myFunction(){

            document.getElementById("demo").innerHTML="Show";

        }

    </script>

    <body>

        <h1 id="demo"></h1>

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

    </body>

<body> 中的 JavaScript 函数

在本例中，我们把一个 JavaScript 函数放置到 HTML 页面的 <body> 部分。

该函数会在点击按钮时被调用：

外部的 JavaScript

也可以把脚本保存到外部文件中。外部文件通常包含被多个网页使用的代码。

外部 JavaScript 文件的文件扩展名是 .js。

如需使用外部文件，请在 <script> 标签的 "src" 属性中设置该 .js 文件：

<!DOCTYPE html>

<html>

<body>

<script src="myScript.js"></script>

</body>

</html>

你可以将脚本放置于 <head> 或者 <body>中，放在 <script> 标签中的脚本与外部引用的脚本运行效果完全一致。

myScript.js 文件代码如下：

function myFunction()

{

    document.getElementById("demo").innerHTML="我的第一个 JavaScript 函数";

}

JavaScript 输出

JavaScript 没有任何打印或者输出的函数。

JavaScript 显示数据

JavaScript 可以通过不同的方式来输出数据：

使用 window.alert() 弹出警告框。
使用 document.write() 方法将内容写到 HTML 文档中。
使用 innerHTML 写入到 HTML 元素。
使用 console.log() 写入到浏览器的控制台。

操作 HTML 元素

如需从 JavaScript 访问某个 HTML 元素，您可以使用 document.getElementById(id) 方法。

请使用 "id" 属性来标识 HTML 元素，并 innerHTML 来获取或插入元素内容：

<!DOCTYPE html>

<html>

<body>

<h1>我的第一个 Web 页面</h1>

<p id="demo">我的第一个段落</p>

<script>

document.getElementById("demo").innerHTML = "段落已修改。";

</script>

</body>

</html>

以上 JavaScript 语句（在 <script> 标签中）可以在 web 浏览器中执行：

document.getElementById("demo") 是使用 id 属性来查找 HTML 元素的 JavaScript 代码。

innerHTML = "段落已修改。" 是用于修改元素的 HTML 内容(innerHTML)的 JavaScript 代码。

<!DOCTYPE html>

<html>

<body>

<h1>我的第一个 Web 页面</h1>

<p>我的第一个段落。</p>

<script>

document.write(Date());

</script>

</body>

</html>

写到控制台

如果您的浏览器支持调试，你可以使用 console.log() 方法在浏览器中显示 JavaScript 值。

浏览器中使用 F12 来启用调试模式，在调试窗口中点击 "Console" 菜单。

<!DOCTYPE html>

<html>

<body>

<h1>我的第一个 Web 页面</h1>

<script>

a = ;

b = ;

c = a + b;

console.log(c);

</script>

</body>

</html>

Java Script入门的更多相关文章

java script入门之知识
1.注释 /* */ 多行 //单行 2.常见形式 <!DOCTYPE html><html><head><title>My ...
java script第一篇（按钮全选的实现）
今天刚学了java script,记录下学习新知识的点滴.以下是操作步骤.鉴于我是初级者,如有错误,恳请读者指正.万分谢谢. 1.新建一个文档(用NotePad软件,为了使得在浏览器中打开不是乱码,在 ...
Java Script 编码规范【转】
Java Script 编码规范以下文档大多来自: Google JavaScript 编码规范指南 Idiomatic 风格参考规范 ECMAScript 5.1 注解版 EcmaScript ...
自学 Java 怎么入门
自学 Java 怎么入门? 595赞同反对,不会显示你的姓名给你推荐一个写得非常用心的Java基础教程:java-basic | 天码营这个教程将Java的入门基础知识贯穿在一个实例中,逐 ...
《JAVA 从入门到精通》 - 正式走向JAVA项目开发的路
以前很多时候会开玩笑,说什么,三天学会PHP,七天精通Nodejs,xx天学会xx ... 一般来说,这样子说的多半都带有一点讽刺的意味,我也基本上从不相信什么快速入门.我以前在学校的时候自觉过很多门 ...
Java NIO入门（二）：缓冲区内部细节
Java NIO 入门(二)缓冲区内部细节概述本文将介绍 NIO 中两个重要的缓冲区组件:状态变量和访问方法 (accessor). 状态变量是前一文中提到的"内部统计机制"的 ...
Java script基础
Java script基础 Js的每个语句后面都要有分号. <script type="text/java script">所有JS内容</script> ...
完成《Java编程入门》初稿
Java编程入门现在的运维工程师不但要懂得集合网络.系统管理而且要和开发人员一起调试系统,社会上也需要"复合性"的运维人员,所以需要做运维的也要懂一些开发,知道软件系统接口的调试 ...
Java script 看看黑客怎么写的
在2011年的BlackHat DC 2011大会上Ryan Barnett给出了一段关于XSS的示例java script 代码: ($=[$=[ ] ] [(__=!$+$)[_=-~-~-~$] ...

随机推荐

datagrid数据清空
方法一: 不管是url方式还是加载本地数据的方式,均可以直接使用loadData方法清空数据,一行代码就可以清空: $('#tt').datagrid('loadData',{total:0,rows ...
使用多块GPU进行训练 1.slim.arg_scope(对于同等类型使用相同操作) 2.tf.name_scope(定义名字的范围) 3.tf.get_variable_scope().reuse_variable(参数的复用) 4.tf.py_func(构造函数)
1. slim.arg_scope(函数, 传参) # 对于同类的函数操作,都传入相同的参数 from tensorflow.contrib import slim as slim import te ...
Java常见排序和编程算法
快速排序算法快速排序是由东尼·霍尔所发展的一种排序算法.在平均状况下,排序 n 个项目要Ο(n log n)次比较.在最坏状况下则需要Ο(n2)次比较,但这种状况并不常见.事实上,快速排序通常明显 ...
代码实现:判断101-200之间有多少个素数(质数)，并输出所有素数。程序分析：判断素数的方法：用一个数分别去除2到sqrt(这个数)，如果能被整除，则表明此数不是素数，反之是素数。
package com.loaderman.Coding; /* 判断101-200之间有多少个素数(质数),并输出所有素数. 程序分析:判断素数的方法:用一个数分别去除2到sqrt(这个数),如果能 ...
GO开发：链表
链表 type Student struct { Name string Next* Student } 每个节点包含下一个节点的地址,这样把所有的节点串起来了,通常把链表中的第一个节点叫做链表头 p ...
idea 导入 open项目
导入 import Project 选择你的项目目录 (位置可以直接是svn下下来的项目目录不用新建空项目或者目录) 如果有提示直接yes 没有拉到一路next 如果提示覆盖就ok (一路 ...
如图 honehoneclock
如图人体时钟 honehoneclock 页面演示来自http://chabudai.org/blog/?p=59 <embed name="honehoneclock" ...
Django ModelForm操作及验证
一.内容回顾 Model - 数据库操作 - 验证 class A(MOdel): user = email = pwd = Form - class LoginForm(Form): email = ...
【VS开发】【智能语音处理】Windows下麦克风语音采集
简介这是我很早以前的大学毕业设计,忽然间找到贴出来以纪念自己的纯真年代...但是因为CSDN不给面子所以导致短短的一篇文章贴了足足7次..他老提时说文章超过了64K,老大,拜托,那是算上了里面的图片 ...
Bug快到碗里来
Bug快到碗里来 python错误--'list' object is not callable 原因及解决方法1 你定义了一个变量的变量名和系统自带的关键字冲突,调用变量时关键字被传到调用的位置,就 ...

Java Script入门