前端基礎之JavaScript

来源:https://www.cnblogs.com/hxf175336/archive/2018/07/12/9300189.html
-Advertisement-
Play Games

JavaScript概述 ECMAScript和JavaScript的關係 1996年11月，JavaScript的創造者--Netscape公司，決定將JavaScript提交給國際標準化組織ECMA，希望這門語言能夠成為國際標準。次年，ECMA發佈262號標準文件（ECMA-262）的第一版，規 ...


JavaScript概述

ECMAScript和JavaScript的關係

1996年11月，JavaScript的創造者--Netscape公司，決定將JavaScript提交給國際標準化組織ECMA，希望這門語言能夠成為國際標準。次年，ECMA發佈262號標準文件（ECMA-262）的第一版，規定了瀏覽器腳本語言的標準，並將這種語言稱為ECMAScript，這個版本就是1.0版。

該標準一開始就是針對JavaScript語言制定的，但是沒有稱其為JavaScript，有兩個方面的原因。一是商標，JavaScript本身已被Netscape註冊為商標。而是想體現這門語言的制定者是ECMA，而不是Netscape，這樣有利於保證這門語言的開發性和中立性。

因此ECMAScript和JavaScript的關係是，前者是後者的規格，後者是前者的一種實現。

ECMAScript的歷史

年份 名稱 描述
1997 ECMAScript 1 第一個版本
1998 ECMAScript 2 版本變更
1999 ECMAScript 3

添加正則表達式

添加try/catch
  ECMAScript 4 沒有發佈
2009 ECMAScript 5

添加"strict mode"嚴格模式

添加JSON支持
2011 ECMAScript 5.1 版本變更
2015 ECMAScript 6 添加類和模塊
2016 ECMAScript 7

增加指數運算符（**）

增加Array.prototype.includes

註：ES6就是指ECMAScript 6。

儘管 ECMAScript 是一個重要的標準，但它並不是 JavaScript 唯一的部分，當然，也不是唯一被標準化的部分。實際上，一個完整的 JavaScript 實現是由以下 3 個不同部分組成的：

  • 核心（ECMAScript） 
  • 文檔對象模型（DOM） Document object model (整合js，css，html)
  • 瀏覽器對象模型（BOM） Broswer object model（整合js和瀏覽器）

簡單地說，ECMAScript 描述了JavaScript語言本身的相關內容。

JavaScript 是腳本語言
JavaScript 是一種輕量級的編程語言。

JavaScript 是可插入 HTML 頁面的編程代碼。

JavaScript 插入 HTML 頁面後，可由所有的現代瀏覽器執行。

JavaScript 很容易學習。

JavaScript引入方式

Script標簽內寫代碼

<script>
  // 在這裡寫你的JS代碼
</script>

引入額外的JS文件

<script src="myscript.js"></script>

JavaScript語言規範

註釋（註釋是代碼之母）

複製代碼 
// 這是單行註釋

/*
這是
多行註釋
*/
複製代碼

結束符

JavaScript中的語句要以分號（;）為結束符。

JavaScript語言基礎

變數聲明

  1. JavaScript的變數名可以使用_，數字，字母，$組成，不能以數字開頭。
  2. 聲明變數使用 var 變數名; 的格式來進行聲明
var name = "Alex";
var age = 18;

註意：

變數名是區分大小寫的。

推薦使用駝峰式命名規則。

保留字不能用做變數名。

補充：

ES6新增了let命令，用於聲明變數。其用法類似於var，但是所聲明的變數只在let命令所在的代碼塊內有效。例如：for迴圈的計數器就很適合使用let命令。

for (let i=0;i<arr.length;i++){...}

ES6新增const用來聲明常量。一旦聲明，其值就不能改變。

const PI = 3.1415;
PI // 3.1415

PI = 3
// TypeError: "PI" is read-only

再次補充：

abstract
boolean
byte
char
class
const
debugger
double
enum
export
extends
final
float
goto
implements
import
int
interface
long
native
package
private
protected
public
short
static
super
synchronized
throws
transient
volatile
保留字列表

 

JavaScript數據類型

JavaScript擁有動態類型

var x;  // 此時x是undefined
var x = 1;  // 此時x是數字
var x = "Alex"  // 此時x是字元串

數值(Number)

JavaScript不區分整型和浮點型，就只有一種數字類型。

var a = 12.34;
var b = 20;
var c = 123e5;  // 12300000
var d = 123e-5;  // 0.00123

還有一種NaN，表示不是一個數字（Not a Number）。

常用方法：

parseInt("123")  // 返回123
parseInt("ABC")  // 返回NaN,NaN屬性是代表非數字值的特殊值。該屬性用於指示某個值不是數字。
parseFloat("123.456")  // 返回123.456

字元串(String)

var a = "Hello"
var b = "world;
var c = a + b; 
console.log(c);  // 得到Helloworld

常用方法：

方法 說明
.length 返回長度
.trim() 移除空白
.trimLeft() 移除左邊的空白
.trimRight() 移除右邊的空白
.charAt(n) 返回第n個字元
.concat(value, ...) 拼接
.indexOf(substring, start) 子序列位置
.substring(from, to) 根據索引獲取子序列
.slice(start, end) 切片
.toLowerCase() 小寫
.toUpperCase() 大寫
.split(delimiter, limit) 分割

 拼接字元串一般使用“+”

string.slice(start, stop)和string.substring(start, stop)：

兩者的相同點：
如果start等於end，返回空字元串
如果stop參數省略，則取到字元串末
如果某個參數超過string的長度，這個參數會被替換為string的長度

substirng()的特點：
如果 start > stop ，start和stop將被交換
如果參數是負數或者不是數字，將會被0替換

silce()的特點：
如果 start > stop 不會交換兩者
如果start小於0，則切割從字元串末尾往前數的第abs(start)個的字元開始(包括該位置的字元)
如果stop小於0，則切割在從字元串末尾往前數的第abs(stop)個字元結束(不包含該位置字元)
slice和substring的區別

 

補充：

ES6中引入了模板字元串。模板字元串（template string）是增強版的字元串，用反引號（`）標識。它可以當做普通字元串使用，也可以用來定義多行字元串，或者在字元串中嵌入變數。

複製代碼 
// 普通字元串
`這是普通字元串！`
// 多行文本
`這是多行的
文本`
// 字元串中嵌入變數
var name = "q1mi", time = "today";
`Hello ${name}, how are you ${time}?`
複製代碼

註意：

如果模板字元串中需要使用反引號，則在其前面要用反斜杠轉義。

JSHint啟用ES6語法支持:/* jshint esversion: 6 */

布爾值(Boolean)

區別於Python，true和false都是小寫。

var a = true;
var b = false;

""(空字元串)、0、null、undefined、NaN都是false。

null和undefined

  • null表示值是空，一般在需要指定或清空一個變數時才會使用，如 name=null;
  • undefined表示當聲明一個變數但未初始化時，該變數的預設值是undefined。還有就是函數無明確的返回值時，返回的也是undefined。

null表示變數的值是空，undefined則表示只聲明瞭變數，但還沒有賦值。

還不明白，上圖吧！

對象(Object)

JavaScript 中的所有事物都是對象：字元串、數值、數組、函數...此外，JavaScript 允許自定義對象。

JavaScript 提供多個內建對象，比如 String、Date、Array 等等。

對象只是帶有屬性和方法的特殊數據類型。

數組

數組對象的作用是：使用單獨的變數名來存儲一系列的值。類似於Python中的列表。

var a = [123, "ABC"];
console.log(a[1]);  // 輸出"ABC"

 常用方法：

方法 說明
.length 數組的大小
.push(ele) 尾部追加元素
.pop() 獲取尾部的元素
.unshift(ele) 頭部插入元素
.shift() 頭部移除元素
.slice(start, end) 切片
.reverse() 反轉
.join(seq) 將數組元素連接成字元串
.concat(val, ...) 連接數組
.sort() 排序
.forEach() 將數組的每個元素傳遞給回調函數
.splice() 刪除元素，並向數組添加新元素。
.map() 返回一個數組元素調用函數處理後的值的新數組

關於sort()需要註意：

如果調用該方法時沒有使用參數，將按字母順序對數組中的元素進行排序，說得更精確點，是按照字元編碼的順序進行排序。要實現這一點，首先應把數組的元素都轉換成字元串（如有必要），以便進行比較。

如果想按照其他標準進行排序，就需要提供比較函數，該函數要比較兩個值，然後返回一個用於說明這兩個值的相對順序的數字。比較函數應該具有兩個參數 a 和 b，其返回值如下：

若 a 小於 b，在排序後的數組中 a 應該出現在 b 之前，則返回一個小於 0 的值。
若 a 等於 b，則返回 0。
若 a 大於 b，則返回一個大於 0 的值。

示例：

function sortNumber(a,b){
    return a - b
}
var arr1 = [11, 100, 22, 55, 33, 44]
arr1.sort(sortNumber)

關於遍曆數組中的元素，可以使用下麵的方式：

var a = [10, 20, 30, 40];
for (var i=0;i<a.length;i++) {
  console.log(i);
}

forEach()

語法：

forEach(function(currentValue, index, arr), thisValue)

參數：

參數描述
function(currentValue, index, arr) 必需。 數組中每個元素需要調用的函數。
函數參數:
參數描述
currentValue 必需。當前元素
index 可選。當前元素的索引值。
arr 可選。當前元素所屬的數組對象。
thisValue 可選。傳遞給函數的值一般用 "this" 值。
如果這個參數為空， "undefined" 會傳遞給 "this" 值

splice()

語法：

splice(index,howmany,item1,.....,itemX)

參數： 

參數描述
index 必需。規定從何處添加/刪除元素。
該參數是開始插入和（或）刪除的數組元素的下標，必須是數字。
howmany 必需。規定應該刪除多少元素。必須是數字，但可以是 "0"。
如果未規定此參數，則刪除從 index 開始到原數組結尾的所有元素。
item1, ..., itemX 可選。要添加到數組的新元素

map()

語法：

map(function(currentValue,index,arr), thisValue)

參數：

參數描述
function(currentValue, index,arr) 必須。函數，數組中的每個元素都會執行這個函數
函數參數:
參數描述
currentValue 必須。當前元素的值
index 可選。當期元素的索引值
arr 可選。當期元素屬於的數組對象
thisValue 可選。對象作為該執行回調時使用，傳遞給函數，用作 "this" 的值。
如果省略了 thisValue ，"this" 的值為 "undefined"

補充：

ES6新引入了一種新的原始數據類型（Symbol），表示獨一無二的值。它是JavaScript語言的第7種數據類型。

類型查詢

typeof "abc"  // "string"
typeof null  // "object"
typeof true  // "boolean"
typeof 123 // "number"

typeof是一個一元運算符（就像++，--，！，- 等一元運算符），不是一個函數，也不是一個語句。

對變數或值調用 typeof 運算符將返回下列值之一：

  • undefined - 如果變數是 Undefined 類型的
  • boolean - 如果變數是 Boolean 類型的
  • number - 如果變數是 Number 類型的
  • string - 如果變數是 String 類型的
  • object - 如果變數是一種引用類型或 Null 類型的

運算符

算數運算符

+ - * / % ++ --

比較運算符

> >= < <= != == === !==

註意：

1 == “1”  // true
1 === "1"  // false

邏輯運算符

&& || !

賦值運算符

= += -= *= /=

流程式控制制

if-else

複製代碼 
var a = 10;
if (a > 5){
  console.log("yes");
}else {
  console.log("no");
}
複製代碼

if-else if-else 

複製代碼 
var a = 10;
if (a > 5){
  console.log("a > 5");
}else if (a < 5) {
  console.log("a < 5");
}else {
  console.log("a = 5");
}
複製代碼

switch

複製代碼 
var day = new Date().getDay();
switch (day) {
  case 0:
  console.log("Sunday");
  break;
  case 1:
  console.log("Monday");
  break;
default:
  console.log("...")
}
複製代碼

switch中的case子句通常都會加break語句，否則程式會繼續執行後續case中的語句。

for

for (var i=0;i<10;i++) {
  console.log(i);
}

while

var i = 0;
while (i < 10) {
  console.log(i);
  i++;
}

三元運算

var a = 1;
var b = 2;
var c = a > b ? a : b

函數

函數定義

JavaScript中的函數和Python中的非常類似，只是定義方式有點區別。

複製代碼 
// 普通函數定義
function f1() {
  console.log("Hello world!");
}

// 帶參數的函數
function f2(a, b) {
  console.log(arguments);  // 內置的arguments對象
  console.log(arguments.length);
  console.log(a, b);
}

// 帶返回值的函數
function sum(a, b){
  return a + b;
}
sum(1, 2);  // 調用函數

// 匿名函數方式
var sum = function(a, b){
  return a + b;
}
sum(1, 2);

// 立即執行函數
(function(a, b){
  return a + b;
})(1, 2);
複製代碼

補充：

ES6中允許使用“箭頭”（=>）定義函數。

var f = v => v;
// 等同於
var f = function(v){
  return v;
}

如果箭頭函數不需要參數或需要多個參數，就是用圓括弧代表參數部分：

複製代碼 
var f = () => 5;
// 等同於
var f = function(){return 5};

var sum = (num1, num2) => num1 + num2;
// 等同於
var sum = function(num1, num2){
  return num1 + num2;
}
複製代碼

函數中的arguments參數

複製代碼 
function add(a,b){
  console.log(a+b);
  console.log(arguments.length)
}

add(1,2)
複製代碼

輸出：

3
2

註意：

函數只能返回一個值，如果要返回多個值，只能將其放在數組或對象中返回。

函數的全局變數和局部變數

局部變數：

在JavaScript函數內部聲明的變數（使用 var）是局部變數，所以只能在函數內部訪問它（該變數的作用域是函數內部）。只要函數運行完畢，本地變數就會被刪除。

全局變數：

在函數外聲明的變數是全局變數，網頁上的所有腳本和函數都能訪問它。

變數生存周期：

JavaScript變數的生命期從它們被聲明的時間開始。

局部變數會在函數運行以後被刪除。

全局變數會在頁面關閉後被刪除。

作用域

首先在函數內部查找變數，找不到則到外層函數查找，逐步找到最外層。

幾個例子：

1.

複製代碼 
var city = "BeiJing";
function f() {
  var city = "ShangHai";
  function inner(){
    var city = "ShenZhen";
    console.log(city);
  }
  inner();
}

f();  //輸出結果是？
複製代碼

2.

複製代碼 
var city = "BeiJing";
function Bar() {
  console.log(city);
}
function f() {
  var city = "ShangHai";
  return Bar;
}
var ret = f();
ret();  // 列印結果是？
複製代碼

3.閉包

複製代碼 
var city = "BeiJing";
function f(){
    var city = "ShangHai";
    function inner(){
        console.log(city);
    }
    return inner;
}
var ret = f();
ret();
複製代碼

詞法分析（嘗試理解）

JavaScript中在調用函數的那一瞬間，會先進行詞法分析。

詞法分析的過程：

當函數調用的前一瞬間，會先形成一個激活對象：Avtive Object（AO），並會分析以下3個方面：

1:函數參數，如果有，則將此參數賦值給AO，且值為undefined。如果沒有，則不做任何操作。
2:函數局部變數，如果AO上有同名的值，則不做任何操作。如果沒有，則將此變數賦值給AO，並且值為undefined。
3:函數聲明，如果AO上有，則會將AO上的對象覆蓋。如果沒有，則不做任何操作。

函數內部無論是使用參數還是使用局部變數都到AO上找。

看兩個例子：

複製代碼 
var age = 18;
function foo(){
  console.log(age);
  var age = 22;
  console.log(age);
}
foo();  // 問：執行foo()之後的結果是？
複製代碼

 第二題：

複製代碼 
var age = 18;
function foo(){
  console.log(age);
  var age = 22;
  console.log(age);
  function age(){
    console.log("呵呵");
  }
  console.log(age);
}
foo();  // 執行後的結果是？
複製代碼 
詞法分析過程：
1、分析參數，有一個參數，形成一個 AO.age=undefine;
2、分析變數聲明，有一個 var age, 發現 AO 上面已經有一個 AO.age，因此不做任何處理
3、分析函數聲明，有一個 function age(){...} 聲明， 則把原有的 age 覆蓋成 AO.age=function(){...};

最終，AO上的屬性只有一個age，並且值為一個函數聲明

執行過程：
註意：執行過程中所有的值都是從AO對象上去尋找

1、執行第一個 console.log(age) 時，此時的 AO.age 是一個函數，所以第一個輸出的一個函數
2、這句 var age=22; 是對 AO.age 的屬性賦值， 此時AO.age=22 ，所以在第二個輸出的是 2
3、同理第三個輸出的還是22, 因為中間再沒有改變age值的語句了
答案解析

 

內置對象和方法

JavaScript中的所有事物都是對象：字元串、數字、數組、日期，等等。在JavaScript中，對象是擁有屬性和方法的數據。

我們在學習基本數據類型的時候已經帶大家瞭解了，JavaScript中的Number對象、String對象、Array對象等。

註意var s1 = "abc"和var s2 = new String("abc")的區別：typeof s1 --> string而 typeof s2 --> Object

自定義對象

JavaScript的對象（Object）本質上是鍵值對的集合（Hash結構），但是只能用字元串作為鍵。

var a = {"name": "Alex", "age": 18};
console.log(a.name);
console.log(a["age"]);

遍歷對象中的內容：

var a = {"name": "Alex", "age": 18};
for (var i in a){
  console.log(i, a[i]);
}

事情並沒有那麼簡單...

創建對象：

var person=new Object();  // 創建一個person對象
person.name="Alex";  // person對象的name屬性
person.age=18;  // person對象的age屬性

註意：

ES6中提供了Map數據結構。它類似於對象，也是鍵值對的集合，但是“鍵”的範圍不限於字元串，各種類型的值（包括對象）都可以當做鍵。

也就是說，Object結構提供了“字元串--值”的對應，Map結構提供了“值--值”的對應，是一種更完善的Hash結構實現。

var m = new Map();
var o = {p: "Hello World"}

m.set(o, "content"}
m.get(o)  // "content"

m.has(o)  // true
m.delete(o)  // true
m.has(o) // false
map

 

 擴展：

// 父類構造函數
var Car = function (loc) {
  this.loc = loc;
};

// 父類方法
Car.prototype.move = function () {
  this.loc ++;
};

// 子類構造函數
var Van = function (loc) {
  Car.call(this, loc);
};

// 繼承父類的方法
Van.prototype = Object.create(Car.prototype);
// 修複 constructor
Van.prototype.constructor = Van;
// 擴展方法
Van.prototype.grab = function () {
  /* ... */
};
JavaScript面向對象之繼承

 

Date對象

創建Date對象

複製代碼 
//方法1：不指定參數
var d1 = new Date();
console.log(d1.toLocaleString());
//方法2：參數為日期字元串
var d2 = new Date("2004/3/20 11:12");
console.log(d2.toLocaleString());
var d3 = new Date("04/03/20 11:12");
console.log(d3.toLocaleString());
//方法3：參數為毫秒數
var d3 = new Date(5000);
console.log(d3.toLocaleString());
console.log(d3.toUTCString());

//方法4：參數為年月日小時分鐘秒毫秒
var d4 = new Date(2004,2,20,11,12,0,300);
console.log(d4.toLocaleString());  //毫秒並不直接顯示
複製代碼

Date對象的方法：

複製代碼 
var d = new Date(); 
//getDate()                 獲取日
//getDay ()                 獲取星期
//getMonth ()               獲取月（0-11）
//getFullYear ()            獲取完整年份
//getYear ()                獲取年
//getHours ()               獲取小時
//getMinutes ()             獲取分鐘
//getSeconds ()             獲取秒
//getMilliseconds ()        獲取毫秒
//getTime ()                返回累計毫秒數(從1970/1/1午夜)
複製代碼

練習：

編寫代碼，將當前日期按“2017-12-27 11:11 星期三”格式輸出。

詳細Date對象方法：http://www.w3school.com.cn/jsref/jsref_obj_date.asp

JSON對象

複製代碼 
var str1 = '{"name": "Alex", "age": 18}';
var obj1 = {"name": "Alex", "age": 18};
// JSON字元串轉換成對象
var obj = JSON.parse(str1); 
// 對象轉換成JSON字元串
var str = JSON.stringify(obj1);
複製代碼

RegExp對象

//RegExp對象

//創建正則對象方式1
// 參數1 正則表達式(不能有空格)
// 參數2 匹配模式：常用g(全局匹配;找到所有匹配，而不是在第一個匹配後停止)和i(忽略大小寫)

// 用戶名只能是英文字母、數字和_，並且首字母必須是英文字母。長度最短不能少於6位 最長不能超過12位。

// 創建RegExp對象方式（逗號後面不要加空格）
var reg1 = new RegExp("^[a-zA-Z][a-zA-Z0-9_]{5,11}$");

// 匹配響應的字元串
var s1 = "bc123";

//RegExp對象的test方法，測試一個字元串是否符合對應的正則規則，返回值是true或false。
reg1.test(s1);  // true

// 創建方式2
// /填寫正則表達式/匹配模式（逗號後面不要加空格）
var reg2 = /^[a-zA-Z][a-zA-Z0-9_]{5,11}$/;

reg2.test(s1);  // true


// String對象與正則結合的4個方法
var s2 = "hello world";

s2.match(/o/g);         // ["o", "o"]             查找字元串中 符合正則 的內容
s2.search(/h/g);        // 0                      查找字元串中符合正則表達式的內容位置
s2.split(/o/g);         // ["hell", " w", "rld"]  按照正則表達式對字元串進行切割
s2.replace(/o/g, "s");  // "hells wsrld"          對字元串按照正則進行替換

// 關於匹配模式：g和i的簡單示例
var s1 = "name:Alex age:18";

s1.replace(/a/, "哈哈哈");      // "n哈哈哈me:Alex age:18"
s1.replace(/a/g, "哈哈哈");     // "n哈哈哈me:Alex 哈哈哈ge:18"      全局匹配
s1.replace(/a/gi, "哈哈哈");    // "n哈哈哈me:哈哈哈lex 哈哈哈ge:18"  不區分大小寫


// 註意事項1：
// 如果regExpObject帶有全局標誌g，test()函數不是從字元串的開頭開始查找，而是從屬性regExpObject.lastIndex所指定的索引處開始查找。
// 該屬性值預設為0，所以第一次仍然是從字元串的開頭查找。
// 當找到一個匹配時，test()函數會將regExpObject.lastIndex的值改為字元串中本次匹配內容的最後一個字元的下一個索引位置。
// 當再次執行test()函數時，將會從該索引位置處開始查找，從而找到下一個匹配。
// 因此，當我們使用test()函數執行了一次匹配之後，如果想要重新使用test()函數從頭開始查找，則需要手動將regExpObject.lastIndex的值重置為 0。
// 如果test()函數再也找不到可以匹配的文本時，該函數會自動把regExpObject.lastIndex屬性重置為 0。

var reg3 = /foo/g;
// 此時 regex.lastIndex=0
reg3.test('foo'); // 返回true
// 此時 regex.lastIndex=3
reg3.test('xxxfoo'); // 還是返回true
// 所以我們在使用test()方法校驗一個字元串是否完全匹配時，一定要加上^和$符號。

// 註意事項2(說出來你可能不信系列)：
// 當我們不加參數調用RegExpObj.test()方法時, 相當於執行RegExpObj.test("undefined"), 並且/undefined/.test()預設返回true。
var reg4 = /^undefined$/;
reg4.test(); // 返回true
reg4.test(undefined); // 返回true
reg4.test("undefined"); // 返回true
RegExp相關

 

Math對象

abs(x)      返回數的絕對值。
exp(x)      返回 e 的指數。
floor(x)    對數進行下舍入。
log(x)      返回數的自然對數（底為e）。
max(x,y)    返回 x 和 y 中的最高值。
min(x,y)    返回 x 和 y 中的最低值。
pow(x,y)    返回 x 的 y 次冪。
random()    返回 0 ~ 1 之間的隨機數。
round(x)    把數四捨五入為最接近的整數。
sin(x)      返回數的正弦。
sqrt(x)     返回數的平方根。
tan(x)      返回角的正切。
Math

 


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • Android使用ToolBar+DrawerLayout+NavigationView實現側滑抽屜效果
    # 學習目的 - 學會使用`DrawerLayout` - 學會使用`NavigationView` - 學會使用ToolBar+DrawerLayout+NavigationView實現側滑抽屜效果 - 學會實現Toolbar在頂部以及Toolbar被遮擋的兩種效果 ...
  • 前端基礎之BOM和DOM
    前戲 到目前為止，我們已經學過了JavaScript的一些簡單的語法。但是這些簡單的語法，並沒有和瀏覽器有任何交互。 也就是我們還不能製作一些我們經常看到的網頁的一些交互，我們需要繼續學習BOM和DOM相關知識。 JavaScript分為 ECMAScript，DOM，BOM。 BOM（Browse ...
  • jquery實現顯示textarea輸入字元數
    起初會想到使用keyup、keydown、keypress或者是onchange事件，onchange需要失去焦點才觸發， 其它三個有些對按住鍵盤某個鍵不放不生效，有些對使用中文輸入法正在輸入時統計不正確。 網上找到一種方法就是綁定事件input propertychange 效果如下： ...
  • SVG的學習(34—36)
    使用js來動態繪製svg圖片，首先就是要創建svg 節點。 使用createElementNS(),語法： 參數： 有效的命名空間URL有： 代碼舉例： ...
  • 保存頭像- vue項目-base64字元串轉圖片
    param:{ id:"", customerHead: "", } } } 如果修改頭像,向後臺傳base64字元串,否則會傳原圖片路徑,後臺判斷是否是base64字元串. 如果是base64字元串,則對base64字元串進行處理,在後臺伺服器生成圖片.此處需要對base64字元串進行處理,如圖所 ...
  • 用 js 實現博客園的 “回到頂部” 功能——簡易實用~~~
    當載入頁面時，“回到頂部” 預設不顯示，當拖滾動條後動態顯示；當點擊 “回到頂部” 時，勻減速回到頂部。 佈局效果如下： 1、首先在設置中的“頁面定製CSS代碼”中，添加如下css代碼（也可以修改成自己喜歡的樣式噢~）： 2、然後在“博客側邊欄公告（支持HTML代碼）（支持JS代碼）”中，添加如下j ...
  • 小程式之生成朋友圈圖片
    微信的小程式是沒有分享到朋友圈的功能的。小程式目前只能分享到群里或者發給好友。但是業務需要方便推廣，需要分享到朋友圈。 經過度娘後，得出了以下思路：利用小程式canvas繪製圖片，將背景圖和二維碼繪製成一張圖片。百度過幾個好的demo,參考了一下，本以為會很簡單就解決這個問題，然而這個並不是小程式c ...
  • 前端(五)：JavaScript面向對象之內建對象
    一、數據類型 js中數據類型分為兩種，原始數據累次能夠和引用數據類型。 1.原始數據類型 2.引用數據類型 3.原始值和引用值 特別提醒的是，在js中，字元串被看做是原始類型，這意味著下麵的操作是非常耗記憶體的。 二、本地對象(內建對象) 1.Array對象 1.創建語法 2.屬性 3.方法 4.數組 ...
一周排行
    -Advertisement-
    Play Games
  • 如何基於surging跨網關跨語言進行緩存降級
    基於.NET Framework 4.8 開發的深度學習模型部署測試平臺，提供了YOLO框架的主流系列模型，包括YOLOv8~v9，以及其系列下的Det、Seg、Pose、Obb、Cls等應用場景，同時支持圖像與視頻檢測。模型部署引擎使用的是OpenVINO™、TensorRT、ONNX runti... ...
  • 十年沉澱，重啟開發之路
    十年沉澱，重啟開發之路 十年前，我沉浸在開發的海洋中，每日與代碼為伍，與演算法共舞。那時的我，滿懷激情，對技術的追求近乎狂熱。然而，隨著歲月的流逝，生活的忙碌逐漸占據了我的大部分時間，讓我無暇顧及技術的沉澱與積累。 十年間，我經歷了職業生涯的起伏和變遷。從初出茅廬的菜鳥到逐漸嶄露頭角的開發者，我見證了 ...
  • C#.NET體系圖文概述—2024最全總結
    C# 是一種簡單、現代、面向對象和類型安全的編程語言。.NET 是由 Microsoft 創建的開發平臺，平臺包含了語言規範、工具、運行，支持開發各種應用，如Web、移動、桌面等。.NET框架有多個實現，如.NET Framework、.NET Core（及後續的.NET 5+版本），以及社區版本M... ...
  • 班級擂臺（光榮）榜 - 極簡教育小工具
    前言 本文介紹瞭如何使用三菱提供的MX Component插件實現對三菱PLC軟元件數據的讀寫，記錄了使用電腦模擬，模擬PLC，直至完成測試的詳細流程，並重點介紹了在這個過程中的易錯點，供參考。 用到的軟體： 1. PLC開發編程環境GX Works2，GX Works2下載鏈接 https:// ...
  • web server apache tomcat11-31-websocket
    前言 整理這個官方翻譯的系列，原因是網上大部分的 tomcat 版本比較舊，此版本為 v11 最新的版本。 開源項目 從零手寫實現 tomcat minicat 別稱【嗅虎】心有猛虎，輕嗅薔薇。 系列文章 web server apache tomcat11-01-官方文檔入門介紹 web serv ...
  • day31-jQuery
    1、jQuery介紹 jQuery是什麼 jQuery是一個快速、簡潔的JavaScript框架，是繼Prototype之後又一個優秀的JavaScript代碼庫（或JavaScript框架）。jQuery設計的宗旨是“write Less，Do More”，即倡導寫更少的代碼，做更多的事情。它封裝 ...
  • aardio爬蟲) 實戰篇：逆向有道翻譯web介面
    前言 之前的文章把js引擎(aardio封裝庫) 微軟開源的js引擎(ChakraCore))寫好了，這篇文章整點js代碼來測一下bug。測試網站：https://fanyi.youdao.com/index.html#/ 逆向思路 逆向思路可以看有道翻譯js逆向（MD5加密，AES加密）附完整源碼 ...
  • 面試官：這就是你理解的Java多線程基礎？
    引言 現代的操作系統（Windows，Linux，Mac OS）等都可以同時打開多個軟體（任務），這些軟體在我們的感知上是同時運行的，例如我們可以一邊瀏覽網頁，一邊聽音樂。而CPU執行代碼同一時間只能執行一條，但即使我們的電腦是單核CPU也可以同時運行多個任務，如下圖所示，這是因為我們的 CPU 的 ...
  • Python文本統計與分析從基礎到進階
    掌握使用Python進行文本英文統計的基本方法，並瞭解如何進一步優化和擴展這些方法，以應對更複雜的文本分析任務。 ...
  • Redis多數據源，看這篇就夠了
    背景 Redis多數據源常見的場景： 分區數據處理：當數據量增長時，單個Redis實例可能無法處理所有的數據。通過使用多個Redis數據源，可以將數據分區存儲在不同的實例中，使得數據處理更加高效。 多租戶應用程式：對於多租戶應用程式，每個租戶可以擁有自己的Redis數據源，以確保數據隔離和安全性。 ...
所有分類