js系列（8）简介
JavaScript一种直译式脚本语言，是一种动态类型、弱类型、基于原型的语言，内置支持类型。它的解释器被称为JavaScript引擎，为浏览器的一部分，广泛用于客户端的脚本语言，最早是在HTML（标准通用标记语言下的一个应用）网页上使用，用来给HTML网页增加动态功能。
(1)简述:
1.JavaScript 是脚本语言
2.JavaScript 是一种轻量级的编程语言。
3.JavaScript 是可插入 HTML 页面的编程代码。
4.JavaScript 插入 HTML 页面后，可由所有的现代浏览器执行。
5.JavaScript 很容易学习。
(2)js能实现的功能:
1)写入html输出流:
<!DOCTYPE html>
<html>
<head>
<title>示例8.1(1)</title>
</head>
<body>
<!--测试JavaScript的功能-->
<p><b>JavaScript 能够直接写入 HTML 输出流中：</b></p>
<script>
document.write("用js输出我的签名:");
document.write("<pre><font size=5>是是非非终为假，<br/>云淡风轻总是真！</font></pre>");
</script>
<p>提醒:<br/>
您只能在 HTML 输出流中使用 <strong>document.write</strong>。
如果您在文档已加载后使用它（比如在函数中），会覆盖整个文档。
</p>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>示例8.1(2)</title>
<script>
function myFunc(){
document.write("用js输出我的签名:");
document.write("<pre><font size=5>是是非非终为假，<br/>云淡风轻总是真！</font></pre>");
}
</script>
</head>
<body onload="myFunc()">
<!--测试JavaScript的功能-->
<p><b>JavaScript 能够直接写入 HTML 输出流中：</b></p>
<p>提醒:<br/>
您只能在 HTML 输出流中使用 <strong>document.write</strong>。
如果您在文档已加载后使用它（比如在函数中），会覆盖整个文档。
</p>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>示例8.1(3)</title>
<script>
function myFunc(){
document.write("用js输出我的签名:");
document.write("<pre><font size=5>是是非非终为假，<br/>云淡风轻总是真！</font></pre>");
}
window.onload=myFunc;
</script>
</head>
<body>
<!--测试JavaScript的功能-->
<p><b>JavaScript 能够直接写入 HTML 输出流中：</b></p>
<p>提醒:<br/>
您只能在 HTML 输出流中使用 <strong>document.write</strong>。
如果您在文档已加载后使用它（比如在函数中），会覆盖整个文档。
</p>
</body>
</html>
2)对事件的反应:
<!DOCTYPE html>
<html>
<head>
<title>示例8.2</title>
<script>
function myFunc(){
alert("My name is MenAngel!")
}
</script>
</head>
<body>
<!--测试JavaScript的功能-->
<p><b>JavaScript 能够对事件进行响应：</b></p>
<!--这里，函数要带括号-->
<input type="button" value="弹出对话框" onclick="myFunc()">
</body>
</html>
3)改变 HTML 内容:
<!DOCTYPE html>
<html>
<head>
<title>示例8.3</title>
<script>
function changeContent(){
x=document.getElementById("demo");
x.innerHTML="My name is sunjimeng!";
}
</script>
</head>
<body>
<!--测试JavaScript的功能-->
<p><b>JavaScript 能够对动态改变html元素的内容：</b></p>
<!--这里，函数要带括号-->
<input type="button" value="改变文本内容" onclick="changeContent()">
<p id="demo">My name is MenAngel!<p>
</body>
</html>
document.getElementById("some id")。这个方法是 HTML DOM 中定义的。DOM (Document Object Model)（文档对象模型）是用于访问 HTML 元素的正式 W3C 标准。
4)改变图片元素的内容:
<!DOCTYPE html>
<html>
<head>
<title>示例8.4</title>
<script>
function changeImg(){
b_element=document.getElementById("bumb");
s_element=document.getElementById("switch");
if(b_element.src.match("bulbon_on")){
b_element.src="http://images.cnblogs.com/cnblogs_com/MenAngel/858965/o_bulbon_off.png";
s_element.src="http://images.cnblogs.com/cnblogs_com/MenAngel/858965/o_switch_off.png";
}else{
b_element.src="http://images.cnblogs.com/cnblogs_com/MenAngel/858965/o_bulbon_on.png";
s_element.src="http://images.cnblogs.com/cnblogs_com/MenAngel/858965/o_switch_on.png";
}
}
</script>
<style>
img{
margin-left:50px;
margin-top:18px;
}
</style>
</head>
<body>
<!--测试JavaScript的功能-->
<p><b>JavaScript 能够动态改变图片元素的内容：</b></p>
<div style="background-color:black;width:250px;height:300px;" >
<img src="http://images.cnblogs.com/cnblogs_com/MenAngel/858965/o_bulbon_off.png" id="bumb" width="150" height="200"/>
<img onclick="changeImg()" src="http://images.cnblogs.com/cnblogs_com/MenAngel/858965/o_switch_off.png" id="switch" width="150" height="50"/>
<div>
</body>
</html>
5)改变元素的样式:
<!DOCTYPE html>
<html>
<head>
<title>示例8.5</title>
<script>
function changeColor(){
element=document.getElementById("div_main");
element.style.background="red";
}
</script>
<style>
#div_main{
height:200px;
width:200px;
background-color:black;
}
</style>
</head>
<body>
<!--测试JavaScript的功能-->
<p><b>JavaScript 能够动态改变元素的样式：</b></p>
<input value="改变背景颜色" type="button" onclick="changeColor()"/>
<div id="div_main" ">
</div>
</body>
</html>
6)验证输入:
<!DOCTYPE html>
<html>
<head>
<title>示例8.6</title>
<script>
function myFunction()
{
var x=document.getElementById("demo").value;
if(x==""||isNaN(x))
{
alert("不是数字");
}
}
</script>
</head>
<body>
<!--测试JavaScript的功能-->
<p><b>JavaScript 验证数据类型：</b></p>
<input type="text" value="" " id="demo"> <button onclick="myFunction()">点一下</button></input>
</body>
</html>
(3)拓展:
JavaScript 与 Java 是两种完全不同的语言，无论在概念上还是设计上。 Java（由 Sun 发明）是更复杂的编程语言。
ECMA-262 是 JavaScript 标准的官方名称。
JavaScript 与 Java 是两种完全不同的语言，无论在概念上还是设计上。 Java（由 Sun 发明）是更复杂的编程语言。 ECMA-262 是 JavaScript 标准的官方名称。 JavaScript 由 Brendan Eich 发明。它于 1995 年出现在 Netscape 中（该浏览器已停止更新），并于 1997 年被 ECMA（一个标准协会）采纳。
js系列（8）简介的更多相关文章
- Node.js 教程 01 - 简介、安装及配置
系列目录: Node.js 教程 01 - 简介.安装及配置 Node.js 教程 02 - 经典的Hello World Node.js 教程 03 - 创建HTTP服务器 Node.js 教程 0 ...
- 【原创】书本翻页效果booklet jquery插件系列之简介
booklet jquery插件系列之简介 本文由五月雨恋提供,转载请注明出处. 一.安装 1.添加CSS和Javascript 添加booklet CSS文件到你的页面. <link rel= ...
- Node.js系列基础学习----安装，实现Hello World, REPL
Node.js基础学习 简介 简单的说 Node.js 就是运行在服务端的 JavaScript.Node.js 是一个基于Chrome JavaScript 运行时建立的一个平台.Node.js是一 ...
- Ember.js系列文章
JS前端框架之Ember.js系列文章 本文为文章索引,主要是罗列Ember.js的相关文章便于阅读. 相关演示代码:github for free. 基础篇 1. EmberJs之What|Why| ...
- 【D3.V3.js系列教程】--（十四）有路径的文字
[D3.V3.js系列教程]--(十四)有路径的文字 1. 在 svg 中插入一個 text // 在 body 中插入一個 svg var svg = d3.select('body').appen ...
- 【D3.V3.js系列教程】--（十五）SVG基本图形绘制
[D3.V3.js系列教程]--(十五)SVG基本图形绘制 1.path <!DOCTYPE html> <html> <head> <meta charse ...
- 【D3.V3.js系列教程】--（十二）坐标尺度
[D3.V3.js系列教程]--(十二)坐标尺度 1.多种类型的缩放尺度 Quantitative Scales Linear Scales Identity Scales Power Scales ...
- 最流行的Node.js应用开发框架简介
最流行的Node.js应用开发框架简介 快速开发而又容易扩展,高性能且鲁棒性强.Node.js的出现让所有网络应用开发者的这些梦想成为现实.但是,有如其他新的开发语言技术一样,从头开始使用Node.j ...
- node.js系列笔记之node.js初识《一》
node.js系列笔记之node.js初识<一> 一:环境说明 1.1 Linux系统CentOS 5.8 1.2 nodejs v0.10.15 1.3 nodejs源码下载地址 htt ...
- 微信JS图片上传与下载功能--微信JS系列文章（三）
概述 在前面的文章微信JS初始化-- 微信JS系列文章(一)中已经介绍了微信JS初始化的相关工作,接下来本文继续就微信JS的图片上传功能进行描述,供大家参考. 图片上传 $(function(){ v ...
随机推荐
- Antenna Placement poj 3020(匹配)
http://poj.org/problem?id=3020 题意:给定一个n*m的矩阵,'*'代表城市,现在想要用1*2的矩阵将所有的城市覆盖,问最少需要多少个矩阵? 分析:先为每个城市进行标号,再 ...
- JVM调优-Jva中基本垃圾回收算法
从不同的的角度去划分垃圾回收算法. 按照基本回收策略分 引用计数(Reference Counting) 比较古老的回收算法.原理是此对象有一个引用,即增加一个计数,删除一个引用则减少一个计数.垃圾回 ...
- Z Fighting Problem
Here is a video about unity depth shader workarounds: http://www.burgzergarcade.com/tutorials/game-e ...
- fedora 安装vmwear
Fedora 13下安装后缀为bundle文件,网上的说法很多,最普遍的方法是: 你的登陆名为TEST那么就将要安装的文件放在TEST目录下,不要放到目录下的子目录上面,否则不能运行.然后执行 第一步 ...
- sql常用语法
--在表中添加字段if col_length('JX_DomesticStudy','XL') is null begin alter table JX_DomesticStudy add PXlev ...
- jQueryEasyUI
jQueryEasyUI 编辑 jQuery EasyUI是一组基于jQuery的UI插件集合体,而jQuery EasyUI的目标就是帮助web开发者更轻松的打造出功能丰富并且美观的UI界面.开发者 ...
- utime函数
utime函数:对一个文件的访问和修改时间 #include <utime.h> int utime( const char *pathname, const struct utimbuf ...
- Protues记录文档_1
1.实现器件的连线端有红蓝小方块来表示改端电平变化. 操作:选菜单:SYSTEM\SET ANIMATION OPTION ,相应的勾选对应的选项2 附:可以添加逻辑探测器,在库中直接搜索“LOGIC ...
- 大熊君说说JS与设计模式之------中介者模式Mediator
一,总体概要 1,笔者浅谈 我们从日常的生活中打个简单的比方,我们去房屋中介租房,房屋中介人在租房者和房东出租者之间形成一条中介.租房者并不关心他租谁的房.房东出租者也不关心他租给谁.因为有中介的存在 ...
- Kali Linux Web 渗透测试视频教程— 第十三课-密码破解
Kali Linux Web 渗透测试— 第十三课-密码破解 文/玄魂 目录 Kali Linux Web 渗透测试— 第十三课-密码破解............................... ...