JavaScript
<h2 id="一javascript介绍">一、Javascript介绍</h2><h3 id="1javascript的诞生">1、JavaScript的诞生</h3>
<p>1994 年，网景公司（NetScape）发布了Navigator浏览器0.9版， 这是历史上第一个比较成熟的浏览器，引起了广泛关注。但是，这个版本的浏览器只能用来浏览，不具备与访问者互动的能力。网景公司急需要一门网页脚本语言，使得浏览器可以与网页进行互动。</p>
<p>1995年5月，网景公司做出决策，未来的网页脚本语言必须"看上去与Java足够相似"，但是比Java简单，使得非专业的网页作者也能很快上手。</p>
<p>1995年4月，网景公司录用了34岁的系统程序员Brendan Eich，他只用10天时间就把Javascript设计出来。</p>
<h3 id="2javascript语言的前世今生">2、JavaScript语言的前世今生</h3>
<ul>
<li>1995.2月 Netscape公司发布LiveScript，后临时改为JavaScript，为了蹭上Java的热浪。</li>
<li>欧洲计算机制造商协会（ECMA）英文名称是European Computer Manufacturers Association</li>
<li>1997 年，以JavaScript 1.1 为基础。由来自 Netscape、Sun、微软、Borland 和其他一些对脚本编程感兴趣的公司的程序员组成的 TC39（ECMA的小组） 锤炼出了 ECMA-262，也就是ECMAScript1.0。</li>
<li>1998年6月，ECMAScript 2.0版发布。</li>
<li>1999年12月，ECMAScript 3.0版发布，成为JavaScript的通行标准，得到了广泛支持。</li>
<li>2007年10月，ECMAScript 4.0版草案发布：分歧太大，失败告终。</li>
<li>2009年12月，ECMAScript 5.0版正式发布</li>
<li>2015年6月17日，ECMAScript 6发布正式版本，即ECMAScript 2015。</li>
</ul>
<p>...</p>
<h3 id="3javascript来源于借鉴">3、JavaScript来源于借鉴</h3>
<ul>
<li>借鉴C语言的基本语法；</li>
<li>借鉴Java语言的数据类型和内存管理；</li>
<li>借鉴Scheme语言，将函数提升到"第一等公民"（first class）的地位；</li>
<li>借鉴Self语言，使用基于原型（prototype）的继承机制。</li>
</ul>
<h3 id="4什么是javascript">4、什么是JavaScript?</h3>
<p>JavaScript是一种脚本语言，其源代码在发往客户端运行之前不需经过编译，而是将文本格式的字符代码发送给浏览器由浏览器解释运行。</p>
<blockquote>
<p>解释型语言：程序执行之前，不需要编译，直接运行时边解析边执行的语言</p>
<p>编译型语言：程序执行之前，需要一个专门的编译过程，把程序编译成为机器语言的文件，比如exe文件</p>
</blockquote>
<h3 id="5javascript的特点">5、JavaScript的特点</h3>
<ul>
<li><strong>简单易用</strong>：可以使用任何文本编辑工具编写；只需要浏览器就可以执行程序。</li>
<li><strong>解释执行</strong>（解释语言）：事先不编译；逐行执行；无需进行严格的变量声明。</li>
<li><strong>基于对象</strong>：内置大量现成对象，编写少量程序可以完成目标。</li>
</ul>
<h3 id="6javascript的组成">6、JavaScript的组成</h3>
<p><strong>ECMAScript +DOM+BOM</strong></p>
<p><strong>ECMAScript</strong>：</p>
<ul>
<li>JavaScript的语法标准</li>
<li>ECMA是一个组织，即欧洲计算机制造商协会</li>
<li>ECMAScript是ECMA制定的脚本语言的标准, 规定了一种脚本语言实现应该包含的基本内容</li>
<li>JavaScript是脚本语言的一种,所以JavaScript也必须遵守ECMAScript标准，包含ECMAScript标准中规定的基本内容</li>
</ul>
<p><strong>DOM</strong>：</p>
<ul>
<li>JavaScript操作网页上的元素的API</li>
</ul>
<p><strong>BOM</strong>：</p>
<ul>
<li>JavaScript操作浏览器的部分功能的API</li>
</ul>
<h3 id="7javascript的使用场景">7、JavaScript的使用场景</h3>
<p>随着JavaScript这门语言的完善，我们可以用它来进行前端开发、后端开发和移动端开发。当然，学习这门语言最开始的突破口在于前端开发。我们一起看看在前端领域它能做什么吧!</p>
<ol>
<li>页面特效</li>
<li>动态数据处理</li>
<li>网页小游戏</li>
<li>动画特效<br>
.....</li>
</ol>
<h3 id="8javascript和htmlcss的关系">8、JavaScript和HTML、CSS的关系</h3>
<ul>
<li><strong>Html</strong>：是用来制作网页，简单来说就是编写网页结构</li>
<li><strong>CSS</strong>： 美化网页（样式）</li>
<li><strong>Javascript</strong>：实现网页与客户之间互动的桥梁，让网页具有丰富的生命力</li>
</ul>
<h2 id="二javascript基本语法">二、JavaScript基本语法</h2>
<h3 id="1js的书写形式">1、JS的书写形式</h3>
<h4 id="行内式">行内式</h4>
<p>方式一：</p>
<pre><code class="language-html"><button onclick="alert('今天天气很好！');">今天天气?</button>
</code></pre>
<blockquote>
<p>虽然可以写在标签的属性中，但是结构与行为耦合，不方便维护，不推荐使用</p>
</blockquote>
<p>方式二：</p>
<pre><code class="language-html"><a href="javascript:alert('你点疼我了！！');">点我</a>
</code></pre>
<h4 id="页内式">页内式</h4>
<p>写法：</p>
<pre><code class="language-html"><body>
......
<script type="text/javascript">
alert("今天天气很好！");
</script>
</body>
</code></pre>
<p>注意事项：</p>
<p><code><script></script></code>标签中的 js 代码一般写在文档的尾部；</p>
<p>网页是从上至下加载，而js代码通常是给标签添加交互(操作元素)，所以需要先加载HTML，否则如果执行js代码时HTML还未被加载， 那么js代码将无法添加交互(操作元素);</p>
<p>HTML页面中出现<code><script></code>标签后，就会让页面暂停等待脚本的解析和执行。无论当前脚本是内嵌式还是外链式，页面的下载和渲染都必须停下来等待脚本的执行完成才能继续。</p>
<p>所以如果把 js 代码如果写在head中，那么js代码执行完毕之前后续网页无法被加载。</p>
<h4 id="外链式">外链式</h4>
<p>写法：</p>
<pre><code class="language-html"><script type="text/javascript" src="01-js书写格式.js"></script>
</code></pre>
<p>注意事项：</p>
<p>外链式的script代码块中不能编写js代码，即便写了也不会执行</p>
<pre><code class="language-html"><script type="text/javascript" src="index.js">
alert("今天天气很好！"); // 不会被执行
</script>
</code></pre>
<p>由于每次加载外链式的js文件都会发送一次请求，这样非常消耗性能，所以在企业开发中推荐将多个JS文件打包成为一个JS文件，以提升网页的性能和加载速度。</p>
<h3 id="2js的注释">2、JS的注释</h3>
<h4 id="单行注释">单行注释</h4>
<pre><code class="language-javascript">// 这是单行注释
</code></pre>
<h4 id="多行注释">多行注释</h4>
<pre><code class="language-javascript">/* 这是多行注释 */
</code></pre>
<h4 id="标准注释">标准注释</h4>
<pre><code class="language-javascript">/**
* 文件名：xx.js
* 作者：xxx
* 描述：本js的功能
* 修改人：xxx
* 修改时间：
* 修改内容：
*/
</code></pre>
<h3 id="3js常见的输出方式">3、JS常见的输出方式</h3>
<h4 id="弹窗">弹窗</h4>
<p>弹出框：</p>
<pre><code class="language-javascript">alert("提示信息！"); // window.alert("提示信息！");
</code></pre>
<p>提示框：</p>
<pre><code class="language-javascript">//利用对话框返回的值 （true 或者 false）
if (confirm("你确定提交吗？")) {
alert("点击了确定");
} else {
alert("点击了取消");
}
</code></pre>
<p>对话框：</p>
<pre><code class="language-javascript">var name = prompt("请输入您的名字", ""); //将输入的内容赋给变量 name
//这里需要注意的是，prompt有两个参数，前面是提示的话，后面是当对话框出来后，在对话框里的默认值
if (name) //如果返回的有内容
{
alert("欢迎您：" + name)
}
</code></pre>
<h4 id="控制台输出">控制台输出</h4>
<pre><code class="language-javascript">console.log('输出信息');
console.warn('警告信息');
console.error('错误信息');
</code></pre>
<h4 id="向body中输出">向body中输出</h4>
<pre><code class="language-javascript">document.write('你好');
document.write('<h3>你好</h3>');
</code></pre>
<blockquote>
<p>JS 细节点</p>
<ol>
<li>编写Javascript注意语法规范，一行代码结束后必须在代码最后加上 ;</li>
<li>在JavaScript中是严格区分大小写的</li>
<li>JavaScript中会忽略多个空格和换行</li>
</ol>
</blockquote>
<h3 id="4字面量变量常量">4、字面量、变量、常量</h3>
<h4 id="概念">概念</h4>
<ul>
<li><strong>字面量</strong>：字面量就是一个值，比如变量的值和常量的值。（字母、数字、字符串 ……）</li>
<li><strong>变量</strong>：定义完成后，可以修改的数据。</li>
<li><strong>常量</strong>：定义完成后，固定且不能改变的数据。</li>
</ul>
<h4 id="变量">变量</h4>
<ul>
<li>
<p><strong>概念</strong>：变量可以用来保存字面量，而且变量的值是可以改变的。</p>
</li>
<li>
<p><strong>定义变量</strong>：在JS中用var关键字来声明一个变量。</p>
<ul>
<li>格式：<code>var 变量名 </code>，比如：<code> var name;</code><code>var age;</code></li>
<li>同时声明多个变量：<code>var name, age;</code></li>
</ul>
</li>
<li>
<p><strong>变量初始化</strong>：</p>
<ul>
<li>先定义后初始化：</li>
</ul>
<pre><code class="language-javascript">var a;
a = 100;
</code></pre>
<ul>
<li>定义的同时初始化：</li>
</ul>
<pre><code class="language-javascript">var a = 100;
</code></pre>
</li>
<li>
<p><strong>变量的默认值</strong>：如果变量初始化时没有赋值，则里面存储的是 <strong>undefined</strong></p>
</li>
<li>
<p><strong>变量的命名规范和规则</strong>：</p>
<ul>
<li>命名规则：必须遵循，不遵循则报错。</li>
</ul>
<blockquote>
<ol>
<li>由字母、数字、下划线、$符号组成，不能以数字开头。</li>
<li>不能是关键字和保留字。</li>
<li>区分大小写</li>
</ol>
</blockquote>
<ul>
<li>命名规范：建议遵循，不遵循不会报错。</li>
</ul>
<blockquote>
<ol>
<li>变量名最好见名知意</li>
<li>遵守驼峰命名法：首字母小写，后面单词首字母大写。例如：myName</li>
</ol>
</blockquote>
</li>
</ul>
<h4 id="常量">常量</h4>
<p>在ES6之前并没有声明常量的方法，在ES6中新增加了const来定义常量。</p>
<p>建议常量的命名全部大写，如果由多个单词构成，可以用下划线隔开。</p>
<h3 id="5数据类型">5、数据类型</h3>
<h4 id="数据类型定义">数据类型定义</h4>
<p>数据类型指的就是字面量的类型。程序在运行过程中会产生各种各样的临时数据， 为了方便数据的运算和操作，JavaScript对这些数据进行了分类，提供了丰富的数据类型。</p>
<h4 id="数据类型划分">数据类型划分</h4>
<ul>
<li><strong>基本数据类型</strong>：
<ul>
<li>String：字符串</li>
<li>Number：数值</li>
<li>Boolean：布尔值</li>
<li>Null：空值</li>
<li>Undefined：未定义</li>
</ul>
</li>
<li><strong>引用数据类型</strong>：
<ul>
<li>Object：对象</li>
</ul>
</li>
</ul>
<h4 id="数据类型查看">数据类型查看</h4>
<p>typeof 操作符，会将检查的结果以字符串的形式返回给我们。</p>
<pre><code class="language-javascript">var a = '34';
console.log(typeof(a));
</code></pre>
<h4 id="number">Number</h4>
<ul>
<li><strong>定义</strong>：在JS中所有的数值都是Number类型，包括整数和浮点数（小数）</li>
<li><strong>最大数和最小数</strong>：由于内存的限制，ECMAScript 并不能保存世界上所有的数值。</li>
</ul>
<pre><code class="language-javascript">// 最大值：Number.MAX_VALUE
console.log(Number.MAX_VALUE);
// 最小值：Number.MIN_VALUE
console.log(Number.MIN_VALUE);
// 无穷大：Infinity, 如果超过了最大值就会返回该值
console.log(Number.MAX_VALUE + Number.MAX_VALUE); // Infinity
// 无穷小：-Infinity, 如果超过了最小值就会返回该值
console.log(typeof Infinity); // number
console.log(typeof -Infinity); // number
</code></pre>
<ul>
<li><strong>NaN</strong>：是一个特殊的数字，表示 非法数字 Not A Number；使用typeof 检查一个NaN也会返回number。</li>
</ul>
<blockquote>
<p>注意事项：</p>
<ol>
<li>在JS中整数的运算可以保证精确的结果</li>
<li>在JS中浮点数的运算可能得到一个不精确的结果。所以千万不要使用JS进行对精确度要求比较高的运算</li>
</ol>
</blockquote>
<h4 id="string">String</h4>
<p>字符串是由单引号和双引号括起，ES6 模板字符串 ``</p>
<pre><code class="language-javascript">var a = "Hello";
console.log(typeof(a)); // string
var b = 'Hello';
console.log(typeof(b)); // string
var c = `Hello`;
console.log(typeof(c)); // string
</code></pre>
<blockquote>
<p>注意事项：</p>
<ol>
<li>不能一单一双，引号必须成对出现。</li>
<li>相同引号不能嵌套，不同引号可以嵌套。</li>
</ol>
</blockquote>
<h4 id="boolean">Boolean</h4>
<p><strong>概念</strong>：布尔型也被称为逻辑类型或者真假值类型，只有能够获取真（true）和假（false）两种数值。</p>
<p>虽然 Boolean 类型的字面值只有两个，但ECMAScript中所有类型的值都有与这个Boolen值等价的值</p>
<ul>
<li>任何非零数值都是true，包括正负无穷大。只有 0 和 NaN是false</li>
<li>任何非空字符串都是true，只有空字符串是false</li>
<li>任何对象都是true，只有null和undefined是false</li>
</ul>
<h4 id="null-和-undefined">Null 和 Undefined</h4>
<ul>
<li>
<p>Undefined 是一种比较特殊的类型，表示变量未赋值，这种类型只有一种值就是undefined</p>
</li>
<li>
<p>undefined 是 Undefined 类型的字面量</p>
<ul>
<li>undefined 和 168、“like”一样是一个字面量</li>
<li>Undefined 和 Number、String 一样是一个数据类型</li>
<li>typeof 对没有初始化和没有声明的变量都会返回 undefined</li>
</ul>
</li>
<li>
<p>Null 类型也是只有一个值的数据类型，这个特殊的值是 null</p>
<ul>
<li>从语义上看null表示的是一个空的对象，所以使用 typeof 会返回一个Object</li>
</ul>
<pre><code class="language-javascript">var str = null;
console.log(typeof str); // object
</code></pre>
</li>
<li>
<p>undefined值实际上是由null值衍生出来的，所以如果比较undefined和n ll是否相等，会返回true</p>
</li>
</ul>
<pre><code class="language-javascript">var str1 = null;
var str2 = undefined
console.log(str1 == str2); // true
console.log(str1 === str2); // false
</code></pre>
<h3 id="6数据类型转换">6、数据类型转换</h3>
<h4 id="定义">定义</h4>
<p>将一个数据类型转换为其他的数据类型，比如：将String类型转换为Number类型，将Number类型转换为Boolean类型...</p>
<p>类型转换主要指，将其他的数据类型，转换为String Number Boolean</p>
<h4 id="将其他的数据类型转换为string">将其他的数据类型转换为String</h4>
<p><strong>方式一</strong>：调用被转换数据类型的toString()方法</p>
<blockquote>
<p>注意：</p>
<ol>
<li>该方法不会影响到原变量，它会将转换的结果返回</li>
<li>null和undefined这两个值没有toString()方法，如果调用它们的方法，会报错</li>
<li>number 类型的 toString()方法可以带一个进制参数</li>
</ol>
</blockquote>
<p>使用：</p>
<pre><code class="language-javascript">var num = 12306;
var str = num.toString();
console.log(typeof num ); // number
console.log(str); // 12306
console.log(typeof str); // string
var num1 = true;
var str1 = num1.toString();
console.log(str1); // true
console.log(typeof str1); // string
var num2 = undefined;
var str2 = num2.toString(); // 报错
console.log(str2);
var num3 = null;
var str3 = num3.toString(); // 报错
console.log(str3);
var num4 = NaN;
var str4 = num4.toString();
console.log(str4); // NaN
console.log(typeof str4); // String
var num5 = 123.5;
var str = num5.toString(2);
console.log(str); // 1111011.1
console.log(typeof str); // string
</code></pre>
<p><strong>方式二</strong>：调用String()函数，并将被转换的数据作为参数传递给函数</p>
<blockquote>
<p>注意：</p>
<p>使用String()函数做强制类型转换时，对于Number和Boolean实际上就是调用的toString()方法，但是对于null和undefined，就不会调用toString()方法，它会将 null 直接转换为 "null",将 undefined 直接转换为 "undefined"。</p>
</blockquote>
<p>使用：</p>
<pre><code class="language-javascript">var a = null;
a = String(a);
console.log(typeof a); // string
console.log(a); // null
a = undefined;
a = String(a);
console.log(typeof a); // string
console.log(a); // undefined
</code></pre>
<p><strong>方式三</strong>：拼接字符串</p>
<p>任何数据和 + " "连接到一起都会转换为字符串，其内部实现原理和String()函数一样。</p>
<p>使用：</p>
<pre><code class="language-javascript">var num1 = 100;
var res1 = num1 + "";
console.log(res1); // 100
console.log(typeof res1); // string
var num2 = true;
var res2 = num2 + "";
console.log(res2); // true
console.log(typeof res2); // string
var num3 = undefined;
var res3 = num3 + "";
console.log(res3); // undefined
console.log(typeof res3); // string
var num4 = null;
var res4 = num4 + "";
console.log(res4); // null
console.log(typeof res4); // string
</code></pre>
<h4 id="将其他的数据类型转换为number">将其他的数据类型转换为Number</h4>
<p><strong>方式一</strong>：Number() 函数</p>
<blockquote>
<p>字符串 -> 数字</p>
<ol>
<li>如果是纯数字的字符串，则直接将其转换为数字</li>
<li>如果字符串中有非数字的内容，则转换为NaN</li>
<li>如果字符串是一个空串或者是一个全是空格的字符串，则转换为0</li>
</ol>
</blockquote>
<p>使用：</p>
<pre><code class="language-javascript">var str1 = "123";
var res1 = Number(str1);
console.log(res1); // 123
console.log(typeof res1); // number
var str2 = "itlike123";
var res2 = Number(str2);
console.log(res2); // NaN
var str3 = "";
var res3 = Number(str3);
console.log(res3); // 0
var str4 = " ";
var res4 = Number(str4);
console.log(res4); // 0
</code></pre>
<blockquote>
<p>布尔 -> 数字</p>
<p>true 转成 1, false 转成 0</p>
</blockquote>
<p>使用：</p>
<pre><code class="language-javascript">var bool1 = true;
var n1 = Number(bool1);
console.log(n1); // 1
var bool2 = false;
var n2 = Number(bool2);
console.log(n2); // 0
</code></pre>
<blockquote>
<p>null -> 数字</p>
</blockquote>
<pre><code class="language-javascript">var str1 = null;
var n1 = Number(str1);
console.log(n1); // 0
</code></pre>
<blockquote>
<p>undefined -> 数字</p>
</blockquote>
<pre><code class="language-javascript">var str1 = undefined;
var n1 = Number(n1);
console.log(n1); // NaN
</code></pre>
<p><strong>方式二</strong>：parseInt() 和 parseFloat() 专门用来处理字符串</p>
<blockquote>
<p>使用注意：</p>
<ol>
<li>使用Number()函数中无论混合字符串是否存在有效整数都会返回NaN，但parseInt()/parseFloat()可以提取字符串中的有效整数。</li>
<li>parseInt()和parseFloat()的区别是前者只能提取整数，后者可以提取小数</li>
</ol>
</blockquote>
<p>使用1：</p>
<pre><code class="language-javascript">var str1 = "300px";
var n1 = parseInt(str1);
console.log(n1); // 300
var str2 = "300px250";
var n2 = parseInt(str2);
console.log(n2); // 300
console.log(parseInt("abc123")); //返回NaN，如果第一个字符不是数字或者符号就返回NaN
console.log(parseInt("")); //空字符串返回NaN，Number("")返回0
</code></pre>
<p>使用2：</p>
<pre><code class="language-javascript">var str1 = "20.5px";
var n1 = parseFloat(str1);
console.log(n1); // 20.5
var str2 = "20.5.5.5px";
var n2 = parseFloat(n2);
console.log(n2); // 20.5
</code></pre>
<blockquote>
<p>注意：</p>
<p>如果对非String使用parseInt()或parseFloat(), 它会先将其转换为String然后在操作</p>
</blockquote>
<pre><code class="language-javascript">var a = true;
a = parseInt(a);
console.log(typeof a); // number
console.log(a); // NaN
</code></pre>
<h4 id="将其他的数据类型转换为boolean">将其他的数据类型转换为Boolean</h4>
<p><strong>使用Boolean()函数</strong></p>
<p><strong>数字 -> 布尔</strong>：除了0和NaN，其余的都是true</p>
<p><strong>字符串 -> 布尔</strong>：除了空串，其余的都是true</p>
<p>null和undefined都会转换为false，对象转换为true</p><br><br>
来源：https://www.cnblogs.com/xzh0717/p/11450912.html
頁:
[1]