JavaScript的基本介绍
<h1>javascript</h1><div class="lemma-summary">
<div class="para"> JavaScript一种直译式脚本语言，是一种动态类型、弱类型、基于原型的语言，内置支持类型。它的解释器被称为JavaScript引擎，为浏览器的一部分，广泛用于客户端的脚本语言，最早是在HTML（标准通用标记语言下的一个应用）网页上使用，用来给HTML网页增加动态功能。</div>
<div class="para"> 在1995年时，由Netscape公司的Brendan Eich，在网景导航者浏览器上首次设计实现而成。因为Netscape与Sun合作，Netscape管理层希望它外观看起来像Java，因此取名为JavaScript。但实际上它的语法风格与Self及Scheme较为接近。<sup class="sup--normal" data-sup="1" data-ctrmap=":1,"> </sup> </div>
<div class="para">为了取得技术优势，微软推出了JScript，CEnvi推出ScriptEase，与JavaScript同样可在浏览器上运行。为了统一规格，因为JavaScript兼容于ECMA标准，因此也称为ECMAScript。</div>
<div class="para">
<h2 class="title-text"><span style="font-size: 18px">组成部分</span></h2>
<div class="para">
<div class="para">ECMAScript，描述了该语言的语法和基本对象。</div>
<div class="para">
<div class="lemma-picture text-pic layout-right">文档对象模型（DOM），描述处理网页内容的方法和接口。<sup class="sup--normal" data-sup="2" data-ctrmap=":2,"><br></sup></div>
</div>
<div class="para">浏览器对象模型（BOM），描述与浏览器进行交互的方法和接口。<sup class="sup--normal" data-sup="2" data-ctrmap=":2,"><br></sup></div>
<div class="para"> <img src="https://gss2.bdstatic.com/-fo3dSag_xI4khGkpoWK1HF6hhy/baike/s%3D250/sign=103c88deb21c8701d2b6b5e3177f9e6e/730e0cf3d7ca7bcb3409f115bf096b63f624a89d.jpg"></div>
<div class="para">
<p><span style="font-size: 18px"><strong>JavaScript基础</strong></span></p>
<p><strong>JS的引入方式</strong></p>
<div class="cnblogs_code">
<pre>1 直接编写
<script>
alert('hello yuan')
</script>
2 导入文件
<script src="hello.js"></script><br>3 内联（不推荐使用）</pre>
</div>
</div>
<div class="para">
<p><strong>JS的变量、</strong></p>
<p> 1.声明变量时不用声明变量类型，全部使用var关键字 </p>
<div class="cnblogs_code">
<pre>var a;<br>a=3;</pre>
</div>
<p> 2.<span class="Apple-tab-span">一行可以声明多个变量.并且可以是不同类型</span></p>
<div class="cnblogs_code">
<pre>var name="yuan", age=20, job="lecturer";</pre>
</div>
<p> 3.<span class="Apple-tab-span">一行可以声明多个变量.并且可以是不同类型</span></p>
<p style="text-align: left"> 4.变量命名：</p>
<p style="text-align: left"> <span style="font-size: 14px">a.首字符只能是字母,下划线,$美元符 三选一，余下的字符可以是下划线、美元符号或任何字母或数字字符且区分大小写。</span></p>
<p style="text-align: left"><span style="font-size: 14px"> b.最好语义化，看其名之其意，使用数据类型的首字母做前缀。</span></p>
<p style="text-align: left"><span style="font-size: 14px"> c.不允许使用关键字和保留字</span>。</p>
<p style="text-align: left"><strong>JS的数据类型</strong></p>
<p> 数据类型有：</p>
<div class="cnblogs_code">
<pre>number -----数值
boolean -----布尔值
string -----字符串
undefined-----undefined
null ----- null<br>object -----对象<br>array -----数组<br>function -----function</pre>
</div>
<p><span style="color: rgba(255, 102, 0, 1)">数字类型</span>：</p>
<ul>
<li>不区分整型数值和浮点型数值;</li>
</ul>
<p><img src="https://images2017.cnblogs.com/blog/1184802/201709/1184802-20170922220844103-640841952.png"></p>
<p><span style="color: rgba(255, 102, 0, 1)">字符串类型</span>（string）:</p>
<p>是由Unicode字符、数字、标点符号组成的序列；字符串常量首尾由单引号或双引号括起；JavaScript中没有字符类型；常用特殊字符在字符串中的表达；<br>字符串中部分特殊字符必须加上右划线\；常用的转义字符 \n:换行 \':单引号 \":双引号 \\:右划线</p>
<p> 布尔类型（bolean）:</p>
<p>Boolean类型仅有两个值：true和false，也代表1和0，实际运算中true=1,false=0<br>布尔值也可以看作on/off、yes/no、1/0对应true/false<br>Boolean值主要用于JavaScript的控制语句，例如：</p>
<div class="cnblogs_code">
<pre>if (x==1){
y=y+1;
}else{
y=y-1;
}</pre>
</div>
<p><span style="color: rgba(255, 102, 0, 1)">Undefined</span>类型</p>
<p>1.Undefined 类型只有一个值，即 undefined。当声明的变量未初始化时，该变量的默认值是 undefined。</p>
<p>2.当函数无明确返回值时，返回的也是值 "undefined";</p>
<p><span style="color: rgba(255, 102, 0, 1)">Null</span>类型</p>
<p>另一种只有一个值的类型是 Null，它只有一个专用值 null，即它的字面量。值 undefined 实际上是从值 null 派生来的，因此 ECMAScript 把它们定义为相等的。</p>
<p>尽管这两个值相等，但它们的含义不同。undefined 是声明了变量但未对其初始化时赋予该变量的值，null 则用于表示尚未存在的对象（在讨论 typeof 运算符时，简单地介绍过这一点）。如果函数或方法要返回的是对象，那么找不到该对象时，返回的通常是 null。</p>
<p><span style="color: rgba(255, 102, 0, 1)">对象类型</span>（object）：</p>
<p class="intro">JavaScript 中的所有事物都是对象：字符串、数值、数组、函数...</p>
<p class="intro">此外，JavaScript 允许自定义对象。</p>
<p class="intro"><span style="color: rgba(255, 102, 0, 1)">数组</span>（array）：</p>
<p class="intro">数组是特殊的对象。</p>
<p><span style="font-size: 16px"><strong>运算符</strong></span></p>
<p>运算符分类</p>
<div class="cnblogs_code">
<div class="cnblogs_code_toolbar"> </div>
<pre>算术运算符：
+ - * / % ++ --
比较运算符：
> >= < <= != == === !==
逻辑运算符：
&& || ！
赋值运算符：
=+= -=*= /=
字符串运算符：
+连接，两边操作数有一个或两个是字符串就做连接运算</pre>
<div class="cnblogs_code_toolbar"> </div>
</div>
<p> 算术运算符：自增，自减</p>
<div class="cnblogs_code">
<pre>++i:先计算后赋值
i++：先赋值后计算</pre>
</div>
<p> 假如x=2，那么x++表达式执行后的值为3，x--表达式执行后的值为1；i++相当于i=i+1，i--相当于i=i-1；</p>
<p> <strong>js不同于python，是一门弱类型语言</strong></p>
<div class="cnblogs_code">
<pre>能够进行数据转换的叫做<span style="color: rgba(51, 153, 102, 1)">弱类型</span>
console.log('1'==1)//True
console.log('1'===1)//False
强类型
print(1='1') //False</pre>
</div>
<p><strong> </strong><strong>NaN</strong></p>
<div class="cnblogs_code">
<div class="cnblogs_code_toolbar"> </div>
<pre>var d="yuan";
d=+d;
alert(d);//NaN:属于Number类型的一个特殊值,当遇到将字符串转成数字无效时,就会得到一个NaN数据
alert(typeof(d));//Number
//<span style="color: rgba(51, 153, 102, 1)">NaN特点</span>:
var n=NaN;
alert(n>3);
alert(n<3);
alert(n==3);
alert(n==NaN);
alert(n!=NaN);//NaN参与的所有的运算都是false,除了!=<br> NaN不等于NaN</pre>
<div class="cnblogs_code_toolbar"> </div>
</div>
<h3> 比较运算符</h3>
<div class="cnblogs_code">
<pre>> >= < <= != == === !== (具有隐式类型转换规则)</pre>
</div>
<p> </p>
<p> 等号和非等号的同类运算符是全等号和非全等号。这两个运算符所做的与等号和非等号相同，只是它们在检查相等性前，不执行类型转换。</p>
<div class="cnblogs_code">
<pre>console.log(2==2); //true
console.log(2=='2'); //true因为js是弱类型的，所以返回true
console.log(2==='2'); //false (===判断的是类型，类型不一样就为false了)
console.log(2!=='2'); //true ！==和===是相反的</pre>
</div>
<p><strong> 注意：</strong></p>
<div class="cnblogs_code">
<div class="cnblogs_code_toolbar"> </div>
<pre>var bResult = "Blue" < "alpha";
alert(bResult); //输出 true
在上面的例子中，字符串 "Blue" 小于 "alpha"，因为字母 B 的字符代码是 66，字母 a 的字符代码是 97。
比较数字和字符串
另一种棘手的状况发生在比较两个字符串形式的数字时，比如：
var bResult = "25" < "3";
alert(bResult); //输出 "true"
上面这段代码比较的是字符串 "25" 和 "3"。两个运算数都是字符串，所以比较的是它们的字符代码（"2" 的字符代码是 50，"3" 的字符代码是 51）。
不过，如果把某个运算数该为数字，那么结果就有趣了：
var bResult = "25" < 3;
alert(bResult); //输出 "false"
这里，字符串 "25" 将被转换成数字 25，然后与数字 3 进行比较，结果不出所料。
<strong>总结：
比较运算符两侧如果一个是数字类型,一个是其他类型,会将其类型转换成数字类型.
比较运算符两侧如果都是字符串类型,比较的是最高位的asc码,如果最高位相等,继续取第二位比较.</strong></pre>
<div class="cnblogs_code_toolbar"> </div>
</div>
<p><span style="font-size: 16px"> <strong>逻辑运算符</strong></span></p>
<div class="cnblogs_code">
<pre>||（或）；&&（且）； ！（非）<br>console.log(1&&3); //3两个为真才为真（0为假，其他的数字都代表真）
console.log(0&&3); //0只要有一个为假则为假
console.log(0||3); //3
console.log(2||3); //2<br><br></pre>
</div>
<p><strong><span style="font-size: 16px">常量和标识符</span></strong></p>
<p><span class="s1"><strong>常量</strong> ：直接在程序中出现的数据值</span></p>
<p><strong>标识符</strong>：</p>
<ol>
<li>由不以数字开头的字母、数字、下划线(_)、美元符号($)组成</li>
<li>常用于表示函数、变量等的名称</li>
<li>例如：_abc,$abc,abc,abc123是标识符，而1abc不是</li>
<li>JavaScript语言中代表特定含义的词称为保留字，不允许程序再定义为标识符</li>
</ol>
<p>关键字：</p>
<p> <img src="https://images2017.cnblogs.com/blog/1184802/201709/1184802-20170922220310478-432741606.png"></p>
<p><img src="https://images2017.cnblogs.com/blog/1184802/201709/1184802-20170922220404134-1522010134.png"></p>
<p><span style="font-size: 16px"><strong>流程控制</strong></span></p>
<ul>
<li>顺序结构(从上向下顺序执行)</li>
<li>分支结构</li>
<li>循环结构</li>
</ul>
<p><strong>分支结构：</strong></p>
<p> 1. if.....else结构：</p>
<div class="cnblogs_code">
<div class="cnblogs_code_toolbar"> </div>
<pre>if (表达式1) {
语句1;
}else if (表达式2){
语句2;
}else if (表达式3){
语句3;
} else{
语句4;
}</pre>
<div class="cnblogs_code_toolbar"> </div>
</div>
<p> </p>
<p> 2.<strong>switch-case结构</strong></p>
<div class="cnblogs_code">
<div class="cnblogs_code_toolbar"> </div>
<pre>switch基本格式
switch (表达式) {
case 值1:语句1;break;
case 值2:语句2;break;
case 值3:语句3;break;<span style="color: rgba(51, 153, 102, 1)">//break阻止case的穿透</span>
default:语句4;
}</pre>
<div class="cnblogs_code_toolbar"> </div>
</div>
<p> </p>
<p> 示例</p>
<div class="cnblogs_code">
<div class="cnblogs_code_toolbar"> </div>
<pre>switch(x){
case 1:y="星期一"; break;
case 2:y="星期二"; break;
case 3:y="星期三"; break;
case 4:y="星期四"; break;
case 5:y="星期五"; break;
case 6:y="星期六"; break;
case 7:y="星期日"; break;
default: y="未定义";
}</pre>
<div class="cnblogs_code_toolbar"> </div>
</div>
<p> </p>
<p> switch比else if结构更加简洁清晰，使程序可读性更强,效率更高。</p>
<p><strong>循环语句</strong></p>
<p><strong>for循环：（推荐使用）</strong></p>
<div class="cnblogs_code">
<div class="cnblogs_code_toolbar"> </div>
<pre>语法规则：
for(初始表达式;条件表达式;自增或自减)
{
执行语句
……
}</pre>
<div class="cnblogs_code_toolbar"> </div>
</div>
<p> </p>
<p> <strong>for循环的另一种形式：</strong></p>
<div class="cnblogs_code">
<pre>for( 变量 in 数组或对象)
{
执行语句
……
}</pre>
</div>
<p><strong>while循环：</strong></p>
<div class="cnblogs_code">
<pre>语法规则：
while (条件){
语句1；
...
}</pre>
</div>
<p style="text-align: left"> <strong>do</strong>-<strong>while循环：</strong></p>
<div class="cnblogs_code">
<pre>语法规则：
do{}
while (条件){
语句1；
...
}</pre>
</div>
<p> </p>
<h3 id="输出方式"><span style="font-size: 16px">输出方式</span></h3>
<p>我们在编写<code>js</code>代码的时候，经常需要得到计算的值，用以判断得到的值与我们预期的值是否相符，所以我们需要了解下面的基本的输出方式。</p>
<pre class="js"><code class="hljs javascript"><span class="hljs-comment">// console.log() 将内容输出到浏览器的控制台
<span class="hljs-built_in">console.log(<span class="hljs-number">10+<span class="hljs-number">2);
<span class="hljs-comment">// document.write() 将内容输出到网页当中
<span class="hljs-built_in">document.write(<span class="hljs-number">10+<span class="hljs-number">2);</span></span></span></span></span></span></span></span></code></pre>
<blockquote>
<p>通常情况下我们通过<code>console.log()</code>这种形式输出代码我们称之为<code>代码打印</code>。</p>
</blockquote>
<h3 id="弹窗"><span style="font-size: 16px">弹窗</span></h3>
<p>在<code>js</code>中，如果你的代码运行环境是在<code>浏览器</code>当中，那么就可以使用<code>浏览器</code>给我们提供的弹窗。</p>
<pre class="js"><code class="hljs javascript">alert(<span class="hljs-number">10+<span class="hljs-number">2);
confirm(<span class="hljs-number">10+<span class="hljs-number">2);
prompt(<span class="hljs-number">10+<span class="hljs-number">2);</span></span></span></span></span></span></code></pre>
<blockquote>
<p>上述的三个弹窗只能够在<strong>运行环境为浏览器的情况下使用。</strong></p>
</blockquote>
<p style="text-align: left"> </p>
</div>
<br>
<div class="lemma-picture text-pic layout-right"> </div>
</div>
</div>
</div><br><br>
来源：https://www.cnblogs.com/yu412/p/11409992.html
頁:
[1]