　　开始开发工作。

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

随机推荐

mongodb 学习笔记 3 --- 查询
在mongodb的查询中可以通过使用如下操作符进行深度查询 1.条件操作符 $gt $gte : > >= {"age":{"$gt":18 ...
VS2017MVC+EF+MySQL环境搭建
记录一次环境搭建的过程以及出现的问题和解决方法. 编译器Visual Studio 2017Enterprise Edition 1.新建一个MVC应用程序2.在新建的MVC程序中选择Models - ...
Android UI 设计：pixel dip dpi sp density
1. px (pixels)像素 – 是像素,就是屏幕上实际的像素点单位. dip或dp (device independent pixels)设备独立像素,与设备屏幕有关. sp (scaled p ...
在Mysql中插入百万级别数据的方法
首先,建立部门表和员工表: 部门表: create table dept( id int unsigned primary key auto_increment, deptno mediumint u ...
three.js、webGL、canvas区别于关联
canvas是html5新定义的一个标签,用于做图形容器 webgl要依赖canvas运行. three.js是以webgl为基础的库,封装了一些3D渲染需求中重要的工具方法与渲染循环.
Exchanger学习
Java并发新构件之Exchanger JDK API Exchaner 介绍 JDK API 解释 A synchronization point at which threads can pair ...
Path Sum I&&II
I Given a binary tree and a sum, determine if the tree has a root-to-leaf path such that adding up ...
phoenix到hbase的应用
一.phoenix的简介 hbase的java api或者其语法很难用,可以认为phoenix是一个中间件,提供了访问hbase的另外的语法. 二.配置phoenix和hbase 1.下载 phoen ...
webpy 调试
服务器在运行过程中,没办法获得变量的值,就难以发现问题出在什么地方而进行调试
img加载不出来，给个默认图片。
忽然发现,jq里也有坑,很多东西莫名其妙的被废弃了……所以,只能用原生js来做了: $('img').each(function() { if (!this.complete || typeof th ...

JavaScript入门详解