JavaScript入门详解
开始开发工作。
一、Alert Confirm Prompt
<html>
<head>
<script type="text/javascript">
function show_alert(){
alert('第一行\n第二行');
} function show_confirm(){
var result = confirm('是否删除！');
if(result){
alert('删除成功！');
}else{
alert('不删除！');
}
} function show_prompt(){
var value = prompt('输入你的名字：', '默认名字');
if(value == null){
alert('你取消了输入！');
}else if(value == ''){
alert('姓名输入为空，请重新输入！');
show_prompt();
}else{
alert('你好，'+value);
}
}
</script>
</head>
<body>
<input id="alert_button" type="button" value="alert" onclick="show_alert()" >
<input id="confirm_button" type="button" value="confirm" onclick="show_confirm()" >
<input id="prompt_button" type="button" value="prompt" onclick="show_prompt()" >
</body>
</html>
二、实例分析
2.1 简单应用
1、新窗口打开时弹出确认框，是否打开
提示: 使用 if 判断确认框是否点击了确定，如点击弹出输入对话框，否则没有任何操作。
2、通过输入对话框，确定打开的网址，默认为 http：//www.imooc.com/
3、打开的窗口要求，宽400像素，高500像素，无菜单栏、无工具栏。
<!DOCTYPE html>
<html>
<head>
<title> new document </title>
<meta http-equiv="Content-Type" content="text/html; charset=gbk"/>
<script type="text/javascript"> // 新窗口打开时弹出确认框，是否打开
function openWindow()
{
var flag = confirm("是否打开新窗口？");
var url;
if(flag) {
url = prompt("打开什么网页",http：//www.imooc.com/);
window.open(url,"height=500,width=400,menubar=no,toolbar=no");
} } // 通过输入对话框，确定打开的网址，默认为 http：//www.imooc.com/ //打开的窗口要求，宽400像素，高500像素，无菜单栏、无工具栏。 </script>
</head>
<body>
<input type="button" value="新窗口打开网站" onclick="openWindow()" />
</body>
</html>
2.2getElementById
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>document.getElementById</title>
</head>
<body>
<p id="con">JavaScript</p>
<script type="text/javascript">
var mychar= document.getElementById("con") ;
document.write("结果:"+mychar); //输出获取的P标签。
</script>
</body>
</html>
结果:[object HTMLParagraphElement]
注:获取的元素是一个对象，如想对元素进行操作，我们要通过它的属性或方法。
2.3innerHTML
1. 在右边编辑器中，第11行补充代码，通过id获取h2标签元素,并赋给变量mychar。
2. 在右边编辑器中，第13行补充代码，使用innerHTML属性，将获取的h2标签内容修改为"Hello world!"
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>innerHTML</title>
</head>
<body>
<h2 id="con">javascript</H2>
<p> JavaScript是一种基于对象、事件驱动的简单脚本语言，嵌入在HTML文档中，由浏览器负责解释和执行，在网页上产生动态的显示效果并实现与用户交互功能。</p>
<script type="text/javascript">
var mychar= document.getElementById("con") ;
document.write("原标题:"+mychar.innerHTML+"<br>"); //输出原h2标签内容
mychar.innerHTML="Hello World1"
document.write("修改后的标题:"+mychar.innerHTML); //输出修改后h2标签内容
</script>
</body>
</html>
2.4 Style
1. 在右边编辑器中，第12行补充代码，修改h2标签的样式，将颜色设为红色。
2. 在右边编辑器中，第13行补充代码，修改h2标签的样式，将背景颜色设为灰色(#CCC)。
3. 在右边编辑器中，第14行补充代码，修改h2标签的样式，将宽设为300px。
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>style样式</title>
</head>
<body>
<h2 id="con">I love JavaScript</H2>
<p> JavaScript使网页显示动态效果并实现与用户交互功能。</p>
<script type="text/javascript">
var mychar= document.getElementById("con");
mychar.style.color="red";
mychar.style.backgroundColor("#CCC");
mychar.style.width="300px" </script>
</body>
</html>
2.5 display
我们来实现id="con"的p标签元素的隐藏和显示:
1. 在右边编辑第10行补充代码，通过style.display实现隐藏。
2. 在右边编辑第15行补充代码，通过style.display实现显示。
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>display</title>
<script type="text/javascript">
function hidetext()
{
var mychar = document.getElementById("con");
mychar.display = "none";
}
function showtext()
{
var mychar = document.getElementById("con");
mychar.display="block";
}
</script>
</head>
<body>
<h1>JavaScript</h1>
<p id="con">做为一个Web开发师来说，如果你想提供漂亮的网页、令用户满意的上网体验，JavaScript是必不可少的工具。</p>
<form>
<input type="button" onclick="hidetext()" value="隐藏内容" />
<input type="button" onclick="showtext()" value="显示内容" />
</form>
</body>
</html>
2.6 className
1.在右边编辑第33行补充代码，给id="p1"元素通过className添加"类名为one"的样式。当点击"添加样式"按钮，第一段文字添加样式。
2.在右边编辑第37行补充代码，给id="p2"元素通过className修改为"类名为two"的样式。当点击"更改外观"按钮，第二段文字更改样式。
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>className属性</title>
<style>
body{ font-size:16px;}
.one{
border:1px solid #eee;
width:230px;
height:50px;
background:#ccc;
color:red;
}
.two{
border:1px solid #ccc;
width:230px;
height:50px;
background:#9CF;
color:blue;
}
</style>
</head>
<body>
<p id="p1" > JavaScript使网页显示动态效果并实现与用户交互功能。</p>
<input type="button" value="添加样式" onclick="add()"/>
<p id="p2" class="one">JavaScript使网页显示动态效果并实现与用户交互功能。</p>
<input type="button" value="更改外观" onclick="modify()"/> <script type="text/javascript">
function add(){
var p1 = document.getElementById("p1");
p1.className = "one";
}
function modify(){
var p2 = document.getElementById("p2");
p2.className = "two";
}
</script>
</body>
</html>
1.获取元素的class 属性
2. 为网页内的某个元素指定一个css样式来更改该元素的外观
JavaScript入门详解的更多相关文章
- JavaScript正则表达式详解（一）正则表达式入门
JavaScript正则表达式是很多JavaScript开发人员比较头疼的事情,也很多人不愿意学习,只是必要的时候上网查一下就可以啦~本文中详细的把JavaScript正则表达式的用法进行了列表,希望 ...
- JavaScript正则表达式详解（二）JavaScript中正则表达式函数详解
二.JavaScript中正则表达式函数详解(exec, test, match, replace, search, split) 1.使用正则表达式的方法去匹配查找字符串 1.1. exec方法详解 ...
- webpack入门详解
webpack入门详解(基于webpack 3.5.4 2017-8-22) webpack常用命令: webpack --display-error-details //执行打包 webpa ...
- Linq之旅：Linq入门详解（Linq to Objects）
示例代码下载:Linq之旅:Linq入门详解(Linq to Objects) 本博文详细介绍 .NET 3.5 中引入的重要功能:Language Integrated Query(LINQ,语言集 ...
- JavaScript事件详解-jQuery的事件实现（三）
正文 本文所涉及到的jQuery版本是3.1.1,可以在压缩包中找到event模块.该篇算是阅读笔记,jQuery代码太长.... Dean Edward的addEvent.js 相对于zepto的e ...
- JavaScript事件详解-Zepto的事件实现（二）【新增fastclick阅读笔记】
正文 作者打字速度实在不咋地,源码部分就用图片代替了,都是截图,本文讲解的Zepto版本是1.2.0,在该版本中的event模块与1.1.6基本一致.此文的fastclick理解上在看过博客园各个大神 ...
- SQL注入攻防入门详解
=============安全性篇目录============== 本文转载 毕业开始从事winfrm到今年转到 web ,在码农届已经足足混了快接近3年了,但是对安全方面的知识依旧薄弱,事实上是没机 ...
- SQL注入攻防入门详解（2）
SQL注入攻防入门详解 =============安全性篇目录============== 毕业开始从事winfrm到今年转到 web ,在码农届已经足足混了快接近3年了,但是对安全方面的知识依旧薄弱 ...
- Quartz 入门详解
Quartz是OpenSymphony开源组织在Job scheduling领域又一个开源项目,它可以与J2EE与J2SE应用程序相结合也可以单独使用.Quartz可以用来创建简单或为运行十个,百个, ...
随机推荐
- selenium===requestium模块介绍
有时,你可能会在网上实现一些自动化操作.比如抓取网站,进行应用测试,或在网上填表,但又不想使用API,这时自动化就变得很必要.Python提供了非常优秀的Requests库可以辅助进行这些操作.可惜, ...
- Linux系统各发行版镜像下载(持续更新)
Linux系统各发行版镜像下载(持续更新) http://www.linuxidc.com/Linux/2007-09/7399.htm Linux系统各发行版镜像下载(2014年10月更新),如果直 ...
- DOM编程艺术读书笔记 （须熟读）
http://www.qdfuns.com/notes/39151/00d8bc6322359f00450f492ae56bf69e.html
- Redis -- 过期时间 和 缓存 例子
1.设置 key的生存时间,过期自动删除 exprire key seconds 设置过期时间 秒数 ttl key 查询剩余时间 如果 设置了过期时间.对key进行 set 操作,会清除 ...
- python在windows下连接mysql数据库
一,安装MySQL-python python 连接mysql数据库需要 Python interface to Mysql包,包名为 MySQL-python ,PyPI上现在到了1.2.5版本.M ...
- cv论文（Low-rank相关）
最近把以前的几篇关于Low-rank的文章重新看了一遍,由于之前的一些积累,重新看一遍感觉收获颇多.写这篇博文的时候也参考了一些网上的博客,其中数这篇博文最为经典http://blog.csdn.ne ...
- Python BeautifulSoup 简单笔记
Beautiful Soup 是用 Python 写的一个 HTML/XML 的解析器,它可以很好的处理不规范标记并生成剖析树.通常用来分析爬虫抓取的web文档.对于 不规则的 Html文档,也有很多 ...
- Vue 2.0 Application Sample
===搭建Demo=== http://blog.csdn.net/wangjiaohome/article/details/51728217 ===单页Application=== http://b ...
- nyoj 300 （矩阵快速幂）Kiki & Little Kiki 2
描述 There are n lights in a circle numbered from 1 to n. The left of light 1 is light n, and the left ...
- EasyUI学习总结(四)——parser源码分析（转载）
本文转载自:http://www.cnblogs.com/xdp-gacl/p/4082561.html parser模块是easyloader第一个加载的模块,它的主要作用,就是扫描页面上easyu ...