　　开始开发工作。

一、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可以用来创建简单或为运行十个,百个, ...

随机推荐

C#使用Linq To XML读取XML，Linq生成XML，Linq创建带属性或带节点XML
using System; using System.Linq; using System.Xml.Linq; namespace Sample2 { class Program { static v ...
Mysql 数据库学习笔记04 函数
一.创建自定义函数 * 使用自定义函数,可以返回字符串.整型.实数或者其他类型: create [aggregate] function 名称 (参数列表) return type begin //函 ...
django “如何”系列2：如何编写django-admin 命令
应用可以使用manage.py注册自己的动作,例如,你可能想要为你即将发布的应用添加一个manage.py 操作.这节我们将为polls应用添加一个closepoll的命令添加一个managemen ...
16：django 有条件的视图处理（Last-Modified和ETag）&&加密签名
有条件的视图处理上一节我们介绍了缓存来减轻服务器的负担,这里的有条件的视图处理也从一定程度上减轻了服务器的负担,在正式介绍之前,先来看两个概念:Last-Modified和ETag Last-Mod ...
Html Css 练习
一. 取消a链接的下划线 <!DOCTYPE html> <html lang="en"> <head> <meta charset=& ...
【JBPM4】EL表达式的使用，实现JAVA与JPDL的交互
user.java实体类 private String kezhang; private String zhuren; /...完善set get 方法.../ 创建流程实例 //创建流程引擎 Pro ...
PHP PDO类
<?php //数据库连接类,不建议直接使用DB,而是对DB封装一层 //这个类不会被污染,不会被直接调用 class DB { //pdo对象 private $_pdo = null; // ...
MSSQL为单独数据库创建登录账户
如果要为一个数据库创建一个独立的账号需要这个数据库为包含数据库当前(非包含)的数据库所面临的问题在描述什么是包含数据库之前,先了解一下为什么会出现包含数据库.当前的数据库有一些问题,如下:1.在数据 ...
win10的VMware虚机host-only模式下，虚拟机无法ping通物理机，而物理机能ping通虚机
1.打开控制面板—->Windows防火墙(win10操作系统) 2.点击最上面的”允许应用或功能通过xxxxx” 3.勾上上图的“文件和打印机共享” 然后点确定.
使用for循环打印9×9乘法表
请使用for循环,倒序打印9×9乘法表. 打印结果如下图所示: 使用for循环打印9×9乘法表 #include <stdio.h> int main() { int i, j, resu ...

JavaScript入门详解