| IRIS's BLOG

第一章入门

本章节主要讲解如何在HTML文件中添加JavaScript代码，掌握必备的基础语法，为以后来章学习打下基础。

第二章请和我互动

本章节主要讲解如何向网页中输入内容，如何与浏览器窗口进行交互，通过简单的对象方法就可以轻松实现。

JavaScript-警告（alert 消息对话框）

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>alert</title>
  <script type="text/javascript">
  function rec(){
    var mychar="I love JavaScript";
    alert(mychar);
  }
  </script>
</head>
<body>
    <input name="button" type="button" onClick="rec()" value="点击我，弹出对话框" />
</body>
</html>

JavaScript-确认（confirm 消息对话框）

confirm 消息对话框通常用于允许用户做选择的动作，如：“你对吗？”等。弹出对话框(包括一个确定按钮和一个取消按钮)。

function rec(){
    var mymessage= confirm("你是女士吗？");
    if(mymessage==true)
    {
    	document.write("你是女士!");
    }
    else
    {
        document.write("你是男士!");
    }
  }

JavaScript-提问（prompt 消息对话框）

 function rec(){
var score; //score变量，用来存储用户输入的成绩值。
score = prompt("同学输入成绩",null) ;
if(score>=90)
{
   document.write("你很棒!");
}
else if(score>=70)
   {
   document.write("不错吆!");
}
   else
{
      document.write("要努力了!");
}
 }

JavaScript-打开新窗口（window.open）

open() 方法可以查找一个已经存在或者新建的浏览器窗口。

1	window.open([URL], [窗口名称], [参数字符串])

1
2
3

function Wopen(){
    window.open('http://www.imooc.com','_blank','width=600,height=400,top=100,left=0')
}

JavaScript-关闭窗口（window.close）

用法：

1	window.close(); //关闭本窗口

或

1	<窗口对象>.close(); //关闭指定的窗口

例如:关闭新建的窗口。

<script type="text/javascript">
   var mywin=window.open("http://www.imooc.com");
   mywin.close()
</script>

综合练习

function openWindow(){
    // 1.新窗口打开时弹出确认框，是否打开
    var msg_confirm = confirm("是否打开窗口？")
    if(msg_confirm==true){
        // 2.通过输入对话框，确定打开的网址，默认为 http：//www.imooc.com/
        var msg_url = "http://www.imooc.com/"
        var msg_prompt = prompt("输入网址",msg_url)
        //3.打开的窗口要求，宽400像素，高500像素，无菜单栏、无工具栏。
        window.open(msg_url,"_blank",'width=400,height=500')
     }
    }

第3章你也有控制权(DOM操作)

如何用JavaScript去操作HTML元素和CSS样式，实现简单的动态操作。

认识DOM

文档对象模型DOM（Document Object Model）定义访问和处理HTML文档的标准方法。DOM 将HTML文档呈现为带有元素、属性和文本的树结构（节点树）。

先来看看下面代码:

HTML文档可以说由节点构成的集合，三种常见的DOM节点:

1. 元素节点：上图中、、

等都是元素节点，即标签。

2. 文本节点:向用户展示的内容，如

…

中的JavaScript、DOM、CSS等文本。

3. 属性节点:元素属性，如标签的链接属性href=”http://www.imooc.com"。

看下面代码:

1	<a href="http://www.imooc.com">JavaScript DOM</a>

通过ID获取元素

学过HTML/CSS样式，都知道，网页由标签将信息组织起来，而标签的id属性值是唯一的，就像是每人有一个身份证号一样，只要通过身份证号就可以找到相对应的人。那么在网页中，我们通过id先找到标签，然后进行操作。

语法:

1	document.getElementById(“id”)

结果:null或[object HTMLParagraphElement]

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

innerHTML 属性：获取替换内容

innerHTML 属性用于获取或替换 HTML 元素的内容。

语法:

1	Object.innerHTML

注意:

1.Object是获取的元素对象，如通过document.getElementById(“ID”)获取的元素。

2.注意书写，innerHTML区分大小写。

我们通过id=”con”获取

元素，并将元素的内容输出和改变元素内容，代码和结果如下:

改变 HTML 样式

HTML DOM 允许 JavaScript 改变 HTML 元素的样式。如何改变 HTML 元素的样式呢？

语法:

1	Object.style.property=new style;

注意:Object是获取的元素对象，如通过document.getElementById(“id”)获取的元素。

基本属性表（property）:

注意:该表只是一小部分CSS样式属性，其它样式也可以通过该方法设置和修改。

显示和隐藏（display属性）

网页中经常会看到显示和隐藏的效果，可通过display属性来设置。

语法：

1	Object.style.display = value

注意:Object是获取的元素对象，如通过document.getElementById(“id”)获取的元素。

value取值:

看看下面代码:

控制类名（className 属性）

className 属性设置或返回元素的class 属性。

语法：

1	object.className = classname

作用:

获取元素的class 属性
为网页内的某个元素指定一个css样式来更改该元素的外观

看看下面代码，获得

元素的 class 属性和改变className：

function add(){
	      var p1 = document.getElementById("p1");
	      p1.className = "one"
	   }
	   function modify(){
	      var p2 = document.getElementById("p2");
	      p2.className = "two"
	   }

综合练习

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" Content="text/html; charset=utf-8" />
<title>javascript</title>
<style type="text/css">
body{font-size:12px;}
#txt{
    height:400px;
    width:600px;
	border:#333 solid 1px;
	padding:5px;}
p{
	line-height:18px;
	text-indent:2em;}
</style>
</head>
<body>
  <h2 id="con">JavaScript课程</H2>
  <div id="txt"> 
     <h5>JavaScript为网页添加动态效果并实现与用户交互的功能。</h5>
        <p>1. JavaScript入门篇，让不懂JS的你，快速了解JS。</p>
        <p>2. JavaScript进阶篇，让你掌握JS的基础语法、函数、数组、事件、内置对象、BOM浏览器、DOM操作。</p>
        <p>3. 学完以上两门基础课后，在深入学习JavaScript的变量作用域、事件、对象、运动、cookie、正则表达式、ajax等课程。</p>
  </div>
  <form>
  <!--当点击相应按钮，执行相应操作，为按钮添加相应事件-->
    <input type="button" value="改变颜色" onClick = "colorChange()">  
    <input type="button" value="改变宽高" onClick="sizeChange()">
    <input type="button" value="隐藏内容" onClick="hide()">
    <input type="button" value="显示内容" onClick="display()">
    <input type="button" value="取消设置" onClick="cancel()">
  </form>
  <script type="text/javascript">
//定义"改变颜色"的函数
    function colorChange(){
        var obj = document.getElementById("txt");
        obj.style.color = "red";
        obj.style.backgroundColor = "gray";
    }

//定义"改变宽高"的函数
    function sizeChange(){
        var obj = document.getElementById("txt");
        obj.style.height = "300px";
        obj.style.width = "300px";
    }

//定义"隐藏内容"的函数
    function hide(){
        var obj = document.getElementById("txt");
        obj.style.display = "none";
    }

//定义"显示内容"的函数
    function display(){
        var obj = document.getElementById("txt");
        obj.style.display = "block";
    }

//定义"取消设置"的函数
    function cancel(){
        var message = confirm("是否还原？")
        if(message==true){
            txt.removeAttribute('style');
        }
    }
  </script>
</body>
</html>

第一章 入门

第二章 请和我互动

JavaScript-警告（alert 消息对话框）

JavaScript-确认（confirm 消息对话框）

JavaScript-提问（prompt 消息对话框）

JavaScript-打开新窗口（window.open）

JavaScript-关闭窗口（window.close）

综合练习

第3章 你也有控制权(DOM操作)

认识DOM

通过ID获取元素

innerHTML 属性：获取替换内容

改变 HTML 样式

显示和隐藏（display属性）

控制类名（className 属性）

综合练习

第一章入门

第二章请和我互动

第3章你也有控制权(DOM操作)