本文目錄一覽：
- 1、web控制按鈕的代碼在哪
- 2、項目前端js基礎代碼包括哪些方面的東西?一般都怎樣寫?
- 3、學習Web前端要知道的JavaScript基礎語法規則
- 4、【Web前端基礎】JavaScript標籤有哪些？
- 5、Web前端工程師要掌握的JavaScript代碼片段(一)
web控制按鈕的代碼在哪
在瀏覽器中，可以通過工具查看
你用火狐打開看一下，滑鼠懸浮在按鈕上，瀏覽器左下角會有提示，會看見按鈕調用的是哪個方法，如果是javascript，void，那你就F12一下，定位到這個按鈕，看看這個按鈕調用的是那個JS代碼，再在JS代碼里找到相對應的方法
瀏覽器F12源代碼（Sources）查看網頁的源代碼HTML代碼，js代碼、CSS代碼，可以直接修改代碼進行前端調試可以點擊JS代碼前面的數字來設置斷點 ；斷點可以在DOM元素節點發生改變時、XHR生命周期狀態改變時、指定的事件執行時被觸發。
項目前端js基礎代碼包括哪些方面的東西?一般都怎樣寫?
我不知道我問題理解有沒有誤哈……
js可以對網頁的內容進行修改，例如增加和刪除：文字、圖片、表格、視頻、…… ……等一系列在html中的東西。
js可以進行計算，實現一些演算法，例如找到搜索、數據計算、……
js也能做動畫，例如圖片的移動、放縮、旋轉（涉及css），但是很麻煩，不過好在網上有一些js的庫（就是別人寫好函數了，你調用），例如jQuery（本質也是js）。
其他的功能屬於不太直觀的了，先不詳述。寫法就是直接將書寫代碼，插入到html等網頁文件中，用戶的瀏覽器打開網頁後，就可以執行js代碼了。在項目中，一般把相關的功能或者常用的功能的代碼直接寫在一個文本文件里，然後後綴為 .js ，由網頁引用。好處是用戶第一次載入完網頁後，第二次不需要重新讀取js。
學習Web前端要知道的JavaScript基礎語法規則
今天小編要跟大家分享的文章是關於學習web前端要知道的JavaScript基礎語法規則。俗話說，「無規矩不成方圓」。用在計算機語言上也同樣使用。每種計算機語言都有自己的語法規則，只有遵循語法規則才能寫出符合要求的代碼。JavaScript也不例外，在使用JavaScript語言時，需要遵循某些語法規則，如執行順序、大寫和注釋規範。下面我們就以來介紹下，JavaScript基礎語法規則。
1.按從上到下的順序執行
JavaScript程序按照在HTML文檔中的排列順序逐行執行。如果代碼(例如函數、全局變數等)需要在整個HTML文件中使用，最好將這些代碼放在HTML文件的標記中。
2.區分大小寫字母
JavaScript嚴格區分字母大小寫。也就是說，在輸入關鍵字、函數名、變數以及其他標識符時，都必須採用正確的大小寫形式。例如，變數username與變數UserName是兩個不同的變數。
3.每行結尾的分號可有可無
JavaScript語言並不要求必須以分號「;」”作為語句的結束標記。如果語句的結束處沒有分，JavaScript會自動將該行代碼的結尾作為整個語句的結束。例如，下面兩行示例代碼，雖然第一行代碼結尾沒有寫分號，但也是正確的。(注意：書寫JavaScript代碼時，為了保證代碼的嚴謹性、準確性，最好在每行代碼的結尾加上分號。)
alert
alert
4、注釋規範
使用JavaScript時，為了使代碼易於閱讀，需要為
JavaScript代碼加一些注釋。JavaScript代碼注釋和CSS代碼注釋方式相同，也分為單行注釋和多行注釋，示例代碼如下：
//我是單行注釋
/*
我是多行注釋1
我是多行注釋2
我是多行注釋3
*/
以上就是小編今天為大家分享的關於學習web前端要知道的JavaScript基礎語法規則的文章，希望本篇文章能夠對正在從事會計相關工作的小夥伴們有所幫助。想要了解更多會計相關知識記得關注北大青鳥web培訓官網。最後祝願小夥伴們工作順利成為一名優秀的web前端工程師！
【Web前端基礎】JavaScript標籤有哪些？
只有一個標籤script，寫在html中，可以寫在html的head標籤中也可以寫在body標籤中
script標籤可以用來引入外部js文件，也可以直接寫js代碼：
script type=”text/javascript” src=”yourjsfile.js”/script
script type=”text/javascript”
//js代碼
/script
Web前端工程師要掌握的JavaScript代碼片段(一)
今天小編要跟大家分享的文章是關於Web前端工程師要掌握的JavaScript代碼片段(一)。正在從事web前端工作的小夥伴們來和小編一起看一看吧，希望本篇文章能夠對正在從事web前端工作的小夥伴們有所幫助。
1、Anagramsofstring(帶有重複項)
使用遞歸。對於給定字元串中的每個字母，為字母創建字謎。使用map()將字母與每部分字謎組合，然後使用reduce()將所有字謎組合到一個數組中，最基本情況是字元串長度等於2或1。
constanagrams=str={
if(str.length[str];
returnstr.split(”).reduce((acc,letter,i)=
acc.concat(anagrams(str.slice(0,i)+str.slice(i+1)).map(val=
letter+val)),[]);
};
//anagrams(‘abc’)-[‘abc’,’acb’,’bac’,’bca’,’cab’,’cba’]
2、數組平均數
使用reduce()將每個值添加到累加器，初始值為0，總和除以數組長度。
constaverage=arr=arr.reduce((acc,val)=acc+val,0)/
arr.length;
//average([1,2,3])-2
3、大寫每個單詞的首字母
使用replace()匹配每個單詞的第一個字元，並使用toUpperCase()來將其大寫。
constcapitalizeEveryWord=str=str.replace(/\b[a-z]/g,char=
char.toUpperCase());
//capitalizeEveryWord(‘helloworld!’)-‘HelloWorld!’
4、首字母大寫
使用slice(0,1)和toUpperCase()大寫第一個字母，slice(1)獲取字元串的其餘部分。省略lowerRest參數以保持字元串的其餘部分不變，或將其設置為true以轉換為小寫。(注意：這和上一個示例不是同一件事情)
constcapitalize=(str,lowerRest=false)=
str.slice(0,1).toUpperCase()+(lowerRest?str.slice(1).toLowerCase():
str.slice(1));
//capitalize(‘myName’,true)-‘Myname’
5、檢查迴文
將字元串轉換為toLowerCase()，並使用replace()從中刪除非字母的字元。然後，將其轉換為tolowerCase()，將(”)拆分為單獨字元，reverse()，join(”)，與原始的非反轉字元串進行比較，然後將其轉換為tolowerCase()。
constpalindrome=str={
consts=str.toLowerCase().replace(/[\W_]/g,”);
returns===s.split(”).reverse().join(”);
}
//palindrome(‘tacocat’)-true
6、計數數組中值的出現次數
每次遇到數組中的特定值時，使用reduce()來遞增計數器。
constcountOccurrences=(arr,value)=arr.reduce((a,v)=v===
value?a+1:a+0,0);
//countOccurrences([1,1,2,1,2,3],1)-3
7、當前URL
使用window.location.href來獲取當前URL。
constcurrentUrl=_=window.location.href;
//currentUrl()-”
8、Curry
使用遞歸。如果提供的參數(args)數量足夠，則調用傳遞函數f，否則返回一個curried函數f。
constcurry=(fn,arity=fn.length,…args)=
arity
?fn(…args)
:curry.bind(null,fn,arity,…args);
//curry(Math.pow)(2)(10)-1024
//curry(Math.min,3)(10)(50)(2)-2
9、Deepflattenarray
使用遞歸，使用reduce()來獲取所有不是數組的元素，flatten每個元素都是數組。
constdeepFlatten=arr=
arr.reduce((a,v)=a.concat(Array.isArray(v)?deepFlatten(v):v),
[]);
//deepFlatten([1,[2],[[3],4],5])-[1,2,3,4,5]
10、數組之間的區別
從b創建一個Set，然後在a上使用Array.filter()，只保留b中不包含的值。
constdifference=(a,b)={consts=newSet(b);returna.filter(x
=!s.has(x));};
//difference([1,2,3],[1,2])-[3]
11、兩點之間的距離
使用Math.hypot()計算兩點之間的歐幾里德距離。
constdistance=(x0,y0,x1,y1)=Math.hypot(x1-x0,y1-y0);
//distance(1,1,2,3)-2.23606797749979
12、可以按數字整除
使用模運算符(%)來檢查餘數是否等於0。
constisDivisible=(dividend,divisor)=dividend%divisor===0;
//isDivisible(6,3)-true
13、轉義正則表達式
使用replace()來轉義特殊字元。
constescapeRegExp=str=str.replace(/[.*+?^${}()|[\]\\]/g,
‘\\$’);
//escapeRegExp(‘(test)’)-\\(test\\)
14、偶數或奇數
使用Math.abs()將邏輯擴展為負數，使用模(%)運算符進行檢查。如果數字是偶數，則返回true;如果數字是奇數，則返回false。
constisEven=num=num%2===0;
//isEven(3)-false
15、階乘
使用遞歸。如果n小於或等於1，則返回1。否則返回n和n-1的階乘的乘積。
constfactorial=n=n
//factorial(6)-720
16、斐波那契數組生成器
創建一個特定長度的空數組，初始化前兩個值(0和1)。使用Array.reduce()向數組中添加值，後面的一個數等於前面兩個數相加之和(前兩個除外)。
constfibonacci=n=
Array(n).fill(0).reduce((acc,val,i)=acc.concat(i1?acc[i-
1]+acc[i-2]:i),[]);
//fibonacci(5)-[0,1,1,2,3]
17、過濾數組中的非唯一值
將Array.filter()用於僅包含唯一值的數組。
constfilterNonUnique=arr=arr.filter(i=arr.indexOf(i)===
arr.lastIndexOf(i));
//filterNonUnique([1,2,2,3,4,4,5])-[1,3,5]
18、Flatten數組
使用reduce()來獲取數組中的所有元素，並使用concat()來使它們flatten。
constflatten=arr=arr.reduce((a,v)=a.concat(v),[]);
//flatten([1,[2],3,4])-[1,2,3,4]
19、從數組中獲取最大值
使用Math.max()與spread運算符(…)結合得到數組中的最大值。
constarrayMax=arr=Math.max(…arr);
//arrayMax([10,1,5])-10
20、從數組中獲取最小值
使用Math.min()與spread運算符(…)結合得到數組中的最小值。
constarrayMin=arr=Math.min(…arr);
//arrayMin([10,1,5])-1
21、獲取滾動位置
如果已定義，請使用pageXOffset和pageYOffset，否則使用scrollLeft和scrollTop，可以省略el來使用window的默認值。
constgetScrollPos=(el=window)=
({x:(el.pageXOffset!==undefined)?el.pageXOffset:el.scrollLeft,
y:(el.pageYOffset!==undefined)?el.pageYOffset:el.scrollTop});
//getScrollPos()-{x:0,y:200}
22、最大公約數(GCD)
使用遞歸。基本情況是當y等於0時。在這種情況下，返回x。否則，返回y的GCD和x/y的其餘部分。
constgcd=(x,y)=!y?x:gcd(y,x%y);
//gcd(8,36)-4
23、Headoflist
返回ARR[0]
consthead=arr=arr[0];
//head([1,2,3])-1
24、list初始化
返回arr.slice(0，-1)
constinitial=arr=arr.slice(0,-1);
//initial([1,2,3])-[1,2]
以上就是小編今天為大家分享的關於Web前端工程師要掌握的JavaScript代碼片段(一)的文章，希望本篇文章能夠對正在從事web前端工作的小夥伴們有所幫助。想要了解更多web前端相關知識和想要了解後面的代碼片段的小夥伴，記得關注北大青鳥web培訓官網。
原創文章，作者：小藍，如若轉載，請註明出處：https://www.506064.com/zh-tw/n/305160.html
微信掃一掃 
支付寶掃一掃 