开始开发工作。

一、Alert Confirm Prompt

  1. <html>
  2. <head>
  3. <script type="text/javascript">
  4. function show_alert(){
  5.     alert('第一行\n第二行');
  6. }
  7.  
  8. function show_confirm(){
  9.     var result = confirm('是否删除！');
  10.     if(result){
  11.         alert('删除成功！');
  12.     }else{
  13.         alert('不删除！');
  14.     }
  15. }
  16.  
  17. function show_prompt(){
  18.     var value = prompt('输入你的名字：', '默认名字');
  19.     if(value == null){
  20.         alert('你取消了输入！');
  21.     }else if(value == ''){
  22.         alert('姓名输入为空，请重新输入！');
  23.         show_prompt();
  24.     }else{
  25.         alert('你好，'+value);
  26.     }
  27. }
  28. </script>
  29. </head>
  30. <body>
  31. <input id="alert_button" type="button" value="alert" onclick="show_alert()" >
  32. <input id="confirm_button" type="button" value="confirm" onclick="show_confirm()" >
  33. <input id="prompt_button" type="button" value="prompt" onclick="show_prompt()" >
  34. </body>
  35. </html>

二、实例分析

2.1 简单应用

　　1、新窗口打开时弹出确认框，是否打开

  1. 　　提示: 使用 if 判断确认框是否点击了确定，如点击弹出输入对话框，否则没有任何操作。

　　2、通过输入对话框，确定打开的网址，默认为 http：//www.imooc.com/

　　3、打开的窗口要求，宽400像素，高500像素，无菜单栏、无工具栏。

  1. <!DOCTYPE html>
  2. <html>
  3.  <head>
  4.   <title> new document </title>
  5.   <meta http-equiv="Content-Type" content="text/html; charset=gbk"/>
  6.   <script type="text/javascript">  
  7.  
  8.     // 新窗口打开时弹出确认框，是否打开
  9.     function openWindow()
  10.     {
  11.         var flag = confirm("是否打开新窗口？");
  12.         var url;
  13.         if(flag) {
  14.             url = prompt("打开什么网页",http：//www.imooc.com/);
  15.              window.open(url,"height=500,width=400,menubar=no,toolbar=no");
  16.         }
  17.  
  18.     }
  19.  
  20.     // 通过输入对话框，确定打开的网址，默认为 http：//www.imooc.com/
  21.  
  22.     //打开的窗口要求，宽400像素，高500像素，无菜单栏、无工具栏。
  23.  
  24.   </script>
  25.  </head>
  26.  <body>
  27.       <input type="button" value="新窗口打开网站" onclick="openWindow()" />
  28.  </body>
  29. </html>

2.2getElementById

  1. <!DOCTYPE HTML>
  2. <html>
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>document.getElementById</title>
  6. </head>
  7. <body>
  8. <p id="con">JavaScript</p>
  9. <script type="text/javascript">
  10.   var mychar=   document.getElementById("con")        ;
  11.   document.write("结果:"+mychar); //输出获取的P标签。
  12. </script>
  13. </body>
  14. </html>
  1. 结果:[object HTMLParagraphElement]　

　　注:获取的元素是一个对象，如想对元素进行操作，我们要通过它的属性或方法。

2.3innerHTML

　　1. 在右边编辑器中，第11行补充代码，通过id获取h2标签元素,并赋给变量mychar。

　　2. 在右边编辑器中，第13行补充代码，使用innerHTML属性，将获取的h2标签内容修改为"Hello world!"

  1. <!DOCTYPE HTML>
  2. <html>
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>innerHTML</title>
  6. </head>
  7. <body>
  8. <h2 id="con">javascript</H2>
  9. <p> JavaScript是一种基于对象、事件驱动的简单脚本语言，嵌入在HTML文档中，由浏览器负责解释和执行，在网页上产生动态的显示效果并实现与用户交互功能。</p>
  10. <script type="text/javascript">
  11.   var mychar=     document.getElementById("con")      ;
  12.   document.write("原标题:"+mychar.innerHTML+"<br>"); //输出原h2标签内容
  13.   mychar.innerHTML="Hello World1"
  14.   document.write("修改后的标题:"+mychar.innerHTML); //输出修改后h2标签内容
  15. </script>
  16. </body>
  17. </html>

2.4 Style

　　1. 在右边编辑器中，第12行补充代码，修改h2标签的样式，将颜色设为红色。

　　2. 在右边编辑器中，第13行补充代码，修改h2标签的样式，将背景颜色设为灰色(#CCC)。

　　3. 在右边编辑器中，第14行补充代码，修改h2标签的样式，将宽设为300px。

  1. <!DOCTYPE HTML>
  2. <html>
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>style样式</title>
  6. </head>
  7. <body>
  8.   <h2 id="con">I love JavaScript</H2>
  9.   <p> JavaScript使网页显示动态效果并实现与用户交互功能。</p>
  10.   <script type="text/javascript">
  11.     var mychar= document.getElementById("con");
  12.     mychar.style.color="red";
  13.     mychar.style.backgroundColor("#CCC");
  14.     mychar.style.width="300px"
  15.  
  16.   </script>
  17. </body>
  18. </html>

2.5 display

　　我们来实现id="con"的p标签元素的隐藏和显示:

　　1. 在右边编辑第10行补充代码，通过style.display实现隐藏。

　　2. 在右边编辑第15行补充代码，通过style.display实现显示。

  1. <!DOCTYPE HTML>
  2. <html>
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
  5. <title>display</title>
  6.     <script type="text/javascript">
  7.         function hidetext()
  8.         {
  9.         var mychar = document.getElementById("con");
  10.         mychar.display = "none";
  11.         }
  12.         function showtext()
  13.         {
  14.         var mychar = document.getElementById("con");
  15.         mychar.display="block";
  16.         }
  17.     </script>
  18. </head>
  19. <body>
  20.     <h1>JavaScript</h1>
  21.     <p id="con">做为一个Web开发师来说，如果你想提供漂亮的网页、令用户满意的上网体验，JavaScript是必不可少的工具。</p>
  22.     <form>
  23.        <input type="button" onclick="hidetext()" value="隐藏内容" />
  24.        <input type="button" onclick="showtext()" value="显示内容" />
  25.     </form>
  26. </body>
  27. </html>

2.6 className

　　1.在右边编辑第33行补充代码，给id="p1"元素通过className添加"类名为one"的样式。当点击"添加样式"按钮，第一段文字添加样式。

　　2.在右边编辑第37行补充代码，给id="p2"元素通过className修改为"类名为two"的样式。当点击"更改外观"按钮，第二段文字更改样式。

  1. <!DOCTYPE HTML>
  2. <html>
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
  5. <title>className属性</title>
  6. <style>
  7.     body{ font-size:16px;}
  8.     .one{
  9.         border:1px solid #eee;
  10.         width:230px;
  11.         height:50px;
  12.         background:#ccc;
  13.         color:red;
  14.     }
  15.     .two{
  16.         border:1px solid #ccc;
  17.         width:230px;
  18.         height:50px;
  19.         background:#9CF;
  20.         color:blue;
  21.     }
  22.     </style>
  23. </head>
  24. <body>
  25.     <p id="p1" > JavaScript使网页显示动态效果并实现与用户交互功能。</p>
  26.     <input type="button" value="添加样式" onclick="add()"/>
  27.     <p id="p2" class="one">JavaScript使网页显示动态效果并实现与用户交互功能。</p>
  28.     <input type="button" value="更改外观" onclick="modify()"/>
  29.  
  30.     <script type="text/javascript">
  31.        function add(){
  32.           var p1 = document.getElementById("p1");
  33.           p1.className = "one";
  34.        }
  35.        function modify(){
  36.           var p2 = document.getElementById("p2");
  37.           p2.className = "two";
  38.        }
  39.     </script>
  40. </body>
  41. </html>

　　1.获取元素的class 属性

　　2. 为网页内的某个元素指定一个css样式来更改该元素的外观

JavaScript入门详解的更多相关文章

  1. JavaScript正则表达式详解（一）正则表达式入门

    JavaScript正则表达式是很多JavaScript开发人员比较头疼的事情,也很多人不愿意学习,只是必要的时候上网查一下就可以啦~本文中详细的把JavaScript正则表达式的用法进行了列表,希望 ...

  2. JavaScript正则表达式详解（二）JavaScript中正则表达式函数详解

    二.JavaScript中正则表达式函数详解(exec, test, match, replace, search, split) 1.使用正则表达式的方法去匹配查找字符串 1.1. exec方法详解 ...

  3. webpack入门详解

    webpack入门详解(基于webpack 3.5.4  2017-8-22) webpack常用命令: webpack --display-error-details    //执行打包 webpa ...

  4. Linq之旅：Linq入门详解（Linq to Objects）

    示例代码下载:Linq之旅:Linq入门详解(Linq to Objects) 本博文详细介绍 .NET 3.5 中引入的重要功能:Language Integrated Query(LINQ,语言集 ...

  5. JavaScript事件详解-jQuery的事件实现（三）

    正文 本文所涉及到的jQuery版本是3.1.1,可以在压缩包中找到event模块.该篇算是阅读笔记,jQuery代码太长.... Dean Edward的addEvent.js 相对于zepto的e ...

  6. JavaScript事件详解-Zepto的事件实现（二）【新增fastclick阅读笔记】

    正文 作者打字速度实在不咋地,源码部分就用图片代替了,都是截图,本文讲解的Zepto版本是1.2.0,在该版本中的event模块与1.1.6基本一致.此文的fastclick理解上在看过博客园各个大神 ...

  7. SQL注入攻防入门详解

    =============安全性篇目录============== 本文转载 毕业开始从事winfrm到今年转到 web ,在码农届已经足足混了快接近3年了,但是对安全方面的知识依旧薄弱,事实上是没机 ...

  8. SQL注入攻防入门详解（2）

    SQL注入攻防入门详解 =============安全性篇目录============== 毕业开始从事winfrm到今年转到 web ,在码农届已经足足混了快接近3年了,但是对安全方面的知识依旧薄弱 ...

  9. Quartz 入门详解

    Quartz是OpenSymphony开源组织在Job scheduling领域又一个开源项目,它可以与J2EE与J2SE应用程序相结合也可以单独使用.Quartz可以用来创建简单或为运行十个,百个, ...

随机推荐

  1. 解决Mac开机变慢 command ＋option ＋ P ＋ R

    Mac开机变慢怎么办? command +option + P + R 重点是 开机 后 一直按 该4个键不放  听到3声音响 屏幕出现灰暗灰暗几次 开机速度 5s 重置PRAM和NVRAM的方法都是 ...

  2. Redis、mongdb、memcached的个人总结

    有测试的实例:http://colbybobo.iteye.com/blog/1986786 详细描述优缺点:https://www.cnblogs.com/binyue/p/4582550.html

  3. 七：zooKeeper开源客户端ZkClient的api测试

    ZkClient是Gitthub上一个开源的ZooKeeper客户端.ZKClient在ZooKeeper原生API接口之上进行了包装,是一个更加易用的ZooKeeper客户端.同时ZKClient在 ...

  4. WordPress 一键置顶文章（推荐用SM Sticky Clicky Star）

    在 WordPress入门 之 发布新文章和管理文章 中,倡萌已经简单提到可以在文章编辑界面或者快速编辑界面设置置顶文章,但是如果你想在后台文章列表中添加一键置顶文章的功能,不妨试试 Quick St ...

  5. “无法识别的配置节system.webServer”解决办法

    在Winsows 2008 Server 上安装asp.net 1.1 的应用程序,在启用默认文档或者浏览目录时会向 web.config 文件添加 <system.webServer> ...

  6. 确实，k8s的时代，ingress负载用traefik比nginx方便啊

    参考文档: https://mritd.me/2016/12/06/try-traefik-on-kubernetes/#13ingress 由于微服务架构以及 Docker 技术和 kubernet ...

  7. [BZOJ4456] [Zjoi2016]旅行者 分治+最短路

    4456: [Zjoi2016]旅行者 Time Limit: 20 Sec  Memory Limit: 512 MBSubmit: 777  Solved: 439[Submit][Status] ...

  8. vmware + ubuntu 64 安装 node.js v8.9.3

    第一次使用虚拟机,第一次使用linux系统,第一次安装使用node.js 虚拟机安装不用多说,安装好之后下载ubuntu 64位版本文件 在vm中点击“创建新的虚拟机”,选择下载的ubuntu iso ...

  9. CentOS7.5字体美化

    背景知识 有衬线 (Serif) 无衬线 (Sans Serif) 和等宽 (Monospace) 字型 1 有衬线 (Serif) 字型是比较正式的字体,比划粗细不一,在笔划的边缘有装饰部分(我的理 ...

  10. [scrapy] scrapy 使用goose作为正文提取

    import scrapy from goose import Goose class Article(scrapy.Item): title = scrapy.Field() text = scra ...