用chrome浏览器事件监听勾上click然后单击按钮，就会自动断点到即将执行的代码上，并且可以调试
创新互联建站是一家专业提供加查企业网站建设,专注与成都网站制作、成都网站建设、H5响应式网站、小程序制作等业务。10年已为加查众多企业、政府机构等服务。创新互联专业网站建设公司优惠进行中。
chrome F12 打开调试界面后, 点击 Sources 页面. 右边就可以设置断点,单步调试. 例如可以选择右边Event Listener Breakpoints 选项,选中 mouse 里面的 click 或其他事件. 这样你点击页面上的按钮 就会触发断点,js会停在你点击的事件位置上.
自学方法：
1、作为一个初学者，你必须明确系统的学习方案，我建议一定有一个指导的人，全靠自己学，放弃的几率非常大，在你对于web前端还没有任何概念的时候，需要一个人领进门，之后就都靠自己钻研，第一步就是确定web前端都需要哪些内容，并且在多少时间内学完，建议时间6个月保底。
2、视频为主，书为辅。很多初学者在学习前端的时候非常喜欢去买书，但是最后的结果是什么？看来看去什么都不会写，所以在这里给大家提醒，书可以看，但是是在建立于你已经对于某个知识点有了具体操作的执行后，在用书去巩固概念，这样更加利于你对于知识的理解。
3、对于学习技术来讲，掌握一个学习方法是非常重要的，其实对于学习web前端来讲，学习方法确实很多都是相通的，一旦学习方法不对，可能就会造成“方法不对，努力白费”。其实关于这方面还是很多的，我就简单说个例子，有的人边听课边跟着敲代码，这样就不对，听课的时候就专心听，做题的时候就专心做题，这都是过来人的经验，一定要听。根据每个人的不同，可能学习方法也会有所出路，找到适合你自己的学习法方法是学习的前提。
4、不建议自己一个人瞎学，在我了解学习编程的这些人来看，从零基础开始学并且最后成功做这份工作的其实并没有几个，我觉得大部分原因就是因为他们都不了解web前端是干什么的，学什么的，就盲目的买书看，到处找视频看，最后看着看着就放弃了，所以我建议初学者在没有具体概念之前，还是找有经验的人请教一下，聊过之后你就会知道web前端具体是干什么的，该怎么学，这是我个人的小建议，可以不采纳。
自学路线：
第1阶段：前端页面重构(4周)
内容包含了：(PC端网站布局项目、HTML5+CSS3基础项目、WebApp页面布局项目)
第2阶段：JavaScript高级程序设计(5周)
内容包含：(原生JavaScript交互功能开发项目、面向对象进阶与ES5/ES6应用项目、JavaScript工具库自主研发项目)
第3阶段：PC端全栈项目开发(3周)
内容包含：(jQuery经典交互特效开发、HTTP协议、Ajax进阶与PHP/JAVA开发项目、前端工程化与模块化应用项目、PC端网站开发项目、PC端管理信息系统前端开发项目)
第4阶段：移动端项目开发(6周)
内容包含：(Touch端项目、微信场景项目、应用Angular+Ionic开发WebApp项目、应用Vue.js开发WebApp项目、应用React.js开发WebApp项目)
第5阶段：混合(Hybrid,ReactNative)开发(1周)
内容包含：(微信小程序开发、ReactNative、各类混合应用开发)
第6阶段：NodeJS全栈开发(1周)
内容包括：(WebApp后端系统开发、一、NodeJS基础与NodeJS核心模块二、Express三、noSQL数据库)
基础书籍：
1、《Head First HTML与CSS(第2版)》，入门真的是经典书籍，手把手教学，丰富的案例让你从 0 开始学前端。
2、《CSS权威指南(第三版)》，这本书作为 CSS 的经典著作，把原理讲得非常的通透，除了 w3c 标准，算最权威的一本了，毕竟权威指南。
3、《CSS揭秘》神书，47 个 css 技巧让你在面对各种 css 问题的时候游刃有余。是 css 书籍中评分最高的了，css 进阶必备。
4、《javascript语言精粹》，这本书可以在入门之前了解一下基本语法，以及在学习之前可以了解下 JS 里面的精粹以及糟粕，虽然这本书很薄很薄，但是值得反复去读的一本书。
5、《JavaScript DOM编程艺术(第2版)》，本书在简洁明快地讲述JavaScript和DOM的基本知识之后，通过几个实例演示了专业水准的网页开发技术，透彻阐述了平稳退化等一批至关重要的 JavaScript编程原则和最佳实践。
6、《JavaScript权威指南》：犀牛书是每个FE都绕不过的一本书，可以先大致通读几遍，也可以把其当作工具书，时时翻阅。
视频教程:
网页链接
望采纳~
function $(id) {
return document.getElementById(id);
}//用$替换document.getElementById函数
//显示菜单函数：
//参数baseID：表示根节点ID
//参数divID：表示显示子菜单ID
function showMenu (baseID, divID) {
baseID = $(baseID);//获取根节点对象
divID = $(divID);//获取子菜单对象
if (showMenu.timer) clearTimeout(showMenu.timer);//判断showMenu是否包含定时器，存在即取消
hideCur();//调用隐藏当前子菜单函数
divID.style.display = 'block';//显示子菜单divID
showMenu.cur = divID;//保存当前子菜单为divID
if (! divID.isCreate) {//判断对象divID是否创建
divID.isCreate = true;//赋值给divID属性isCreate
//divID.timer = 0;
divID.onmouseover = function () {//绑定divID的mouseover事件
if (showMenu.timer) clearTimeout(showMenu.timer);
hideCur();
divID.style.display = 'block';
};
function hide () {//隐藏函数
showMenu.timer = setTimeout(function () {divID.style.display = 'none';}, 1000);//延迟1秒隐藏，已达到动画效果
}
divID.onmouseout = hide;//绑定divID的mouseout事件
baseID.onmouseout = hide;//绑定baseID的mouseout事件
}
function hideCur () {//隐藏当前菜单
showMenu.cur (showMenu.cur.style.display = 'none');//判断showMenu.cur是否为null，然后设置showMenu.cur.style.display = 'none'已达到隐藏showMenu.cur的效果
}
}
JavaScript权威指南（第四版）算是JavaScript最好的书了。
《JavaScript权威指南》全面介绍了JavaScript语言的核心，以及Web浏览器中实现的遗留和标准的DOM。它运用了一些复杂的例子，说明如何处理验证表单数据、使用cookie、创建可移植的DHTML动画等常见任务。本书还包括详细的参考手册，涵盖了JavaScript的核心API、遗留的客户端API和W3C标准DOM API，记述了这些API中的每一个JavaScript对象、方法、性质、构造函数、常量和事件处理程序。
网店价格(68.8元起...第一步分讲得很清晰 很好 后面的参考手册编排比较糟糕 尤其是第三、四、五部分 想快速查询的东西真难
这个网站是电驴的，你要的什么资源都有
还有楼上写的教程里面都有 自己慢慢下吧
!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" ""
html xmlns=""
head
meta http-equiv="content-type" content="text/html; charset=utf-8"/
titleGoogle Maps API For Javascript 中文详细实例教程 - 龙哥博客/title
!--导入Google Maps API库文件。注意将本代码中的API Key替换为前文申请到的API Key--
script src=";;v=2key=ABQIAAAAkfJ_nM22tLO39uEpH-ocqRS2fhPRFM_QZQikgTNtxk2J9bhjcBRSfHe6IizXr0kyTgxQWfyPnnXycA" type="text/javascript"/script
script type="text/javascript"
//![CDATA[
var map;
//创建一个自定义的GIcon
var myIcon= new GIcon();
//前景图片
myIcon.image = "";
//阴影图片
myIcon.shadow = "";
//前景图片大小，长x宽
myIcon.iconSize = new GSize(12, 20);
//阴影图片大小，长x宽
myIcon.shadowSize = new GSize(12, 20);
//以下两个属性很难解释，读者可自行调整其数值以便理解其意义
// myIcon锚定点相对于myIcon图片左上角的像素距离
myIcon.iconAnchor = new GPoint(6, 10);
//信息窗口相对于myIcon图片左上角的像素距离
//关于信息窗口会在以后介绍
myIcon.infoWindowAnchor = new GPoint(5, 1);
function load() {
if (GBrowserIsCompatible()) {
map = new GMap2(document.getElementById("map"));
map.setCenter(new GLatLng(38.155279578600705, 114.56915259361267), 11);
var customUI = map.getDefaultUI();
// Remove MapType.G_HYBRID_MAP
customUI.maptypes.hybrid = false;
map.setUI(customUI);
var geoPoint0= new GLatLng(38.155279578600705, 114.56915259361267);
var geoPoint1= new GLatLng(38.153137, 114.577274);//创建另一个地理坐标geoPoint1
map.setCenter(geoPoint0, 11);
var marker0 = new GMarker(geoPoint0, {title: "河北正定中学"});
var marker1 = new GMarker(geoPoint1,//创建自定义的GMarker
{icon: myIcon,
title: "聚会地点"});
map.addOverlay(marker0);
//显示自定义了图标的地标对象marker1
map.addOverlay(marker1);
}
}
//]]
var fg = 1;
function MapSW(){
if(fg==1)
{
document.getElementById("map").style.display="block";
document.getElementById("sw").innerHTML="隐藏";
fg = 0;
}
else
{
document.getElementById("map").style.display="none";
document.getElementById("sw").innerHTML="展开";
fg = 1;
}
}
/script
/head
!--加载时调用load()函数加载地图，注意加上onunload="GUnload()"防止内存泄露--
body onload="load()" onunload="GUnload()"
!--以下id为map的DIV元素即为Google地图的容器--
span id="sw" style="cursor:pointer;" onclick="MapSW();"展开/span
div id="map" style="width: 650px; height: 350px; display:none;"/div
/body
/html
