JavaScript 基础

每日开心 發表於 2019-5-7 20:11:00

<h1>1.简介：</h1>
<p style="margin-left: 30px">　　JavaScript（JS）是一种基于对象和事件驱动，可以与 HTML 标记语言混合使用的脚本语言。广泛用于客户端 Web 开发，常用来给 HTML 网页添加动态功能，比如响应用户的各种操作。其编写的程序可以直接在浏览器中解释执行。Javascript 的国际标准是 ECMAScript（由欧洲计算机制造商协会（ECMA）结合JavaScript 和JScript推出的标准化的脚本程序设计语言。）。</p>
<p style="margin-left: 30px"> </p>
<h1>2.Javascript 和 java 的区别联系</h1>
<p>　　Javascript 和 java 除了名字和语法有点像，并没有什么必然的联系。</p>
<p>　　<img src="https://img2018.cnblogs.com/blog/1664032/201905/1664032-20190507194259256-1854572338.png" alt=""></p>
<h1>3.Javascript的使用</h1>
<p>　　1.在<script>标签中写js代码</p>
<div class="cnblogs_code">
<pre><script>
<span style="color: rgba(0, 0, 255, 1)">function</span><span style="color: rgba(0, 0, 0, 1)"> test(){
alert(</span>"我的第一个 js 程序！"<span style="color: rgba(0, 0, 0, 1)">);
}
</span></script></pre>
</div>
<p><span style="color: rgba(255, 0, 0, 1)">注：<script>标签可以置于页面任意位置，但一般置于<head>标签中</span></p>
<p> </p>
<p>　　2.将脚本语言单独写在扩展名为.js 的脚本文件中，然后在<script>标记中设置 src 属性的值为脚本文件的位置和名称。</p>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 128, 0, 1)">/*</span><span style="color: rgba(0, 128, 0, 1)">*
* test.js
</span><span style="color: rgba(0, 128, 0, 1)">*/</span>
<span style="color: rgba(0, 0, 255, 1)">function</span><span style="color: rgba(0, 0, 0, 1)"> test(){
alert(</span>"我的第一个JS程序！"<span style="color: rgba(0, 0, 0, 1)">);
}</span></pre>
</div>
<div class="cnblogs_code">
<pre><!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script src="test.js" type="text/javascript"></script>
</head>
<body>
<button onclick="test()">测试按钮</button>
</body>
</html></pre>
</div>
<p><span style="color: rgba(255, 0, 0, 1)">注：不能在 js 文件中写：<script>标签，<script>标签是 html 标签! </span></p>
<p> </p>
<p>补充：Javascript:void(0); 用于a标签，可以使超链接无动作（不会跳转）</p>
<div class="cnblogs_code">
<pre><a href="Javascript:void(0)"></a></pre>
</div>
<p> </p>
<h1>4.变量的声明</h1>
<p style="margin-left: 30px">1.声明：可以通过 var 关键字来声明一个变量。如：<br> 　　var a=1;    var date = new Date(); var array = new Array();<br>　　不能使用未经声明的变量。<br>2.全局变量<br>　　在函数外部声明的变量<br>　　 函数内部，没有加 var 关键字声明的变量（非严格模式）<br>3.局部变量<br>　　 函数内部，使用 var 声明的变量</p>
<p style="margin-left: 30px"> </p>
<h1>5.数据类型</h1>
<p style="margin-left: 30px">JavaScript中变量是没有类型，但数据是有类型的。<br>常见的有如下 6 种类型：<br>　　undefined 未定义 (声明了变量但从未赋值 )<br>　　null 空 (赋值为 null) <br>　　boolean 布尔型 (true,false) <br>　　字符串 string (单引号、双引号均可) <br>　　数值 number ：包括整数和小数，NaN（Not a Number），Infinity, -Infinity <br>　　对象 object</p>
<h1>6.数据类型的转换</h1>
<h2 style="margin-left: 30px">6.1 显示转换</h2>
<p style="margin-left: 60px">转换为数值类型：Number(mix)：可以将任意类型的参数 mix 转换为数值类型。<br>　　如果是布尔值，true 和 false 分别被转换为 1 和 0<br>　　如果是数字值，返回本身。<br>　　如果是 null，返回 0.<br>　　如果是 undefined，返回 NaN。<br>　　如果是字符串，遵循以下规则：<br>　　如果字符串中只包含数字，则将其转换为十进制（忽略前导 0）<br>　　如果字符串中包含有效的浮点格式，将其转换为浮点数值（忽略前导 0）<br>　　如果是空字符串，将其转换为 0<br>　　如果字符串中包含非以上格式，则将其转换为 NaN 如：‘ssd2342df’</p>
<p style="margin-left: 60px">转换为字符串类型:String(mix)：将任何类型的值转换为字符串<br>　　如果是 null，返回”null”<br>　　如果是 undefined，返回”undefined”</p>
<p style="margin-left: 60px">转换为布尔类型：Boolean(mix)：将任何类型的值转换为布尔值<br>　　以下值会被转换为 false：false、””、0、NaN、null、undefined<br>　　其余任何值都会被转换为 true。</p>
<h2 style="margin-left: 30px">2.相等操作符（x==y）</h2>
<p style="margin-left: 60px">当类型相同时直接比较值，类型不同是相等操作符会对操作值进行隐式转换后进行比较：<br>　　1.String number Boolean 三种相比，调用Number()函数转换成数值型再比较<br>　　2.null和undefined互相是相等，自身也相等，除此之外和谁都不等<br>　　3.NaN比较特殊，他和自己都不相等<br>　　4.如果一个操作值是对象，另一个不是则调用对象的 toString()方法转成字符串，再按前面的规则比。<br>　　5.如果两个操作值都是对象，则比较它们是不是指向同一个对象（地址）</p>
<p style="margin-left: 60px"><span style="color: rgba(255, 0, 0, 1)">补充：=== 等同符：不会发生类型的自动转化！</span></p>
<p style="margin-left: 60px"> </p>
<h1>7.数组</h1>
<p>　　js数组是一组数据的集合。更加类似 java 的容器（ArrayList）。长度可变，元素类型也可以不同！</p>
<p>　　js 数组长度随时可变！随时可以修改！我们可以通过修改数组的长度清空数组。通过 array.length 获得数组长度。</p>
<div class="cnblogs_code">
<pre>a.length = x; <span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">改变数组长度为x，清掉后面的元素！</span>
a.length = 0; <span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">直接清空数组</span></pre>
</div>
<h2 style="margin-left: 30px">7.1创建数组<br> </h2>
<p style="margin-left: 60px">1.创建一个空数组<br> var arr = new Array();<br> 2.创建一个具有长度的空数组<br> var arr2 = new Array(size)<br> 3.创建一个具有元素的数组<br> var arr3 = new Array(ele1,ele2, ... ,eleN)<br> 4.创建一个空数组或具有元素的数组<br> var arr4 = </p>
<h2 style="margin-left: 30px">7.2数组函数<br> </h2>
<p style="margin-left: 60px">push( ele )：向数组的尾部添加一个元素，返回数组的新长度<br> unshift( ele)：向数组的头部添加一个元素，返回数组的新长度<br> pop()：从数组的尾部取出一个元素，返回该元素本身<br> shift()：从数组的头部取出一个元素，返回该元素本身<br> join( ele ) : 使用指定的ele字符连接数组中的每个元素，并将其作为一个字符串返回<br> concat( arr1,arr2,...,arrN )：拼接给定的数组元素，返回一个新数组<br> reverse()：反转数组<br> sort()：对数组的元素进行排序（自然顺序）<br> splice(start,count,newEle)：从一个数组中移除一个或多个元素，如果必要，在所移除元素的位置上插入新元素，返回所移除的元素。<br> 参数：<br> start 开始索引<br> count 移除元素的数量<br> newEle 要加入的新元素，该参数可以省略<br> slice(start，end)：截取数组的一段，返回一个新数组<br> 参数：<br> start 开始索引<br> end结束索引（不包含），该参数可以省略（截取到数组末尾）</p>
<h2 style="margin-left: 30px">7.3遍历数组<br> </h2>
<p style="margin-left: 60px">for (var i = 0 ; i< 数组的长度;i++)<br> for (var arrIndex in 数组)</p>
<p style="margin-left: 60px"> </p>
<h2>8.函数</h2>
<h2 style="margin-left: 30px">8.1创建函数</h2>
<p style="margin-left: 30px">创建函数有以下三种方法<br> 　　1.function 函数名( 形参列表 ){ 函数体 } 注：参数列表直接写形参名即可，不用写 var!<br> 　　2.var 函数名 = function( 形参列表 ) { 函数体 }<br> 　　3.var 函数名 = new Function("形参1","形参2",...,"形参N","函数体" )</p>
<h2 style="margin-left: 30px">8.2函数的属性<br> </h2>
<p style="margin-left: 30px">　　1.length 形参的个数<br> 　　2.arguments 表示实参的一个数组，只能用在函数体中</p>
<h2 style="margin-left: 30px">8.3函数使用要点</h2>
<p style="margin-left: 30px">　　1. 在js中函数也是对象<br>　　2. 函数可以作为另一个函数的参数进行传递<br>　　3. 在js中形参和实参的个数可以不一致</p>
<h2 style="margin-left: 30px">8.4 常用的js内置函数</h2>
<p style="margin-left: 30px">　　parseInt() ：把字符串转化为整数<br>　　parseFloat()：把字符串转化为浮点数<br>　　isNaN()：判断一个数是否是非数字（NaN）<br>　　isFinite()：判断一个数是否为有限的<br>　　eval()：执行字符串中的JavaScript代码（json）。</p>
<h1>9.事件<br> </h1>
<h2 style="margin-left: 30px">9.1 定义</h2>
<p style="margin-left: 30px">　　事件是对象发送的消息，以发信号通知操作的发生。操作可能是由用户交互（例如鼠标单击）引起的，也可能是由某些其他的程序逻辑触发的。（某种情况下触发）</p>
<h2 style="margin-left: 30px">9.2 用途<br> </h2>
<p style="margin-left: 30px">　　1．验证用户输入窗体的数据。(表单验证)<br> 　　2．增加页面的动感效果。</p>
<h2 style="margin-left: 30px">9.3 常用事件</h2>
<p style="margin-left: 60px">onclick 单击事件常用于：button标签、a标签、img标签<br>ondblclick 双击事件常用于：button标签、a标签、img标签<br>onmousemove    鼠标移动常用于：div标签<br>onfocus    获得焦点常用于：<input type="text/password">标签<br>onblur 失去焦点常用于：<input type="text/password">标签<br>onchange 选中对象的值发生变化常用于：select标签<br>onload 页面装载常用于：body标签<br>onunload 页面卸载常用于：body标签</p>
<h2 style="margin-left: 30px">9.4 event对象（C）</h2>
<p style="margin-left: 60px">event 代表事件的状态，例如触发 event 对象的元素、鼠标的位置及状态、按下的键等等。<br>event 对象只在事件发生的过程中才有效。<br>event 的某些属性只对特定的事件有意义。比如，fromElement 和 toElement 属性只对<br>onmouseover 和 onmouseout 事件有意义。<br>event对象一般用于鼠标移动事件</p>
<h1>10.对话框</h1>
<p>　　1.警告框（alert）：常用。<br>　　2.询问框（prompt）：给用户一个提示框让用户输入，返回提示框中输入的值。</p>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 0, 255, 1)">function</span><span style="color: rgba(0, 0, 0, 1)"> testPrompt(){
</span><span style="color: rgba(0, 0, 255, 1)">var</span> result = prompt("天王盖地虎（宝塔镇河妖）"<span style="color: rgba(0, 0, 0, 1)">);
</span><span style="color: rgba(0, 0, 255, 1)">if</span>(result=="宝塔镇河妖"<span style="color: rgba(0, 0, 0, 1)">){
   alert(</span>"回答正确"<span style="color: rgba(0, 0, 0, 1)">);
}</span><span style="color: rgba(0, 0, 255, 1)">else</span><span style="color: rgba(0, 0, 0, 1)">{
   alert(</span>"回答错误"<span style="color: rgba(0, 0, 0, 1)">);
}
}</span></pre>
</div>
<p>　　<em id="__mceDel">3.确认框（confirm）：给用户一个提示框选择“确定”或“取消”，返回 true/false.</em></p>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 0, 255, 1)">function</span><span style="color: rgba(0, 0, 0, 1)"> testConfirm(){
</span><span style="color: rgba(0, 0, 255, 1)">var</span> isLogin = confirm("您确认登录吗？"<span style="color: rgba(0, 0, 0, 1)">);
</span><span style="color: rgba(0, 0, 255, 1)">if</span><span style="color: rgba(0, 0, 0, 1)">(isLogin){
   alert(</span>"您已成功登录"<span style="color: rgba(0, 0, 0, 1)">);
}</span><span style="color: rgba(0, 0, 255, 1)">else</span><span style="color: rgba(0, 0, 0, 1)">{
   alert(</span>"您取消了登录"<span style="color: rgba(0, 0, 0, 1)">);
}
}</span></pre>
</div>
<h1>11.常用内置对象</h1>
<h2 style="margin-left: 30px">11.1 Date</h2>
<p style="margin-left: 60px">使用前需要先声明：var date = new Date();<br>常用函数：<br>getFullYear(): 返回年数<br>getMonth(): 返回月数<br>getDate(): 返回日数<br>getDay(): 返回星期几<br>getHours():返回小时数<br>getMinutes():返回分钟数<br>getSeconds():返回秒数<br>getTime() : 返回毫秒数<br>setFullYear(): 设置年数<br>setMonth():设置月数<br>setDate():设置日数<br>setHours():设置小时数<br>setMintes():设置分钟数<br>setSeconds():设置秒数<br>setTime() :设置毫秒数</p>
<h2 style="margin-left: 30px">11.2 Math</h2>
<p style="margin-left: 60px">内置的Math对象可以用来处理各种数学运，他是一个固有对象，不能new<br>可以直接调用方法：Math.函数名（参数）<br>求随机数方法：Math.random(),产生[0，1）范围的一个任意数</p>
<h2 style="margin-left: 30px">11.3 String</h2>
<p style="margin-left: 60px">我们一般利用String对象提供的函数来处理字符串<br>常用函数：<br>charAt(idx)：返回指定位置处的字符<br>indexOf(Chr)：返回指定子字符串的位置，从左到右。找不到返回-1<br>substr(m,n)：返回给定字符串中从m位置开始，取n个字符，如果参数n省略，则意味着取到字符串末尾。<br>substring(m,n)：返回给定字符串中从m位置开始，到n位置结束，如果参数n省略，则意味着取到字符串末尾。<br>toLowerCase()：将字符串中的字符全部转化成小写。<br>toUpperCase()：将字符串中的字符全部转化成大写。<br>length: 属性，不是方法，返回字符串的长度。</p>
<p style="margin-left: 60px"> </p>
<h1>12.Object</h1>
<h2>　　12.1 添加属性</h2>
<p style="margin-left: 30px">　　Object对象可以直接用.属性名，来添加一个属性</p>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 0, 255, 1)">var</span> obj = <span style="color: rgba(0, 0, 255, 1)">new</span><span style="color: rgba(0, 0, 0, 1)"> Object();
obj.name </span>= “zhangsan”</pre>
</div>
<h2>　　12.2 删除属性</h2>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 0, 255, 1)">delete</span> obj.name</pre>
</div>
<p><span style="color: rgba(255, 0, 0, 1)">注意： delete只能删除对象的属性</span></p>
<h2>　　12.3 作用</h2>
<p style="margin-left: 30px">　　Object对象主要用于将任意数据封装成对象形式。</p>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 0, 255, 1)">function</span><span style="color: rgba(0, 0, 0, 1)"> factory(name,age){
</span><span style="color: rgba(0, 0, 255, 1)">var</span> obj = <span style="color: rgba(0, 0, 255, 1)">new</span><span style="color: rgba(0, 0, 0, 1)"> Object();
obj.name </span>=<span style="color: rgba(0, 0, 0, 1)"> name;
obj.age </span>=<span style="color: rgba(0, 0, 0, 1)"> age;
</span><span style="color: rgba(0, 0, 255, 1)">return</span><span style="color: rgba(0, 0, 0, 1)"> obj;
}
</span><span style="color: rgba(0, 0, 255, 1)">var</span> o1 = factory(“zhangsan”,18);</pre>
</div>
<h2 style="margin-left: 30px">12.4 “类”</h2>
<p style="margin-left: 60px">JS中的“类”,这个类并不是像java中的类，它是通过构造函数和prototype属性来完成的“类”的概念，本质上还是函数。<br>定义一个类：</p>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 0, 255, 1)">function</span><span style="color: rgba(0, 0, 0, 1)"> Person(name , age){
</span><span style="color: rgba(0, 0, 255, 1)">this</span>.name =<span style="color: rgba(0, 0, 0, 1)"> name;
</span><span style="color: rgba(0, 0, 255, 1)">this</span>.age =<span style="color: rgba(0, 0, 0, 1)"> age;
</span><span style="color: rgba(0, 0, 255, 1)">this</span>.eat = <span style="color: rgba(0, 0, 255, 1)">function</span><span style="color: rgba(0, 0, 0, 1)">(){
alert(“吃饭”)；
}
}</span></pre>
</div>
<p style="margin-left: 30px">创建类的对象：</p>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 0, 255, 1)">var</span> p1 = <span style="color: rgba(0, 0, 255, 1)">new</span> Person(“张三”, “18”);</pre>
</div>
<p style="margin-left: 30px"><br><span style="color: rgba(255, 0, 0, 1)">注：对象被创建出来之后也还可以为其添加属性</span></p>
<h2 style="margin-left: 30px">12.5 prototype属性</h2>
<p style="margin-left: 60px">每个函数都有一个prototype属性，这个属性是指向一个对象的引用，这个对象称为原型对象，原型对象包含函数实例共享的方法和属性，也就是说将函数用作构造函数调用（使用new操作符调用）的时候，新创建的对象会从原型对象上继承属性和方法。<br>由于js不像java那样是真正面向对象的语言，js是基于对象的，它没有类的概念。所以，要想实现继承，可以用js的原型prototype机制来实现。<br>继承就是将子类的prototype属性指向父类的对象，即可完成继承。</p>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 0, 255, 1)">function</span><span style="color: rgba(0, 0, 0, 1)"> Student(){
</span><span style="color: rgba(0, 0, 255, 1)">this</span>.sno =<span style="color: rgba(0, 0, 0, 1)"> Math.radom();
}</span></pre>
</div>
<div class="cnblogs_code">
<pre>Student.prototype = <span style="color: rgba(0, 0, 255, 1)">new</span> Person(“张三”,18)</pre>
</div>
<p style="margin-left: 30px">将student的prototype引用Person类，就当于继承了Person类</p>
<h1>13.JSON</h1>
<p>　　JSON(JavaScript Object Notation) 是一种轻量级数据交换格式。JSON 非常易于人阅读与编写，同时利于机器解析与生成。JSON 是在 AJAX 中代替 XML 交换数据的更佳方案。</p>
<h2 style="margin-left: 30px">13.1JSON建构于两种结构：</h2>
<p style="margin-left: 60px">　　1.无序的“名称/值”对集合。不同的语言中，它被理解为对象（object），纪录（record），结构（struct），字典（dictionary），哈希表（hash table），有键列表（keyed list），或者关联数组（associative array）。<br>　　形式：以“{”（左括号）开始，“}”（右括号）结束。每个“名称”后跟一个“:”（冒号）；“‘名称/值’ 对”之间使用“,”（逗号）分隔。如：{"name": "张三", "age": 18}</p>
<p style="margin-left: 60px">　　2.值的有序列表，在大多数语言中，它被理解为数组（array），向量（vector），列表（list）或序列（sequence）。</p>
<p style="margin-left: 60px">　　形式：以“[”（左中括号）开始，“]”（右中括号）结束。值之间使用“,”（逗号）分隔。如：<br>　　["张三", "李四", "王五", "赵六"]</p>
<p> </p>

</div>
<div id="MySignature" role="contentinfo">
<div>作者：ki16</div>
<div>出处：https://www.cnblogs.com/gaojinshun/</div>
<div>本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须在文章页面给出原文连接，否则保留追究法律责任的权利。 </div><br><br>
来源：https://www.cnblogs.com/gaojinshun/p/10827760.html

頁: [1]

琼殿技术论坛's Archiver

JavaScript 基础