笔记「JavaScript」

Built in 20190705

前端的作用于采集输入信息，后端进行处理。计算机程序的界面样式，视觉呈现属于前端。本页主要记录我学习 JavaScript 过程中觉得实用的笔记。

JavaScript 作为 Web 浏览器的唯一编程语言，负责让网页“动”起来。它常用于构建具有动态功能的交互式网站。本页转载记录一些能实现一定功能的实例。

行内式写法

<body>
  <input type="button" value="Button" onclick="alert('text')">
</body>

内嵌式写法

<head>
  <script>
    alert('text')
  </script>
</head>

外部式写法

新建一个 XXX.js 文件，然后在 html 中引用它。

<head>
  <script src="XXX.js"></script>
</head>

注释方法

// 单行注释  快捷键：ctrl + /

/*
多行注释  快捷键：shift + alt + a
多行注释
*/

输入输出语句

// 输入框
prompt('XXX');
// 弹窗
alert('XXX');
// console 控制台输出
console.log('XXX');

变量

变量是用于存放数据的 容器，是程序在设备内存中申请的一块存放数据的空间。

声明变量：var XXX;（声明名称是 XXX 的变量）
变量赋值：XXX = XX;（将 XXX 变量赋值为 XX）
变量初始化：var XXX ='XX';（声明一个变量 XXX 并赋值为 XX）

var myName = prompt('请输入姓名');
alert(myName);

需要同时声明多个变量时可只写一个 var，变量间用逗号隔开。

变量命名规则

变量名称由英语字母大小写 A-Z,a-z、数字 0-9、下划线 _、美元符号 $ 组成。

字母需区分大小写： Name name
不能以数字开头： 996ICU
不能使用保留词： var for
使用有意义的英文单词： mingzi -> name
遵循驼峰命名法： myBlog

数据类型

JavaSpript 的数据主要分为 简单数据类型 和 复杂数据类型。

简单数据类

类型	说明	默认值
Number	数字型，17、0.17	0
String	字符串类型，“视由”	""
Boolean	布尔值类型，ture、false	false
Undefinend	未定义数据类型	undefinend
Null	空值	null

数字型 Number

数字型可以是整数也可以是小数，同时支持各种进制表示，其中在数字前加 0 为八进制，加 0x 为十六进制。

NaN 表示非数字，isNaN() 可用于判断是否为非数字，是则返回 false，反之返回 true。

console.log(isNaN(0.17)); // 显示 falsh

字符串型 String

字符串型使用引号包含表示，推荐使用单引号，当存在多个引号嵌套时使用 外单内双 或者 内双外单，需要实现其他功能可参考下列字符串转义符表。

转义符	说明
\n	换行符
\	斜杠
'	单引号
"	双引号
\t	缩进
\b	空格

字符串的拼接使用加号 + 连接即可，任何数据类型与字符串型拼接都将变成字符串型。

console.log('视由' + '文化');   // 显示 视由文化
console.log('视由' + 12);   // 显示 视由12
console.log('12' + 12);   // 显示 1212
console.log(12 + 12);   // 显示 24

布尔型 Boolean

布尔型数据包括 ture 和 false，其中当参与加法运算时 ture 当 1 来看， flase 当 0 来看。

未定义数据类型 Undefinend

一个变量声明未赋值，则其类型为未定义数据类型。

var X = undefinend;
console.log('X' + '视由');   // 显示 undefinend视由
console.log('X' + 12);   // 显示 NaN

空值 NaN

当变量的值为 null，则它的数据类型为空值。

var X = null;
console.log('X' + '视由');   // 显示 null视由
console.log('X' + '12');   // 显示 12

获取数据信息

可以使用 length 函数获取字符串长度。

var X = 'XXXXXX';
console.log(X.length);   // 显示 6

可以使用 typeof 函数获取字符串长度。

var X = 'XXXXXX';
console.log(typeof X);   // 显示 string

数据类型的转换

将数据转换为字符串型，下列三种方法均可，推荐使用方法三 隐式转换。

var X = 12;
console.log(String(X));   // 显示 12 (字符串型)

var X = 12;
var Y = X.toString();
console.log(Y);   // 显示 12 (字符串型)

var X = 12;
console.log(X + '');   // 显示 12 (字符串型)

将数据转换为数值型，其中 parseInt 函数会将小数转换为向下取整的整数，推荐使用方法四 隐式转换。

console.log(parseInt('12'));   // 显示 12 (数值型)
console.log(parseInt(12.7));   // 显示 12 (数值型)
console.log(parseInt(12px));   // 显示 12 (数值型)
console.log(parseInt(px12));   // 显示 NaN (空值)

console.log(parseFloat('12'));   // 显示 12 (数值型)
console.log(parseFloat(12.7));   // 显示 12.7 (数值型)
console.log(parseFloat(12px));   // 显示 12 (数值型)
console.log(parseFloat(px12));   // 显示 NaN (空值)

console.log(Number('12'));   // 显示 12 (数值型)

console.log('12' - 0);   // 显示 12 (数值型)
console.log('12' * 1);   // 显示 12 (数值型)
console.log('17' - '12');   // 显示 5 (数值型)

部分实例

互换两个变量的值

var temp; //临时变量
var A;
var B;
temp = A;
A = B;
B = temp;

点击按钮替换文本

<!DOCTYPE html>
<html>
<head>
    <script>
        function myFunction() {
            document.getElementById("demo").innerHTML = "2";
        }
    </script>
</head>
<body>
    <h2>简单计算</h2>
    <p id="demo">1+1=？。</p>
    <button type="button" onclick="myFunction()">计算</button>
</body>
</html>

点击按钮复制文本

<style type="text/css">
   .wrapper {position: relative;}
   #input {position: absolute;top: 0;left: 0;opacity: 0;z-index: -10;}
</style>

<div class="wrapper">
   <p id="text">需要复制的文本</p>
   <textarea id="input"></textarea>
   <button onclick="copyText()">按钮显示文本</button>

  <script type="text/javascript">
    function copyText() {
      var text = document.getElementById("text").innerText;
      var input = document.getElementById("input");
      input.value = text;
      input.select(); 
      document.execCommand("copy");
      alert("点击后弹出消息框文本");
    }
  </script>

顶部线形加载进度条

<script src="http://cdn.bootcss.com/pace/1.0.2/pace.min.js"></script>
<script>
{
function getElementsByClass(key){
var arr = new Array();
var tags=document.getElementsByTagName("*");
    for(var i=0;i<tags.length;i++){
        if(tags[i].className.match(new RegExp('(\\s|^)'+key+'(\\s|$)'))){
            arr.push(tags[i]);
        }
    }
return arr;
}
var timer = window.setInterval(function(){
    var el = getElementsByClass('pace');
    if(el.length>0){
        var a = document.createElement('div');
        a.setAttribute('class', 'spinner');
        var b = document.createElement('div');
        b.setAttribute('class', 'spinner-icon');
        el[0].appendChild(a);
        a.appendChild(b);
        window.clearInterval(timer);
    }
}, 3);
}
</script>
<style>
.pace .spinner {
position: fixed;
top: 15px;
right: 15px;
z-index: 2000;
display: block;
}
.pace .spinner-icon {
width: 18px;
height: 18px;
-webkit-box-sizing: border-box;
box-sizing: border-box;
border: solid 2px transparent;
border-top-color: #2299dd;
border-left-color: #2299dd;
border-radius: 50%;
-webkit-animation: nprogress-spinner .4s linear infinite;
animation: nprogress-spinner .4s linear infinite;
}
@-webkit-keyframes nprogress-spinner {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@keyframes nprogress-spinner {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@keyframes fadeOut {
from {
opacity: 1;
}
to {
opacity: 0;
}
}
.pace {
-webkit-pointer-events: none;
pointer-events: none;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
-webkit-transition: opacity 0.8s ease-in-out;
-moz-transition: opacity 0.8s ease-in-out;
-o-transition: opacity 0.8s ease-in-out;
transition: opacity 0.8s ease-in-out;
}
.pace-inactive {
opacity:0;
filter: alpha(opacity=0);
}
.pace .pace-progress {
background: #2299dd;
position: fixed;
z-index: 2000;
top: 0;
right: 100%;
width: 100%;
height: 3px;
box-shadow: 0 0 3px #2299dd;
}
</style>

参考资料

JavaScript从零基础入门到精通 http://yun.itheima.com/course/551.html
维基百科 https://zh.wikipedia.org/