JavaScript學習(2)資料和語句

最後更新：2018-12-03 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

1變數命名

變數命名必須以字母開頭，只能包含字母、數字和/或者底線，且不能與保留字衝突。變數名區分大小寫。

2.資料類型

2.1數值型

JavaScript底層並不嚴格地區分整數和浮點數。在底層JavaScript的各種數實值型別都當做浮點數來處理，在程式中兩者可以自由的轉換。

2.2布爾型

布爾型只有兩個可選值：true和false

2.3字串

字串是由單引號或雙引號界定的零個或多個字元。JavaScript也提供逸出字元，如"/f"表示換頁，"/n"表示換行，"/r"表示斷行符號，"/t"表示定位字元，"//"表示反斜線。

2.4null

null表示沒有任何值得情況。

2.5不確定值

不確定值用來表示已經建立卻沒有建立的變數。對於數值，不確定值為NaN；對於字串，不確定值為undefined；對於布爾變數，不確定值為false。

3資料轉換

3.1將字串轉換為數值

JavaScript提供兩個內建函數ParseInt和ParseFloat將對應的字串轉換為數值。

3.2將數值轉換為字串

最簡單的方法是在數值中加入控字串就可以把數值轉換為字串了。

4String對象

4.1常用方法

string.indexOf(string,position)--從position（可選）位置開始，搜尋字串中第一個string所出現的位置並返回。

string.lastIndexOf(string,position)--從position（可選）位置開始，搜尋字串中的最後一個string所出現的位置並返回。

string.charAt(pos)--返回字串中位置為pos的字元。

string.charCodeAt(pos)--返回字串中位置為pos的字元代碼。對於ASCII字元，將返回其ASCII碼。

string.slice(start,end)--返回字串中其實位置為start，結束位置為end的字串。

string.split(string,limit)--將string作為分隔字元返回長度不超過limit的多個字串。

stringsubstr(start,length)--返回字串中起始位置為start、長度為length的子串。

string.substring(start,end)--返回字串中其實位置為start、結束為止為end（包括end）的子串。

string.length--計算字串長度。

string.toLowerCase()--原字串的大寫字母都變成小寫字母返回。

string.toUpperCase()--原字串的小寫字母都變成大寫字母返回。

5綜合應用

顯示當前日期

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> 當前日期 </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
</HEAD>
<script language = "javascript">
function showTime()
{
myTime = new Date();
var monthArray = new Array("1月","2月","3月","4月","5月","6月","7月","9月","10月","11月","12月");
var dayArray = new Array("星期日","星期一","星期二","星期三","星期四","星期五","星期六");
year=myTime.getYear();
date=myTime.getDate();
hours=myTime.getHours();
minutes=myTime.getMinutes();
seconds=myTime.getSeconds();
suf="AM";
if(hours>12)
{
  suf="PM";
  hours=hours-12;
  }
if(hours==0)
  hours=12;
if(minutes<=9)
  minutes="0"+minutes;
if(seconds<=9)
  seconds="0"+seconds;
theTime="<font seize=2>今天是:</font><br><font size=4>"+year+"年"+monthArray[myTime.getMonth()]+date+"日"+"  "+dayArray[myTime.getDay()]+"</font><br><font size=2>目前時間:</font>"+"<br><font size=4 face=Arial>"+hours+":"+minutes+":"+seconds+"   "+suf+"</font>";
DT.innerHTML=theTime;
setTimeout("showTime()",1000);
}
</script>

<BODY onload = "showTime()" bgcolor="5660180" link="#C0C0C0" vlink="#C0C0C0" alink="#008080" text="#C0C0C0">
<span id=DT style="position:absolute;left=35px;top=15px"></span>
</BODY>
</HTML>
6基本語句

其實文法和Java等進階語言差不多。下面是一些執行個體。

使用條件陳述式實現性別選取

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> 性別選取 </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
</HEAD>
<script>
function showSex()
{
onOroff = document.forms[0].sex[0].checked
statur = (onOroff)?"帥哥":"美女"
alert("Hello" + statur)
}
</script>
請輸入你的性別:
<form onClick = showSex()>
<input type =radio name=sex>男
<input type =radio name=sex>女
</form>
<BODY>

</BODY>
</HTML>

for in迴圈

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> for in </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
</HEAD>

<BODY>
<script language="javascript">
var myObject = new Object();
myObject.sit0 = "0";
myObject.sit1 = "1";
myObject.sit2 = "2";
for(prop in myObject)
{
document.write("屬性" + prop + "為" +myObject[prop]);
document.write("<br>");
}
</script>
</BODY>
</HTML>

計算機

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> 計算機 </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
</HEAD>
<script language="javascript">
function compute()
{
var num1,num2;
num1 = parseFloat(document.biaodan.shu1.value);
num2 = parseFloat(document.biaodan.shu2.value);
num3 = document.biaodan.jieguo;
op = document.all.A;

if(op[0].checked)
num3.value = num1 + num2;
else if(op[1].checked)
num3.value = num1 - num2;
else if(op[2].checked)
num3.value = num1 * num2;
else if(op[3].checked)
num3.value = num1 / num2;
else alert("請輸入運算子!");
}
</script>
<BODY>
<form method = "post" name = "biaodan" id = "diaodan">
<h3 align = "center"><font color = "#666666" size = "5">計算機</font></h3>
<div align = "center">
<table width = "38%" border = "0">
<tr>
<td width = "29%"><div align = "right">數字1:</div></td>
<td width = "71%"><input name = "shu1" type = "text" id = "shu1"></td>
</tr>
<tr>
<td><div align = "right">運算子:</div></td>
<td><input type = "radio" name = "A" value = "0">
+ <input type = "radio" name = "A" value = "1">
- <input type = "radio" name = "A" value = "2">
* <input type = "radio" name = "A" value = "3">
/</td>
</tr>
<tr>
<td><div align = "right">數字2:</div></td>
<td><input name = "shu2" type = "text" id = "shu2"></td>
</tr>
<tr>
<td><div align = "right">結果:</div></td>
<td><input name = "jieguo" type = "text" id = "jieguo"></td>
</tr>
<tr>
<td><div align = "right"></div></td>
<td><input name = "suan" type = "button" value = "計算" onClick = "compute()"></td>
</tr>
</table>
</div>
<div align = "center"></div>
<p align = "center"><font color = "#666666" size = "5"></font></p>
<p></p>
</form>
</BODY>
</HTML>

求最大值

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> 求最大值 </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
</HEAD>
<form name = "biaodan">
第一個數:
<input type = "text" name = "num1">
<br>
第二個數:
<input type = "text" name = "num2">
<input type = "button" value = "比較" onClick = "compare()">
</form>
<script>
function compare()
{
var a;
a = parseFloat(document.biaodan.num1.value);
var b;
b = parseFloat(document.biaodan.num2.value);
if(a > b)
window.alert("最大值為:" + a);
else
window.alert("最大值為:" + b);
}
</script>
<BODY>

</BODY>
</HTML>

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More