JavaScript —— 常见用途

javaScript 简介

第一个JavaScript 程序:

    点击按钮显示日期  

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<script>
function displayDate(){
    document.getElementById("demo").innerHTML=Date();
}
</script>
</head>
<body>

<h1>我的第一个 JavaScript 程序</h1>
<p id="demo">这是一个段落</p>

<button type="button" onclick="displayDate()">显示日期</button>

</body>
</html>

 javaScript 常见用途

可以直接写入HTML输出流中:

<p>
JavaScript 能够直接写入 HTML 输出流中:
</p>
<script>
document.write("<h1>这是一个标题</h1>");
document.write("<p>这是一个 <strong>段落</strong>。</p>");
</script>
<p>
您只能在 HTML 输出流中使用 <strong>document.write</strong>。
如果您在文档已加载后使用它(比如在函数中),会覆盖整个文档。
</p>

 对事件作出反应

<button type="button" onclick="alert(‘欢迎!‘)">点我!</button>

————> 

改变HTML元素的内容

<p id="demo">
JavaScript 能改变 HTML 元素的内容。
</p>
<script>
function myFunction()
{
    x=document.getElementById("demo");  // 找到元素
    x.innerHTML="Hello JavaScript!";    // 改变内容
}
</script>
<button type="button" onclick="myFunction()">点击这里</button>

————>  

 改变HTML图像

<script>
function changeImage()
{
    element=document.getElementById(‘myimage‘)
    if (element.src.match("bulbon"))
    {
        element.src="/images/pic_bulboff.gif";
    }
    else
    {
        element.src="/images/pic_bulbon.gif";
    }
}
</script>
<img id="myimage" onclick="changeImage()" src="/images/pic_bulboff.gif" width="100" height="180">

————>  

 

改变HTML元素样式

<p id="demo">
JavaScript 能改变 HTML 元素的样式。
</p>
<script>
function myFunction()
{
    x=document.getElementById("demo") // 找到元素
    x.style.color="#ff0000";          // 改变样式
}
</script>
<button type="button" onclick="myFunction()">点击这里</button>

  ——————>   

 验证输入

<p>请输入数字。如果输入值不是数字,浏览器会弹出提示框。</p>
<input id="demo" type="text">
<script>
function myFunction()
{
    var x=document.getElementById("demo").value;
    if(x==""||isNaN(x))
    {
        alert("不是数字");
    }
}
</script>
<button type="button" onclick="myFunction()">点击这里</button>

原文地址:https://www.cnblogs.com/expedition/p/11028485.html

时间: 2024-10-15 17:52:33

JavaScript —— 常见用途的相关文章

JavaScript常见技术点

今天看到一篇博客讲解了几个JavaScript的技术点,感觉很实用. 原地址:Javascript常见技术点 1.javascript面向对象中继承实现 javascript面向对象中的继承实现一般都使用到了构造函数和Prototype原型链,简单的代码如下: <span style="font-family:Microsoft YaHei; font-size:12px"> function Animal(name) { this.name = name; } Anima

javascript常见的设计模式举例

    近日重读<javascript面型对象编程指南>这本书,最后一章介绍了常见的javascript设计模式的实现.主要讲解了四种设计模式:单例模式.工厂模式.装饰器模式和观察者模式.js作为动态语言,实现这四种模式的实例相对简单,当然既然称之为模式,那么吃透思想更重要,那么下面,由乐帝来实例讲解四种模式.    1.单例模式    顾名思义,对象构造出来的是实例,从字面上理解,单例即单实例,这意味一个类只能创建一个实例对象.当需要创建一种类型或者一个类的唯一对象时,可使用该模式.以下两个

js验证网址等Javascript常见验证代码合集

发一个利用js验证网址是否正确,email格式是否正确,是否为数字及数字的范围,密码或字符长度及是否相等及要求的最小字符串长度,输入是否为空等Javascript常见验证代码合集,用的上的朋友可以拿去了自行添加整理. 关键的JavaScript代码函数: 查看代码 打印 001 /** 002 * 数据验证框架.增加了对id字段检查出错时,直接在对应后面添加一< span>元素来显示错误信息. 003 * 004 * @author www.phpernote.com 005 * @versi

【javascript】javascript常见正则表达式实例

javascript常见正则表达式实例 实例来源 1 var myRegExp = { 2 // 检查字符串是否为合法QQ号码 3 isQQ: function(str) { 4 // 1 首位不能是0 ^[1-9] 5 // 2 必须是 [5, 11] 位的数字 \d{4, 9} 6 var reg = /^[1-9][0-9]{4,9}$/gim; 7 if (reg.test(str)) { 8 console.log('QQ号码格式输入正确'); 9 return true; 10 }

javascript常见编程模式举例

最近买到手了一本<javascript框架设计>,详细介绍开发js框架所用到的知识.初读一点,乐帝脆弱的理论修养就暴露无遗了,所以专门加强理论修养,重看javascript编程模式的举例.下面来介绍下js中,常见的编程模式.    1.命名空间    同其他高级语言一样,js中的命名空间概念,也是为了减少命名冲突,但js没有命名空间关键字.js实现命名空间的思路是定义一个全局变量,将此命名空间的变量和方法,定义为这个全局变量的属性. var MYAPP=MYAPP||{};//全局变量 MYA

JavaScript 常见安全漏洞及自动化检测技术

序言 随着 Web2.0 的发展以及 Ajax 框架的普及,富客户端 Web 应用(Rich Internet Applications,RIA)日益增多,越来越多的逻辑已经开始从服务器端转移至客户端,这些逻辑通常都是使用 JavaScript 语言所编写.但遗憾的是,目前开发人员普遍不太关注 JavaScript 代码的安全性.据 IBM X-Force 2011 年中期趋势报告揭示,世界五百强的网站及常见知名网站中有 40% 存在 JavaScript 安全漏洞.本文将结合代码向读者展示常见

JavaScript 常见的六种继承方式

JavaScript 常见的六种继承方式

JavaScript常见的六种继承方式

前言 面向对象编程很重要的一个方面,就是对象的继承.A 对象通过继承 B 对象,就能直接拥有 B 对象的所有属性和方法.这对于代码的复用是非常有用的. 大部分面向对象的编程语言,都是通过"类"(class)实现对象的继承.传统上,JavaScript 语言的继承不通过 class(ES6 引入了class 语法),而是通过"原型对象"(prototype)实现.那么在JS中常见的继承方式有几种呢? 如需本文源码,请猛戳 常见的六种继承方式 如果觉得文章对你有些许帮助

JavaScript 常见陷阱

JavaScript中的一些特性和通常我们想象的不太一样.这里我总结了一些有悖直觉的语言特性. 1 数组 1.1 数组的遍历 在直接支持for a in b的语言中,比方Python/Ruby里的a的值都是容器内保存的值.可是在JavaScript中.a仅仅代表属性.假设b是一个数组,则a就是索引(0-n),所以正确的使用for in 遍历数组的写法例如以下: var friends = ["Tom", "Jick", "Brandon"]; f