一，效果图。

二，代码。

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <title>javascript 简介</title>

    <script type="text/javascript">

    function displayDate() {

        document.getElementById("demo").innerHTML = Date();

    }

    </script>

</head>

<body>

    <!--第一个javascript程序-->

    <h1>我的第一个javascript程序</h1>

    <p id="demo">这是一个段落</p>

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

    <!--JavaScript：直接写入 HTML 输出流-->

    <script>

    document.write("<h1>这是一个标题</h1>");

    document.write("<p>这是一个段落</p>");

    </script>

    <!--对事件的反应-->

    <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">

    <p>点击灯泡就可以打开或关闭这盏灯</p>

    <!--改变 HTML 样式-->

    <h1>我的第一段Javascript</h1>

    <p>请输入数字。如果输入值不是数字，浏览器会弹出提示框。</p>

    <input id="demo" type="text">

    <script type="text/javascript">

    function myFunction() {

        var x = document.getElementById("demo").value;

        if (x == "" || isNaN(x)) {

            alert("不是数字");

        };

    }

    </script>

    <button type="button" onclick="myFunction()">点here</button>

</body>

</html>

参考资料：《菜鸟教程》

【代码笔记】Web-Javascript-JavaScript简介的更多相关文章

  1. JS红宝书笔记——第一章 JavaScript简介

    1.JavaScript简史 Netscape公司决定开发一种客户端语言用来处理浏览器端简单的表单验证. Netscape公司派布兰登·艾奇(BrendanEich)为计划于1995年2月发布的Net ...

  2. JavaScript: JavaScript的简介和入门代码演示

    1.Javascript的发展历史介绍: javascript是指的实在网页上编写的编程语言,其主要是控制器html的动态显示效果.HTMl能带来的只是一些基本的页面的风格,而要展示的漂亮使用CSS, ...

  3. WEB前端--JavaScript

    JavaScript JavaScript基础 一.JavaScript简介 JavaScript是一种嵌入到HTML文件中的描述性语言,由浏览器的解释器将其动态地处理成可执行的代码,能独立地完成与客 ...

  4. Web前端-JavaScript基础教程上

    Web前端-JavaScript基础教程 将放入菜单栏中,便于阅读! JavaScript是web前端开发的编程语言,大多数网站都使用到了JavaScript,所以我们要进行学习,JavaScript ...

  5. Web开发——JavaScript基础

    参考学习: MDN JavaScript:https://developer.mozilla.org/zh-CN/docs/Web/JavaScript ECMAScript 6入门(阮一峰):htt ...

  6. Web前端-JavaScript基础教程下

    Web前端-JavaScript基础教程下 <script>有6个属性: async对外部脚本有效,可以用来异步操作,下载东西,不妨碍其他操作. charset为src属性指定字符集. d ...

  7. Web Worker javascript多线程编程（一）

    什么是Web Worker? web worker 是运行在后台的 JavaScript,不占用浏览器自身线程,独立于其他脚本,可以提高应用的总体性能,并且提升用户体验. 一般来说Javascript ...

  8. Web Worker javascript多线程编程（二）

    Web Worker javascript多线程编程(一)中提到有两种Web Worker:专用线程dedicated web worker,以及共享线程shared web worker.不过主要讲 ...

  9. JavaScript面向对象简介

    JavaScript面向对象简介 @(编程) [TOC] 1. 命名空间 命名空间是一个容器,它允许开发人员在一个独特的,特定于应用程序的名称下捆绑所有的功能. 在JavaScript中,命名空间只是 ...

  10. 2015年10个最佳Web开发JavaScript库

    2015年10个最佳Web开发JavaScript库 现在的互联网可谓是无所不有,有大量的JavaScript项目开发工具充斥于网络中.我们可以参考网上的指导来获取构建代码项目的各种必要信息.如果你是 ...

随机推荐

  1. Lerning Entity Framework 6 ------ Complex types

    Complex types are classes that map to a subset of columns of a table.They don't contains key. They a ...

  2. 音视频编解码——RGB与YUV格式转换

    一．RGB模型与YUV模型 1.RGB模型 我们知道物理三基色分别是红(Red).绿(Green).蓝(Blue).现代的显示器技术就是通过组合不同强度的红绿蓝三原色,来达成几乎任何一种可见光的颜色. ...

  3. 第二篇：服务消费者（RestTemplate+ribbon）

    第一篇讲了服务的注册,这篇来说说服务的调用,服务与服务的通讯是基于http restful,springcloud的服务调用是通过ribbon方式的,客户端的负载均衡. Talk is cheap.S ...

  4. 源码调试debug_info 的作用和使用方法

    在他通过gcc来编译程序时,在map文件中,经常会遇到如下的情况: .debug_info 0x002191b6 0x1aa9 XXX .debug_info 0x0021ac5f 0xce4 XXX ...

  5. Data - Spark简介

    Spark简介 Spark是基于内存计算的大数据并行计算框架,可用于构建大型的.低延迟的数据分析应用程序. HomePage:http://spark.apache.org/ GitHub:https ...

  6. 金三银四季来了！Java 面试题大放送，能答对70%就去BATJTMD试试~

    摘要: 2019,相对往年我们会发现今年猎头电话少了,大部分企业年终奖缩水,加薪幅度也不如往年,选择好offer就要趁早,现在开始准备吧,刷一波Java面试题,能回答70%就去BATJTMD大胆试试~ ...

  7. Kaggle项目实战一：Titanic: Machine Learning from Disaster

    项目地址 https://www.kaggle.com/c/titanic 项目介绍: 除了乘客的编号以外,还包括下表中10个字段,构成了数据的所有特征 Variable Definition Key ...

  8. iOS ipa包瘦身，iOS8及以下text段超60MB

    前沿 很早之前写过一篇相关文章,不过博客主机上跑路了之后数据没了,凭着记忆补了下相关资料 ipa安装包瘦身 清理无用图片,图片压缩(PNG换WebP和JPG),处于某种不可抗拒的原因,导致有部分3X图 ...

  9. python 输出颜色与样式的方法

    上次遇到这个问题就想写下来,其实当时我也不怎么会,老师说这个东西不需要理解,只需要死记硬背,写的多了就记住了,所以今天搜集了几篇文章,加上自己的理解,写下了这篇python 输出颜色的样式与方法的文章 ...

  10. shiro源码篇 - shiro的session的查询、刷新、过期与删除，你值得拥有

    前言 开心一刻 老公酷爱网络游戏,老婆无奈,只得告诫他:你玩就玩了,但是千万不可以在游戏里找老婆,不然,哼哼... 老公嘴角露出了微笑:放心吧亲爱的,我绝对不会在游戏里找老婆的!因为我有老公! 老婆: ...