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>

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

  1. javascript常见的20个问题与解决方法

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  2. JavaScript 常见使用误区

    JavaScript 常见使用误区,都是平时开发过程中填过的一些坑,整理记录下. 比较运算符常见错误 //在常规的==比较中,数据类型是被忽略的,以下 if 条件语句返回 true: var x = ...

  3. JavaScript常见集合操作

    JavaScript常见集合操作 集合的遍历 FOR循环(效率最高) 优点:JavaScript最普遍的for循环,执行效率最高 缺点:无法遍历对象 for(let i=0;i<array.le ...

  4. 关于JavaScript 常见的面试题

    关于JavaScript常见的面试题总结 一.JavaScript基本数据类型 null:空.无.表示不存在,当为对象的属性赋值为null,表示删除该属性 undefined:未定义.当声明变量却没有 ...

  5. JavaScript 常见的六种继承方式

    JavaScript 常见的六种继承方式 前言 面向对象编程很重要的一个方面,就是对象的继承.A 对象通过继承 B 对象,就能直接拥有 B 对象的所有属性和方法.这对于代码的复用是非常有用的. 大部分 ...

  6. JavaScript常见的六种继承方式

    前言 面向对象编程很重要的一个方面,就是对象的继承.A 对象通过继承 B 对象,就能直接拥有 B 对象的所有属性和方法.这对于代码的复用是非常有用的. 大部分面向对象的编程语言,都是通过"类 ...

  7. 深度解析javaScript常见数据类型检查校验

    前言 在JavaScript中,数据类型分为两大类,一种是基础数据类型,另一种则是复杂数据类型,又叫引用数据类型 基础数据类型:数字Number 字符串String 布尔Boolean Null Un ...

  8. JavaScript常见调试方法

    编辑导语:javascript调试方法,常见使用alert和console来定位出错和输出的结果是否是想要的,在chrome中,还可以使用断点来看运行的情况等,本文介绍了比较全面的调试方法,你知道co ...

  9. javascript常见编程模式举例

    近期买到手了一本<javascript框架设计>,具体介绍开发js框架所用到的知识.初读一点,乐帝脆弱的理论修养就暴露无遗了,所以专门加强理论修养,重看javascript编程模式的举例. ...

随机推荐

  1. Dubble 入门

    Dubbo 01 架构模型 传统架构 All in One 测试麻烦,微小修改 全都得重新测 单体架构也称之为单体系统或者是单体应用.就是一种把系统中所有的功能.模块耦合在一个应用中的架构方式.其优点 ...

  2. P5200 [USACO19JAN]Sleepy Cow Sorting 牛客假日团队赛6 D 迷路的牛 （贪心）

    链接:https://ac.nowcoder.com/acm/contest/993/E 来源:牛客网 对牛排序 时间限制:C/C++ 1秒,其他语言2秒 空间限制:C/C++ 32768K,其他语言 ...

  3. 再谈变分自编码器VAE：从贝叶斯观点出发

    链接:https://kexue.fm/archives/5343

  4. SpringBoot之持久化框架

    在之前的 Spring学习之旅(十二)--持久化框架 中我们介绍了 JPA 的使用,今天我们就来了解下另一种持久化框架 Mybatis. 一.集成 Mybatis 1.1 准备工作 新建用户表 CRE ...

  5. 聚合函数 Aggregate Function

    聚合函数是用来统计每个分组的统计信息,它们要跟 group by 一起使用,用来将每个分组所有数据 聚合 成一条统计数据. 包括 max/min/count/avg/sum 等. -- 按照部门进行分 ...

  6. python技巧31[移植python2.x到3.x]

    我们都知道python从2.x升级到3.x的过程中有一些不兼容的改动,但是有时还我们不得不将2.x的程序升级到3.x. 主要不兼容如下图: 移植过程: 1) 确保存在的代码有足够的测试覆盖.从2.x到 ...

  7. Jenkins自动打包并部署（以java -jar形势运行）

    1.打包 与平常maven项目打包一致,不再赘述 2.杀死原有进程 通过 pid=`ps -ef|grep $APP_NAME|grep -v grep|awk '{print $2}' ` 获取当前 ...

  8. 018：include函数详解

    include函数详解(了解——虽然用的很少): include函数的用法,目前有三种使用方式: 1.include(module,namespace=None): module:子url的模块字符串 ...

  9. python3.5-tensorflow-keras 安装

    cpu centos FROM centos:7 MAINTAINER yon RUN yum -y install make wget \ && wget -O /etc/yum.r ...

  10. Sparrow 开发板化身电脑音量调节器

    前言 原创文章,转载引用务必注明链接,水平有限,如有疏漏,欢迎指正. 之前的新浪不能用啦,这次部分图片用的sm.ms的图床,加载慢,请耐心,准备换图床. 1.开箱简介 来填坑了!这次是 Sparrow ...