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


个人谷歌浏览器有问题，本身安装吧