一，效果图。

二，代码。

<!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. 下单快发货慢：一个 JOIN SQL 引起 SqlClient 读取数据慢的奇特问题

    最近遇到一个非常奇特的问题,在一个 ASP.NET Core 项目中从 SQL Server 2008 R2 中查询获取 100 条记录竟然耗时 10 多秒,如果是查询本身慢,那到不是什么奇特的问题. ...

  2. Spring AOP术语：连接点和切点的区别。

    定义: 1.连接点(Join point):连接点是在应用执行过程中能够插入切面(Aspect)的一个点.这些点可以是调用方法时.甚至修改一个字段时. 2.切点(Pointcut):切点是指通知(Ad ...

  3. 首页背景图片在PC端有显示，在手机端不显示的解决方法

    今天看博客的资源大小,发现背景图片有44k大的吓人,准备压缩一下. 压缩之后才发现,我的背景图片在手机端是没有显示的.原因是背景图片不支持缩放. 上网查了下,发现加入如下代码之后就支持缩放了: bac ...

  4. HoloLens开发手记 - HoloLens shell概述 HoloLens shell overview

    使用HoloLens时,shell是由你周围的世界和来自系统的全息图像构成.我们将这种空间成为混合世界(mixed world). shell包含了一个可以让你将全息图像和应用放置在世界中的开始菜单( ...

  5. Python项目代码结构

    目录结构组织方式 简要解释一下: bin/: 存放项目的一些可执行文件,当然你可以起名script/之类的也行. luffy/: 存放项目的所有源代码.(1) 源代码中的所有模块.包都应该放在此目录. ...

  6. 纯JavaScript实现俄罗斯方块（详细注释，ES6）

    借鉴了慕课网的课程<基于websocket的火拼俄罗斯(单机版)>虽然改动比较多,但是还是核心部分没有改,加了一些不怎么好听的声音,和看起来并不好看的界面. CSS部分基本是瞎写的,因为对 ...

  7. 终于等到你！阿里正式向 Apache Flink 贡献 Blink 源码

    摘要: 如同我们去年12月在 Flink Forward China 峰会所约,阿里巴巴内部 Flink 版本 Blink 将于 2019 年 1 月底正式开源.今天,我们终于等到了这一刻. 阿里妹导 ...

  8. pycharm中可以运行脚本但是不能debug脚本

    以前用的时候好好地,但是最近上班突然脚本就不能debug了,debug直接报错,如下所示 上网查过该有的原因: 1.在pycharm中两个地方设置成utf-8,页面右下角和File>settin ...

  9. 阅读Google Protocol Buffers 指南，整理pb语法

    官方网站: https://developers.google.com/protocol-buffers/docs/proto3 1.简单定义一个Message 类型 pb语法文件以"*.p ...

  10. 使用Jexus服务器运行Asp.Net Core2.0程序

    前段时间写了篇关于.net core跨平台部署的文章.https://my.oschina.net/lichaoqiang/blog/1861977 主要讲述了,利用Nginx+CentOS+Supe ...