JS学习记录 | Patrick's Blog

how to git

安装

官网下载最新版
安装流程基本按照默认，具体需求看个人。
考虑到太繁琐就取消了把git bash和git gui添加到右键菜单，但是使用中发现不是太方便。于是摸索了一下添加右键菜单的方式。

打开注册表regedit
定位

计算机\HKEY_CLASSES_ROOT\Directory\Background\shell

新建项 git_bash，在其中新建子项command
修改其中字符串值，效果如下
完成添加

使用

在项目文件夹里右键打开git bash，输入

git init

当前目录下就会出现一个.git的隐藏文件，此时该文件夹已成为受控制的文件夹。

首次通过git使用github的话，需要输入用户名、密码、邮箱等信息进行授权确认。
在github新建仓库repository
依次输入

git add test.txt
git commit -m "first commit" //注释说明
git remote add origin https://github.com/n1cef1sh/VScode_Git_Test.git 
git push -u origin master  //提交到你的仓库

打开仓库确认完成提交

vscode同步代码到github

项目只要有更新和改变，菜单栏会有提示
点击+进行上传，需要填写说明，说明本次改动内容，回车提交
最后进行推送
完成代码上传

JS

基础

被声明的不带值的变量，值将是undefined
重复声明JS变量，将不会丢值。可以通过设置值为undefined进行清空。

    var carName = "porsche";
    var carName ;
    //carName值仍是porsche

JS只有一种数值类型，不用小数点均可
null在js中的数据类型是对象（本应该是null）
undefined 和null值相等，但类型不相等
如果使用new关键词声明变量，则该变量会被创建为对象
事件处理程序可用于处理、验证用户输入、用户动作和浏览器动作
对长字符串换行的最安全做法（但是慢）是使用字符串加法
search() 方法无法设置第二个开始位置参数；
indexOf() 方法无法设置更强大的搜索值（正则表达式）。
提取部分字符串方法：slice()可接受负的索引，substring()不可以，substr()第二个参数为被提取的长度。
replace() 方法不会改变调用它的字符串。它返回的是新字符串。默认只替换首个匹配。
提取字符串字符的安全方法：charAt()返回指定下标的字符串；charCodeAt()返回指定索引的字符unicode编码
把字符串转换为数组split()
在数字运算中，JS会尝试把字符串转换为数字，但是由于加号同时也是级联符号，因此加法比较特殊。字符串加数字
NaN (Not a Number)，其类型是number

    var x = 10;
    var y = 20;
    var z = "The result is: " + x + y;
    //The result is: 1020

Number()还可把日期转换为数字，返回自1970-1-1至该日期的毫秒数。
可以在同一数组里存放不同类型的对象
JS中数组用数字索引，对象用命名索引
用instanceof运算符，假如对象原型包含单词Array则该对象为数组。
shift()会删除首个数组元素，并把其他所有元素位移到更低索引，unshift()在开头添加新元素，反向位移旧元素
sort()按照字符串顺序进行排序，如果排序数值，则需要比值函数来修正

    var points = [40,100,1,5,14,10];
    points.sort(function(a,b){return a- b});//升序

如果数组里是对象，也可以通过比值函数进行排序

JS日期从0到11计数月份，1月是0，12月是11。
Math.random()返回0到1之间的随机数，左闭右开。

    Math.floor(Math.random() * 10);		// 返回 0 至 9 之间的数
    Math.floor(Math.random() * 11);		// 返回 0 至 10 之间的数
    Math.floor(Math.random() * 100);	// 返回 0 至 99 之间的数
    Math.floor(Math.random() * 101);	// 返回 0 至 100 之间的数

一般创建一个随机函数用于生成所有随机整数比较方便

//不包括min和max
function getRndInteger(min, max) {
    return Math.floor(Math.random() * (max - min) ) + min;
}

//包括min和max
function getRndInteger(min, max) {
    return Math.floor(Math.random() * (max - min + 1) ) + min;
}

Hoisting 变量提升

Hoisting 是 JavaScript 将所有声明提升到当前作用域顶部的默认行为（提升到当前脚本或当前函数的顶部）。
简单说就是可以在声明变量之前使用它。

x = 5; // 把 5 赋值给 x
 
elem = document.getElementById("demo"); // 查找元素
elem.innerHTML = x;                     // 在元素中显示 x

var x; // 声明 x

函数和和其他数据类型也同样，相比起来函数会被提升到更靠前的位置。
只有声明被提升：JavaScript only hoists declarations, not initializations. If a variable is declared and initialized after using it, the value will be undefined. For example:

console.log(num); // Returns undefined 
var num;
num = 6;

为了避免 bug，请始终在每个作用域的开头声明所有变量。
严格模式中的 JavaScript 不允许在未被声明的情况下使用变量。

严格模式

在脚本开头进行声明”use strict”,拥有全局作用域；在函数开头声明，拥有局部作用域。
声明严格模式的语法被设计为兼容更早版本的 JavaScript。
使得更容易编写“安全的” JavaScript；把之前可接受的“坏语法”转变为真实的错误。

举例来说，
在普通的 JavaScript 中，错打变量名会创建新的全局变量。
在严格模式中，此举将抛出错误，这样就不可能意外创建全局变量。

具体不允许的事项暂且不记，用到时再学习。

关键词let

通过let声明拥有块作用域的变量。在块{}内声明的变量无法从块外访问。

如果在循环中使用let声明了变量i，那么只有在循环内i才是可见的
在HTML中，使用var定义的全局变量属于window对象；使用let定义的不属于window对象
使用var声明的变量会被提升hositing到把顶端，let则不会。

关键词const

必须声明时赋值
定义了对值的常量引用，so不能更改常量原始值，但是可以更改常量对象的属性。

const PI = 3.141592653589793;
PI = 3.14;      // 会出错
PI = PI + 10;   // 也会出错

// 可以创建 const 对象：
const car = {type:"porsche", model:"911", color:"Black"};
// 可以更改属性：
car.color = "White";
// 可以添加属性：
car.owner = "Bill";

常量数组更改，但不可以重新赋值

const cars = ["Audi", "BMW", "porsche"];
//可以更改元素：
cars[0] = "Honda";
//可以添加元素：
cars.push("Volvo");

const cars = ["Audi", "BMW", "porsche"];
cars = ["Honda", "Toyota", "Volvo"];    // ERROR

注意事项

避免全局变量、new、===、eval()

始终使用局部变量
声明时初始化
意识到自动类型转换，数值会被意外地转换为字符串或NaN
使用default来结束switch
eval()用于将文本作为代码来允许，没有必要使用，有很大完全问题。
减少 DOM 访问，假如访问某个DOM元素若干次，那么只访问一次，并把它作为本地变量来使用：

var obj;
obj = document.getElementById("demo");
obj.innerHTML = "Hello";

常见错误

JS中数字都保存为64位的浮点数Floats

var x = 0.1;
var y = 0.2;
var z = x + y             
//0.30000000000000004

var z = (x * 10 + y * 10) / 10;       
//0.3

在字符串中换行地话，必须使用反斜杠

var x = "Hello \
World!";

先测试未定义，然后测试null

if (typeof myObj !== "undefined" && myObj !== null)

JS对象

对象定义

创建JS对象

var person = {
    firstName:"Bill",
    lastName:"Gates",
    age:62,
    eyeColor:"blue"
};

JS对象是易变的，通过引用来寻址。JS变量不是易变的。

对象构造器

如需向构造器添加一个新属性，必须添加到构造器函数：

function Person(first, last, age, eyecolor) {
    this.firstName = first;
    this.lastName = last;
    this.age = age;
    this.eyeColor = eyecolor;
    this.nationality = "English";//新增
}

与向已有对象添加新方法不同，无法为对象构造器添加新方法。必须在构造器函数内部向一个对象添加方法：

function Person(firstName, lastName, age, eyeColor) {
    this.firstName = firstName;  
    this.lastName = lastName;
    this.age = age;
    this.eyeColor = eyeColor;
    //新增
    this.changeName = function (name) {
        this.lastName = name;
    };
}

对象原型

所有 JavaScript 对象都从原型继承属性和方法。
日期对象继承自 Date.prototype。
数组对象继承自 Array.prototype。
Person 对象继承自 Person.prototype。
Object.prototype 位于原型继承链的顶端：
日期对象、数组对象和 Person 对象都继承自 Object.prototype。

JavaScript prototype 属性允许为对象构造器添加新属性：

function Person(first, last, age, eyecolor) {
    this.firstName = first;
    this.lastName = last;
    this.age = age;
    this.eyeColor = eyecolor;
}
Person.prototype.nationality = "English";

JavaScript prototype 属性也允许为对象构造器添加新方法

function Person(first, last, age, eyecolor) {
    this.firstName = first;
    this.lastName = last;
    this.age = age;
    this.eyeColor = eyecolor;
}
Person.prototype.name = function() {
    return this.firstName + " " + this.lastName;
};

DOM

文档对象模型（Document Object Model）

HTML DOM

方法是能够完成的动作，比如增删HTML元素
属性是能够获取或设置的值，比如改变HTML元素的内容

<html>
<body>

<p id="demo"></p>

<script>
document.getElementById("demo").innerHTML = "Hello World!";
</script>

</body>
</html>

getElementById 方法使用 id=“demo” 来查找元素。 innerHTML 属性可用于获取或替换 HTML 元素的内容。

文档对象代表网页。如果望访问 HTML页面中的任何元素，总是从访问 document 对象开始。

元素

查找HTML元素的方式

通过 id 查找 HTML 元素
通过标签名查找 HTML 元素

var x = document.getElementsByTagName("p");

通过类名查找 HTML 元素
通过 CSS 选择器查找 HTML 元素

var x = document.querySelectorAll("p.intro");

通过 HTML 对象集合查找 HTML 元素

事件监听器

element.addEventListener(event, function, useCapture);

第一个参数是事件的类型（比如 “click” 或 “mousedown”）。

第二个参数是当事件发生时我们需要调用的函数。

第三个参数是布尔值，指定使用事件冒泡还是事件捕获。此参数是可选的。

AJAX

AJAX = Asynchronous JavaScript And XML.

简介

AJAX 代表异步 JavaScript 和 XML。是一种从网页访问 Web 服务器的技术。

网页中发生一个事件（页面加载、按钮点击）
由 JavaScript 创建 XMLHttpRequest 对象
XMLHttpRequest 对象向 web 服务器发送请求
服务器处理该请求
服务器将响应发送回网页
由 JavaScript 读取响应
由 JavaScript 执行正确的动作（比如更新页面）

XMLHttpRequest对象

作为Ajax的核心，XMLHttpRequest 对象用于同幕后服务器交换数据。这意味着可以更新网页的部分，而不需要重新加载整个页面。

向服务器发送请求

xhttp.open("GET", "ajax_info.txt", true);
xhttp.send();

第三个参数async 参数true则是异步，false同步。
GET更简单更快，POST 比 GET 更强大更安全:
缓存文件不是选项（更新服务器上的文件或数据库）
向服务器发送大量数据（POST 无大小限制）
发送用户输入（可包含未知字符）

服务器响应

readyState 属性存留 XMLHttpRequest 的状态。
onreadystatechange 属性定义当 readyState 发生变化时执行的函数。
status 属性和 statusText 属性存有 XMLHttpRequest 对象的状态

JSON

JavaScript Object Notation（JavaScript 对象标记法）是一种存储和交换数据的语法。

WHY JSON

因为 JSON 格式仅仅是文本，它能够轻松地在服务器浏览器之间传输，并用作任何编程语言的数据格式。

//存储数据：
myObj = { name:"Bill Gates",  age:62, city:"Seattle" };
myJSON =  JSON.stringify(myObj);
localStorage.setItem("testJSON", myJSON);

//接收数据：
text = localStorage.getItem("testJSON");
obj =  JSON.parse(text);
document.getElementById("demo").innerHTML = obj.name;

和XML差异

JSON 不使用标签
JSON 更短
JSON 的读写速度更快
JSON 可使用数组

最大的不同在于： XML 必须使用 XML 解析器进行解析。而 JSON 可通过标准的 JavaScript 函数进行解析。

动态HTML表格

<!DOCTYPE html>
<html>
<body>

<h2>做一个基于下拉列表值的表格。</h2>

<select id="myselect" onchange="change_myselect(this.value)">
  <option value="">Choose an option:</option>
  <option value="customers">Customers</option>
  <option value="products">Products</option>
  <option value="suppliers">Suppliers</option>
</select>

<p id="demo"></p>

<script>
function change_myselect(sel) {
  var obj, dbParam, xmlhttp, myObj, x, txt = "";
  obj = { table: sel, limit: 20 };
  dbParam = JSON.stringify(obj);
  xmlhttp = new XMLHttpRequest();
  xmlhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      myObj = JSON.parse(this.responseText);
      txt += "<table border='1'>"
      for (x in myObj) {
        txt += "<tr><td>" + myObj[x].name + "</td></tr>";
      }
      txt += "</table>"    
      document.getElementById("demo").innerHTML = txt;
      }
    };
  xmlhttp.open("POST", "json_demo_db_post.php", true);
  xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
  xmlhttp.send("x=" + dbParam);
}
</script>

</body>
</html>

QQ截图20200921150120.png

小测验

1.我们可以在下列哪个 HTML 元素中放置 Javascript 代码？

正确回答：<script>

2.写 "Hello World" 的正确 Javascript 语法是？

正确回答：document.write("Hello World")

3.插入 Javacript 的正确位置是？

正确回答：<body> 部分和 <head> 部分均可

4.引用名为 "xxx.js" 的外部脚本的正确语法是？

正确答案：<script src="xxx.js">

5.外部脚本必须包含 <script> 标签吗？

正确答案：否

6.如何在警告框中写入 "Hello World"？

正确回答：alert("Hello World")

7.如何创建函数？

正确答案：function myFunction()

8.如何调用名为 "myFunction" 的函数？

正确回答：myFunction()

9.如何编写当 i 等于 5 时执行一些语句的条件语句？

正确答案：if (i==5)

10.如何编写当 i 不等于 5 时执行一些语句的条件语句？

正确回答：if (i != 5)

11.在 JavaScript 中，有多少种不同类型的循环？

正确答案：两种。for 循环和 while 循环。

12.for 循环如何开始？

正确答案：for (i = 0; i <= 5; i++)

13.如何在 JavaScript 中添加注释？

正确答案：//This is a comment

14.可插入多行注释的 JavaScript 语法是？

正确回答：/*This comment has more than one line*/

15.定义 JavaScript 数组的正确方法是？

正确回答：var txt = new Array("George","John","Thomas")

16.如何把 7.25 四舍五入为最接近的整数？

正确回答：Math.round(7.25)

17.如何求得 2 和 4 中最大的数？

正确回答：Math.max(2,4)

18.打开名为 "window2" 的新窗口的 JavaScript 语法是？

正确答案：window.open("http://www.w3school.com.cn","window2")

19.如何在浏览器的状态栏放入一条消息？

正确答案：window.status = "put your message here"

20.如何获得客户端浏览器的名称？

正确答案：navigator.appName

参考

w3school