一、基本資料型別
number:數字型別
string:字串(注意s小寫：string是基本型別)
boolean:布林型 //前三個都有對應的包裝類別
null：空類型
undefined:未定義型別
測試一：
<html>
<!--基本类型测试-->
<head>
<script>
function f1(){ //number类型
/*有返回值时也不能function void f1(){}*/
alert('hello');
/*alert(); 弹出消息框*/
alert('hehe');
var i=100;
//js当中字符串可用单引号也可用双引号
i='hello';
//typeof是一个运算符，可以返回变量实际存放的数据的类型
alert(typeof i);
/*js是弱类型语言 不能： number i=100; 不能在声明时指明其类型，在运行时才能确定*/
}
function f2(){ //string类型
var str1='hello';
var str2='hello';
if(str1==str2){
alert("str1==str2");
}else{
alert("str1!=str2");
}
var str3='100';
var i=100;
if(str3==i){ //两个＝号，进行类型转换
alert("str3==i");
}else{
alert("str3!=i");
}
if(str3===i){ //三个=号，不进行类型转换
alert("str3==i");
}else{
alert("str3!=i");
}
}
function f3(){ //boolean类型
//布尔类型只有两个值：true/false;
var flag=true;
alert(typeof flag);
//var str="abc";
var str=new Object();//创建一个对象,对象会转换为true;
var str=null; //转换为false;
var str; //undefined 转换为false;
//强制转换，非空的字符串转换为true,非零的数字转换为true;
if(str){
alert('结果为真');
}else{
alert('结果为假');
}
}
function f4(){ //null类型
var obj=null;
//null类型只有一个值——null;
//输出的结果是Object
alert(typeof obj);
}
function f5(){ //undefined类型
var obj;
alert(typeof obj);
}
</script>
</head>
<body style="font-size:30px;">
<input type="button" value="演示基本类型的使用"
onclick="f1();"/>
</body>
</html>測試二：parseInt
<html><span style="white-space:pre"> </span>
<head>
<script>
/*number--->string
string---->number
*/
function f1(){ //字符串变数字
// var str1='fsfs'; 读出NaN
// var str1="1234fsfs"; 可以读出1234
// var str1="fsfs1234"; 不可以读出
// var str1="22323.08";
var str1='1234';
//window.parseInt(); window可以省略
var n1=parseInt(str1);
//js浮点运算会有误差，先放大x倍，再缩小x倍
// var n2=parseFloat(str1);
//undefined + 数字 ＝ NaN
alert(n1+100);
}
function f2(){
var n1=100;
//number--->Number(对应的包装类型) 再调用toString();
var s1=n1.toString();
// var s1=n1+'';
}
</script>
</head>
<body>
<input type="button" value="演示基本数据类型" onclick="f1();"/>
</body>
</html>測試三：string的方法
測試三：string的方法
)指定位置的字元substring(from,to):傳回子字串indexOf(str):傳回字串在原始字串中的位置lastIndexOf(str):match(regexp):傳回符合正規則表達式的一個陣列截取function f4(){ //string的方法
var str1="abcdef";
var str2=str1.substring(1,4);
alert(str2);
}正規function f5(){
var str="asdfas12323adfasf23423";
//在js中用/reg/,在执行时，会将//内的内容转换成一个RegExp对象
var reg=/[0-9]+/g;
//reg中是一个对象，不是字符串,注意加一个g搜索整个字符串，还有i忽略大小写。
var arr=str.match(reg);
alert(arr);
}查找function f6(){
var str1="sdf1223asdfasf23423";
var reg=/[0-9]+/;
//alert(typeof reg);
alert(reg instanceof RegExp);
var index = str1.search(reg);
alert(index);
}替換
function f7(){
var str1="sdf444asdfadf4423";
var reg=/[0-9]+/g;
var str2 = str1.replace(reg,'888');
alert(str2);
}二、Object型別（數組、函數，其他的下一篇）長度可變
js數組元素是任意的(可以混合存放不同類型的資料)
<html>
<head>
<script>
function f1(){ //创建数组的第一种方式
var arr=new Array(); //()可以省略不写
arr[0]=1;
arr[3]=2;
arr[5]='abc';
alert(arr.length);
alert(arr[1]);
alert(arr[3]);
}
function f2(){ //第二种方式
var arr=[];
arr[0]=1;
arr[3]=22;
var arr=[1,2,3,4,5,6];
arr[7]=11;
alert(arr.length);
}
function f3(){ //多维数组的创建
var arr = new Array();
arr[0]=[1,2,3,4,5];
arr[1]=[6,7,8,9,10,11,12,13];
arr[2]=[14,15,16,17,18,19];
for(var i=0;i<arr.length;i++){
for(j=0;j<arr[i].length;j++){
alert(arr[i][j]);
}
}
}
function f4(){ //数组常用的属性和方法
var arr=[11,22,33,44];
arr.length=2; //数组的长度可以写,后面的被砍掉
alert(arr);
alert(typeof abc);
}
</script>
</head>
<body>
<input type="button" value="数组的使用" onclick="f4()"/>
</body>
</html>數組元素是任意的(可以混合存放不同類型的資料)
<html>
<head>
<script>
function f1(){
var a1 = [1, 2, 3];
var str = a1.join(|);
alert(str);
}
function f2(){
var a1 = [1, 2, 3];
var a2 = [4, 5, 6];
var a3 = a1.concat(a2); //数组连接
alert(a3);
}
function f4(){
var a1 = [1, 2, 3];
var a2 = a1.reverse(); //是对原有数组翻转
alert(a2);
alert(a1); //原数组变了
}
function f5(){
var a1 = [1, 2, 3, 4, 5, 6];
var a2 = a1.slice(2,4); //对数组截取
alert(a2);
alert(a1); //原数组没有变化
}
function f6(){
var a1 = [5, 1, 7, 2, 8];
var a2 = a1.sort(); //从小到大
alert(a2);
}
function f7(){
var a1 = [15, 111, 7, 22, 88];
var a2 = a1.sort(); //默认按照字典顺序排序
alert(a2);
}
function f8(){
var a1 = [15, 111, 7, 22, 88];
var a2 = a1.sort(function(t1, t2){
return t2-t1;
});
alert(a2);
}
function f9(){ //按照字符串长度排序
var a1 = ['abc', 'bb', 'casd', 'a'];
var a2 = a1.sort(function(t3, t4){
return t4.length-t3.length;
});
alert(a2);
}
</script>
</head>
<body>
<input type="button" value="click me" onclick="f9()"/>
</body>
</html>數組中的一些函數
<html>
<!--函数的使用-->
<head>
<script>
function add(a1, a2){
return a1+a2;
}
function test(){
var sum = add(1, 1);
alert(sum);
}
function test2(){
// alert(typeof add);
alert(add instanceof Function); //函数是Function类型的实例
var f2 = add; //存放的是对象的地址
add = null; //add指向空
var sum = f2(1, 1); //等价于 add(1, 1);
alert(sum);
}
function add2(arg1, arg2){
//return arg1 + arg2;
return arguments[0]+arguments[1];
}
function add3(arg1, arg2){ //首先指向一个对象
return arg1+arg2+100;
}
function add3(){ //指向了另一个对象
return arguments[0]+arguments[1];
}
function test3(){
//var sum = add2(1); //结果为NaN,因为arg2是undifined
//var sum(1, 1, 1); //结果为2
//var sum=add(1, 1);
//var sum = add2(1, 1, 1);
var sum = add3(1, 1);
alert(sum);
}
</script>
</head>
<body>
<input type="button" value="click me" onclick="test3()"/>
</body>
</html>2、函數
定義一個函數
function 函數名(函數體
}
要注意的幾個問題
a.不能有回傳類型的聲明，但是可以有回傳值。
b.函數其本質是一個對象，是Function類型的實例，函數名稱是一個變量，存放了這個對象的地址(函數名是一個變量)
c.在函數內部，可以使用arguments對象訪問參數
d.函數不能重載
rrreee其他Object類型請看下一篇
以上就是 小強的HTML5行動開發之路（28）－ JavaScript回顧3的內容，更多相關內容請關注PHP中文網（www.php.cn）！
HTML中的布爾屬性是什麼？舉一些例子。Apr 25, 2025 am 12:01 AM布爾屬性是HTML中的特殊屬性，不需要值即可激活。 1.布爾屬性通過存在與否控制元素行為，如disabled禁用輸入框。 2.它們的工作原理是瀏覽器解析時根據屬性的存在改變元素行為。 3.基本用法是直接添加屬性，高級用法可通過JavaScript動態控制。 4.常見錯誤是誤以為需要設置值，正確寫法應簡潔。 5.最佳實踐是保持代碼簡潔，合理使用布爾屬性以優化網頁性能和用戶體驗。
如何驗證您的HTML代碼？Apr 24, 2025 am 12:04 AMHTML代碼可以通過在線驗證器、集成工具和自動化流程來確保其清潔度。 1)使用W3CMarkupValidationService在線驗證HTML代碼。 2)在VisualStudioCode中安裝並配置HTMLHint擴展進行實時驗證。 3)利用HTMLTidy在構建流程中自動驗證和清理HTML文件。
HTML與CSS和JavaScript：比較Web技術Apr 23, 2025 am 12:05 AMHTML、CSS和JavaScript是構建現代網頁的核心技術：1.HTML定義網頁結構，2.CSS負責網頁外觀，3.JavaScript提供網頁動態和交互性，它們共同作用，打造出用戶體驗良好的網站。
HTML作為標記語言：其功能和目的Apr 22, 2025 am 12:02 AMHTML的功能是定義網頁的結構和內容，其目的在於提供一種標準化的方式來展示信息。 1）HTML通過標籤和屬性組織網頁的各個部分，如標題和段落。 2）它支持內容與表現分離，提升維護效率。 3）HTML具有可擴展性，允許自定義標籤增強SEO。
HTML，CSS和JavaScript的未來：網絡開發趨勢Apr 19, 2025 am 12:02 AMHTML的未來趨勢是語義化和Web組件，CSS的未來趨勢是CSS-in-JS和CSSHoudini，JavaScript的未來趨勢是WebAssembly和Serverless。 1.HTML的語義化提高可訪問性和SEO效果，Web組件提升開發效率但需注意瀏覽器兼容性。 2.CSS-in-JS增強樣式管理靈活性但可能增大文件體積，CSSHoudini允許直接操作CSS渲染。 3.WebAssembly優化瀏覽器應用性能但學習曲線陡，Serverless簡化開發但需優化冷啟動問題。
HTML：結構，CSS：樣式，JavaScript：行為Apr 18, 2025 am 12:09 AMHTML、CSS和JavaScript在Web開發中的作用分別是：1.HTML定義網頁結構，2.CSS控製網頁樣式，3.JavaScript添加動態行為。它們共同構建了現代網站的框架、美觀和交互性。
HTML的未來：網絡設計的發展和趨勢Apr 17, 2025 am 12:12 AMHTML的未來充滿了無限可能。 1)新功能和標準將包括更多的語義化標籤和WebComponents的普及。 2)網頁設計趨勢將繼續向響應式和無障礙設計發展。 3)性能優化將通過響應式圖片加載和延遲加載技術提升用戶體驗。
HTML與CSS vs. JavaScript：比較概述Apr 16, 2025 am 12:04 AMHTML、CSS和JavaScript在網頁開發中的角色分別是：HTML負責內容結構，CSS負責樣式，JavaScript負責動態行為。 1.HTML通過標籤定義網頁結構和內容，確保語義化。 2.CSS通過選擇器和屬性控製網頁樣式，使其美觀易讀。 3.JavaScript通過腳本控製網頁行為，實現動態和交互功能。
熱AI工具
Undresser.AI Undress
人工智慧驅動的應用程序，用於創建逼真的裸體照片
AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。
Undress AI Tool
免費脫衣圖片
Clothoff.io
AI脫衣器
Video Face Swap
使用我們完全免費的人工智慧換臉工具，輕鬆在任何影片中換臉！
熱門文章
熱工具
Safe Exam Browser
Safe Exam Browser是一個安全的瀏覽器環境，安全地進行線上考試。該軟體將任何電腦變成一個安全的工作站。它控制對任何實用工具的訪問，並防止學生使用未經授權的資源。
PhpStorm Mac 版本
最新（2018.2.1 ）專業的PHP整合開發工具
MinGW - Minimalist GNU for Windows
這個專案正在遷移到osdn.net/projects/mingw的過程中，你可以繼續在那裡關注我們。 MinGW：GNU編譯器集合（GCC）的本機Windows移植版本，可自由分發的導入函式庫和用於建置本機Windows應用程式的頭檔；包括對MSVC執行時間的擴展，以支援C99功能。 MinGW的所有軟體都可以在64位元Windows平台上運作。
MantisBT
Mantis是一個易於部署的基於Web的缺陷追蹤工具，用於幫助產品缺陷追蹤。它需要PHP、MySQL和一個Web伺服器。請查看我們的演示和託管服務。
VSCode Windows 64位元 下載
微軟推出的免費、功能強大的一款IDE編輯器
