　　开始开发工作。

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

随机推荐

[device tree] interrupt
Specifying interrupt information for devices ============================================ 1) Interru ...
1.Firedac开门篇
firedac是Delphi开发跨平台的数据库应用程序的通用数据访问组件,同样适用于C++ Builder和FreePascal.firedac可以高速直接访问: 1.InterBase 2.SQLi ...
【SCOI2010】维护序列
NOI2017的简化版…… 就是维护的时候要想清楚怎么讨论. #include<bits/stdc++.h> #define lson (o<<1) #define rson ...
centos7下opencv的安装
os:centos7 opencv:opencv3.0.0 for linux reference:http://www.cnblogs.com/xixixing/p/6096057.html det ...
centos7.4通过yum安装mysql
安装环境:CentOS7 64位 MINI版,安装MySQL5.7 1.配置YUM源在MySQL官网中下载YUM源rpm安装包:http://dev.mysql.com/downloads/repo ...
cpu占用高 20180108
1.top 中的mysql占用高,在mysql中开启慢查询,用tail -f 监控慢查询日志,发现是有表的索引不合理: 2.top 中的php_fpm的进程数高,修改了一下php_fpm的配置文件p ...
Leetcode 之Binary Tree Preorder Traversal（42）
树的先序遍历.定义一个栈,先压入中间结点并访问,然后依次压入右.左结点并访问. vector<int> preorderTraversal(TreeNode *root) { vector ...
System.Web.HttpContext.Current.Request用法
public static void SetRegisterSource() { if (System.Web.HttpContext.Current.Request["website&qu ...
用Python创建XML(转)
在官方网站没有找到多少有用的知识.结果在Python and XML: An Introduction找到了一篇教程,抽空对照做,然后再总结分享出来.先来一个简单的: from xml.dom.min ...
Mysql Sql Explain
1.使用mysql explain的原因在我们php程序员的日常写代码中,有时候会发现我们写的sql语句运行的特别慢,导致响应时间特别长,这种情况在高并发的情况下,我们的网站会直接崩溃,为什么双十一 ...

JavaScript入门详解