javaScript 新手入门必看!
<h1 id="javascript">JavaScript</h1><h2 id="基础知识点">基础知识点</h2>
<h3 id="js-代码如何编写">js 代码如何编写？</h3>
<ol>
<li>将<code>js</code>代码嵌入到<code>html</code>网页代码中。</li>
</ol>
<p><code>js</code>代码需要写在<code>script</code>标签当中，并且<code>script</code>标签推荐写在<code>body</code>闭合和<code>html</code>闭合之间。(虽然说<code>script</code>标签可以写在网页的任何位置)。</p>
<blockquote>
<p>任何的代码都不推荐放在<code>html文档声明头</code>的上面，会导致网页没办法执行<code>h5</code>的渲染模式。</p>
</blockquote>
<ol start="2">
<li><code>js</code>代码可以单独的创建一个<code>.js</code>的独立文件，然后通过<code>script</code>里面的<code>src</code>属性来引入。</li>
</ol>
<pre><code class="language-html"><script src="01.js"></script>
</code></pre>
<h3 id="js语句">js语句</h3>
<p><code>js</code>语句其实是代码向<code>宿主环境</code>发送的命令。</p>
<p>每一条语句后面都最好放上<code>语句结束符;</code>。</p>
<h3 id="注释">注释</h3>
<p><code>js</code>当中注释分为两种:<code>单行注释</code>、<code>多行注释</code>.<br>
单行注释:</p>
<pre><code class="language-js">// 注释内容 通常写在代码的上面或者右面
</code></pre>
<p>多行注释:</p>
<pre><code class="language-js">/*
这里是多行注释
*/
</code></pre>
<blockquote>
<p>无论是开发什么软件还是使用什么编程语言，注释都是必不可少的。</p>
</blockquote>
<h3 id="直接量">直接量</h3>
<p>在<code>js</code>当中，直接使用的量，我们称之为<code>直接量</code>。</p>
<h3 id="表达式">表达式</h3>
<p>一般情况下，表达式必须要得到一个<code>结果</code>。</p>
<pre><code class="language-js">10 + 2;
</code></pre>
<h3 id="输出方式">输出方式</h3>
<p><code>js</code>代码中输出方式有很多，其中使用最多的是<code>console.log()</code>，可以直接输出任何我们想要看到的值，主要用来进行调试。</p>
<pre><code class="language-js">console.log(value);
</code></pre>
<p>除了<code>console.log()</code>还有<code>document.write()</code> 。</p>
<blockquote>
<p>在<code>js</code>当中，名字后面带有括号的，我们都可以称之为<code>方法</code>，也称之为<code>API</code>。</p>
</blockquote>
<h3 id="弹窗">弹窗</h3>
<p>如果你的<code>js</code>代码的<code>宿主环境</code>是浏览器的话，那么就可以调用浏览器的api,使用下面三个弹窗：</p>
<pre><code class="language-js">alert();
confirm();
prompt();
</code></pre>
<p>demo:</p>
<pre><code class="language-js">alert('我是一个alert弹窗!');
confirm('我是confirm弹窗');
prompt('你吃饭了没?');
</code></pre>
<h3 id="变量">变量</h3>
<p><code>表达式</code>会产生一个结果，这个结果在<code>js</code>当中可以称为<code>数据</code>。为了方便我们后续的使用，可以用一个<strong>临时</strong>的容器将<br>
这个数据存储起来，当我们再次需要使用这个数据的时候，不需要再通过表达式进行第二次的运算，直接使用这个容器即可。<br>
而这个容器在<code>js</code>中就是<code>变量</code>。</p>
<p>一个变量的生命周期指的这个变量从被创建 到 被js销毁的周期，我们就称之为<code>生命周期</code>。</p>
<p><strong>如何创建一个变量?</strong><br>
在<code>js</code>当中，可以通过关键字<code>var</code>来创建一个变量。</p>
<pre><code class="language-js">var 变量的名字; // 此时变量仅仅被创建，但是没有存储数据
var 变量的名字 = 变量的值; // 变量不仅仅被创建了，而且还被存储数据
</code></pre>
<p>我们创建一个变量也可以说是声明了一个变量。我们可以通过<code>console.log()</code>来查看变量里面存储的具体的数据:</p>
<pre><code class="language-js">var num = 10 + 2; // 创建了一个变量，变量名叫做num ,并且将数据10 存储到了变量num当中。
// num 相当于存储了10+2这个表达式的结果
// console.log()里面如果输出的是一段话，那么这段话外面一定要使用引号
// 如果console.log()里面输出的是一个表达式或者变量，那么就不需要引号。
console.log("尹志平真帅");
// console.log(尹志平真帅); // 此时本条语句会报错，程序会把`尹志平真帅`当做一个变量
console.log(num);
</code></pre>
<p><strong>什么叫做关键字：</strong><br>
<code>关键字</code>就是js本身使用的名字，称之为关键字。一旦一个词被定性为<code>关键字</code>，那么我们就不能够使用。</p>
<blockquote>
<p>临时存储数据使用<code>变量</code>，而想要永久的存储数据就需要使用<code>数据库</code>。</p>
</blockquote>
<p><strong>动态类型语言:</strong><br>
<code>js</code>这门语言当中的变量可以随时的根据需要调整数据和数据类型。</p>
<pre><code class="language-js">
/*
下面是变量应用的具体细节:
*/
// 声明一个变量叫做name
var name;
// 给变量name 存储数据
name = "weixiaobao";
// 给变量name 存储一个新的数据
name = "ake";
// 上面的代码可以变成下面的样子：
var name = "weixiaobao";
name = "ake";
</code></pre>
<p><strong>大小写敏感:</strong><br>
<code>js</code>是一门大小心敏感的语言，在<code>js</code>当中，变量<code>a</code>和变量<code>A</code>是两个不同的变量。</p>
<pre><code class="language-js">var name = "weixiaobao";
var NAME = "ake";
</code></pre>
<h3 id="变量命名规范----标识符">变量命名规范 -- 标识符</h3>
<p>在<code>js</code>当中，经常涉及到起名字的问题，通常情况下遵守的是<code>标识符</code>的命名规范，规范的内容：</p>
<pre><code>第一个字符，可以是任意 Unicode 字母（包括英文字母和其他语言的字母），以及美元符号（$）和下划线（_）。
第二个字符及后面的字符，除了 Unicode 字母、美元符号和下划线，还可以用数字0-9。
</code></pre>
<p>总结起来：就是开头字母可以是英文、字母、下划线、$等。但是不能以数字开头。</p>
<pre><code class="language-js">var _name; // 正确的命名规范
var $age ; // 正确的命名规范
var 1ppp; // 错误的命名
</code></pre>
<blockquote>
<p>切记，命名的时候尽可能的词能达意。</p>
</blockquote>
<blockquote>
<p><code>js</code>当中，命名的时候仍然可以遵守驼峰命名法。</p>
</blockquote>
<p><strong>一次性声明多个变量</strong></p>
<pre><code class="language-js">var name1 = "ake",name2 = "jianning",name3 = "weixiaobao";
console.log(name1,name2);
</code></pre>
<p>Tip:当我们声明了一个变量之后，再次修改这个变量的值时，不需要在写<code>var</code>关键字。<br>
如果使用了<code>var</code>关键字，那么相当于重新声明了一个变量。</p>
<p>如果是下面的这种情况：</p>
<pre><code class="language-js">var x = 1; // x = 1
var x; // 相当于重新声明的变量x无效
console.log(x); // 1
</code></pre>
<p>那么第二次声明相当于是无效的声明。</p>
<h3 id="变量提升">变量提升</h3>
<p>当我们在<code>js</code>中使用一个未定义的变量，就会报错：</p>
<pre><code>错误信息：Uncaught ReferenceError: x is not defined
</code></pre>
<p>但是当我们创建一个变量，并且在变量声明和存储语句之前调用，就不会报错：</p>
<pre><code class="language-js">console.log(x); // undefined
var x = "supper man!";
</code></pre>
<p>原因是发生了<code>变量提升</code>.<br>
什么是<code>变量提升?</code><br>
当我们<code>宿主环境</code>在读取和执行代码之前，会发生<code>预解析</code>，也就是提前找到代码中的全部的变量。将<em>变量的声明操作提升到当前代码的最前面</em>。<br>
所以说上面的代码中<code>console.log()</code>方法其实相当于下面的代码环境:</p>
<pre><code class="language-js">var x;
console.log(x);
x = "supper man!";
</code></pre>
<blockquote>
<p>undefined 表示未定义。是一种数据类型里面的数据。后面会提到。</p>
</blockquote>
<h3 id="如何获取页面元素">如何获取页面元素?</h3>
<p>通过<code>document.getElementById()</code>这个API来获取网页节点。</p>
<pre><code class="language-html"><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>获取页面元素</title>
</head>
<body>
<div id="d1">
hello,world!
</div>
</body>
<script>
// 在当前网页文档中获取元素，通过元素的id值来获取元素
var oDiv = document.getElementById('d1');
console.log(oDiv);
</script>
</html>
</code></pre>
<p>我们也可以通过<code>element.innerHTML</code>属性获取元素内的内容。</p>
<p>如果目标元素是<code>input</code>，我们需要获取的是<code>input</code>的内部的值,可以通过<code>value</code>属性来获取<code>input</code>当中的值。</p>
<pre><code class="language-html"><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>获取页面元素</title>
</head>
<body>
<div id="d1">
hello,world!
</div>
<input type="text" id="name" value="张三">
</body>
<script>
// 在当前网页文档中获取元素，通过元素的id值来获取元素
var oDiv = document.getElementById('d1');
console.log(oDiv);
var content = oDiv.innerHTML;
console.log(content);
// 获取一个input里面value的值
var oInput = document.getElementById('name');
console.log(oInput);
var oInput_value = oInput.value;
console.log(oInput_value);
</script>
</html>
</code></pre>
<h3 id="事件三要素">事件三要素</h3>
<p><code>事件的目标</code>、<code>该事件</code> 以及 <code>事件的结果</code>。</p>
<p>例如:</p>
<pre><code>
天黑了，睡觉关灯。我要关灯。
做这件事的目标:开关
该事件: 按开关
结果：灯灭了
</code></pre>
<p>回到上面的案例：</p>
<pre><code>需求:当用户输入完用户名之后，点击按钮我们就可以获取用户输入的数据
目标: 按钮
事件：点击按钮
结果：获取用户输入的数据
</code></pre>
<p>根据上面的需求，代码如下:</p>
<pre><code class="language-html"><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<!-- 获取用户重新输入的值 -->
<input type="text" id="username" placeholder="请输入用户名">
<button id="btn">点击</button>
</body>
<script>
// 需求：当用户输入完用户名之后，点击按钮我们就可以获取用户输入的数据
// 需要的知识点: 变量 通过id获取元素 获取input的value值 单击事件
// 找到按钮
var oBtn = document.getElementById('btn');
console.log(oBtn); // 打印判断一下是否成功的找到了按钮,如果没有找到按钮，则是null表示空
// onclick 表示单击事件 或者说表示单击这样的鼠标操作
oBtn.onclick = function () {
// 函数里面写的内容就是后果
// alert("你好!");
var oInput = document.getElementById('username');
// console.log(oInput.value);
oInput.value = "喜欢就点个关注吧亲!";
}
</script>
</html>
</code></pre>
<blockquote>
<p>获取input 里面的value值需要使用value属性，获取其他标签里面的内容，需要使用innerHTML.</p>
</blockquote>
<h2 id="数据类型">数据类型</h2>
<p><code>js</code>当中数据类型分为两类：<code>原始数据类型</code>和<code>引用数据类型</code>。</p>
<blockquote>
<p><code>原始类型</code>又称之为<code>基础数据类型</code>，而<code>引用数据类型</code>又称之为<code>对象类型</code>。</p>
</blockquote>
<p><strong>原始类型:</strong></p>
<ul>
<li>Boolean</li>
<li>Null</li>
<li>Undefined</li>
<li>Number</li>
<li>String</li>
<li>Symbol</li>
</ul>
<p><strong>引用数据类型:</strong></p>
<ul>
<li>Object</li>
<li>Array</li>
<li>Function</li>
<li>Date</li>
<li>Math</li>
<li>RegExp</li>
</ul>
<p><strong>原始数据类型和引用数据类型的区别:</strong></p>
<p>二者在内存中存储的位置不同。具体来讲，<code>原始数据类型</code>存储在栈中。而<code>引用数据类型</code>实际存在内存的<code>堆</code>中<br>
。而如果把某个<code>引用数据类型</code>的数据存储到了一个变量当中，本质上是把数据在<code>堆</code>中的位置存储在了变量中，而<br>
变量存储在内存的<code>栈</code>中。</p><br><br>
来源：https://www.cnblogs.com/quxinyu/p/10846594.html
頁:
[1]