　　开始开发工作。

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

随机推荐

打印 pmic register value
打印 PMIC register value 方式有二種, 一種是使用 adb shell cat pmic register 一種是直接在 code 裡 call dump pmic registe ...
monkey测试===monkeyrunner测试教程（1）
1.安装测试环境 jdk 安装与配置 android sdk安装与配置 Python编辑器安装与配置以上安装请自行百度教程 Monkeyrunner使用方法 http://www.android-d ...
Oracle 合并 merger into
merge into copy_emp1 c using employees e on (c.employee_id=e.employee_id)when matched then update ...
springboot基础知识学习
一.springboot中常用的注解: 原文链接:http://blog.csdn.net/lafengwnagzi/article/details/53034369 原文链接:http://www. ...
php5和php7的异常处理机制 ----thinkphp5 异常处理的分析
1.php异常和错误在其他语言中,异常和错误是有区别的,但是PHP,遇见自身错误时,会触发一个错误,而不是跑出异常.并且,php大部分情况,都会触发错误,终止程序执行,在php5中,try catc ...
JAVA二叉树的创建以及各种功能的实现
直接上代码了,代码说得很清楚了 package BTree; public class BTree { private Node root; private class Node { private ...
Accord.NET入门
0.序园子里介绍Accord.NET的文章不少,但是具体讲如何使用的反而不多,可能跟.NET在机器学习领域应用不多有关.诚然,如果做项目的话,可能用Python更好一些,但是如果把了解Accord. ...
centos7 samba安装
http://www.cnblogs.com/muscleape/p/6385583.html 1 安装yum install samba 2 添加用户xxx smbpasswd -a xxx 3 s ...
Project interpreter not specified(eclipse+pydev) (转)
[小记] 最近因为想配置Android的开发环境,把原来的MyEclipse5.5删了,下载了最新的Eclipse3.7版本,因为之前在进行Python开发,就下载了最新的Pydev2.4版本,安装 ...
如何直接运行python文件
1. 在Windows上是不能直接运行python文件的,但是,在Mac和Linux上是可以的,方法是在.py文件的第一行加上一个特殊的注释: #!/usr/bin/env python3 print ...

JavaScript入门详解