一、JS 入门

作者: 焰火青春 | 来源:发表于2020-05-20 11:11 被阅读0次

Node.js 笔记二：入门及GeoNode.js GIS相关库
01vue-安装vue
Vue.js开发常见问题解析
Node.js开发：MongoDB安装
Node.js开发：MongoDB使用 CRUD
Node.js认知【读Node.js入门经典笔记】
nodejs 学习路线
Node.js核心入门（二）
Vue.js状态管理工具Vuex快速上手
Vue2简单入门

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>

Node.js 笔记二：入门及GeoNode.js GIS相关库
Node.js 笔记二：入门及GeoNode.js GIS相关库入门 node.js之fs模块 Node.js模...
01vue-安装vue
资源 1.Vue.js2.0从入门到放弃---入门实例（一）2.Vue.js入门学习（一）3.Vue官方中文Api...
Vue.js开发常见问题解析
此前的Vue.js系列文章： Vue.js常用开发知识简要入门（一） Vue.js常用开发知识简要入门（二） Vu...
Node.js开发：MongoDB安装
-- 《Node.js入门经典》，由George Ornbo创作，是一本极好的Node.js入门读物。本文为读该书...
Node.js开发：MongoDB使用 CRUD
-- 《Node.js入门经典》，由George Ornbo创作，是一本极好的Node.js入门读物。本文为读该书...
Node.js认知【读Node.js入门经典笔记】
-- 《Node.js入门经典》，由George Ornbo创作，是一本极好的Node.js入门读物。本文为读该书...
nodejs 学习路线
<1--nodejs入门> 1.准备-- js语言入门: -- JavaScript 教程 ...
Node.js核心入门（二）
目录：Node.js核心入门(一) 全局对象常用工具事件机制 Node.js核心入门（二）文件系统访问 HT...
Vue.js状态管理工具Vuex快速上手
Vue2简单入门 Vue.js再入门 Vue.js使用vue-router构建单页应用 Vue.js状态管理工具V...
Vue2简单入门
Vue2简单入门 Vue.js再入门 Vue.js使用vue-router构建单页应用 Vue.js状态管理工具V...