當前位置：
首頁 >
前端技术
> javascript
>内容正文
javascript
JavaScript学习笔记（1）
生活随笔
收集整理的這篇文章主要介紹了
JavaScript学习笔记（1）
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
JavaScript基礎語法-dom/bom-es6-jQuery-數據可視化echarts-包含筆記源碼作業黑馬程序員pink老師前端入門視頻教程（持續更新）
文章目錄
- 計算機組成
- 數據存儲單位
- 硬盤 內存條 CPU
- javascript歷史
- javascript是什么
- 表單驗證（在客戶端就完成，減輕服務器壓力）Javascrip的作用
- js/css/html關系
- 瀏覽器執行js簡介
- js的組成 DOM文檔對象模型 BOM瀏覽器對象模型
- JS的寫法 行內式 內嵌式 外部式
- js中注釋方法
- js輸入與輸出語句 警示框alert(msg) 控制臺console.log(msg) 用戶輸入框prompt(info)
- 變量
- 簡單變量操作
- 變量的語法拓展
- 變量命名規范
- 交換兩個變量變量值
- 為什么需要數據類型
- js基本數據類型
- 數字型進制
- 字符串型
- 字符串轉義字符
- 字符串長度 .length
- 字符串拼接
- 字符串中引用變量
- 未定義值undefined和空值null
- typeof函數 判斷變量類型
- 控制臺console輸出里，藍色一般為數值型，黑色為字符串型
- 字面量
- 數據類型轉換
- 數值類型轉換為字符串類型 toString() String() 隱式轉換
- 字符串轉換為數值類型 parseInt() parseFloat() Number()
- 簡單加法器案例
- 轉換成布爾型 Boolean()
- 編譯型語言和解釋型語言
- 標識符 關鍵字 保留字
- 運算符 操作符 operator
- 算術運算符
- 浮點數精度問題
- 表達書和返回值
- 自增和自減運算符 前置遞增運算符 后置遞增運算符 區別？先返回原值還是自加一？
- 比較運算符 全等比較符`===` `!==`
- 邏輯運算符
- 短路運算，邏輯中斷（這玩意有啥用？）
- 賦值運算符 += -=
- 運算符優先級
- 程序流程控制（順序、分支、循環）
- if語句
- if else語句
- 多分支語句 if else if else if else
- 三元表達式 （條件表達式 ? 表達式1 : 表達式2）
- 用三元表達式做秒殺倒計時
- switch語法（停）
- js中的循環 for while do...while
- for循環
- 斷點調試
- 點擊下一步，快捷鍵F11
- 監視變量
- while 循環
- 用while循環詢問“你愛我嗎？”
- do while 循環
- 循環里的continue與break
- 數組（利用new創建數組，利用字面量創建數組【常用】）
- 數組的索引
- 數組的遍歷
- 數組的長度 arr.length
- 使用newArray.length篩選數組
- 數組數字冒泡排序
- 函數
- 函數的封裝
- 函數的形參與實參
- 函數調用形參與實參個數不匹配的問題
- 函數的返回值return
- return返回值的注意事項（終止屬性，只能返回一個值）
- 函數都有返回值，沒有返回值返回undefined
- break，continue，return的區別
- 函數中arguments對象的使用（相當于python里的*args）
- 利用argument求傳入數字（不能傳入數組）最大值
- 函數的相互調用（注意：代碼前面能調用后面定義的函數，但前面不能調用后面的變量）
- 函數的兩種聲明方式（函數關鍵字自定義函數 函數表達式【匿名函數】）
- 全局作用域和局部作用域
- 變量的作用域（全局變量和局部變量【注意在函數內部不用var直接俄賦值的也算全局變量】）
- js沒有塊級作用域（就是除函數外在其他花括號{}里用var定義的變量外邊也能使用【前提是能夠被執行到】）
- 作用域鏈（就近原則、鏈式查找）
- 函數內部不能直接改變函數外部定義的值
- 函數的預解析（簡而言之就是帶var的函數或變量聲明，不能放在調用之后，但有其他情況需要注意，具體可看視頻）（復雜，實際開發應該不會用到吧！）
- js對象
- 為什么要使用對象？
- 創建對象方法（利用字面量創建對象）
- 對象的調用
- 變量和對象屬性的區別，函數和對象方法的區別
- 利用new Object創建對象
- 利用構造函數的方法創建對象
- 為什么要使用構造方法創建對象
- 如何使用構造方法創建對象
- 用for……in語法遍歷對象的屬性與屬性值
- js內置對象（相當于python的一些實用包）
- js查閱文檔方法（MDN和W3Cschool）
- Math數學對象
- 常用方法
- 創建并封裝自己的數學對象（像Math數學對象一樣）
- Math絕對值abs和三個取整方法floor、ceil、round
- 用Math.random()寫公式生成隨機整數（隨機點名）
- 日期對象 Data 輸出日期
- 獲取格式化日期年月日
- 獲取格式化日期時分秒
- 獲取時間的毫秒形式（時間戳）
- 京東倒計時案例
計算機組成
數據存儲單位
硬盤 內存條 CPU
javascript歷史
javascript是什么
表單驗證（在客戶端就完成，減輕服務器壓力）Javascrip的作用
js/css/html關系
瀏覽器執行js簡介
js的組成 DOM文檔對象模型 BOM瀏覽器對象模型
JS的寫法 行內式 內嵌式 外部式
index.html
my.js
alert('如果我是DJ，你會愛我嗎？')js中注釋方法
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title><script>// 1.單行注釋 ctrl+//*2.多行注釋 shift+alt+a（快捷鍵只在vscode中生效）2.多行注釋*/</script> </head> <body></body> </html>js輸入與輸出語句 警示框alert(msg) 控制臺console.log(msg) 用戶輸入框prompt(info)
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title><script>// 這是一個輸入框prompt('這是一個輸入框');// alert 彈出警示alert('收到謝謝@！');// console控制臺輸出 給程序員測試用的console.log('這是程序員能看到的');</script> </head> <body></body> </html>
console要按F12點擊element console才能看到
變量
簡單變量操作
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title><script>// 1. 用戶輸入姓名，存儲到一個叫 name 的變量里面var name=prompt('請輸入您的名字：');// 2. 輸出這個名字alert('歡迎您：'+name)</script> </head> <body></body> </html>
變量的語法拓展
也可以使用，但不建議，會變當成全局變量，所以最好加上var
變量命名規范
不要用name作為變量名，因為在一些瀏覽器里有自己的含義
交換兩個變量變量值
為什么需要數據類型
js基本數據類型
數字型進制
數字型三個特殊值
字符串型
字符串轉義字符
字符串長度 .length
字符串拼接
結果也是1212，說明任何類型與字符串相加都是字符串
console.log(12+12+'12')結果是2412
字符串中引用變量
未定義值undefined和空值null
typeof函數 判斷變量類型
控制臺console輸出里，藍色一般為數值型，黑色為字符串型
字面量
數據類型轉換
數值類型轉換為字符串類型 toString() String() 隱式轉換
字符串轉換為數值類型 parseInt() parseFloat() Number()
一般別用隱式轉換！！！
簡單加法器案例
轉換成布爾型 Boolean()
分割線下面全是Ture
編譯型語言和解釋型語言
標識符 關鍵字 保留字
運算符 操作符 operator
算術運算符
浮點數精度問題
表達書和返回值
自增和自減運算符 前置遞增運算符 后置遞增運算符 區別？先返回原值還是自加一？
前置遞增和后置遞增分析
比較運算符 全等比較符=== !==
邏輯運算符
短路運算，邏輯中斷（這玩意有啥用？）
賦值運算符 += -=
運算符優先級
程序流程控制（順序、分支、循環）
if語句
if else語句
多分支語句 if else if else if else
三元表達式 （條件表達式 ? 表達式1 : 表達式2）
用三元表達式做秒殺倒計時
switch語法（停）
js中的循環 for while do…while
for循環
斷點調試
瀏覽器按F12
點擊下一步，快捷鍵F11
監視變量
while 循環
用while循環詢問“你愛我嗎？”
do while 循環
循環里的continue與break
數組（利用new創建數組，利用字面量創建數組【常用】）
數組的索引
數組的遍歷
數組的長度 arr.length
使用newArray.length篩選數組
數組數字冒泡排序
函數
函數的封裝
函數的形參與實參
函數調用形參與實參個數不匹配的問題
函數的返回值return
return返回值的注意事項（終止屬性，只能返回一個值）
函數都有返回值，沒有返回值返回undefined
break，continue，return的區別
函數中arguments對象的使用（相當于python里的*args）
利用argument求傳入數字（不能傳入數組）最大值
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title><script>function getMax(){max=arguments[0];for(var i =0;i<arguments.length;i++){if(arguments[i]>max){max=arguments[i];}}return max;}console.log(getMax([1,2,35,3]));</script> </head> <body></body> </html>函數的相互調用（注意：代碼前面能調用后面定義的函數，但前面不能調用后面的變量）
函數的兩種聲明方式（函數關鍵字自定義函數 函數表達式【匿名函數】）
全局作用域和局部作用域
變量的作用域（全局變量和局部變量【注意在函數內部不用var直接俄賦值的也算全局變量】）
js沒有塊級作用域（就是除函數外在其他花括號{}里用var定義的變量外邊也能使用【前提是能夠被執行到】）
作用域鏈（就近原則、鏈式查找）
函數內部不能直接改變函數外部定義的值
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title><script>var num =1;function a(){var num=2;}a();alert(num);</script>> </head> <body></body> </html>函數的預解析（簡而言之就是帶var的函數或變量聲明，不能放在調用之后，但有其他情況需要注意，具體可看視頻）（復雜，實際開發應該不會用到吧！）
https://www.bilibili.com/video/BV1Sy4y1C7ha?p=142&spm_id_from=pageDriver
js對象
為什么要使用對象？
創建對象方法（利用字面量創建對象）
對象的調用
示例：
變量和對象屬性的區別，函數和對象方法的區別
利用new Object創建對象
利用構造函數的方法創建對象
為什么要使用構造方法創建對象
用字面量創建對象的方法，很麻煩，有幾個對象就要寫幾堆代碼
如何使用構造方法創建對象
用for……in語法遍歷對象的屬性與屬性值
js內置對象（相當于python的一些實用包）
js查閱文檔方法（MDN和W3Cschool）
Math數學對象
常用方法
創建并封裝自己的數學對象（像Math數學對象一樣）
Math絕對值abs和三個取整方法floor、ceil、round
用Math.random()寫公式生成隨機整數（隨機點名）
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title><script>function randomInt(min,max){return Math.floor(Math.random()*(max-min+1)+min)} console.log(randomInt(1,20)); </script> </head> <body></body> </html>日期對象 Data 輸出日期
通常用第二種寫法：
獲取格式化日期年月日
獲取格式化日期時分秒
<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><script>// 格式化日期 時分秒var date = new Date();console.log(date.getHours()); // 時console.log(date.getMinutes()); // 分console.log(date.getSeconds()); // 秒// 要求封裝一個函數返回當前的時分秒 格式 08:08:08function getTimer() {var time = new Date();var h = time.getHours();h = h < 10 ? '0' + h : h;var m = time.getMinutes();m = m < 10 ? '0' + m : m;var s = time.getSeconds();s = s < 10 ? '0' + s : s;return h + ':' + m + ':' + s;}console.log(getTimer());</script> </head><body></body></html>獲取時間的毫秒形式（時間戳）
<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><script>// 獲得Date總的毫秒數(時間戳) 不是當前時間的毫秒數 而是距離1970年1月1號過了多少毫秒數// 1. 通過 valueOf() getTime()var date = new Date();console.log(date.valueOf()); // 就是 我們現在時間 距離1970.1.1 總的毫秒數console.log(date.getTime());// 2. 簡單的寫法 (最常用的寫法)var date1 = +new Date(); // +new Date() 返回的就是總的毫秒數console.log(date1);// 3. H5 新增的 獲得總的毫秒數console.log(Date.now());</script> </head><body></body></html>京東倒計時案例
<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><script>// 倒計時效果// 1.核心算法：輸入的時間減去現在的時間就是剩余的時間，即倒計時 ，但是不能拿著時分秒相減，比如 05 分減去25分，結果會是負數的。// 2.用時間戳來做。用戶輸入時間總的毫秒數減去現在時間的總的毫秒數，得到的就是剩余時間的毫秒數。// 3.把剩余時間總的毫秒數轉換為天、時、分、秒 （時間戳轉換為時分秒）// 轉換公式如下： // d = parseInt(總秒數/ 60/60 /24); // 計算天數// h = parseInt(總秒數/ 60/60 %24) // 計算小時// m = parseInt(總秒數 /60 %60 ); // 計算分數// s = parseInt(總秒數%60); // 計算當前秒數function countDown(time) {var nowTime = +new Date(); // 返回的是當前時間總的毫秒數var inputTime = +new Date(time); // 返回的是用戶輸入時間總的毫秒數var times = (inputTime - nowTime) / 1000; // times是剩余時間總的秒數 var d = parseInt(times / 60 / 60 / 24); // 天（parseInt轉換成整數）d = d < 10 ? '0' + d : d;var h = parseInt(times / 60 / 60 % 24); //時h = h < 10 ? '0' + h : h;var m = parseInt(times / 60 % 60); // 分m = m < 10 ? '0' + m : m;var s = parseInt(times % 60); // 當前的秒s = s < 10 ? '0' + s : s;return d + '天' + h + '時' + m + '分' + s + '秒';}console.log(countDown('2021-5-1 18:00:00'));var date = new Date();console.log(date);</script> </head><body></body></html>到這里倒計時（下）沒了？？？？
https://www.bilibili.com/video/BV1Sy4y1C7ha?p=168
登錄后刷新又有了我去
總結
以上是生活随笔為你收集整理的JavaScript学习笔记（1）的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： margin和padding分别适合什么
- 下一篇： flask流式响应