JavaScript 用法

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

　　<body> 中的 JavaScript

  1. <!DOCTYPE html>
  2. <html>
  3. <body>
  4. .
  5. .
  6. <script>
  7. document.write("<h1>这是一个标题</h1>");
  8. document.write("<p>这是一个段落</p>");
  9. </script>
  10. .
  11. .
  12. </body>
  13. </html>

　　<head> 中的 JavaScript 函数

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <script>
  5. function myFunction()
  6. {
  7.     document.getElementById("demo").innerHTML="我的第一个 JavaScript 函数";
  8. }
  9. </script>
  10. </head>
  11. <body>
  12. <h1>我的 Web 页面</h1>
  13. <p id="demo">一个段落</p>
  14. <button type="button" onclick="myFunction()">尝试一下</button>
  15. </body>
  16. </html>

　　<body> 中的 JavaScript 函数

  1. <!DOCTYPE html>
  2. <html>
  3. <body>
  4. <h1>我的 Web 页面</h1>
  5. <p id="demo">一个段落</p>
  6. <button type="button" onclick="myFunction()">尝试一下</button>
  7. <script>
  8. function myFunction()
  9. {
  10.     document.getElementById("demo").innerHTML="我的第一个 JavaScript 函数";
  11. }
  12. </script>
  13. </body>
  14. </html>

　　外部的 JavaScript

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

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

  1. <!DOCTYPE html>
  2. <html>
  3. <body>
  4. <script src="myScript.js"></script>
  5. </body>
  6. </html>

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

myScript.js 文件代码如下：

  1. function myFunction()
  2. {
  3.     document.getElementById("demo").innerHTML="我的第一个 JavaScript 函数";
  4. }

直接写入 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 图像

  1. <script>
  2. function 方法名()
  3. {
  4.     element=document.getElementById('元素名')
  5.     if (element.src.match("图一"))
  6.     {
  7.         element.src="/images/图二.gif";
  8.     }
  9.     else
  10.     {
  11.         element.src="/images/图一.gif";
  12.     }
  13. }
  14. </script>
  15. <img id="元素名" onclick="方法名()" src="/images/pic_bulboff.gif" width="100" height="180">

改变 HTML 样式

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

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

验证输入

　　

  1. var x=document.getElementById("demo").value;
  2.     if(isNaN(x)||x.replace(/(^\s*)|(\s*$)/g,"")==""){
  3.         alert("不是数字");
  4.     }else{
  5.         alert("是数字");
  6. }

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. CentOS 5.9裸机编译安装搭建LAMP

    Linux系统:CentOS 5.9,查看CentOS版本,命令如下: [root@localhost /]# cat /etc/redhat-release CentOS release 5.9 ( ...

  2. CROS+node-basis+ajax

    $.ajax({ url: this.baseUrl + this.restful.showDesigerViewList, type: "post", dataType: &qu ...

  3. Swift 对象内存模型探究（一）

    本文来自于腾讯Bugly公众号(weixinBugly),未经作者同意,请勿转载,原文地址:https://mp.weixin.qq.com/s/zIkB9KnAt1YPWGOOwyqY3Q 作者:王 ...

  4. 七种经典排序算法及Java实现

    排序算法稳定性表示两个值相同的元素在排序前后是否有位置变化.如果前后位置变化,则排序算法是不稳定的,否则是稳定的.稳定性的定义符合常理,两个值相同的元素无需再次交换位置,交换位置是做了一次无用功. 下 ...

  5. SDL 开发实战（七）： 使用 SDL 实现 PCM播放器

    在上文,我们做了YUV播放器,这样我们就入门了SDL播放视频.下面我们来做一个PCM播放,即使用SDL播放PCM数据. 下面说明一下使用SDL播放PCM音频的基本流程,主要分为两大部分:初始化SDL. ...

  6. [Swift]LeetCode12. 整数转罗马数字 | Integer to Roman

    Roman numerals are represented by seven different symbols: I, V, X, L, C, D and M. Symbol Value I 1 ...

  7. 破解第一课：NOP绕过登录界面

    第一步 打开软件,任意输入密码,提示“用户密码错误还有2次机会” 第二步 OD载入软件,右键-----中文搜索引擎---智能搜索 按下CTRL+F,打开查找,输入“密码错误”,在结果中双击找到的结果 ...

  8. 7.Git分支-分支简介、分支创建、分支切换

    1.分支简介 几乎所有的版本控制系统都支持某种形式的分支.使用分支意味着可以把你的工作从开发主线上分离开来,以免影响开发主线.Git的分支是其必杀技,它相对于其它版本控制系统来说,具有难以置信的轻量性 ...

  9. [Abp 源码分析]八、缓存管理

    0.简介 缓存在一个业务系统中十分重要,常用的场景就是用来储存调用频率较高的数据.Abp 也提供了一套缓存机制供用户使用,在使用 Abp 框架的时候可以通过注入 ICacheManager 来新建/设 ...

  10. Python内置函数(39)——locals

     英文文档: locals() Update and return a dictionary representing the current local symbol table. Free var ...