JS基礎：（一）

時間 2019-11-30

原文原文鏈接

開發了不少項目，感受javascript腳本語言用處太大了，因此，把一些心得寫出來，尤爲是調試的技巧。javascript

本次開發工具：Webstormcss

1. 官網：http://www.jetbrains.com/webstorm/index.htmlhtml

2. 優勢：java

WebStorm功能
JavaScript
· 基於DOM，特定瀏覽器完成
· 編碼導航和用法查詢
· 支持ECMAScript
· 支持CoffeeScript
· 支持結點
· JavaScript重構
· JavaScript單元測試
· 代碼檢測和快速修復
· JSLint/JSHint
· 基於 Mozilla的JavaScript調試器
其餘用途
· 批量代碼分析
· 編碼語言混合或內混
· 拼寫檢查器
· 重複代碼檢測器
編輯語言
· 支持HTML5
· css/js
· 檢驗和快速修復
· Zen編碼
· 顯示內容
· 顯示應用的風格
便捷的環境
· HTML5樣本文件和其餘Web應用程序模板
· FTP和遠程文件同步
· 集成了版本控制系統
· 本地記錄web

3.特點：sql

WebStorm特點
智能的代碼補全
支持不一樣瀏覽器的提示，還包括全部用戶自定義的函數(項目中)
代碼補全包含了全部流行的庫，好比：JQuery, YUI, Dojo, Prototype, Mootools and Bindows。
代碼格式化
代碼不只能夠格式化，並且全部規則均可以本身來定義
html提示
你們常常在js代碼中編寫html代碼，通常來講十分痛苦，不過有了智能提示，就爽多了。並且html裏面還能有js提示。
聯想查詢
只須要按着Ctrl鍵點擊函數或者變量等，就能直接跳轉到定義；能夠全項目查找函數或者變量，還能夠查找使用並高亮。
代碼重構
這個操做有些像Resharper，熟悉Resharper的用戶應該上手很快，支持的有重命名、提取變量/函數、內聯變量/函數、移動/複製、安全刪除等等。
代碼檢查和快速修復
能夠快速找到代碼中的錯誤或者須要優化的地方，並給出修改意見，快速修復。
代碼調試
支持代碼調試，界面和IDEA類似，很是方便。瀏覽器

4.使用技巧：安全

http://www.cnblogs.com/jikey/archive/2010/12/25/1916938.htmlwebstorm

5.快捷鍵：函數

經常使用快捷鍵：

Alt+回車導入包,自動修正
Ctrl+N 查找類
Ctrl+Shift+N 查找文件
Ctrl+Alt+L 格式化代碼
Ctrl+Alt+O 優化導入的類和包
Alt+Insert 生成代碼(如get,set方法,構造函數等)
Ctrl+E或者Alt+Shift+C 最近更改的代碼
Ctrl+R 替換文本
Ctrl+F 查找文本
Ctrl+Shift+Space 自動補全代碼
Ctrl+空格代碼提示
Ctrl+Alt+Space 類名或接口名提示
Ctrl+P 方法參數提示
Ctrl+Shift+Alt+N 查找類中的方法或變量
Alt+Shift+C 對比最近修改的代碼

Shift+F6 重構-重命名
Ctrl+Shift+先上鍵
Ctrl+X 刪除行
Ctrl+D 複製行
Ctrl+/ 或 Ctrl+Shift+/ 註釋（// 或者/*...*/ ）
Ctrl+J 自動代碼
Ctrl+E 最近打開的文件
Ctrl+H 顯示類結構圖
Ctrl+Q 顯示註釋文檔
Alt+F1 查找代碼所在位置
Alt+1 快速打開或隱藏工程面板
Ctrl+Alt+ left/right 返回至上次瀏覽的位置
Alt+ left/right 切換代碼視圖
Alt+ Up/Down 在方法間快速移動定位
Ctrl+Shift+Up/Down 代碼向上/下移動。
F2 或Shift+F2 高亮錯誤或警告快速定位

代碼標籤輸入完成後，按Tab，生成代碼。
選中文本，按Ctrl+Shift+F7 ，高亮顯示全部該文本，按Esc高亮消失。
Ctrl+W 選中代碼，連續按會有其餘效果
選中文本，按Alt+F3 ，逐個往下查找相同文本，並高亮顯示。
Ctrl+Up/Down 光標跳轉到第一行或最後一行下
Ctrl+B 快速打開光標處的類或方法

具體用法：
自動導航到文件夾

會生成一個默認的文件：

建立一個js文件：

查看js 的源碼：

var doc=document.getElementsByName("")；
按住Ctrl點擊 就至關於VS中的F12

測試代碼：
HTML頁：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script type="text/javascript" src="js/demo01.js"></script>
</head>
<body>
<button value="test" onclick="Add(1,2)"></button>
</body>
</html>

js頁：

function Add(a,b){
    var sun=a+b;
   alert(sun);
}

運行；點開HTML頁面，右上角：

直接選中瀏覽器出來效果：

調試：
 Firefox：
1.添加：

點擊：

2.最原始的調試方法 多加幾個：aler
3.console.info() 級別：info，debug，error，log，dir(內部信息所有輸出)，warn
區別：
只是顯示的地方不同：

斷點調試：

點擊後的效果：



這兒有調試的按鈕：

有幾個重要的地方，不妨試試。


點擊這：

輸入你的表達式：就會出來以下的結果



二：在谷歌瀏覽器中調試：
右鍵檢查：或者F12
點擊Sources：選擇要調試的腳本


下斷點，點擊按鈕。





Webstorm+火狐：
1.要求安裝 JetBrains Firefox extension 0.6.0

webstorm+谷歌：
1.要求安裝並配置：擴展程序JetBrains IDE Support   Chrome插件
2.參見文章：http://hi.baidu.com/shaw_cd/item/8af86aa0e6c098a029ce9d1e


個人谷歌瀏覽器有問題，本身安裝吧

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。