JavaScript 用法

　　JavaScript 语句，会在页面加载时执行。

　　<body> 中的 JavaScript

<!DOCTYPE html>

<html>

<body>

.

.

<script>

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

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

</script>

.

.

</body>

</html>

　　<head> 中的 JavaScript 函数

<!DOCTYPE html>

<html>

<head>

<script>

function myFunction()

{

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

}

</script>

</head>

<body>

<h1>我的 Web 页面</h1>

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

<button type="button" onclick="myFunction()">尝试一下</button>

</body>

</html>

　　<body> 中的 JavaScript 函数

<!DOCTYPE html>

<html>

<body>

<h1>我的 Web 页面</h1>

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

<button type="button" onclick="myFunction()">尝试一下</button>

<script>

function myFunction()

{

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

}

</script>

</body>

</html>

　　外部的 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 函数";

}

直接写入 HTML 输出流

　　document.weite("<p>直接写入HTML输出流</p>");

对事件的反应

　　<button type="button" onclick="alert('当点击后显示的事件')“>点击按钮</button>

　　alert()函数多用在代码测试　　onclick 点击事件

改变 HTML 内容

　　x = document.getElementById("XXX")  //查找的id元素

　　x.innerHTML="Hello JavaScript";　　//配合上述的点击事件则可以实现HTML内容的改变

改变 HTML 图像

<script>

function 方法名()

{

    element=document.getElementById('元素名')

    if (element.src.match("图一"))

    {

        element.src="/images/图二.gif";

    }

    else

    {

        element.src="/images/图一.gif";

    }

}

</script>

<img id="元素名" onclick="方法名()" src="/images/pic_bulboff.gif" width="100" height="180">

改变 HTML 样式

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

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

验证输入

　　

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

    if(isNaN(x)||x.replace(/(^\s*)|(\s*$)/g,"")==""){

        alert("不是数字");

    }else{

        alert("是数字");

}

JavaScript用法的更多相关文章

  1. JavaScript 用法

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

  2. 一些奇怪的Javascript用法

    阅读AngularJS时,看到一些奇怪的Javascript用法.1.(function(){        a.work=function(){}   })(a)   声明一个匿名函数并执行 2. ...

  3. JavaScript —— 用法 输出

    用法 必须在<script>标签内 可以在<body>和<head>部分中 不限数量 <script> ... </script> 即可,不 ...

  4. JS（1） JavaScript 用法

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

  5. javascript:;用法集锦

    如果是个# ,就会出现跳到顶部的情况,个人收藏的几种解决方法:1:<a href="####"></a> 2:<a href="javasc ...

  6. 1. 现代 javascript 用法 简介 及 babel

    简介 包含 ECMAScript 基本概念,babel 使用 ,eslint 使用 以及新语法的介绍 和使用经验 ECMAScript 概念 ECMASctipt 是一种由 Ecma (前身为欧洲计算 ...

  7. javascript通用事件封装

    随着最近几年Html5的兴起,越来越多的应用采用html5进行实现,一个优秀的网页应用不但需要美观简洁的UI界面,更需要一个良好的交互.网页应用大部分的交互需要用javascript事件进行实现.虽然 ...

  8. JavaScript语法（一）

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

  9. JavaScript对SVG进行操作的相关技术

    原文地址:http://www.ibm.com/developerworks/cn/xml/x-svgscript/   本文主要介绍在 SVG 中通过编程实现动态操作 SVG 图像的知识. SVG ...

随机推荐

  1. CrypMic分析报告

    一.概述 病毒伪装为NirSoft公司的软件NirCmd并加了MPRESS壳,脱壳后是一个混淆过的PE程序,运行时会用到类似PE映像切换的方式来释放出实际的恶意代码,恶意代码主要对文件进行加密. 二. ...

  2. python scrapy框架爬取豆瓣

    刚刚学了一下,还不是很明白.随手记录. 在piplines.py文件中 将爬到的数据 放到json中 class DoubanmoviePipelin2json(object):#打开文件 open_ ...

  3. mac 下SonarQube 安装与使用

    参考文件:https://www.jianshu.com/p/aa863cf30406 https://www.jianshu.com/p/b41262fca5b8 jenkins 集成Sonar: ...

  4. 折线图hellocharts的使用说明

    以前用过一次XCL-chart,但是感觉只适合固定图表,不去滑动的那种,因为你一滑动太卡了你懂得(毕竟作者好久没更新优化了),拙言大神我开玩笑的 ,毕竟我加你的群大半年了 - - 第二研究了一下ach ...

  5. MYSQL数据库数据拆分之分库分表总结

    数据存储演进思路一:单库单表 单库单表是最常见的数据库设计,例如,有一张用户(user)表放在数据库db中,所有的用户都可以在db库中的user表中查到. 数据存储演进思路二:单库多表 随着用户数量的 ...

  6. 超有料丨小白如何成功逆袭为年薪30万的Web安全工程师

    今天的文章是一篇超实用的学习指南,尤其是对于即将毕业的学生,新入职场的菜鸟,对Web安全感兴趣的小白,真的非常nice,希望大家能够好好阅读,真的可以让你少走很多弯路,至少年薪30万so easy! ...

  7. Hystrix概念设计

    1. Hystrix概念设计 1.1. 大纲 1.2. 基本的容错模式 1.3. 断路器模式 1.4. 舱壁隔离模式 1.5. 容错理念 凡事依赖都可能失败 凡事资源都有限制 网络并不可靠 延迟是应用 ...

  8. python bz2模块

    bz2模块提供了使用bzip2算法压缩和解压缩数据一套完整的接口. bz2模块包括: 用于读写压缩文件的open()函数和BZ2File类 用于一次性压缩和解压缩的compress() 和 decom ...

  9. 小伙子，你真的搞懂 transient 关键字了吗？

    先解释下什么是序列化 我们的对象并不只是存在内存中,还需要传输网络,或者保存起来下次再加载出来用,所以需要Java序列化技术. Java序列化技术正是将对象转变成一串由二进制字节组成的数组,可以通过将 ...

  10. innerHTML，outerHTML，innerText，outerText

    - innerHTML 设置或获取位于对象起始和结束标签内的 HTML - outerHTML 设置或获取对象及其内容的 HTML 形式 - innerText 设置或获取位于对象起始和结束标签内的文 ...