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. java课程之团队开发冲刺阶段1.5

    一.总结昨天进度 1.昨天由于时间较少,没有太多的时间来进行学习Sqlite 二.遇到的困难 1.由于最终的程序需要调用本地的数据库,所以我们需要在安装程序的时候就需要直接附带安装一个本地的数据库到手 ...

  2. swust oj 1052

    输出利用先序遍历创建的二叉树中的指定结点的双亲结点 1000(ms) 10000(kb) 2415 / 5575 利用先序递归遍历算法创建二叉树并输出该二叉树中指定结点的双亲结点.约定二叉树结点数据为 ...

  3. 根据excel表格字段生成sql语句

    根据excel表格字段生成sql语句 1.1 前言 根据excel表格字段生成sql语句主要是利用了excel的拼接函数 CONCATENATE .该实例主要以mysql脚本支持.实例需求如下:exc ...

  4. mysql根据查询结果批量更新多条数据（插入或更新）

    mysql根据查询结果批量更新多条数据(插入或更新) 1.1 前言 mysql根据查询结果执行批量更新或插入时经常会遇到1093的错误问题.基本上批量插入或新增都会涉及到子查询,mysql是建议不要对 ...

  5. 微信小程序ios点击状态栏返回顶部不好使

    最近做了一款微信小程序,各方面感觉都很完美(萝卜一直这么自信),今天设计总监告诉我你的小程序怎么返回顶部不好使呀,吓得我赶紧拿手机试试,没毛病啊,我手机(苦逼的安卓机)上点两下就回去了呀,遂去找他理论 ...

  6. QEMU KVM Libvirt手册(10):Managing Virtual Machines with libvirt

    libvirt is a library that provides a common API for managing popular virtualization solutions, among ...

  7. vue-router路径计算问题

    简书原文 昨天刚刚发表了一个前端跨域新方案尝试,今天在开发中就遇到的了问题. 起因 前端使用的是vue-router组件的history模式,但是由于我们的整个页面都是从static(静态资源站)lo ...

  8. [Swift]LeetCode229. 求众数 II | Majority Element II

    Given an integer array of size n, find all elements that appear more than ⌊ n/3 ⌋ times. Note: The a ...

  9. Spring MVC知识

    f-sm-1. 讲下SpringMvc和Struts1,Struts2的比较的优势 性能上Struts1>SpringMvc>Struts2 开发速度上SpringMvc和Struts2差 ...

  10. dedecms搜索模板，使用{dede:list}标签调用自定义字段不显示（空白）

    前几天使用织梦做一个搜索功能,正常使用{dede:list}调用自定义内容模型中的自定义字段,代码如下:(自定义字段的调用可以参考:http://www.dede58.com/a/dedejq/523 ...