JavaScript從入門到精通之入門篇(一)概念與語法

入門篇大綱

![在這里插入圖片描述](https://img-blog.csdnimg.cn/20190907175408160.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTMyMDUxNjU=,size_16,color_FFFFFF,t_70

第一部分 概念與語法

1.JavaScript的歷史

2.基本概念

3.JavaScript的使用、調試和異常處理

4.基本詞法和變量

5.數據類型和類型轉換

6.運算符

算數運算符

賦值運算符

一元運算符

使用一元運算符,將會把所有的內容轉換為數值運算,不使用字符運算
例子:

var i =10;
i++;  // 與 i += 1 或者 i = i + 1 類似
console.log(i) // 輸出: 11

注意: i++ 和 ++i 的區別

  • i++和++i 獨立運算時,運算的結果是完全相同的;
  • 但是如果將i++和++i進行賦值、打印、獲取時,運算的先后順序就會影響賦值的先后順序;
  • 如果是i++,變量在前,先賦值,再運算
  • 如果是++i,變量在后,先運算,再賦值

例子:

var i = '10';
i++;
console.log(i); // 輸出: 11
++i;
console.log(i); // 輸出: 12var i = '10';
var x = i++;
var y = ++i;
console.log(x); // 輸出:10
console.log(y); // 輸出:12

位運算符

進制

2進制和16進制的互轉技巧: 8421法

二進制數值:        1101   0001   0011   0011   1101
二進制比值:        8421   8421   8421   8421   8421 
16進制下標:         13     1      3       3     13   
16進制結果:         d      1      3       3      d所以:11010001001100111101(二進制) = d133d (16進制) 

位非運算符 ~

位與運算符 &

有一個0為0,沒有0為1

  • 1 & 1 = 1, 1 & 0 = 0,0 & 1 = 0,0 & 0 = 0
var a = 20; // 轉成二進制:10100
var b = 10; // 轉成二進制:01010// 位與運算后:00000 轉成10進制 --> 0
console.log(a&b); // 輸出:0

位或運算符 |

有一個1為1,沒有1為0

  • 1 | 1 = 1, 1 | 0 = 1,0 | 1 = 1,0 | 0 = 0
var a = 20; // 轉成二進制:10100
var b = 10; // 轉成二進制:01010// 位或運算后:11110  轉成10進制 --> 30
console.log(a|b); // 輸出:30

位異或運算符^

相同為0,不同為1

  • 1 ^ 1 = 0, 1 ^ 0 = 1,0 ^ 1 = 1,0 ^ 0 = 0
var a = 20; // 轉成二進制:10100
var b = 10; // 轉成二進制:01010// 異或運算后:11110  轉成10進制 --> 30
console.log(a^b); // 輸出:30

左移位運算符、右移位運算符

console.log(8<<2); // 10000 --> 32
console.log(8>>2); // 10    --> 2
console.log(1<<n); // 可以求2的n次冪
console.log((0x0000FF<<16).toString(16)); // 顏色值

關系運算符

常見的關系運算符:< >
重點關注 == 和 === 的區別:

  • == 自帶隱式轉換
    null == undefined
    0 == “” == false
    NaN與任何內容都不同,NAN也不等于NaN,常使用isNaN判斷某值是否為數字
console.log(1 == "1");          // true
console.log(null == undefined);  // true
console.log(0 == "");           // true
console.log(0 == false);        // true
console.log(isNaN(parseInt('10a'))); // falseif(!x) { // 滿足條件的x值有: ""  0  false undefined null NaN
}
  • === 表示兩者之間的類型和值是否都相等

邏輯運算符

常用的邏輯運算符有: ! && ||

7.循環語句

所謂循環,具體有以下幾個特點:

  • 必須要有條件初始變量
  • 必須要有進入循環的條件
  • 必須有向條件外發展的表達式

while循環

例子:

<div id="btn0">按鈕0</div>
<div id="btn1">按鈕1</div>
<div id="btn2">按鈕2</div>
<div id="btn3">按鈕3</div>
<div id="btn4">按鈕4</div>
<div id="btn5">按鈕5</div>
<div id="btn6">按鈕6</div>
<div id="btn7">按鈕7</div>
<script>
var i = 0;
while (i <= 7) {var btn = document.getElementById("btn" + i);btn.onclick = function() {console.log(i);    // 無論點擊哪個按鈕,始終輸出 8console.log(this); // 點擊按鈕時,會輸出你點擊的按鈕本身}i++;
}
</script>

do while循環

do while循環,先執行do的內容塊,然后才去判斷條件,如果條件滿足時繼續循環,如果不滿足就不再循環;而while循環是先判斷條件才去執行語句塊的

for循環

for (表達式1,表達式2, 表達式3)
表達式1: 一共運行了1次,循環之前運行
表達式2:是一個或者多個條件,不滿足一個就跳出循環,循環多少次就執行多少次,在運行循環之前先判斷條件
表達式3:循環多少次就執行多少次,循環語句塊中所有語句完成后再執行

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/news/249120.shtml
繁體地址,請注明出處:http://hk.pswp.cn/news/249120.shtml
英文地址,請注明出處:http://en.pswp.cn/news/249120.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

【小記】-005--純CSS實現的小玩意兒

效果圖奉上 代碼奉上 <!DOCTYPE html> <html lang"zh"><head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><meta http-equiv"X-UA-Compatible&q…

JavaScript從入門到精通之入門篇(二)函數和數組

入門篇大綱 第二部分 函數與數組 1.函數 函數的定義 普通函數 function 函數名 &#xff08;表達式1…&#xff09; { 代碼塊 }js是解釋性語言&#xff0c;在當前script標簽代碼執行的開始階段&#xff0c;就會將普通函數放入堆中&#xff0c;也只是將引用放入堆中&#xf…

leetcode 557. Reverse Words in a String III 、151. Reverse Words in a String

557. Reverse Words in a String III 最簡單的把空白之間的詞反轉 class Solution { public:string reverseWords(string s) {vector<int> blank;for(int i 0;i < s.size();i){if(s[i] )blank.push_back(i);}int start 0;int end;for(int i 0;i < blank.size(…

elementUI vue table status的狀態列顏色變化和操作列狀態顯示(停用, 啟用)

<div id"app" style"display: none">...<el-table-column prop"status" label"狀態" width"80" align"center"><template scope"scope"><span v-if"scope.row.status0"…

一道Python面試題

無意間&#xff0c;看到這么一道Python面試題&#xff1a;以下代碼將輸出什么&#xff1f; def testFun(): temp [lambda x : i*x for i in range(4)] return temp for everyLambda in testFun(): print (everyLambda(2))腦中默默一想&#xff0c;這還用說么&#xff0c;肯定是…

Windows下的ssh姐妹花 Xshell 和 Xftp

Windows下的ssh姐妹花 Xshell 和 Xftp 今天是3月8號&#xff0c;中國傳統的三八婦女節&#xff0c;是距離中國新興節日三七女生&#xff08;神&#xff09;節最近的一個全國性節日&#xff0c;今天我也是宅在家&#xff0c;研究了一下近日工作上遇到的一個純軟件技術問題。廢話…

關于數字證書理解的簡單整理以及12306站點證書簡單分析

版權聲明&#xff1a;本文為博主原創文章&#xff0c;未經博主允許不得轉載。 https://blog.csdn.net/sundacheng1989/article/details/25540601 首先簡單理解一下什么是數字證書。這里是一篇英文文檔&#xff0c;描寫敘述的非常形象。形象的描寫敘述了什么是公鑰。什么是私鑰。…

Luogu3350 ZJOI2016 旅行者 最短路、分治

傳送門 題意&#xff1a;給出一個$N \times M$的網格圖&#xff0c;邊有邊權&#xff0c;$Q$組詢問&#xff0c;每組詢問$(x_1,y_1)$到$(x_2,y_2)$的最短路。$N \times M \leq 2 \times 10^4 , Q \leq 10^5$ BZOJ原題竟然沒有數據范圍 矩形的多組詢問問題考慮分治。考慮計算矩形…

Mac中安裝Node和版本控制工具nvm遇到的坑

首先說說常規的安裝 1. 下載nvm,使用nvm來管理Node版本 官方文檔 windows 版本  https://github.com/coreybutler/nvm-windows mac 版本    https://github.com/creationix/nvm#install-script 命令行 盡量不要用brew&#xff0c;免得掉坑 curl -o- https://raw.githubu…

幾道比較有意思的js面試題

1、[] ? !![] : ![];輸出結果是什么&#xff1f; 12345let val [] ? !![] : ![];console.log(val); //true&#xff1a;//之前的錯誤解釋&#xff1a;[] 是一個null&#xff0c;做判斷則為false&#xff0c;false執行![]語句&#xff0c;結果為非空&#xff0c;即true//更正…

wepy - 與原生有什么不同(x.wpy)使用實例

源碼 1 <template>2 <view classmark wx:if"{{showMark}}">3 <view animation"{{animationData}}" class"animCat">4 <image src"http://osk1hpe2y.bkt.clouddn.com/18-5-30/34559443.jpg"></…

vue從入門到精通之高級篇(一)vue-router的高級用法

今天要介紹的是路由元信息&#xff0c;滾動行為以及路由懶加載這幾個的使用方法。 1.路由元信息 什么是路由元信息&#xff0c;看看官網的解釋&#xff0c;定義路由的時候可以配置 meta 字段可以匹配meta字段&#xff0c;那么我們該如何使用它&#xff0c;一個簡單的例子&…

Java 數組實現堆棧操作

class Stack {private int stck[] ; private int tos ; Stack(int size) { // 一個參數的構造參數stck new int[size] ; // 創建數組&#xff08;創建堆棧&#xff09;tos -1 ; // 空堆棧標識 -1}// 堆棧操作的特性&#xff1a;先進后出、后進先出void push(int…

re模塊

什么是正則表達式 一組特殊符號組成的表達式&#xff0c;用于描述某種規則。該應用場景生活中隨處可見。 例如&#xff1a;讓有志青年過上體面的生活&#xff0c;這里面就由規則&#xff0c;即有志青年。 正則表達式的作用&#xff0c;以及使用場景 用于從字符串中匹配滿足某種…

CSS實現div梯形分割

原理 使用的border邊框屬性結合svg 轉換 詳見代碼 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><title>css實現div邊框斜角</title><style type"text/css"> .labels {display: i…

算法學習——決策單調性優化DP

update in 2019.1.21 優化了一下文中年代久遠的代碼 的格式…… 什么是決策單調性&#xff1f; 在滿足決策單調性的情況下&#xff0c;通常決策點會形如1111112222224444445555588888..... 即不可能會出現后面點的決策點小于前面點的決策點這種情況。 那么這個性質應該如何使用…

SVG畫一個箭頭

參考菜鳥手冊&#xff1a; https://www.runoob.com/svg/svg-tutorial.html 打開菜鳥中的在線工具 在可視化截圖拖拉元素繪制箭頭 點擊command U 查看源碼 將源碼拷入html代碼中&#xff0c;查看效果 最后&#xff0c;貼出源碼供大家參考 <!DOCTYPE html> <…

HP Instant Information

HP Instant Information before HP-UX 11i v3 《管理系統和工作組&#xff1a;HP-UX系統管理員指南》 After HP-UX 11i v3 《HP-UX系統管理指南》(由多個文檔組成的文檔集) 《HP-UX系統管理員指南&#xff1a;概述》 《HP-UX系統管理員指南&#xff1a;配置管理》 《HP-UX系統管…

CodeForces 258D Little Elephant and Broken Sorting(期望)

CF258D Little Elephant and Broken Sorting 題意 題意翻譯 有一個\(1\sim n\)的排列&#xff0c;會進行\(m\)次操作&#xff0c;操作為交換\(a,b\)。每次操作都有\(50\%\)的概率進行。 求進行\(m\)次操作以后的期望逆序對個數。 \(n,m\le 1000\) 輸入輸出格式 輸入格式&#x…

記一次vue項目yarn打包環境配置失效的解決方案

項目中使用到了yarn打包工程&#xff0c;主要有以下幾個命名。 # build for production with minification yarn run build# build for production and view the bundle analyzer report yarn run build --report# 自定義API地址 baseurl"http://127.0.0.1:8080/api/&quo…