20141124-HTML-JavaScrilpt
JavaScript
JavaScript(简称JS),他是一门HTML的脚本语言,用来改进设计、验证表单、检测浏览器、创建cookies,以及更多的应用。
他的用法及语法类似于Visual Studio 2012(简称VS)。注释的格式/*.注释一段.*/ //注释一行
JS的写入HTML的输出语句是:
<script>
document.write("要显示的内容")
</script>
1.在网页上的显示:

2.JS可以对事件作出反应,比如点击按钮:
alert() 函数在 JavaScript 中并不常用,但它对于代码测试非常方便。
onclick 的意思 是点击事件。
alert onclick都是JS里的语句,它们可以不用专门包裹在<script></script>之间。
<button type="button" onclick="alert('欢迎来到这里!')">点击按钮</button>
点击按钮后显示:

3.JS可以改变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的元素样式:
加入代码 x.style.color="#ff0000";
<p id="demo">
JavaScript 能改变 HTML 元素的内容。
</p> <script>
function myFunction()
{
x=document.getElementById("demo"); // 找到元素
x.innerHTML="Hello JavaScript!"; // 改变内容
x.style.color="#ff0000"; //红色
}
/script> <button type="button" onclick="myFunction()">点击这里</button>

4.JS验证输入
<p>请输入数字。如果输入值不是数字,浏览器会弹出提示框。</p> <input id="demo" type="text"> <script>
function myFunction()
{
var x=document.getElementById("demo").value;/*(根据id)获取输入框中的的值*/
if(x==""||isNaN(x))/*NaN,不是数字,返回true(表示不是数字)或者false(表示是数字) */
{
alert("不是数字");/*弹出对话框*/
}
}
</script> <button type="button" onclick="myFunction()">点击这里</button>
JavaScript 对大小写是敏感的。
当编写 JavaScript 语句时,请留意是否关闭大小写切换键。
函数 getElementById 与 getElementbyID 是不同的。
同样,变量 myVariable 与 MyVariable 也是不同的。
20141124-HTML-JavaScrilpt的更多相关文章
- [20141124]sql server密码过期,通过SSMS修改策略报错
背景: 新建了用户,没有取消掉强制密码策略 修改掉策略报错 错误: The CHECK_POLICY and CHECK_EXPIRATION options cannot be turned OFF ...
- 不定义JQuery插件,不要说会JQuery 分类: JavaScript 2014-11-24 14:18 155人阅读 评论(0) 收藏
一:导言 有些WEB开发者,会引用一个JQuery类库,然后在网页上写一写$("#"),$("."),写了几年就对别人说非常熟悉JQuery.我曾经也是这样的人 ...
- [再寄小读者之数学篇](2014-11-24 Abel 定理)
设幂级数 $\dps{g(x)=\sum_{n=0}^\infty a_nx^n}$ 在 $|x|<1$ 内收敛, 且 $\dps{\sum_{n=0}^\infty a_n=s}$ 收敛. 则 ...
- RHEL7 CentOS7 检查查看精简指令
RHEL7 CentOS7 检查查看精简指令: //////////////////////////检查查看精简指令://///////////////////////////// ///////// ...
- oracle表分区详解(按天、按月、按年等)
分区表的概念: 当表中的数据量不断增大,查询数据的速度就会变慢,应用程序的性能就会下降,这时就应该考虑对表进行分区.表进行分区后,逻辑上表仍然是一张完整的表,只是将表中的数据在物理上存放到多个表空间 ...
- Android程序crash处理
Android程序crash处理 时间 2014-11-24 13:45:37 CSDN博客 原文 http://blog.csdn.net/allen315410/article/details ...
- oracle一条sql语句统计充值表中今天,昨天,前天三天充值记录
select NVL(sum(case when create_date_time>=to_date('2014-11-24 00:00:00','yyyy-mm-dd hh24:mi:ss') ...
- Android Studio系列教程五--Gradle命令详解与导入第三方包
Android Studio系列教程五--Gradle命令详解与导入第三方包 2015 年 01 月 05 日 DevTools 本文为个人原创,欢迎转载,但请务必在明显位置注明出处!http://s ...
- js数组到后台转 list数组
前台的数组格式是: [{"credit_record_certificate_id":"452","credit_record_type": ...
- Android Studio And Gradle
AS特色: 智能感知体验特好,堪比VS 布局预览,手写布局后预览页面即时显示,便于布局调整和优化 编辑速度飞快流畅,毫无eclipse的卡顿 布局或源码中有图标和颜色的预览,十分直观 调试时体验极佳 ...
随机推荐
- 在Android上使用ZXing识别条形码/二维码
越来越多的手机具备自动对焦的拍摄功能,这也意味着这些手机可以具备条码扫描的功能.......手机具备条码扫描的功能,可以优化购物流程,快速存储电子名片(二维码)等. 本文使用ZXing 1.6实现条码 ...
- IE9-10 option BUG
IE 9-10下如果option元素没有定义value而在设置innerText时没有把两边的空白去掉,那么 取el.text,浏览器会进行trim, 并且伪造一个value值,此值会在刚才trim的 ...
- 基于EasyUI实现windows桌面
之前为大家介绍了 基于jquery tool实现的windows桌面效果,今天给大家带来一款基于EasyUI实现windows桌面.这款桌面适用浏览器:360.FireFox.Chrome.Safar ...
- 基于Docker服务的java Web服务搭建
导读 最近想我们的应用需要更新维护,Android.IOS.还有服务器端都要更新,都在忙于写代码没有写文章了.我们的服务器是用java ssh架构的,到时也打算切换成Spring MVC+oauth2 ...
- 项目源码--JAVA基于LBS地理位置信息应用的服务端
技术要点: 1. LBS应用框架服务端实现 2. JAVA服务端技术 3. MYSQL数据库技术 4. 源码带详细的中文注释 ...... 详细介绍: 1. LBS应用框架服务端实现 此套源码是基 ...
- Spring MVC学习笔记02
1.常用注解 1.@Autowired,它可以对类成员变量.方法及构造函数进行标注,完成自动装配的工作. <!-- 该 BeanPostProcessor 将自动起作用,对标注 @Autowir ...
- CSU OJ PID=1514: Packs 超大背包问题,折半枚举+二分查找。
1514: Packs Time Limit: 10 Sec Memory Limit: 128 MBSubmit: 61 Solved: 4[Submit][Status][Web Board] ...
- jquery相关代码
1.jquery获取当前选中select的text值 var checkText=$("#slc1").find("option:selected").text ...
- Java SE ---控制流程:break与continue语句
在java中,可以使用break和continue语句控制循环. 1. break语句:用于终止循环,就是跳出当前循环,执行循环后面的代码. . 2. continue语句:用于跳出当 ...
- Android 高级UI设计笔记13:Gallery(画廊控件)之 循环显示图像
1. 循环显示图像的原理 循环显示有些类似于循环链表,最后一个结点的下一个结点又是第1个结点.循环显示图像也可以模拟这一点. 也许细心的读者从上一节实现的ImageAdapter类中会发现些什么.对 ...