作为一个前端开发人员，JS是我们行走江湖吃饭的家伙。基本上一个前端人员能值多少大洋，就看JS了。虽然各种框架层出不穷，但是归根结底学好原生JS才是硬道理。

　　学习任何新东西其实都遵循 10000 小时成才定律，只要付出时间，就会有收获。人与人的不同只是收获的多少不同。关于天赋问题，我们确实要承认某些人在某些领域确实比其他人厉害。但大部分人其实都是普通人，不需要天赋，只需要通过时间的简单堆积就可以混口饭吃。

　　弹钢琴能到郎朗那个级别的人是少数了，多数艺术生都普普通通，毕业出来混个钢琴老师当当，办个培训学校赚点钱娶媳妇儿生孩子，最多写本书什么的。只有投入足够多的时间，你发现某些人确实比你厉害，这个时候才适合讨论天赋问题。所以，不要自我否定，才是真正的成长的开始。

　　咱们言归正传吧。

　　一，JavaScript的组成

　　JavaScript主要由以下3部分组成：

　　ECMAScript：解释器、翻译

　　DOM：Document Object Model(文档对象模型)

　　BOM：Browser Object Model(浏览器对象模型)

　　ECMAScript类似于翻译的角色，将编写好的可读性高的代码翻译成计算机可以识别的二进制代码，并将计算机反馈回来的信息翻译给我们。ECMAScript是JS的核心，通常称为:解释器。

　　ECMAScript为JS提供了最基本的功能，但这些功能是十分有限的，如何能让JS具有编写网页代码的能力呢?此时我们就要用到DOM了。DOM中的Document(文档)其实就是HTML文档，并且DOM还赋予了JS操作HTML的能力。在JS里DOM是以document的形式展现的。

　　BOM使得JS拥有了操作浏览器的能力，在JavaScript当中BOM以window的形式存在，有了BOM，JS就拥有了类似弹窗，关闭窗口，复制内容到剪贴板等与浏览器相关的功能。

　　从兼容性的角度来看的话，ES(ECMAScript)基本上不存在兼容性问题，DOM有一些操作上的不兼容，而BOM完全不兼容，所以尽可能避免使用BOM，这样可以省去很多的麻烦。

　　二，变量类型

　　首先说变量，从字面上理解就是可以变化的量，放到编程语言里面，就是可以被赋值改变的量。和变量对应的就是常量，我们经常遇到的比如，10,20这样的不能改变的数字，就是常量，一个确定的值。不能被赋值也不能被改变。

　　在JS中我们把变量分为了多种类型。

var a = 1024;

alert(typeof a); 

var a = 'cos';

alert(typeof a);

var a = true;

alert(typeof a);

var a = function (){   alert('cos'); }

alert(typeof a); 

var a = document;

alert(typeof a);

　　typeof 是一个一元运算，放在一个运算数之前，运算数可以是任意类型。它返回值是一个字符串，该字符串说明运算数的类型。

　　我们可以通过typeof返回变量类型，那么上面的例子的输出结果，依次为：number(数值)，string(字符串)，boolean(布尔)，function(函数)，object(对象)。在这5中基础数据类型之外，JS还存在一种叫undefined的类型，一般存在于如下两种情况：

　　alert(typeof b);

　　变量b没有进行过定义，所以JS返回的数值类型为undefined(未定义的)。

　　var b;

　　alert(typeof b);

　　这时，虽然我们定义了变量b，但在JS里，变量的类型只取决于变量内存的值，而变量b内没有值，因此它的数据类型依然是undefined。

　　JS没有限制变量的数据类型，显得更加灵活，但如果一个变量不停地更改类型，会显得非常的混乱。所以同一个变量，最好只存放一种类型的数据。

　　三，变量类型的转换

　　变量不仅有类型，而且可以进行类型之间的转换。如果某个数据的类型不符合我们的需求，那么就需要用到数据类型的转换。我们一起举个‘栗子’：

　　在网页中添加两个文本框和一个按钮，并希望点击按钮后文本框中的数字可以相加。这个功能看起来很简单，如果直接写的话，因为textbox中value的属性是以字符串形式返回给JS的，这就导致输入的两个数字最后会被当做字符串相加而不是数值。这时候，我们就需要将字符串转换为数字。

　　将字符串转化为数字的方法为parseInt()。

　　这是关于parseInt()的一个例子：

　　var a = '1024'; alert(parseInt(a)+1);

　　这里我们将a定义为了字符串，但是通过parseInt转化后得到了数值类型的数据，所以输出结果为1025。需要注意的是，parseInt是从左到右依次扫描字符串，一旦发现不是数字的字符，就立即停止工作，并将前面的字符通过数值类型返回，所以下面三种情况的返回结果依次为1024，1024，NaN：

var a = '1024px';

var b = '1024px24';

var c = 'abc';

alert(parseInt(a));

alert(parseInt(b));

alert(parseInt(c));

　　这里的 NaN 是Not a Number的简写，简言之就是JS解析不出数字时会返回这个结果。

　　所以，我们这个案例可以通过如下代码完成：

<script>

     window.onload=function ()      

 {      

var oTxt1=document.getElementById('txt1');      

var oTxt2=document.getElementById('txt2');      

 var oBtn=document.getElementById('btn1');        
oBtn.onclick=function ()      

{      

 alert(parseInt(oTxt1.value)+parseInt(oTxt2.value));      

};      

 };

</script>

 <body>

     <input id="txt1" type="text" />

     <input id="txt2" type="text" />

     <input id="btn1" type="button" value="求和" />

 </body>

　　运行结果：

　　这里有一个问题，我们并没有对文本框进行任何限制，当用户向文本框输入的是字母而不是数字的时候，程序是不能正常执行的。所以，这时候需要判断一下对文本框输入值通过 parseInt 方法转换出来的结果是不是 NaN，如果是NaN，就说明用户输入某个值或者这两个值不是数字，此时需要返回给用户一个提示。

　　那么问题来了，在JS里，NaN十分的奇葩：

　　var a=parseInt('abc');

　　var b=parseInt('def');

　　alert(a==b);

　　此时，a和b的值都是NaN，但这个程序的执行结果居然是false，这告诉我们在JS里NaN和NaN是不相等的。换言之，判断结果是不是NaN，不能通过==进行比较。好在天无绝人之路，JS提供了一个函数：isNaN()，用于检测一个变量是否为NaN。

　　现在我们来看：

　　输入字母的时候效果如下：

　　通过 if 进行判断，如果用户有输入的不是数字，则弹出与之对应的错误提示框;如果输入的两个值都没有错误，将会弹出正确答案。

　　那么使用parseInt转换小数，会怎么样呢?

　　var a='3.5';

　　alert(parseInt(a));

　　输出结果为3。对于parseInt而言，转换出来的数字如果是小数，就会舍去小数部分，只保留整数部分。

　　如果我们需要用到小数的话，请使用parseInt的兄弟——parseFloat，这两者在使用方法上没有任何区别，你照猫画虎的试试看。当你不知道转换出来的数值是整数还是小数的时候，请优先选择使用parseFloat，此时即便转换前的变量为整数也不会出现数值缺损。

　　在我们刚才所讲的类型转换中，明确地告知了计算机我们想要对数据类型进行转换，我们将这种方法称为显式类型转换(也可以理解为：强制转换)。同样，还有一种转换类型的方式被我们称为隐式类型转换。隐式类型转换最简单的例子如下：

　　var a=5;

　　var b='5';

　　alert(a==b);

　　理论上来讲的话，二者数据类型不相同，输出结果应该为flase。但是浏览器给出的答案是true。请和下面的例子做一个对比：

　　var a=5;

　　var b='5';

　　alert(a===b);

　　此时，返回的答案变成了false。那么问题来了，==和===二者之间存在什么区别呢?

　　对于==运算符来说，它在比较之前会先把二者的数据类型转换为一致;而 === 运算符(全等运算符)不转换类型，直接比较。在不转换类型的情况下，a和b肯定是不相等。由此可知，在比较a==b时，并没有明确告知计算机我们想要对a或b的类型进行转换，但是计算机自己却偷偷进行了转换，这就是我们所讲的隐式类型转换。除开该例子之外，还存在另一种隐式转换的情况：

　　var a='12';

　　var b='5';

　　alert(a-b);

　　如果这里是a+b，计算机就会默认是字符串相加(拼接)而弹出125。但是如果是a-b的话，计算机会在做减法之前进行隐式转换成数值类型，我们就得到答案7。

　　为什么加法不会进行隐式转换而减法会?因为在JS中+运算符本身具备字符串拼接和数字相加这两个功能，如果+识别为字符串拼接，一步即可完成计算，直接拼接即可;但是如果识别为数字相加，就需要两步才可以完成计算，即：先转换类型，再相加。对于计算机而言，一定会选择步骤更少的路径，所以说加法不会进行隐式转换。而在JS中，-运算符只有数字相减的功能，此时JS不得不进行隐式转换。

　　四，变量作用域

　　变量作用域指的是变量可以起作用的范围。

　　

function aaa(){

　　var a=12;

　　}

　　function bbb(){

　　alert(a);

　　}

　　aaa();

　　bbb();

　　运行这个程序，在bbb函数内会出现变量a没有被定义的报错。事实上，a确实没有被定义，因为在aaa中定义的a是局部变量，而局部变量，只能在定义它的函数里面使用。和局部变量相对的一个概念是全局变量。

　　var a;

　　function aaa(){

　　a=12;

　　}

　　function bbb(){

　　alert(a);

　　}

　　aaa();

　　bbb();

　　这个例题当中的a被声明在所有函数的外面，这样的变量是全局变量，可以在任何地方使用，所以能够正常弹出12。

　　五，闭包

　　关于闭包的概念，我建议你现阶段先不用深究，如果很感兴趣的话可以Google一下。咱们说过，局部变量只能在定义它的函数内使用。那么，有一种情况例外：

　　function aaa(){

　　var a=12;

　　function bbb()

　　{

　　alert(a);

　　}

　　bbb();

　　}

　　aaa();

　　当函数bbb被包含在函数aaa内时，程序可以成功运行。此种写法就被称为闭包。闭包有很多高级的应用，当然这些都是后话，我们慢慢学习。在闭包结构中，aaa称为父函数，bbb称为子函数。对于闭包而言，子函数可以使用父函数的局部变量。事实上，刚刚我们已经使用过闭包了，例如上面的求和函数。

　　六，命名规范

　　命名规范，即怎样给函数以及变量取名字。

　　给函数和变量取名字和给你孩子取名字差不多，理论而言是可以随便取的，但实际应用中又不能显得太俗太low，否则可能会引起隔壁老王的不满。

　　关于命名规范：

　　可读性——容易看懂

　　规范性——合乎规则

　　可读性代表取名尽可能让人能看懂。要是代码通篇都是aaa，bbb，ccc这样的取名，又正好碰到程序比较庞大，此时阅读将是一件非常痛苦的事情。

　　规范性表示JS有一个较为约定俗称的命名规则，大部分情况下采用匈牙利命名法或者类似方法，其原则为：

　　类型前缀

　　首字母大写

　　JS中常见类型前缀：

　　类型前缀一般表明了变量存储的类型，使我们一眼就能辨识变量当中存的是什么，其他人拿到代码的时候就不会胡乱更改数据类型，这样保证了代码的规范和更好的可读性。一般而言只有变量遵循前缀的规范，而函数则没有这个必要。

　　当一个变量或者函数名由多个英文单词组成的时候，我们通常使用驼峰法命名，每个单词的首字母使用大写，例如oBtnUserLogin，这种命名方式可以更清晰地判断变量的含义。

【JavaScript从入门到放弃】JS基础-01的更多相关文章

  1. 初学JavaScript从入门到放弃（一）JavaScript介绍、变量、数据类型

    一.JavaScript介绍 1.JavaScript:轻量级的客户端脚本语音 2.目前js已经不仅仅是客户语音,基于NODE可以做服务器端程序,所以Javascript是全栈编程语音 3.js及部分 ...

  2. js基础01

    常见的五大浏览器:chrome firfox ie opera safari 浏览器的解析器会把代码解析成用户所能看到的东西 www.2cto.com/kf/201202/118111.html浏览器 ...

  3. JavaScript 从入门到放弃（二）模块化工具requirejs

    入门教程: 1.JS模块化工具requirejs教程(一):初识requirejs 2.JS模块化工具requirejs教程(二):基本知识 描述 这几天在使用github最活跃的基于bootstra ...

  4. JavaScript 从入门到放弃（一）事件委托和使用innerHTML添加元素

    一.使用事件委托 一个简单的需求,比如想给ul下面的li加上点击事件,点击哪个li,就显示那个li的innerHTML.这个貌似很简单!代码如下! <!DOCTYPE html> < ...

  5. QML 从入门到放弃

    发现了一个问题: QQuickView only supports loading of root objects that derive from QQuickItem. If your examp ...

  6. 二、JavaScript语言--JS基础--JavaScript入门篇

    1.如何插入JS 使用<script>标签在HTML网页中插入JavaScript代码.注意, <script>标签要成对出现,并把JavaScript代码写在<scri ...

  7. Web3D编程入门总结——WebGL与Three.js基础介绍

    /*在这里对这段时间学习的3D编程知识做个总结,以备再次出发.计划分成“webgl与three.js基础介绍”.“面向对象的基础3D场景框架编写”.“模型导入与简单3D游戏编写”三个部分,其他零散知识 ...

  8. D3.js从入门到“放弃”指南

    前言 近期略有点诸事不顺,趁略有闲余之时,玩起D3.js.之前实际项目中主要是用各种chart如hightchart.echarts等,这些图形库玩起来貌都是完美的,一切皆可配置,但几年前接触了D3之 ...

  9. javascript基础01

    javascript基础01 Javascript能做些什么? 给予页面灵魂,让页面可以动起来,包括动态的数据,动态的标签,动态的样式等等. 如实现到轮播图.拖拽.放大镜等,而动态的数据就好比不像没有 ...

随机推荐

  1. 另一个维度：cocos-2d VS vue

    最近再看cocos-2d的东西,期间得到了同事和老板的支持,在此感谢.之前一直在做vue网页,现在看游戏cocos-2d这块,刚接触肯定有点不适应.cocos-2d多了很多感念:导演.场景.节点等.这 ...

  2. 【剑指Offer】61、序列化二叉树

      题目描述:   请实现两个函数,分别用来序列化和反序列化二叉树.   解题思路:   序列化是指将结构化的对象转化为字节流以便在网络上传输或写到磁盘进行永久存储的过程.反序列化是指将字节流转回结构 ...

  3. 【剑指Offer】27、字符串的排列

      题目描述:   输入一个字符串,按字典序打印出该字符串中字符的所有排列.例如输入字符串abc,则打印出由字符a,b,c所能排列出来的所有字符串abc,acb,bac,bca,cab和cba.    ...

  4. 关于 docsify ssr 的研究

    关于 docsify ssr 的研究 docsify 虽然不错, 但是不支持 seo .官网虽然提供 seo 的一个简单示例, 但总总问题在 issues 中无人解答. 今天再次尝试, 解决了 ind ...

  5. 【VIP视频网站项目二】搭建爱奇艺优酷腾讯视频官网首页轮播图效果及实现原理分析

    这个是实现的效果,基本上轮播效果和主流网站的一致,但是我也在上面优化了一些效果, 可以在线预览效果:https://vip.52tech.tech/ 目前项目代码已经全部开源:项目地址:https:/ ...

  6. vue部署到nginx服务下，非根目录，刷新页面404怎么解决？

    nginx配置 location / { proxy_pass http://xxxx; } location /category { root /home/tv; index index.html; ...

  7. CSS定位相关

    CSS display:inline和float:left两者区别 ①display:inline:任何不是块级元素的可见元素都是内联元素.其表现的特性是“行布局”形式!(行布局:其表现形式始终以行进 ...

  8. 渗透实战（周四）：CSRF跨站域请求伪造

    上图是广东外语外贸大学北校区内MBA中心旁边酒店房间的Wi-Fi网络环境,假设我们的Kali攻击机连入到SSID为414(房间号)的Wi-Fi网络,其IP地址:192.168.43.80 .同一Wi- ...

  9. Phone List POJ 3630 Trie Tree 字典树

    Phone List Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 29416   Accepted: 8774 Descr ...

  10. Elasticsearch顶尖高手系列课程推荐

    Elasticsearch,是目前行业中非常热门的一个技术.Elasticsearch是一种分布式的海量数据搜索与分析的技术,可以用于电商网站.门户网站.企业IT系统等各种场景下的搜索引擎,也可以用于 ...