一、JS 入门

作者: 焰火青春 | 来源:发表于2018-05-27 14:33 被阅读34次

JavaScript

1、基础

1.1、JavaScript可以用来做什么

呈现网页各种动态效果

1.2、如何在 html 中插入 JS 代码

使用 <script> 标签在 html 网页中插入 JS 代码

// <script>标签间的为文本类型（text），javascrpt 是为了告诉浏览器里面的文本是属于 javascrpt语言
<script type="text/javascript">    
    JS 代码
</script>

1.3、引用 JS 外部文件

JS 代码也可以作为一个单独的文件，再在 HTML 中引用即可（前提是需要在项目所在目录）

// script.js
document.write("引用 JS 文件！");

<!--index.html-->
<html>
    <head>
        <script src="script.js"></script>
    </head>
    <body>
    </body>
</html>

1.4、JS 在页面的位置

理论上我们可以将 JS 放置在 HTML 中的任何位置，但一般都会放在 head、body 部分。不论放在那，浏览器解释时按顺序先后解释。

一般进行页面初始化的 JS 必须放 head 里，通过事件调用执行的 function 对位置没有要求。

<!DOCTYPE HTML>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>JS代码的位置</title>
        <script type="text/javascript">     // head 部分
        document.write('I love');
        </script>
    </head>
    <body>
        <script type="text/javascript">    // body 部分
        document.write('javascript');
        </script>
    </body>
</html>

1.5、JS 语句规范

语句和符号：每一句 JS 语句需要紧跟一个英文的分号（;），非必须（良好编程习惯最好有）。
注释：单行注释，在注释内容前加符号（//）；多行注释，以 /* 开始，以 */ 结束。

// document.write()              单行注释
/*
    多行注释
    ...
*/

1.6、 JS 变量

变量是用来存储某种/某些数值的存储器，可看作为一个盒子。JS 语句定义变量需要使用关键字 var，规则如下：

变量必须以字母、下划线或美元符（$）开始
然后以任意多个英文字母、数字、下划线或美元符组成
不能使用 javascrpt 关键词与 javascrpt 保留字
变量区分大小写，先声明再使用
变量可以保存字符串（需要使用双引号或单引号）、数值

var mychar;          // 声明
mychar='javascript';     // 赋值
mychar='hello';       // 重复赋值

var mychar=6;     // 也可以在声明时赋值

局部变量、全局变量和变量生存周期：

局部变量：函数内部声明的变量，只能在函数内部访问。可以在不同函数中声明相同局部变量，函数运行完毕，本地变量就好被删除。
全局变量：函数外声明的变量，网页上所有脚本和函数都能访问，页面关闭后被删除。
如果将返回的值赋值给尚未声明的变量，该变量将自动作为全局变量声明。

1.7、判断语句（if...else）

条件判断语句用于基本的条件来执行不同的动作

<script type="text/javascript">
   var myage = 18;
   if(myage>=18)             //myage>=18是判断条件
   { document.write("你是成年人。");}
   else                     //否则年龄小于18
   { document.write("未满18岁，你不是成年人。");}
</script>

1.8、函数

函数是完成某个特定功能的一组语句，由事件驱动或当调用时执行可重复的代码块；函数需要先定义再调用。

调用无参数的函数

<!--调用无参数的函数-->
<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>函数调用</title>
        <script type='text/javascript'>
            function contxt()   //定义函数
            {
                alert('恭喜你！你被调用了！');
            }
            contxt();        // 调用函数,直接使用函数名调用即可
        </script>
    </head>
    <body>
        <form>
            <input type='button' value='点击我' onclik='contxt()'/>   <!--点击事件-->
        </form>
    </body>
</html>

调用带参数的函数

<!--调用带参数的函数-->
<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>函数调用</title>
    </head>
    <body>
        <p> 点击这个按钮，来调用带参数的函数。</p>
        <button onclick="myjob('Rose', 'teacher')">点击这里</button>    <!--传入参数-->
         <script type='text/javascript'>
            function myjob(name, job)       // 定义函数
            {
                alert('Welcome' + name + ', the ' + job);
            }
        </script>
    </body>
</html>

调用带有返回值的函数

有时希望函数将值返回调用它的地方，可以使用 return 语句实现。使用 return 语句时，函数会停止执行，并返回指定值。

function myFunction(a,b)
{
if (a>b)      // 如果 a 大于 b
  {
  return;    // 函数结束，并不结束 javascrpt
  }
x=a+b       // 不会计算 a 和 b 的和
}

实例：

<html>
    <body>
        <p>本例调用的函数会执行一个计算，然后返回结果：</p>
        <p id="demo"></p>
        <script>
            function myFunction(a,b)
            {
                return a*b;
            }

        document.getElementById("demo").innerHTML=myFunction(4,3);  // javascript 访问 html 某个元素，可使用 document.getElementById(id) 方法
        </script>
    </body>
</html>

2、常用互动方法

2.1、输出内容（document.write）

document.write（），可用于直接向 html 输出流写内容（即直接在网页中输出内容）。

JS 输出空格，可以使用 HTML 标签 &nbsp；解决，或 CSS 样式：

document.write("&nbsp;&nbsp;"+"1"+"&nbsp;&nbsp;&nbsp;&nbsp;"+"23");   // HTML 标签 &nbsp；
// 结果:  1    23

 document.write("<span style='white-space:pre;'>"+"  1        2    3    "+"</span>");  // CSS 样式
//结果:  1       2     3

第一种：直接输出内容

<script type='text/javascript'>
    document.wirte('I Love You!');        // 输出''中内容
    // document.write('<p>Hello World!</p>'); 
</script>

第二种：通过变量，输出内容

<script type='text/javascript'>
    var mystr='I Love You!'
    document.wirte(mystr);        // 直接写变量名，输出变量中存储的内容
</script>

第三种：输出多项内容，使用连接符 + 连接

<script type='text/javascript'>
    var mystr='I Love You!'
    document.wirte('xxx ' + mystr);        // 多项内容，使用连接符 +
</script>

第四种：输出 HTML 标签，并起作用，标签使用 ' ' 括起来

<script type='text/javascript'>
    var mystr='I Love You!'
    var mychar='我是真的爱你！'
    document.wirte(mystr + '<br />');    // 输出 html 标签（换行符）
    document.write('xx ' + mystr + mychar);
</script>

// 输出
I Love You!
xx I Love You! 我是真的爱你！

第五种：Javascript 方法 HTML 中某个元素

<!DOCTYPE html>  
<html>  
    <body>  
        <p id="demo">Hello</p>  
        <script>  
        document.getElementById("demo").innerHTML="Hello world";   //可使用 document.getElementById() 方法
        </script>  
    </body>  
</html>

2.2、警告（alert 消息对话框）

访问网站时，有时会突然弹出一个小窗口，上有提示文字；不点击确定便不能继续操作，这个小窗口就是使用 alert 实现的。

alert 弹出消息包含一个确定按钮，按顺序弹出消息框
常用于调试程序
输出内容可是变量，也可以是字符串，与 document.write（）类似

<script type='text/javascript'>
    var mynum = 30;          // 依次弹出消息框
    alert('hello');
    alert(mynum);
</script>

2.3、确认（confirm 消息对话框）

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

语法：

confirm（str）;      // str 为消息对话框中显示的文本

返回值为布尔类型（boolean值）
用户点击确定，返回 true；点击取消，返回 false
用户在点击对话按钮框前，不能进行其它任何操作

实例：

<script type='text/javascript'>
    function rec(){       
          var msg = confirm('你喜欢 javascrpt？')；
          if(msg==true){           // 点击确定，返回以下内容
              document.write('很好，加油哦！');
          }              
         
        else{                     // 点击取消，返回以下内容
            document.write('JS 功能很强大，要学习哦！');
        }                       
    }
  
</script>
<body>
    <form>
        <input type='button' value='点击我，确认对话框' onclick='rec()'/>
    </form>
</body>

2.4、提问（prompt 消息对话框）

prompt 消息对话框，通常用于询问一些需要与用户交互的消息。弹出消息对话框（包含一个确定按钮、取消按钮和一个文本输入框）。

语法：

prompt(str1, str2);
// str1：显示在消息对话框的文本信息，不可修改
// str2：文本框中内容，需要输入，可修改。可作默认值

返回值：

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

实例：

<script type='text/javascript'>
    function rec(){
        var myname=prompt('请输入你的名字：');
        if(myname!=null){
            alert('Hi ' + myname);
        }
        else{
            alert('Hi, my friend!');
        }
    }
</script>
<body>
    <input type="button" onClick="rec()" value="点击我，输入你的名字!" />
</body>

2.5、打开新窗口（window.open）

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

语法

window.open(URL,name,features,replace)

参数说明

参数	描述
URL	可选，在窗口中要显示网页的网址或路径，如果省略或值为空字符串，那么窗口不显示任何文档
name	可选，被打开窗口名称。如果指定了一个已存在的窗口，那么open（）方法不再创建新的窗口，features 将被忽略
features	可选，设置窗口参数，各参数用逗号分隔。省略则新窗口具备所有标准特征
replace	可选布尔值，规定了装载到窗口的 URL 是在窗口的浏览历史中创建一个新条目，还是替换浏览历史中的当前条目。支持下面的值： true - URL 替换浏览历史中的当前条目。 false - URL 在浏览历史中创建新的条目。

窗口名称（name）说明：

该名称由字母、数字和下划线字符组成
_blank：在新窗口显示目标网页
_self：在当前窗口显示目标网页
_top：框架网页中在上部窗口中显示目标网页
相同 name 窗口只能创建一个，多个则 name 不能相同，不能包含空格

参数表（features）：

参数	说明
top = pixels	窗口顶部离开屏幕顶部的像素数
left = pixels	窗口左端离开屏幕左端的像素数
width = pixels	窗口宽带
height = pixels	窗口高度
mennubar = yes\|no\|1\|0	窗口是否有菜单，默认 yes
toolbar = yes\|no\|1\|0	窗口是否有工具条，默认 yes
scrollbar = yes\|no\|1\|0	窗口是否有滚动条，默认 yes
status = yes\|no\|1\|0	窗口是否有状态栏，默认 yes
channelmode = yes\|no\|1\|0	是否使用剧院模式显示窗口，默认 no
directorys = yes\|no\|1\|0	是否添加目录按钮，默认 yes
fullscreen = yes\|no\|1\|0	是否全屏，默认 no，全屏模式必须同时处于剧院模式
location = yes\|no\|1\|0	是否显示地址字段，默认 yes
resizable = yes\|no\|1\|0	是否可调节尺寸，默认 yes
titlebar = yes\|no\|1\|0	是否显示标题栏，默认 yes

实例 1：

在新的浏览器窗口打开 http://www.imooc.com

<!DOCTYPE HTML>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>window.open</title>
        <script type="text/javascript">
            function Wopen(){
                window.open('http://www.imooc.com', '_blank','toolbar=yes, location=yes, directories=no, status=no, menubar=yes, scrollbars=yes, resizable=no, copyhistory=yes, width=400, height=400,top=100,left=0') 
                //window.open('http://www.baidu.com')     打开多个窗口
                ...

            } 
        </script>
    </head>
    <body>
        <input name="button" type="button" onClick="Wopen()" value="点击我，打开新窗口!" / >
    </body>
</html>

实例 2：

在新窗口打开 about：blank 页

<html>
    <body>

        <script type="text/javascript">
        myWindow=window.open('','','width=200,height=100')
        myWindow.document.write("This is 'myWindow'")
        myWindow.focus()
        </script>

    </body>
</html>

2.6、关闭窗口（window.open）

close（）方法用于关闭浏览器窗口。

语法：

window.close();              // 关闭本窗口   
<要关闭的窗口对象>.close();   // 关闭其他窗口

实例：

关闭新建窗口

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

2.7、编程练习

制作新按钮，“新窗口打开网站” ，点击打开新窗口，要求如下：

1、新窗口打开时弹出确认框，是否打开

提示: 使用 if 判断确认框是否点击了确定，如点击弹出输入对话框，否则没有任何操作。

2、通过输入对话框，确定打开的网址，默认为 http：//www.imooc.com/

3、打开的窗口要求，宽400像素，高500像素，无菜单栏、无工具栏。

<!DOCTYPE html>
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>   
  <title> 编程练习 </title>  
  <script type="text/javascript">  
    function openWindow(){
        var site_a=confirm('是否打开新窗口？');
        if (site_a==true){
            var site_b=prompt('请输入要打开的网站：','http://www.imooc.com');
            if (site_b){
                window.open(site_b,'_blank','width=400,height=500,mennubar=no,toolbar=no');
            }
            else{           // 点击取消关闭窗口
                window.close();
            }
        }
    ｝

  </script> 
 </head> 
 <body> 
      <input type="button" value="新窗口打开网站" onclick="openWindow()" /> 
 </body>
</html>

3、DOM 操作

3.1、认识 DOM

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

当网页加载时，浏览器会创建页面的文档对象模型 DOM，通过 HTML DOM ，可访问 JavaScript HTML 文档的所有元素。

<!DOCTYPE HTML>
<html>        <!--元素节点-->
    <head>
        <meta http-equive='Content-Type' content='text/html; charset=gb2312'/>
        <title>DOM</title>
    </head>
    <body>
        <h2>
            <a href='http://www.imooc.com'>javascript DOM</a>  <!--属性节点-->
        </h2>
        <p>
            对 HTML 元素进行操作，可添加、改变或移除 CSS 样式等
        </p>
        <ul>
            <li>javascript</li>        <!--文本节点-->
            <li>DOM</li>
            <li>CSS</li>
        </ul>
    </body>
</html>

**将HTML代码分解为DOM****节点层次图**

HTML 文档是由节点构成的集合，三种常见的 DOM 节点：

元素节点：上图中的 <html>、<body>、<p> 等
文本节点：向用户展示的内容，如 <li>...</li> 中的 JavaScript、DOM、CSS 等文本
属性节点：元素/标签的属性，如 <a> 元素的链接属性 href = ' '

3.2、通过 ID 查找HTML 元素

在 DOM 中查找 HTML 元素最简单的方法，是通过使用元素的 id。

如果找到该元素，则该方法将以对象的形式返回给该元素。如需对元素操作，要通过它的属性和方法
如果未找到，则返回 null

语法：

document.getElementById('id');

实例：

<!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");  // 以对象形式返回，并将结果存储到变量 mychar 中
          document.write("结果:"+mychar);             //输出获取的P标签。 
        </script>
    </body>
</html>

// 上述实例结果
// 如果要查找的元素在查找的语法后，将返回一个 null，因为 html 按顺序执行
JavaScript
结果：[object HTMLParagraphElement]        // 返回的是对象

3.3、innerHTML 属性

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

语法：

Object.innerHTML
-------
var x=document.getElementById('id');     // 获取 html 元素内容
x.innerHTML

实例：

<!--innerHTML 属性可获取也可以替换 html 元素内容-->
<!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 world!';      // 替换内容（重新赋值）
              document.write("修改后的标题:"+mychar.innerHTML); //输出修改后h2标签内容
        </script>
    </body>
</html>

改变元素属性：

document.getElementById.attribute=new value;
--------------------
<img id='image' src='smile.gif'>
document.getElementById('image').src='smile.jpg';

3.3.1、innerHTML 与 value 属性的区别

innerHTML：可以获取元素中的内容
value：只有当元素有 value 值时才能获取到

实例：

// 只有元素中有 value 值时 document.getElementById('txt1').value 才能获取到 hello
<input type='text' id='txt1' value='hello'/> 
    
// document.getElementById('txt2').innerHTML 获取到 hi
<p id='txt2'>hi</p>

3.4、改变 HTML 样式

HTML DOM 允许 JavaScript 可以改变 HTML 元素的样式

语法：

Object.style.property=new style;

基本属性表（property）：

属性	描述
backgroundColor	设置元素背景颜色
height	设置元素高度
width	设置元素宽度
color	设置文本颜色
font	在一行设置所有的字体属性
fontFamily	设置元素字体系列
fontsize	设置元素字体大小

实例：

<p id="pcon">Hello World!</p>
<script>
   var mychar = document.getElementById("pcon");
   mychar.style.color="red";
   mychar.style.fontSize="20";
   mychar.style.backgroundColor ="blue";
</script>

3.5、显示和隐藏 display 属性

HTML DOM 可以通过设置元素的 display 属性来显示或隐藏某些内容

语法：

// Object 是获取的元素对象，可通过 document。getElementById('id')获取
Object.style.display = value

value 值：

none：此元素不会被显示（隐藏）
block：此元素将显示为块级元素（显示）

实例：

<!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.style.display="none";     // 隐藏内容
                }  
                function showtext()  
                {  
                var mychar = document.getElementById("con");
                mychar.style.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>

3.6、控制类名

className 属性设置或返回元素的 class 属性，可用来获取元素的 class 属性，为网页的某个元素指定一个 CSS 样式更改该元素的外观。

语法：

Object.className = classname

实例：

为元素 p1 指定 CSS 样式，更改元素 p2 的 CSS 样式

<!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";       // 设置 p1 的 class 属性为 one
           }
           function modify(){
              var p2 = document.getElementById("p2");    // 将 p2 的 class 属性从 one 更改为 two
              p2.className = "two";
           }
        </script>
    </body>
</html>

一、JS 入门

JavaScript

1、基础

1.1、JavaScript可以用来做什么

1.2、如何在 html 中插入 JS 代码

1.3、引用 JS 外部文件

1.4、JS 在页面的位置

1.5、JS 语句规范

1.6、 JS 变量

1.7、判断语句（if...else）

1.8、函数

2、常用互动方法

2.1、输出内容（document.write）

2.2、警告（alert 消息对话框）

2.3、确认（confirm 消息对话框）

2.4、提问（prompt 消息对话框）

2.5、打开新窗口（window.open）

2.6、关闭窗口（window.open）

2.7、编程练习

3、DOM 操作

3.1、认识 DOM

3.2、通过 ID 查找HTML 元素

3.3、innerHTML 属性

3.3.1、innerHTML 与 value 属性的区别

3.4、改变 HTML 样式

3.5、显示和隐藏 display 属性

3.6、控制类名

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

我爱编程