程序博客网 > 北京大数据招聘

javascript的一些东西

来源：互联网 发布：北京大数据招聘 编辑：程序博客网 时间：2024/04/28 05:56
  • 簡介
  • 瀏覽器的支援差異
  • 宣告
  • 基本使用
  • javascript在html中的位置
  • 資料型態(Data Type)
  • 變數(Variable)
  • 物件模型DOM
  • 使用技巧
  • 參考書目
  • 網路資源

簡介

JavaScript是由Netscape Communication與Sun Microsystem兩家公司所共同開發網頁瀏覽器專用的Script語言，在IE中稱為Jscript。無論是 JavaScript 或是 JScript，都滿足 ECMA（European Computer Manufacturer's Association，歐洲電腦製造商協會）所提出來的標準，滿足此標準的語言稱為 ECMAScript，當初 Netscape 和微軟也都有參與此語言的制訂。

JavaScript是一個直譯型、並以物件為基礎的 Scripting 語言。JavaScript並不是另一個語言的縮減版 (它與 Java 之間並沒有什麼直接關連)，而且也不是其他任何軟體的簡化版。不過，它仍有一些限制。舉例來說，您無法使用它撰寫一些獨立式應用程式，而且它也沒有檔案讀寫與安全與繪圖的功能。


JavaScript甚至只能在直譯程式或"主機"上執行，如Active Server Pages (ASP)，Internet Explorer，或Windows Script Host。


JavaScript的語言型態並不嚴謹(Dynamically typed)，這表示您不需要非常明確地宣告變數的資料型態。JavaScript是跟HTML混合在一起的程式，可以在頁面上做出即時的特效，它會隨著網頁下載到你的電腦，然後瀏覽器自動執行跟HTML程式混在一起的JavaScript程式，做出特效來。

瀏覽器的支援差異

javascript的撰寫在不同瀏覽器上的表現都有些許差異, 一般而言, IE對於錯誤的程式碼容忍度較高, Mozilla則較為嚴謹

在指定瀏覽器上的表單物件時,IE可不指定document,而 mozilla則否, 例如mozilla需指定為 document.forms.text.value , 而IE可簡寫為 forms.text.value ,但還好我們可以先用一個變數來取代指定的麻煩, 如

var s="document.forms";
s.text.value=....... ;

宣告

舊的語法

行內宣告
<script language="JavaScript">
<!--
　script
//-->
</script>
預防瀏覽器不支援 <!-- -->
不讓-->成為JavaScript的一部份，需加入//宣告依版本而有不同
<script language="JavaScript">
<script language="JavaScript1.1">
<script language="JavaScript1.2">
<script language="JavaScript1.3">
<script language="JavaScript1.4">
<script language="JavaScript1.5">
<script language="JScript"> 嵌入宣告
<script language="JavaScript" src="外部的.js檔案URL">
</script>

新的語法

行內宣告
<script type="text/javascript">
<!--
　script
//-->
</script> 預防瀏覽器不支援 <!-- -->
不讓-->成為JavaScript的一部份，需加入//

<script type="text/javascript">

</script>

嵌入宣告
<script type="text/javascript" src="外部的.js檔案URL">
</script>

宣告不支援JavaScript的語法

<noscript>本網頁使用了JavaScript</noscript>

基本使用

以JavaScript在瀏覽器上顯示文字 javascript程式碼瀏覽器畫面<html>
<body>

<script type="text/javascript">
document.write("Hello World!")
</script>

</body>
</html>

Hello World!
以JavaScript在瀏覽器上顯示html javascript程式碼瀏覽器畫面<html>
<body>

<script type="text/javascript">
document.write("<h6>Hello World!</h6>")
</script>

</body>
</html>

Hello World!

javascript在html中的位置

在head區段 javascript程式碼瀏覽器畫面<html>
<head>
<script type="text/javascript">
function message()
{
alert("This alert box was called with the onload event")
}
</script>
</head>

<body onload="message()">

</body>
</html>

javascript的alert患面
在body區段 javascript程式碼瀏覽器畫面<html>
<head>
</head>

<body>

<script type="text/javascript">
document.write("This message is written when the page loads")
</script>

</body>
</html>

This message is written when the page loads

資料型態(Data Type)

JScript無法明確地宣告資料型態。在許多情況下，JScript 會在需要時自動執行轉換。例如，如果在文字 (字串) 所組成的項目中加入一個數字，這個數字就會轉換成文字。

原生資料型態(Primitive Data Type)

字串

字串值是一串由 0 個或 0 個以上的 Unicode 字元(字母，小數點和標點符號)結合而成。
雙括號可以包含在括在單括號的字串裡，而單括號也可以包含在括在雙括號的字串裡。  s="Happy am I; from care I'm free!";
s='"Avast, ye lubbers!" roared the technician.';
s="42";
s='c';
s="";

數字

Jscript 中的整數和浮點值並無明顯區分；兩者都可以作為 JScript 數字 (JScript 內部把所有的數字表示成浮點值)。

特殊數值
NaN：用不正確的資料，像字串或未定義的值執行數學運算時，就會使用這個數值
Positive Infinity：當正數大到無法顯示在Jscript中時，就會使用這個數值
Negative Infinity：當負數大到無法顯示在Jscript中時，就會使用這個數值
Positive and Negative 0：JScript 區分正 0 和負 0。

 .0001; 0.0001; 1e-4; 1.0e-4; 0378; 0377; 0Xff

布林

布林資料型態卻只能有 2 種值，那就是 true 和 false。 flag=true; flag=false; flag = (x == 2000);

特殊資料型態

null 和 undefined 最大的不同是， null 就好比數字 0，而 undefined 好比特殊值 NaN (非數字)。
null 值和 undefined 值經比較後一律相等。

Null

一個包含null的變數，就是"無值" 或 "無物件"。換句話說，它是無效的數字、字串、布林值、陣列、或物件。您可以指定變數的值為null以刪除這個變數的內容，但又不刪掉這個變數。
JScript 的null 資料型態只有一個值：null。null 關鍵字不能拿來作為一個函數或變數的名稱。  

Undefined

遇到下列情況，會傳回未定義的值。也就是使用：

不存在的物件屬性
已經宣告，但未指定值的變數。
注意不能把變數拿來跟為定義的值比對，檢測這個變數是否存在，雖然您可以藉此檢查這個變數的型態是否為 "undefined"。從下列的程式碼範例中， 可以推測這個程式設計者嘗試要檢測變數x 是否已宣告：

 if (typeof(x) == "undefined") .................

var currentCount;
var finalCount = 1 * currentCount; // finalCount 的值是 NaN，因為 currentCount 為Undefined。

組合 (引用) 資料型態

物件

  hobby=["聽音樂","看電影"]

陣列

  

資料型態轉換

JavaScript是一種動態類型(Dynamically typed)語言

自動轉換原則

  1. 運算式中有數字的字串且使用(+)，運算式視為字串
  2. 運算式中有數字的字串且使用(-*/....)其他運算子，運算式視為數值
  3. null乘以任何數皆為0
  4. undefined乘以任何數皆為NaN(Not a Number)

強制轉換

  1. 將字串強迫轉為數值：eval("字串")
  2. 將字串強迫轉為指定底數的數值：parseInt("字串",[底數])
  3. 將字串強迫轉為浮點數：parseFloat("字串")

變數(Variable)=識別字(Identifier)

宣告

類型

 區域變數var 變數名; 全域變數變數名;

方式

 單一宣告var name; 多變數同時宣告var name,sex; 宣告時並賦予初值，否則其值為undefinedvar name="peter",sex="女"; 雖然變數型態不同，宣告方式都一樣var num=30,flag=true;

命名

提供作為命名變數，命名函數，提供迴圈的標籤。

區分大小寫

var x; var X

第一個字元必須是ASCII字母 (大小寫皆可)、底線 (_)字元
注意數字不能拿來當第一個字元
後面的字元必須是字母、數字、或底線

var _x; var x_1

複合字的第一個字建議要大寫

var MyFriend;

變數名稱不能為保留字

 

 

以a標籤連結至javascript的函數有2種方式

文字瀏覽器不可用(假連結)

<a href='javascript:show_url("argument")' >連結至函數</a>

文字瀏覽器可用

<a href="#" onclick='show_url("argument");return false;' >連結至函數</a>

特殊連結程式碼？

上一頁javascript:window.history.go(-1)javascript:window.history.back()下一頁javascript:window.history.go(1)javascript:window.history.forward()重新整理javascript:location.reload() 列印javascript:window.print() 開啟視窗javascript:window.open() 關閉視窗javascript:window.close() 

滑鼠游標相關的動作

顯示游標所在位置的說明

利用title屬性，如老闆的家

在狀態列顯示說明

利用onMouseOver與onMouseOut屬性，配合window物件模型如老闆的家

滑鼠指標指到時的樣式

利用a標籤的擬class「a:hover」屬性，如a:hover{color:#ffffff; background-color:#0000ff}

物件模型DOM

Window

屬性

由於windows物件是瀏覽器的最上層物件，因此再撰寫script可省略window描述 屬性名稱說明是否可讀寫defaultstatus網頁載入完成後，狀態列上的預設文字讀/寫status目前視窗狀態列上的文字讀/寫history已經瀏覽過的URL資料讀length傳回集合裡的元件數目讀location網頁裡的URL位址讀/寫name視窗名稱讀navigator瀏覽器資訊讀document瀏覽器內的網頁文件讀opener傳回目前開啟著的物件讀closed目前視窗是否關閉讀parent目前視窗的母視窗讀self目前視窗讀top最上層視窗讀

方法

方法說明alert開啟警告對話框blur讓網頁失去焦點clearinterval取消setinterval的作用cleartimeout取消settimeout的作用close關閉瀏覽器視窗confirm開啟確認對話框execscript執行某個script,預設為javascriptfocus讓網頁取得焦點navigate連結到其他網頁open新增瀏覽器視窗prompt開啟輸入對話框scroll將網頁視窗捲動X位移與Y位移setinterval固定的毫秒時間間隔來反覆執行某個函數settimeout固定的毫秒時間後執行某個函數showhelp開啟對話框showmodaldialog開啟modal視窗

事件

事件說明onload載入網頁時發生onunload離開網頁時發生onfocus視窗取得焦點時發生onblur視窗失去焦點時發生onhelp按下F1按鍵時發生onresize使用者調整視窗大小時發生onscroll使用者滾動視窗前後時發生onerror載入網頁後出現錯誤時發生

使用技巧

設定文字欄位的輸入遮罩( input mask ) : 只能輸入數字

<script language="JavaScript" type="text/javascript"> <!--
function check_intkey(key){
　if (key>=48 && key<=57) {
　　return true;
　} else {
　　return false;
　}
}
//--> </script>

<input type="text" name="birthday" onKeypress="return check_intkey(event.keyCode)" />

設定文字欄位的欄位驗證 : 只能輸入數字

<script language="JavaScript" type="text/javascript"> <!--
function fild_valid(obj){
　var re = /^/d+$/;
　if (obj.value!="" && !re.test(obj.value)) {
　　alert("您必須輸入數字喔");
　　obj.select();
　　return false;
　} else {
　　return true;
　}
}
//--> </script>

<input type="text" name="birthday" onBlur="fild_valid(this)" />

游標停留在文字欄位中文字的最後面

<script language="JavaScript" type="text/javascript"> <!--
function fild_center() {
　var e = event.srcElement ;
　var r = e.createTextRange() ;
　r.moveStart('character',e.value.length) ;
　r.collapse(true) ;
　r.select() ;
}
//--> </script>

<input type="text" name="address" onClick="fild_center()" />

將文字欄位的東西拷貝至剪貼簿

<script language="JavaScript" type="text/javascript"> <!--
function addClipboard2(obj) {
　var r = obj.createTextRange() ;
　r.execCommand("Copy") ;
}
//--> </script>

<input type="text" id="address" onClick="addClipboard2(this)">

循序取出欄位的值

<script language="JavaScript" type="text/javascript"> <!--
　for( var i = 1; i<= 40; i++ ) {
　if ( typeof( eval( "document.tform.chk"+i ) ) == "undefined" ){
　　break;
　}
　if (eval("document.tform.chk"+i+".value")=="Y") {
　　.......................
　}
}
//--> </script>

<select name="chk1" > <option value="Y">是</option> <option value="N">否</option> </select>
<select name="chk2" > <option value="Y">是</option> <option value="N">否</option> </select>
.........
...假設一頁最多有40個select，或可能不足40個
........
<select name="chk40" > <option value="Y">是</option> <option value="N">否</option> </select>

預防自動蒐集email名單的機器人

<script language="JavaScript" type="text/javascript"> <!--
function AntiSpam(Name, Domain) {
　location.href = 'mailto:' + Name + '@' + Domain
}
//--> </script>

在寫電子郵件時，以下列語法呼叫上面的Javascript

<a href="javascript:AntiSpam('peterju','pchome.com.tw');">聯絡作者</a>

北京大数据招聘 北京大数据招聘
原创粉丝点击
热门IT博客
淘宝客怎么关闭掉淘宝客怎么关闭掉
淘宝旺旺号可以修改吗淘宝旺旺号可以修改吗
淘宝店铺装修页尾
ps4 神之浩劫网络差
淘宝如何申请一笔退款
java重载构造函数
西南证券交易软件
php专科考试题及答案
金山数据恢复
virtuixomni淘宝
下载12360软件下载
淘宝香港代购是真的吗
大鱼海棠 楸 知乎
开源软件使用许可
淘宝店铺鼠标经过特效
实景地图制作软件
java mvc 三层架构
网络监控网线接法
淘宝网触屏版官网
阿里云低价域名
热门问题 老师的惩罚 人脸识别 我在镇武司摸鱼那些年 重生之率土为王 我在大康的咸鱼生活 盘龙之生命进化 天生仙种 凡人之先天五行 春回大明朝 姑娘不必设防，我是瞎子 真爱如血第一季qvod 真爱如血第一季快播 真爱无价国语版全集爱奇艺 真封神gm命令 真封神龙眼外挂 真功夫ekp 真三罗恩 真实人生国语版 真王图标点亮 真旺云 真武唯尊 真正的男人131013 真珠美人鱼第二部国语版 真珠美人鱼国语 真珠美人鱼国语版全集 甄子丹背儿子逛街 甄子丹误伤鼻骨 禛心真意长相守 枕边妖夫 枕边妖夫暴蛇的吻痕 枕边有张脸百度影音 朕本痴情 朕的爱妃是baby 朕的刁蛮老婆 朕的娇宠公主 朕的逍遥邪后 震惊上海歌城的小学生 镇江小悦悦 征途逍遥游 征途星龙包 征战塑像 拯救佳人素柔 拯救佳人素柔 高峰在哪 拯救人马少女 拯救耶尼库 整蛊偷情男友 整容潜伏 整容天后qvod 正者无敌 山羊 正者无敌谁是山羊 郑冲原型

程序博客网，程序员的互联网技术博客家园。csdn论坛精品 msdn技术资料都在这里