| Weclome Back

JavaScript : 描述HTML文档属性。JavaScript语句是发给浏览器的命令。这些命令的作用是告诉浏览器要做的事情

JS入门初级

插入JS

JS文件不能直接运行，需嵌入到HTML文件中执行

JavaScript代码可以放在html文件中任何位置，但是我们一般放在网页的head或者body部分。

在HTML文档中插入

在<script type="text/javascript"></script>标签内插入JS脚本

在HTML中引入JS外部文件

插入方法：<script src="script.js"></script>

注意: javascript作为一种脚本语言可以放在html页面中任何位置，但是浏览器解释html时是按先后顺序的，所以前面的script就先被执行。比如进行页面显示初始化的js必须放在head里面，因为初始化都要求提前进行（如给页面body设置css等）

JS代码注释

单行注释，在注释内容前加符号 “//”。
多行注释以"/*"开始，以"*/"结束。

<script type="text/javascript">
  document.write("单行注释使用'//'"); 
   // 我是注释，该语句功能在网页中输出内容
     /*
    多行注释
    养成书写注释的良好习惯
   */
</script>

JS文本标签

一. document.write()

可用于直接向 HTML 输出流写内容。简单的说就是直接在网页中输出内容。

示例：

<script>
    var str="hello";
    document.write(str+"world"+"<br>");
</script>

二. .getElementById()函数

document.getElementById(),获取DOM节点

用.getElementById()函数获取到id的所有标签,而获去标签的目的往往是对这些标签进行操作，假如是文本标签，就可以进行改变字体颜色、大小等操作

实例：修改p1的文档属性和输出 hello

<script  type="text/javascript">
    document.write("hello");
    document.getElementById("p1").style.color="blue";
</script>

解释：

document.write("hello") : 打印在网页中——网页输出
alert("hello") : 打印在对话框里————调试输出
console.log("hello") : 打印在控制台———控制台输出

三、 JS警告(alert 消息对话框)

语法： alert(字符串或变量)

须知:

在点击对话框"确定"按钮前，不能进行任何其它操作。
消息对话框通常可以用于调试程序

四、 JS确认(confirm 消息对话框)

用途：向用户确认是否要执行某项操作时，可以添加

语法： confirm(str)

返回值： Boolean 值

当用户点击"确定"按钮时，返回true
当用户点击"取消"按钮时，返回false

confirm 消息对话框通常用于允许用户做选择的动作。弹出对话框(包括一个确定按钮和一个取消按钮)。

实例：通过confirm返回的布尔值进行下一步操作

<script type="text/javascript">
    var test=confirm("hello");
    if(test=true)
        { document.write("you") ;}
    else
    {
        document.write("me");
    }
</script>

注意: 消息对话框是排它的，即用户在点击对话框按钮前，不能进行任何其它操作。

五、 JS提问 (prompt 消息对话框)

语法： prompt(str1,str2);

其中 str1: 要显示在消息对话框中的文本，不可修改； str2：文本框中的内容，可以修改，分两次显示

点击确定按钮，文本框中的内容将作为函数返回值
点击取消按钮，将返回null

JavaScript变量

变量是用于存储某种/某些数值的存储器

JS 定义变量： var 变量名

注意：变量必须使用字母、下划线(_)或者美元符($)开始

例子：

var my_test;
my_test="javascript";
var my_num= "26";

注意：变量虽然也可以不声明，直接使用，但不规范，需要先声明，后使用。另外，变量是弱类型的。

内嵌变量的另一写法与调用

语法：var test={ fun_name:function(){} }

<script type="text/javascript">
  var i={
      alertWord:function(){
          var j=confirm("准备好了？");
          if(j===true){alert("恭喜您，已经掌握此技能。")}
          else{alert("请重新学习课程内容吆，直到实践编写代码与实践要求一致!")}
      },}
</script>
<form >
  <input type="button" onclick="i.alertWord()" value="请点击确认" />
</form>

JavaScript判断语句

基本判断

语法：

if(条件1)
{ 条件1成立时执行的代码 }
else if(条件2){
    执行条件3成立的代码
}
else
{ 条件都不成立时执行的代码 }

三元运算符（条件?真成立:假成立）
switch case

每一种case情况下都要加break，如果不加break，不管后面的代码是否成立都会被执行

JS函数

定义：

function 函数名()
{
    函数代码;
}

函数调用:函数定义好后，是不能自动执行的，所以需调用它,只需直接在需要的位置写函数就ok了

实例：嵌入式网页调用函数,onlick使用

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>函数调用</title>
   <script type="text/javascript">
       function contxt() //定义函数
      {
         alert("调用函数!");
      }
   </script>
</head>
<body>
   <form>
      <input type="button"  value="点击我" onclick="contxt()" />  
   </form>
</body>
</html>

JS--新窗口 (window.open/close)

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

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

参数说明：

URL：可选参数，在窗口中要显示网页的网址或路径。如果省略这个参数，或者它的值是空字符串，那么窗口就不显示任何文档。
窗口名称：可选参数，被打开窗口的名称。
1. 该名称由字母、数字和下划线字符组成。
  1. _blank：在新窗口显示目标网页
  2. _self：在当前窗口显示目标网页
  3. _top：框架网页中在上部窗口中显示目标网页
2. 相同 name 的窗口只能创建一个，要想创建多个窗口则 name 不能相同。
3. name 不能包含有空格。

注意：参数字符串：可选参数，设置窗口参数，各参数用逗号隔开。

参数列表

实例：打开百度，在另一页面打开，页面大小自行设定，无工具栏

<script type="text/javascript">
    window.open("http://www.baidu.com", "_blank", "width=300,height=200,toolbar=no")
</script>

close()关闭窗口

用法： window.close();

或

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

实例:关闭新建的窗口。

<script type="text/javascript">
   var mywin=window.open('http://www.imooc.com'); //将新打的窗口对象，存储在变量mywin中
   mywin.close();
</script>

初识DOM

DOM(Document Object Model):文本对象模型定义访问和处理HTML文档的标准方法。

DOM将HTML文档呈现为带有元素、属性和文本的树结构

实例：简单的DOM节点层次图

常见的DOM节点

元素节点： html 、body、p
文本节点：向用户展示的内容，例如 <li> 中的JS,DOM,CSS等文本
属性节点：元素属性，如 <a>标签属性 href

通过ID获取元素

获取对象标签

标签的id属性值是唯一的，可以通过getElementById("id")来获取

语法：document.getElementById("id")

注意：获取的元素是一个对象，若对元素进行操作，则需要通过它的属性或方法

一般标签返回值为： null 或 [object.HTMLParagraphElement]

解释：

结果为null是因为，JavaScript没有找到id名为“con”的标签，所以返回null
结果为[object HTMLParagraphElement]，则说明JavaScript找到了id名为“con”的标签，以对象的形式返回该标签

获取标签元素的内容

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

**语法：Object.innerHTML

解释：

Object是获取的元素对象，如通过 document.getElementById("id")获取

实例：

<script type="text/javascript">
  var mycon= document.getElementById("con");
  document.write("p标签内容"+mycon.innerHTML);
</script>

注意:如果将mycon的内容进行修改，则HTML原文档中的mycon对应的对象内容也会随之改变

改变HTML样式

基本样式

HTML DOM 允许 JS 改变HTML的元素样式

语法：Object.style.property=new style;

基本属性表

width、height设置需要加上px

实例：改变 p 标签的背景颜色

<p id="con">Hello world!</p>
<script>
  var mycon=document.getElementById("con");
  mycon.style.backgroundColor = 'green';
</script>

显示和隐藏(display属性)

网页中的显示和隐藏的效果均可以通过display属性设置

语法：Object.style.display= value

value取值	用处
none	该元素会被隐藏
block	该元素会被显示为块级元素

示例：设置隐藏段落内容按钮

<script type="text/javascript">
  function hide()
  {
    document.getElementById("con").style.display ="none";
  }
</script>
<p id="con">这是要隐藏的段落内容</p>
<form >
  <input type="button" onclick="hide()" value="隐藏段落内容">
</form>

控制类名 (className属性)

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

语法：Oject.className=classname

用处：

获取元素的class属性
为网页的某个元素指定一个css样式

示例：搭配css设置修改元素的样式

<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>
<body>
  <p id="con" class="one">JavaScript样式</p>
  <form>
    <input type="button" onclick="change_style()" value="点击修改样式">
  </form>
  <script type="text/javascript">
    var mycon=document.getElementById("con");
    function change_style()
    {
      mycon.className="two";
    }
  </script>
</body>

重新设置JS属性

语法：Object.removeAttribute("style");

实例：定义"取消设置"的函数

提示: 使用confirm()确定框，来确认是否取消设置。

//定义"取消设置"的函数
        function 取消设置() {
            var bool = confirm("确定要重新设置？")
            if (bool == true) {
                文本.removeAttribute("style");
            }
        }

实例运用

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="txttent-Type" txttent="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="set.changeColor()">  
    <input type="button" value="改变宽高" onclick="set.changeSize()">
    <input type="button" value="隐藏内容" onclick="set.objHide()">
    <input type="button" value="显示内容" onclick="set.objShow()">
    <input type="button" value="取消设置" onclick="set.offSet()">
  </form>
  <script type="text/javascript">
   var txt=document.getElementById("txt");
   var set={
    changeColor:function(){
        txt.style.color="red";
        txt.style.backgroundColor="#ccc";
    },
    changeSize:function(){
        txt.style.width="300px";
        txt.style.height="300px";
    },
    objHide:function(){
        txt.style.display="none";
    },
    objShow:function(){
        txt.style.display="block";
    },
    offSet:function(){
        var message=confirm("你确定要重置所有设置么？");
        if(message==true){
            txt.removeAttribute('style');
        }
    }
  }
  </script>
</body>
</html>