【代码笔记】Web-Javascript-JavaScript简介
一，效果图。
二，代码。
<!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简介的更多相关文章
- JS红宝书笔记——第一章 JavaScript简介
1.JavaScript简史 Netscape公司决定开发一种客户端语言用来处理浏览器端简单的表单验证. Netscape公司派布兰登·艾奇(BrendanEich)为计划于1995年2月发布的Net ...
- JavaScript: JavaScript的简介和入门代码演示
1.Javascript的发展历史介绍: javascript是指的实在网页上编写的编程语言,其主要是控制器html的动态显示效果.HTMl能带来的只是一些基本的页面的风格,而要展示的漂亮使用CSS, ...
- WEB前端--JavaScript
JavaScript JavaScript基础 一.JavaScript简介 JavaScript是一种嵌入到HTML文件中的描述性语言,由浏览器的解释器将其动态地处理成可执行的代码,能独立地完成与客 ...
- Web前端-JavaScript基础教程上
Web前端-JavaScript基础教程 将放入菜单栏中,便于阅读! JavaScript是web前端开发的编程语言,大多数网站都使用到了JavaScript,所以我们要进行学习,JavaScript ...
- Web开发——JavaScript基础
参考学习: MDN JavaScript:https://developer.mozilla.org/zh-CN/docs/Web/JavaScript ECMAScript 6入门(阮一峰):htt ...
- Web前端-JavaScript基础教程下
Web前端-JavaScript基础教程下 <script>有6个属性: async对外部脚本有效,可以用来异步操作,下载东西,不妨碍其他操作. charset为src属性指定字符集. d ...
- Web Worker javascript多线程编程（一）
什么是Web Worker? web worker 是运行在后台的 JavaScript,不占用浏览器自身线程,独立于其他脚本,可以提高应用的总体性能,并且提升用户体验. 一般来说Javascript ...
- Web Worker javascript多线程编程（二）
Web Worker javascript多线程编程(一)中提到有两种Web Worker:专用线程dedicated web worker,以及共享线程shared web worker.不过主要讲 ...
- JavaScript面向对象简介
JavaScript面向对象简介 @(编程) [TOC] 1. 命名空间 命名空间是一个容器,它允许开发人员在一个独特的,特定于应用程序的名称下捆绑所有的功能. 在JavaScript中,命名空间只是 ...
- 2015年10个最佳Web开发JavaScript库
2015年10个最佳Web开发JavaScript库 现在的互联网可谓是无所不有,有大量的JavaScript项目开发工具充斥于网络中.我们可以参考网上的指导来获取构建代码项目的各种必要信息.如果你是 ...
随机推荐
- Math.round()，Math.ceil()，Math.floor()
Math.round() :round周围,求一个附近的 整数 小数点后第一位 < 5 正数:Math.round(10.48) // 10 负数:Math.round(-10.4 ...
- javascript从作用域到闭包-笔记
读<你不知道的javascript>一书做个笔记;编译原理: js是一门编译型的语言,与传统编译语言类似,传统编译的过程分为三个阶段 ; 1. 分词/词法分析; 2.解析/语 ...
- linux 软件安装篇
在linux下安装软件,不像windows一样,下一步下一步安装,但是也有很方便的方式.也有自定义的安装方式,总体来说,套路还不算太深,但是要实践才能出真知哦! linux版本有很多,但是大部分命令都 ...
- HTML5实现微信聊天气泡效果
最近做一个HybridApp,前端有一个群聊的功能,于是就想模仿微信的聊天界面,先看效果图: HTML代码: <!DOCTYPE html> <html lang="en& ...
- Dispatch Queue 之 dispatch_async
 可以看到,在queue里的任务,不仅仅是一个函数,也可以是一个其他的queue. 下面是一个例子.  全局队列的处理 一般一个全局队列有多个线程,这些个线程会遍历并处理链表里的任务. 对于全局队 ...
- servlet 请求乱码解决
- SQL Server性能优化（9）聚集索引的存储结构
一.索引的概念和分类 索引的概念大家都知道,日常开发中我们也会使用常见的聚集索引.非聚集索引.但是除了这两者以外,sqlserver中还提供其他的索引,如: a. 唯一索引:不包含重复键的索引,聚集索 ...
- an error occurred attempting install_Github_for_windows_无法安装的解决方法_
都在这了,作者原创.我就截图好了.
- spring framework核心框架体系结构（转载）
作者:Dreawer 很多人都在用spring开发java项目,但是配置maven依赖的时候并不能明确要配置哪些spring的jar,经常是胡乱添加一堆,编译或运行报错就继续配置jar依赖,导致spr ...
- MultipartFile 多文件上传的应用
公司的项目很多地方要用到文件上传,以前的上传主要是用apache的fileupload ,使用的感受并不太好.今天试了试spring的MultipartFile,感觉还不错,封装的比较简洁. 当然,中 ...