JavaScript相關的內容解說-js教程-PHP中文網

首頁

web前端

js教程

JavaScript相關的內容解說

jacklove

Jun 11, 2018 pm 06:08 PM

1.JavaScript 簡介：

JavaScript是網路上最受歡迎的腳本語言，所有現代的HTML都使用JavaScript。既然是腳本語言，那麼它的特徵就有一下三種：

## （1）弱型別；

（2）解釋型語言（不需要編譯）；

（3）逐行執行，一行程式碼錯誤，其後的程式碼區塊都不會繼續執行；

（4）<script>標籤可直接嵌入到HTML檔案中，位置是任意的，通常放在被修飾內容下面或head標籤中，但寫成單獨的js檔案有利於結構和行為的分離2.JavaScript 內容（附圖）： <img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/006/514242c94c9eb59ed44ee70b1764e675-0.jpg?x-oss-process=image/resize,p_40" class="lazy" alt=""/> # 其中ECMAScript為JavaScript的核心； 是文件物件模型（使用js操作網頁）； BOM是瀏覽器物件模型（使用js操作瀏覽器） 3.JavaScript 資訊的輸出： # （1）alert( )方法：以提示框的形式在頁面輸出，例;<pre class='brush:php;toolbar:false;'><script> alert("hello,javascript") </script></pre> （2）console.log( )方法：在控制台輸出訊息，範例：<pre class='brush:php;toolbar:false;'>console.log("hello,javascript")</pre> （3）document.write( ) ：將內容直接寫在HTML頁面中，例如：<pre class='brush:php;toolbar:false;'>document.write("hello,javascript")</pre>4.JavaScript 變數：## 與Java不同，ECMAScript中的變數無特定的類型，定義變數時只用var 運算符，可以將它初始化為任意值，變數的初始化格式：var 變數名= 變數值；例：<pre class='brush:php;toolbar:false;'>var a = "hello"; var b = 123;</pre> 如果要定義多個變量，那麼可以用將多個變數寫在一行，用逗號分隔；例： <pre class='brush:php;toolbar:false;'>var a = "你好", b = 123, c = "hello";</pre> 變數名字的變數規則： （1）由字母、數字、底線、$符號構成 （2）不可以以數字開頭，不建議下列底線開頭； （3 ）嚴格區分大小寫；（4）不可以是關鍵字和保留字5.JavaScript 資料型別： ######################### ### JavaScript可分為原始資料型別，引用資料型別兩種：######### （1）原始資料型別：Number，String，Boolean，undefined，null###### ## # ###Number######：數值型，###就是數字，包含正數、負數、整數、小數、0、NaN、Infinity（正無窮）、-Infinity（負無窮）；## ########## 注意：#########NaN######：not a number的縮寫，表示該值不是數值（也屬於Number）#### ######## String：字符串：用双引号""或单引号''包起来的0个或多个字符，如果引号中什么也没有，那么这个字符串被称为空字符串 Boolean：布尔型：包含true：表示真（成立）和false：表示假（不成立）两个值 undefined：表示变量未定义，或变量被定义出来，但是没有被赋值 null：表示一个变量没有指向任何一片存储空间，即变量存在，但是里面是空的，类似于Undefined （小提示：在Chrome浏览器控制台输出时，会发现Number类型为深蓝色，String为黑色，Boolean为浅蓝色，undefined和null都为浅灰色） （2）引用数据类型： Object（对象），Array（数组），Date（日期），RegExp（正则）。。等等 （3）如何查看一个变量的数据类型（typeof 运算符）： 数值型数据：返回值为number <pre class='brush:php;toolbar:false;'>console.log(typeof 123) //输出number</pre> 字符串型数据：返回值为string<pre class='brush:php;toolbar:false;'>console.log(typeof "你好") //输出string</pre> 布尔型数据：返回值为boolean<pre class='brush:php;toolbar:false;'>console.log(typeof true/false) //输出boolean</pre> Undefined：返回值为undefined<pre class='brush:php;toolbar:false;'>console.log(typeof undefined) //输出undefined</pre> Null：返回值为Object（历史遗留问题，说明null也是一个对象）<pre class='brush:php;toolbar:false;'>console.log(typeof null) //输出object</pre> NaN：返回值为number<pre class='brush:php;toolbar:false;'>console.log(typeof NaN) //输出number</pre>6.JavaScript 数据类型的转换： （1）在使用加法（+）运算符时，任何数据与字符串类型数据相加都为字符串类型数据；<pre class='brush:php;toolbar:false;'>console.log("你好" + 123) //输出"你好123"</pre> 注（简单理解）：在JavaScript 中空字符串""转换为false，非空字符串转换为true（除“0”，“1”外）； false转换为 0 或“0”，true转换为 1 或“1”； 做逻辑判断的时候，null，undefined，""(空字符串)，0，NaN都默认为false； ==在比较的时候可以转换数据类型，===是严格比较，只要类型不匹配就返回false；<span style="color:rgb(51,51,51);font-family:'-apple-system', 'Helvetica Neue', Helvetica, Arial, 'PingFang SC', 'Hiragino Sans GB', 'WenQuanYi Micro Hei', 'Microsoft Yahei', sans-serif;font-size:14px;background-color:rgb(255,255,255);"> 其实 <code style="font-family:'Source Code Pro', Consolas, Menlo, Monaco, 'Courier New', monospace;font-size:.93em;padding:2px 4px;">==<span style="color:rgb(51,51,51);font-family:'-apple-system', 'Helvetica Neue', Helvetica, Arial, 'PingFang SC', 'Hiragino Sans GB', 'WenQuanYi Micro Hei', 'Microsoft Yahei', sans-serif;font-size:14px;background-color:rgb(255,255,255);"> 的比较确实是转换成字符串来比较但，但是在布尔型转换为字符串之前，要先转换成 <code style="font-family:'Source Code Pro', Consolas, Menlo, Monaco, 'Courier New', monospace;font-size:.93em;padding:2px 4px;">Number<pre class='brush:php;toolbar:false;'>console.log("123" == true) //输出false console.log("1" == true) //输出true console.log("" == true) //输出false console.log(1 == true) //输出true console.log("" == false) //输出true console.log(&#39;123&#39; == false) //输出fasle console.log(&#39;0&#39; == false) //输出true console.log(0 == false) //输出true console.log(&#39;1&#39; == 1) //输出true console.log(&#39;0&#39; == 0) //输出true console.log(-true) //输出-1</pre>（2）parseInt：将字符串转换成整数（只识别字符串中的数值）： 注：会忽略字符串中的前后空格（当数值后的空格后面还有数值时，将不会再识别）； 能够正确识别正负号，即保留正负号； 在转换时，遇到非数值型的字符就会停止转换； 如果字符串的第一个字符是非数值型的，那么转换的结果为NaN； <pre class='brush:php;toolbar:false;'>console.log(parseInt("123")) //输出123 console.log(parseInt(" 1 2")) //只会输出1 console.log(parseInt(-123)) //输出-123 console.log(parseInt("hello")) //输出NaN console.log(parseInt(true)) //输出NaN console.log(parseInt("123hello")) //输出123，后面非数值型不会识别 console.log(parseInt(" 1 ")) //输出1，忽略空格</pre>（3）parseFloat：将字符串转换成小数（识别小数点，注意事项同上） <pre class='brush:php;toolbar:false;'>console.log(parseFloat("123.55")) //输出123.55 console.log(parseFloat(".1hello")) //输出0.1</pre>（4）Number：将其它类型的数据转换成数值型，注意被转换的数据必须是纯数值构成，否则无法转换，其它注意事项同上<pre class='brush:php;toolbar:false;'>console.log(Number(true)) //1 console.log(Number(false)) //0 console.log(Number(null)) //0 console.log(Number("123hello")) //NaN console.log(Number("12.22")) //12.22 console.log(Number(undefined)) //NaN</pre>（5）页面中的信息框： alert（），弹出个提示框，只有确定； <pre class='brush:php;toolbar:false;'>window.alert("今天天气很好")</pre><img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/006/aee22f2a3c69fe846e9bbfd04c84b4ea-1.jpg?x-oss-process=image/resize,p_40" class="lazy" alt=""/> confirm（），弹出个确认框，有确定和取消； <pre class='brush:php;toolbar:false;'>window.confirm("今天心情也很好")</pre><img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/006/aee22f2a3c69fe846e9bbfd04c84b4ea-2.jpg?x-oss-process=image/resize,p_40" class="lazy" alt=""/> prompt（），弹出个输入框，可以输入内容； <pre class='brush:php;toolbar:false;'>window.prompt("password","请输入密码")</pre><img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/006/aee22f2a3c69fe846e9bbfd04c84b4ea-3.jpg?x-oss-process=image/resize,p_40" class="lazy" alt=""/> JavaScript的基础暂时先写到这里，后续都会补上。。。 本文讲解了JavaScript相关的内容讲解，更多相关之请关注php中文网。相关推荐：<a href="http://www.php.cn/div-tutorial-402890.html" target="_blank">关于HTML基础的讲解 <a href="http://www.php.cn/php-weizijiaocheng-402888.html" target="_blank">$.ajax+php实战教程之下拉时自动加载更多文章原理讲解 <a href="http://www.php.cn/js-tutorial-402885.html" target="_blank">关于zx-image-view图片预览插件，支持旋转、缩放、移动的相关操作 </script>

以上是JavaScript相關的內容解說的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

JavaScript的角色：使網絡交互和動態Apr 24, 2025 am 12:12 AM

JavaScript是現代網站的核心，因為它增強了網頁的交互性和動態性。 1)它允許在不刷新頁面的情況下改變內容，2)通過DOMAPI操作網頁，3)支持複雜的交互效果如動畫和拖放，4)優化性能和最佳實踐提高用戶體驗。

C和JavaScript：連接解釋Apr 23, 2025 am 12:07 AM

C 和JavaScript通過WebAssembly實現互操作性。 1）C 代碼編譯成WebAssembly模塊，引入到JavaScript環境中，增強計算能力。 2）在遊戲開發中，C 處理物理引擎和圖形渲染，JavaScript負責遊戲邏輯和用戶界面。

從網站到應用程序：JavaScript的不同應用Apr 22, 2025 am 12:02 AM

JavaScript在網站、移動應用、桌面應用和服務器端編程中均有廣泛應用。 1)在網站開發中，JavaScript與HTML、CSS一起操作DOM，實現動態效果，並支持如jQuery、React等框架。 2)通過ReactNative和Ionic，JavaScript用於開發跨平台移動應用。 3)Electron框架使JavaScript能構建桌面應用。 4)Node.js讓JavaScript在服務器端運行，支持高並發請求。

Python vs. JavaScript：比較用例和應用程序Apr 21, 2025 am 12:01 AM

Python更適合數據科學和自動化，JavaScript更適合前端和全棧開發。 1.Python在數據科學和機器學習中表現出色，使用NumPy、Pandas等庫進行數據處理和建模。 2.Python在自動化和腳本編寫方面簡潔高效。 3.JavaScript在前端開發中不可或缺，用於構建動態網頁和單頁面應用。 4.JavaScript通過Node.js在後端開發中發揮作用，支持全棧開發。

C/C在JavaScript口譯員和編譯器中的作用Apr 20, 2025 am 12:01 AM

C和C 在JavaScript引擎中扮演了至关重要的角色，主要用于实现解释器和JIT编译器。1）C 用于解析JavaScript源码并生成抽象语法树。2）C 负责生成和执行字节码。3）C 实现JIT编译器，在运行时优化和编译热点代码，显著提高JavaScript的执行效率。

JavaScript在行動中：現實世界中的示例和項目Apr 19, 2025 am 12:13 AM

JavaScript在現實世界中的應用包括前端和後端開發。 1)通過構建TODO列表應用展示前端應用，涉及DOM操作和事件處理。 2)通過Node.js和Express構建RESTfulAPI展示後端應用。

JavaScript和Web：核心功能和用例Apr 18, 2025 am 12:19 AM

JavaScript在Web開發中的主要用途包括客戶端交互、表單驗證和異步通信。 1)通過DOM操作實現動態內容更新和用戶交互；2)在用戶提交數據前進行客戶端驗證，提高用戶體驗；3)通過AJAX技術實現與服務器的無刷新通信。

了解JavaScript引擎：實施詳細信息Apr 17, 2025 am 12:05 AM

理解JavaScript引擎內部工作原理對開發者重要，因為它能幫助編寫更高效的代碼並理解性能瓶頸和優化策略。 1)引擎的工作流程包括解析、編譯和執行三個階段；2)執行過程中，引擎會進行動態優化，如內聯緩存和隱藏類；3)最佳實踐包括避免全局變量、優化循環、使用const和let，以及避免過度使用閉包。

See all articles