JavaScript用法
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用法的更多相关文章
- JavaScript 用法
JavaScript 用法 HTML 中的脚本必须位于 <script> 与 </script> 标签之间. 脚本可被放置在 HTML 页面的 <body> 和 & ...
- 一些奇怪的Javascript用法
阅读AngularJS时,看到一些奇怪的Javascript用法.1.(function(){ a.work=function(){} })(a) 声明一个匿名函数并执行 2. ...
- JavaScript —— 用法 输出
用法 必须在<script>标签内 可以在<body>和<head>部分中 不限数量 <script> ... </script> 即可,不 ...
- JS(1) JavaScript 用法
HTML 中的脚本必须位于 <script> 与 </script> 标签之间. 脚本可被放置在 HTML 页面的 <body> 和 <head> 部分 ...
- javascript:;用法集锦
如果是个# ,就会出现跳到顶部的情况,个人收藏的几种解决方法:1:<a href="####"></a> 2:<a href="javasc ...
- 1. 现代 javascript 用法 简介 及 babel
简介 包含 ECMAScript 基本概念,babel 使用 ,eslint 使用 以及新语法的介绍 和使用经验 ECMAScript 概念 ECMASctipt 是一种由 Ecma (前身为欧洲计算 ...
- javascript通用事件封装
随着最近几年Html5的兴起,越来越多的应用采用html5进行实现,一个优秀的网页应用不但需要美观简洁的UI界面,更需要一个良好的交互.网页应用大部分的交互需要用javascript事件进行实现.虽然 ...
- JavaScript语法(一)
JavaScript 用法 HTML 中的脚本必须位于 <script> 与 </script> 标签之间. 脚本可被放置在 HTML 页面的 <body> 和 & ...
- JavaScript对SVG进行操作的相关技术
原文地址:http://www.ibm.com/developerworks/cn/xml/x-svgscript/ 本文主要介绍在 SVG 中通过编程实现动态操作 SVG 图像的知识. SVG ...
随机推荐
- Base64简单原理
Base64要求把每三个8bit的字节转换为四个6bit的字节(即3*8 = 4*6 = 24) 1.例如我们有一个中文字符“中国(gb2312)”,转为十进制为:中-->54992,国--&g ...
- django+javascrpt+python实现私有云盘代码
丁丁:由于篇幅有限,这里暂时只展示python后端代码,前端js代码后面上传,有需要的也可以留言私信我. 1.view.py 使用用户.部门.公司等相关账号的创建,已经个人,部门账号的冻结,删除,相关 ...
- hive-issue-inserting-records-to-partitioned-table
hive-issue-inserting-records-to-partitioned-table Hi Sam, Recently we upgraded our cluster from HDP2 ...
- django 利用pillow 进行简单的设置验证码(python)
1.导入模块 并定义一个验证状态 from PIL import Image, ImageDraw, ImageFont from django.utils.six import BytesIO de ...
- getMemory的经典例子
//NO.1:程序首先申请一个char类型的指针str,并把str指向NULL(即str里存的是NULL的地址,*str为NULL中的值为0),调用函数的过程中做了如下动作:1申请一个char类型的指 ...
- Vue 学习笔记 -- inline-template
简书 更方便的使用私有子组件 定义一个私有子组件时,如果子组件的template过长会使得代码非常难以阅读 这时可以使用内联模版 但是如果写成这样 为毛用要子组件呢?
- [Swift]LeetCode654. 最大二叉树 | Maximum Binary Tree
Given an integer array with no duplicates. A maximum tree building on this array is defined as follo ...
- Linux 实现服务器之间时间同步
在主服务器上安装NTP时间同步服务器 yum -y install ntp vim /etc/ntp.conf 手动添加两行 server 127.127.1.0 fudge 127.127.1.0 ...
- 分享几个 SpringBoot 实用的小技巧
前言 最近分享的一些源码.框架设计的东西.我发现大家热情不是特别高,想想大多数应该还是正儿八经写代码的居多:这次就分享一点接地气的: SpringBoot 使用中的一些小技巧. 算不上多高大上的东西, ...
- Docker技术知识点总结
Docker技术知识点总结 本文宿主机环境Centos7.4Docker version 18.09.2, build 6247962采用国内 Daocloud 加速器---------------- ...