當前位置:首頁 » 網頁前端 » javascript腳本
擴展閱讀
webinf下怎麼引入js 2023-08-31 21:54:13
堡壘機怎麼打開web 2023-08-31 21:54:11

javascript腳本

發布時間: 2022-01-15 15:59:13

Ⅰ javascript腳本語言

JAVASCRIPT 是一種腳本語言,也有人說它算上是面向對象的語言。它是網站前台的腳本,在客戶端運行。具體的用處是:驗證表單(非空,長度,規則)、特效(對聯、漂浮)、及一些深入的應用如AJAX,網站特效,如果不學它,那麼以後製作網站是非常苦悶的事情。可以仔細討論,如全部由伺服器驗證,導致伺服器端壓力過大,客戶端驗證通過了再由伺服器處理之類。學習JS很簡單,DOM模型開始。理解HTML基礎,先練習驗證表單,再深入學習特效,事件 慢慢來

Ⅱ 網頁設計中常用的javascript腳本有哪些

  • $(「a[href=』#top』]」).click(function(){

  • $(「html,body」).animate({scrollTop:0},「slow」);

  • returnfalse;

  • });

  • 復制以上代碼放在網頁的JavaScript標簽中,然後在底部添加一個id為「top」的鏈接就會自動返回到頂部了。

    2、復製表單頂部標題到底部:

  • var$tfoot=$(『<tfoot></tfoot>』);

  • $($(『thead』).clone(true,true).children().get().reverse()).each(function(){

  • $tfoot.append($(this));

  • });

  • $tfoot.insertAfter(『tablethead』);

  • 3、載入額外的內容:

  • $(「#content」).load(「somefile.html」,function(response,status,xhr){

  • //errorhandling

  • if(status==「error」){

  • $(「#content」).html(「Anerroroccured:「+xhr.status+」「+xhr.statusText);

  • }

  • });

  • 有時候需要為單獨的一個div層從外部載入一些額外的數據內容,下面這段短碼將會非常有用。

    4、設置多列層等高:

  • varmaxheight=0;

  • $(「div.col」).each(function(){

  • if($(this).height()>maxheight){maxheight=$(this).height();}

  • });

  • $(「div.col」).height(maxheight);

  • 在一些布局設計中,有時候需要讓兩個div層高度相當,下面是採用js方法實現的原理(需要等高的div層設置class為」col」)。

    5、定時刷新部分頁面的內容:

  • setInterval(function(){

  • $(「#refresh」).load(location.href+」#refresh>*」,「」);

  • },10000);//millisecondstowait

  • 如果在你的網頁上需要定時的刷新一些內容,例如微博消息或者實況轉播,為了不讓用戶繁瑣的刷新整個頁面,可以採用下面這段代碼來定時刷新部分頁面內容。

    6、預載入圖像:

  • $.preloadImages=function(){

  • for(vari=0;i<arguments.length;i++){

  • $(「<img/>」).attr(「src」,arguments[i]);

  • }

  • }

  • $(document).ready(function(){

  • $.preloadImages(「hoverimage1.jpg」,「hoverimage2.jpg」);

  • });

  • 有些網站頁面打開圖像都未載入完畢,還要苦苦等待。下面這段代碼實現圖像都載入完畢後再打開整個網頁。

    7、測試密碼強度:
    這個比較給力,現在很多網站注冊的時候都加入了密碼強度測試功能,以下代碼也簡單提供了密碼強度測試功能。

    HTML代碼部分:

  • <inputtype=「password」name=「pass」id=「pass」/>

  • <spanid=「passstrength」></span>

  • JavaScript腳本代碼:

  • $(『#pass』).keyup(function(e){

  • varstrongRegex=newRegExp(「^(?=.{8,})(?=.*[A-Z])(?=.*[a-z])(?=.*[0-9])(?=.*\W).*$」,「g」);

  • varmediumRegex=newRegExp(「^(?=.{7,})(((?=.*[A-Z])(?=.*[a-z]))|((?=.*[A-Z])(?=.*[0-9]))|((?=.*[a-z])(?=.*[0-9]))).*$」,「g」);

  • varenoughRegex=newRegExp(「(?=.{6,}).*」,「g」);

  • if(false==enoughRegex.test($(this).val())){

  • $(『#passstrength』).html(『MoreCharacters』);

  • }elseif(strongRegex.test($(this).val())){

  • $(『#passstrength』).className=『ok』;

  • $(『#passstrength』).html(『Strong!』);

  • }elseif(mediumRegex.test($(this).val())){

  • $(『#passstrength』).className=『alert』;

  • $(『#passstrength』).html(『Medium!』);

  • }else{

  • $(『#passstrength』).className=『error』;

  • $(『#passstrength』).html(『Weak!』);

  • }

  • returntrue;

  • });

  • 8、自適應縮放圖像:
    有時候網站上傳的圖像需要填充整個指定區域,但是有時候圖像比例並不恰好合適,縮放後效果不好。一下代碼就實現了檢測圖像比例然後做適當的縮放功能。

  • $(window).bind(「load」,function(){

  • //IMAGERESIZE

  • $(『#proct_cat_listimg』).each(function(){

  • varmaxWidth=120;

  • varmaxHeight=120;

  • varratio=0;

  • varwidth=$(this).width();

  • varheight=$(this).height();

  • if(width>maxWidth){

  • ratio=maxWidth/width;

  • $(this).css(「width」,maxWidth);

  • $(this).css(「height」,height*ratio);

  • height=height*ratio;

  • }

  • varwidth=$(this).width();

  • varheight=$(this).height();

  • if(height>maxHeight){

  • ratio=maxHeight/height;

  • $(this).css(「height」,maxHeight);

  • $(this).css(「width」,width*ratio);

  • width=width*ratio;

  • }

  • });

  • //$(「#contentpageimg」).show();

  • //IMAGERESIZE

  • });

  • 9、自動載入內容:
    現在很多網站,特別是微博,都不需要翻頁的按鈕了,直接下拉後會自動載入內容。下面的腳本就是簡單實現了個這種效果。

  • varloading=false;

  • $(window).scroll(function(){

  • if((($(window).scrollTop()+$(window).height())+250)>=$(document).height()){

  • if(loading==false){

  • loading=true;

  • $(『#loadingbar』).css(「display」,「block」);

  • $.get(「load.php?start=」+$(『#loaded_max』).val(),function(loaded){

  • $(『body』).append(loaded);

  • $(『#loaded_max』).val(parseInt($(『#loaded_max』).val())+50);

  • $(『#loadingbar』).css(「display」,「none」);

  • loading=false;

  • });

  • }

  • }

  • });

  • $(document).ready(function(){

  • $(『#loaded_max』).val(50);

  • });

Ⅲ JS腳本怎麼用

在一個網頁中添加<script language="javascript" type="text/javascript" src="js/login.js"></script>,並將js/login.js換成你的js腳本位置即可

Ⅳ javascript腳本應該寫在代碼的什麼地方

2. BODY中的腳本,當頁面被載入時執行的腳本放在HTML的body部分。放在body部分的腳本通常被用來生成頁面的內容。 3. Javascript可以放在頁面的任何地方,它的載入順序與頁面的載入順序一致,頁面載入時,先載入head部分,後載入body部分,所以當把javascript代碼塊放在HTML前面時,它將先於head被載入,當放在head裡面時,它將先於body被載入,當放在頁面最後的的html之外時,它將最後被載入。

Ⅳ 什麼是Javascript腳本

就是一種小程序,它自己就是一種語言
是套在HTML中使用的
一般用來做一些網頁特效或者是表單驗證用的

Ⅵ JavaScript腳本的編寫

<script>
for(i=0;i<10;i++){
//你那個要做十次的循環...

if(i==9){
newwindow=window.open('你要打開的網頁地址','最新消息','height=300,width=200,toolbar=no,menubar=no,scrollbars=no,resizable=no,location=no,status=no,')
document.newwindow.bgcolor='#ffffff';
document.newwindow.fgcolor='#000000';
}
}
</script>

Ⅶ JavaScript腳本是什麼

javascript
Javascript是一種由Netscape的LiveScript發展而來的腳本語言,主要目的是為了解決伺服器終端語言,比如Perl,遺留的速度問題。當時服務端需要對數據進行驗證,由於網路速度相當緩慢,只有28.8kbps,驗證步驟浪費的時間太多。於是Netscape的瀏覽器Navigator加入了Javascript,提供了數據驗證的基本功能。

歷史
在1992年,Nombas開始開發一種嵌入式腳本語言,叫做C-minus-minus(Cmm)。[待續...

能夠具有交互性,能夠包含更多活躍的元素,就有必要在網頁中嵌入其它的技術。如:Javascript、VBScript、Document Object Model(文件目標模塊)、Layers和 Cascading Style Sheets(CSS),這里主要講Javascript。那麼Javascript是什麼東東?Javascript就是適應動態網頁製作的需要而誕生的一種新的編程語言,如今越來越廣泛地使用於Internet網頁製作上。 Javascript是由 Netscape公司開發的一種腳本語言(scripting language),或者稱為描述語言。在HTML基礎上,使用Javascript可以開發互動式Web網頁。Javascript的出現使得網頁和用戶之間實現了一種實時性的、動態的、交互性的關系,使網頁包含更多活躍的元素和更加精彩的內容。 運行用Javascript編寫的程序需要能支持Javascript語言的瀏覽器。Netscape公司 Navigator 3.0以上版本的瀏覽器都能支持 Javascript程序,微軟公司 Internet Explorer 3.0以上版本的瀏覽器基本上支持Javascript。微軟公司還有自己開發的Javascript,稱為JScript。 Javascript和Jscript基本上是相同的,只是在一些細節上有出入。 Javascript短小精悍, 又是在客戶機上執行的,大大提高了網頁的瀏覽速度和交互能力。 同時它又是專門為製作Web網頁而量身定做的一種簡單的編程語言。

雖然,在Dreamweaver的Behaviors可以為我們方便地使用Javascript程序而不用編寫代碼,但我們自己了解了Javascript的編程方法後,將能更加方便靈活地應用,也使Javascript的代碼更簡練。本專題通過對一系列典型程序的剖析,使你快速地掌握Javascript的編程技巧,設計出質量上乘的動態網頁打下堅實的基礎。在此之前,我們先了解一些Javascript 的基本概念。

JavaScript 有什麼特點
JavaScript 使網頁增加互動性。JavaScript 使有規律地重復的HTML文段簡化,減少下載時間。JavaScript 能及時響應用戶的操作,對提交表單做即時的檢查,無需浪費時間交由 CGI 驗證。JavaScript 的特點是無窮無盡的,只要你有創意。

Java 與 JavaScript 有什麼不同
很多人看到 Java 和 JavaScript 都有「Java」四個字,就以為它們是同一樣東西,連我自己當初也是這樣。其實它們是完完全全不同的兩種東西。Java,全稱應該是 Java Applet,是嵌在網頁中,而又有自己獨立的運行窗口的小程序。Java Applet 是預先編譯好的,一個 Applet 文件(.class)用 Notepad 打開閱讀,根本不能理解。Java Applet 的功能很強大,可以訪問 http、ftp等協議,甚至可以在電腦上種病毒(已有先例了)。相比之下,JavaScript 的能力就比較小了。JavaScript 是一種「腳本」(「Script」),它直接把代碼寫到 HTML 文檔中,瀏覽器讀取它們的時候才進行編譯、執行,所以能查看 HTML 源文件就能查看JavaScript 源代碼。JavaScript 沒有獨立的運行窗口,瀏覽器當前窗口就是它的運行窗口。它們的相同點,我想只有同是以 Java 作編程語言一點了。

開發 JavaScript 該用什麼軟體
一個 JavaScript 程序其實是一個文檔,一個文本文件。它是嵌入到 HTML 文檔中的。所以,任何可以編寫 HTML 文檔的軟體都可以用來開發 JavaScript。在此我推薦大家用 FrontPage 2000 附帶的 Microsoft 腳本編輯器(在 FrontPage 菜單 | 工具 | 宏 | Microsoft 腳本編輯器)。它是個像 Visual Basic / C++ 一樣的程序開發器,能對正在輸入的語句作出簡要提示。配合 FrontPage 2000,使工作量大大減少。

一、Javascript在網頁的用法

Javascript加入網頁有兩種方法:

1、直接加入HTML文檔

這是最常用的方法,大部分含有Javascript的網頁都採用這種方法,如:

<script language="Javascript">

<!--

document.writeln("這是Javascript!採用直接插入的方法!");

//-Javascript結束-->

</script>

在這個例子中,我們可看到一個新的標簽: <script>……</script>,而<script language="Javascript」> 用來告訴瀏覽器這是用Javascript編寫的程序,需要調動相應的解釋程序進行解釋。

HTML的注釋標簽<!--和-->:用來去掉瀏覽器所不能識別的Javascript源代碼的,這對不支持 Javascript 語言的瀏覽器來說是很有用的。

//-Javascript結束:雙斜杠表示 Javascript的注釋部分,即從//開始到行尾的字元都被忽略。 至於程序中所用到的document.write()函數則表示將括弧中的文字輸出到窗口中去, 這在後面將會詳細介紹。 另外一點需要注意的是,<script>……</script>的位置並不是固定的,可以包含在<head>......</head> 或<body>.....</body>中的任何地方。

2、引用方式 如果已經存在一個Javascript源文件(以js為擴展名),則可以採用這種引用的方式,以提高程序代碼的利用率。其基本格式如下:

<script src=url language="Javascript"></script>

其中的Url就是程序文件的地址。同樣的,這樣的語句可以放在HTML文檔頭部或主體的任何部分。 如果要實現「直接插入方式」中所舉例子的效果,可以首先創建一個Javascript源代碼文件「Script.js」,其內容如下:

document.writeln("這是Javascript!採用直接插入的方法!");

在網頁中可以這樣調用程序:<script src="Script.js" language="Javascript"></script> 。

二、Javascript基本概念

在這里只作簡單介紹,在以後的例子中結程序再作具體解釋其作用。

1、運算符

運算符就是完成操和的一系列符號,它有七類:

賦值運算符、算術運算符、比較運算符、邏輯運算符、條件運算、位操作運算符和字元串運算符。

2、表達式

運算符和操作數的組合稱為表達式,通常分為四類:賦值表達式、算術表達式、布爾表達式和字元串表達式。

3、語句

Javascript程序是由若干語句組成的,語句是編寫程序的指令。Javascript提供了完整的基本編程語句,它們是:

賦值語句、switch選擇語句、while循環語句、for循環語句、do while循環語句、break循環中止語句和continue循環中斷語句。

4、函數

函數是命名的語句段,這個語句段可以被當作一個整體來引用不著和執行。使用函數要注意以下幾點:

1)函數由關鍵字function定義;

2)函數必須先定義後使用,否則將出錯;

3)函數名是調用函數時引用的名稱,它對大小寫是敏感的,調用函數時不可寫錯函數名;

4)參數表示傳遞給函數使用或操作的值,它可以是常量,也可以是變數;

5)return語句用於返回表達式的值,也可以沒有。

5、對象

Javascript的一個重要功能就是基於對象的功能,通過基於對象的程序設計,可以用更直觀、模塊化和可重復使用的方式進行程序開發。

一組包含數據的屬性和對屬性中包含數據進行操作的方法,稱為對象。比如要設定網頁的背景顏色,所針對的對象就是document,所用的屬性名是bgcolor,如document.bgcolor="blue",就是表示使背景的顏色為藍色。

6、事件

用戶與網頁交互時產生的操作,稱為事件。絕大部分事都由用戶的動作所引發,如:用戶按滑鼠的按鈕,就產生onclick事件,若滑鼠的指針的鏈接上移動,就產生onmouseover事件等等。在Javascript中,事件往往與事件處理程序配套使用。

學習Javascript比較快速有效的方法是先熟悉一些基本概念,然後找幾個別人設計好的程序認真仔細地分析一遍,再稍作改動,再看看能否達到預期目的,不斷地舉一反三,既可以加深對一些參數、設計方法的理解,又可以快速地提高自己的水平。另外,再提醒一下:Javascript對大小寫是敏感的,特別是一些對象、方法、屬性的大小寫一定要一致,要養成一種良好的習慣,否則在調試程序時可要累死你了。

7、變數

如 var myVariable = "some value";

Ⅷ 編寫Javascript腳本,

<html>
<head>
<title>num</title>
<script language="javascript">
function check(){

var a =document.getElementById("num1").value;
var b =document.getElementById("num2").value;
var c =document.getElementById("num3").value;

if(isIn(a)&&isIn(b)&&isIn(c)){

}else{

return
}

if(isSum(a)&&isSum(b)&&isSum(c)){

}else{
return;
}

var a1 = parseInt(a);
var b1 = parseInt(b);
var c1 = parseInt(c);
if(isSuNum(a1)&&isSuNum(b1)&&isSuNum(c1)){
var result = a1+b1+c1;
document.getElementById('result').value=result;
return
}else{
return;
}

}
function isIn(x){
var y =parseInt(x);
if(y>=1000 && y<=9999){
return true;
}else{
alert('每個數要在1000—9999區間');
return false;
}
}
function isSum(x){
var y = parseInt(x.substring(0,1))+parseInt(x.substring(3,4));
var z = parseInt(x.substring(1,2))+parseInt(x.substring(2,3));
if(y==z){
return true
}else{
alert('每個數的千位與個位數字之和等於百位與十位數字之和。');
return false;
}
}
function isSuNum(x){
var y = parseInt(x);
for(var i=2;i<=Math.sqrt(y);i++) {
if(y%i==0){
return true;
}else{
alert('每個數字不能是素數');
return false;
}
}
}
</script>
</head>
<body>
要求:<br>請輸入3個數字:<br>1、該數為1000—9999區間。<br>2、該數的千位與個位數字之和等於百位與十位數字之和。<br>
3、該數字不能是素數。<br>
<center>

請第一個數:<input type="text" name="num1"><br/>
請第二個數:<input type="text" name="num2"><br />
請第三個數:<input type="text" name="num3"><br />
<input type="button" value="提交" onClick="check()"><br>
三個數的和為:<input type="text" name="result" readonly>
</center>
</body>
</html>

Ⅸ JS腳本怎麼使用啊

1. 在HTML裡面加入JavaScript;方法非常簡單,就是通過一對<script></script>標簽,然後在標簽裡面書寫代碼即可;2. 標簽位置;按照以前傳統的方法,我們的script標簽都是放在head標簽裡面的。但是由於瀏覽器進行渲染的時候是由上往下進行渲染,這樣會導致瀏覽器在呈現頁面的時候出現延遲。延遲的時候就是空白,影響用戶體驗。所以現在的方法,都是講script標簽寫body裡面,元素的後面。;3. 外部JS文件;1)可維護性高;2)可緩存:例如有兩個HTML文件(A,B)都是用的同一個JS文件。當用戶請求A頁面的時候,A頁面的HTML文件和JS文件一起被下載到本地。接下來用戶再請求B頁面的時候,只需要下載B頁面的HTML頁面即可,因為JS文件已經有了。4. JavaScript語法;1)JavaScript區分大小寫test和Test表示不同變數2)標識符;JavaScript裡面的標識符由數字,字母,下劃線(_)和$組成,不能以數字開頭3)注釋:JavaScript注釋有兩種:多行注釋和單行注釋

Ⅹ 如何在HTML中加入JavaScript腳本

<ScriptLanguage="JavaScript">
JavaScript語句
</Script>
把上述語句放在HTML的<head>與</head>之間,也可放在<body>與</body>之間。
例子:在網頁上顯示「智游教育IT培訓的黃埔軍校!」。
<html>
<body>
<ScriptLanguage="JavaScript">
alert("智游教育IT培訓的黃埔軍校!")
</script>
</body>
<ml>

把JS代碼插入HTML代碼的 body區域內就可以了!學習JS要自己多試,多看,多思考,這樣學起來很快的!