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("是数字");
}

最新文章

  1. mac命令
  2. 真机测试INSTALL_FAILED_INSUFFICIENT_STORAGE 的解决方法
  3. Arch命令行与安装包
  4. the philosophy behind of the design of the STL
  5. BootStrap安装
  6. Mysql 数据库文件存储在哪个目录
  7. 添加数据时候获取自增的ID
  8. ssl通关的概念(一个)
  9. Flash对不同的浏览器的兼容性
  10. js实现对树深度优先遍历与广度优先遍历
  11. Python3 XML解析
  12. 【Python实战】使用Python连接Teradata数据库???未完成
  13. 最近在研究syslog日志,就说一下syslog格式吧
  14. 使用First查找集合报错:序列不包含任何匹配元素
  15. python 全栈开发,Day22(封装,property,classmethod,staticmethod)
  16. libpcap 库使用(三)
  17. IE下推断IE版本号的语句
  18. 【CF527C】Glass Carving
  19. crm使用soap分配记录
  20. CentOS7下安装VLC

热门文章

  1. pygame学习
  2. LeetCode 26 Remove Duplicates from Sorted Array [Array/std::distance/std::unique] &lt;c++&gt;
  3. ios日期显示NaN
  4. Oracle 函数 Function
  5. Consider defining a bean named &#39;entityManagerFactory&#39; in your configuration解决办法
  6. dijkstra算法解决单源最短路问题
  7. Swift 对象内存模型探究(一)
  8. [Swift]LeetCode793. 阶乘函数后K个零 | Preimage Size of Factorial Zeroes Function
  9. [Swift]LeetCode824. 山羊拉丁文 | Goat Latin
  10. iOS学习——#define、const、typedef的区别