前端系统化学习【JS篇】:(一)浏览器简述
前言
细阅此文章大概需要 8分钟\color{red}{8分钟}8分钟左右
本篇中简要讲述\color{red}{简要讲述}简要讲述了:
常见的浏览器内核
浏览器的控制台
Script标签的位置
代码调试(debugger)
在浏览器控制台中打印引用数据类型的结果,展开与合起的区别
如果有任何问题都可以留言给我,我看到了就会回复,如果我解决不了也可以一起探讨、学习。如果认为有任何错误都还请您不吝赐教,帮我指正,在下万分感谢。希望今后能和大家共同学习、进步。
下一篇会尽快更新,已经写好的文章也会在今后随着理解加深或者加入一些图解而断断续续的进行修改。
如果觉得这篇文章对您有帮助,还请点个赞支持一下,谢谢大家!
常见的浏览器内核
webkit内核(v8引擎)
谷歌chrome
Safari
opera >=v14
国产浏览器
手机浏览器
…
Gecko
火狐FireFox
presto
Opera < v14
Trident
IE
IE EDGE 开始使用双内核(其中包含chrome迷你)
浏览器的控制台(Chrome)(f12/fn+f12)
Elements: 查看结构样式,可以修改这些内容
Console: 查看输出结果和报错信息,是js调试的利器
Source: 查看项目源码
NetWork: 查看当前网站所有资源的请求信息(包括和服务器传输的HTTP报文信息)、加载时间(根据加载时间进行项目优化)
Application: 查看当前网站的数据存储和资源文件(可以盗图,在此处可以做音视频防盗)
浏览器常用的输出方式
在控制台输出
console.log/dir/table…在控制台输出
console也是一个【内置对象】,其中提供了好多方法
log: 正常输出
dir: 输出一个对象的详细键值对信息
table: 把一个多维JSON数组在控制台按照表格的方式呈现出来
多维数组:几维数组就看数组当中嵌套了几级
//如[12,13]//一维数组[12,[12]]//二维数组[12,[{xxx:xxx}]]//三维数组//二维及以上都称为多维数组
多维对象:几维对象就看对象当中嵌套了几级
//如{name:xxx}//一维对象{name:xxx,[12,23]}//二维对象{name:{name:{name:function(){}}},[12,13]}//三维对象//二维及以上都称为多维对象
let a = 10;let b = [{id:1,name:'张三'},{id:2,name:'李四'}];//1. console.log/dir/table....在控制台输出console.log(a);//数字类型10console.dir(a);//字符串类型10console.table(a);
在浏览器弹窗
alert/confirm/prompt
弹窗的三种方式输出的【结果都必然经过toString转换为字符串】
alert(1);//=>'1'
【弹窗的三种方式会阻断JS代码的执行】,只有当窗口关掉,JS才会继续执行
for(let i = 1;i<=5;i++){alert(i);console.log('哈哈');}
confirm: 确定和取消【选择型弹窗】
confirm('确定干啥嘛?');
prompt: 确定和取消【选择型弹窗】不同的是多出一个文本框
prompt('确定干啥嘛?写出原因');
document.write【没人用了】
输出的结果是字符串,写入并覆盖掉页面的全部内容,
关于Script标签
在前端领域混了这几年,总结了一套前端学习的精讲视频和学习路线,如果有对前端开发感兴趣的伙伴,不管你是想转行,或是大学生,还有工作中想提升自己能力的web前端党,欢迎大家的加入我的前端开发交流群:603985993 希望大家诚心交流!,与企业需求同步。好友都在里面学习交流,每天都会有大牛定时讲解前端技术!也可以关注我的微信公众号:【前端留学生】 每天更新最新技术文章干货。
Script标签的位置
一般把script标签放在body的末尾位置,因为js一般是用来操作结构的,如果结构没加载出来,js无法执行就获取不到,所以一般涉及到操作结构的,都建议放在body末尾
但是,也可以放在前面的【三种情况】
不涉及操作结构
利用window.οnlοad=function() {//把js代码放在这里}【利用事件,当页面中的结构和内容都加载完成,才执行这里的代码】
jQuery中也有一个对应window.onload的方法,$(document).reday(function(){}) ,【和window.onload的区别是:reday是当dom结构加载完成就可以执行,而onload是所有的dom结构以及内容都加载完成才能执行,所以reday一定比window.onload早先触发,而且reday在页面中可以用多次,而window.onload只能用一次【原因是一个是dom零级事件绑定,另一个是dom二级事件绑定】】
代码调试(debugger)
在代码前加debugger;在执行时会进入debug模式,通过加断点来运行程序
f10 逐过程,
f11 逐语句执行,一行行代码执行
在浏览器控制台中打印引用数据类型的结果
若是 访问引用数据类型,得出并打印某引用数据类型的结果。
则在展开这个结果之前,略所方式查看的是当时的结果
而一旦展开这个结果,永远展示的是堆中最新的数据
作者:Hypnotize 链接:https://juejin.im/post/6867086699399217160 来源:掘金
前端系统化学习【JS篇】:(一)浏览器简述相关推荐
- 前端系统化学习【JS篇】:(二)Javascript、变量和值的简述
前言 细阅此文章大概需要 10分钟\color{red}{10分钟}10分钟左右 本篇中简要概述\color{red}{简要概述}简要概述了: JavaScript语言的三部分构成 JavaScrip ...
- 前端系统化学习【JS篇】:(四-1)基本数据类型之Number篇
前言 细阅此文章大概需要 40分钟\color{red}{40分钟}40分钟左右 本篇中详细讲述\color{red}{详细讲述}详细讲述了: Number数字数据类型简述 isNaN(检测一个值是否 ...
- 前端系统化学习【JS篇】:(四-3)基本数据类型之Boolean篇
前言 细阅此文章大概需要 7分钟左右 本篇中详细讲述详细讲述了: Boolean布尔数据类型简述 其他类型值转换为布尔类型值的方法和各种情况 在==比较的过程中,数据类型转换的规则 如果有任何问题都可 ...
- 前端系统化学习【JS篇】:(四)Javascript中的数据类型
前言 细阅此文章大概需要 3分钟\color{red}{3分钟}3分钟左右 本篇中简述\color{red}{简述}简述了: Javascript中常用的数据类型 基本数据类型 引用数据类型 数据类型 ...
- 前端系统化学习【JS篇】:(三)Javascript中的命名规范
前言 细阅此文章大概需要 4分钟\color{red}{4分钟}4分钟左右 本篇中讲述了: JS中的命名规范 如果有任何问题都可以留言给我,我看到了就会回复,如果我解决不了也可以一起探讨.学习.如果认 ...
- 面向面试题的前端学习-js篇(自用,持续完善中)
前言:初心是记录面试题,慢慢由每个知识点引伸出去,逐渐查缺补漏,构建出更完善的前端知识系统. 题目来源:牛客网 gitnub 目录 HTTP协议 get请求传参长度的误区 补充get和post请求在缓 ...
- 前端开发规范[js篇]
js规范 协作开发及分工: 根据各个模块, 同时根据页面相似程序, 事先写好大体框架文件, 分配给前端人员实现内部结构&表现&行为; 共用js工具类, 协作开发过程中, 此文件不可随意 ...
- 前端开发之JS篇(四)
目录 1. 数组 2. 预解析 1. 数组 数组(Array)是指一组数据的集合,其中的么个数据被称为元素,在数组中可以存放任意类型的元素.数组是一种将一组数据存储在单一变量名的优雅方式. 数组的创建 ...
- 前端开发之JS篇(一)
目录 JS组成 1.ECMAScript---JavaScript语法 2.DOM---文档对象模型 3.BOM---浏览器对象模型 JS书写位置 1.行内式 2.内嵌式 3.外部式 JS注释 单行注 ...
最新文章
- Qt修炼手册7_图形:用户自定义QGraphicsItem
- 【ECharts系列|02可视化大屏】 舆情分析,人口分析及警情警力活动情况的实现【下篇】
- GNU C 、ANSI C、标准C、标准c++区别和联系
- 计算机考研初试复试比例,考研初试400多分,16人都被刷,计算机专业报考人太多,报应来了...
- CPU为什么不做成圆的而是方的?
- Redis 性能问题排查:slowlog 和排队延时
- 【转】LoadRunner中事务和集合点的放置顺序问题
- 内网渗透 - 权限维持 - Linux
- MongoDB Database Profiling
- android hook 模拟点击_查找和定位Android应用的按钮点击事件的代码位置基于Xposed Hook实现...
- 常用的快速Web原型图设计工具
- 云空间为您提供10G免费全能空间
- 真的羡慕玉自寒和烈如歌的爱情
- 网工浓缩笔记以及考点(第四章 无线通信网)
- 面向Instagram信息采集的网络爬虫
- 黑鹰VIP教程超级大全集!!!千G容量!!!
- JAVA oa 系统模块设计方案
- 【金融量化】CTA策略之VeighNa量化实战笔记(1)
- 【高校校徽识别】基于百度EasyDL实现
- 均值滤波计算_均值滤波器