導航:首頁 > 萬維百科 > 網頁設計js有什麼用

網頁設計js有什麼用

發布時間:2021-01-16 06:12:04

1、網頁設計里什麼能用javascript

CSS和JavaScript是製作網頁常用到的兩種語言,不屬於Dreamweaver,Dreamweaver只是製作網頁的一種工具,做網頁可以使用CSS和JavaScript也可以不使用,也就是說用Dreamweaver可以使用CSS和JavaScript也可以不使用。

可以理解為,css讓房子里的東西擺好位置,但不能動,JS卻可以重新把布局進行更換
js主要用於客戶端,屬於客戶端腳本語言(是弱類型的程序),CSS只能美化網頁,對網頁進行布局,功能單一

2、html,css,javascript在製作網頁中的作用,三者之間有何種聯系?

html:超文本標記語言,是為「網頁創建和其它可在網頁瀏覽器中看到的信息」設計的一種標記語言。

css:層疊樣式表,是一種用來表現HTML或XML等文件樣式的計算機語言。

javascript:一種直譯式腳本語言,是一種動態類型、弱類型、基於原型的語言,內置支持類型。

每一個網頁都是一個html文檔,由瀏覽器解釋呈現的。css是html中用來布局表現的。而javascript是html中用來動態交互的腳本。

3、網頁製作中js是幹嘛用的

html只能用來做靜態的頁面,js可以實現當前日期的調用,div左側與右側的自適應,給你個網址你學學吧很好的 http://www.w3school.com.cn/js/index.asp js語句可長可短,自己根據需要寫 // JavaScript Document function initArray(){ for(i=0;i<initArray.arguments.length;i++) this[i]=initArray.arguments[i]; } var isnMonths=new initArray("1月","2月","3月","4月","5月","6月","7月","8月","9月","10月","11月","12月"); var isnDays=new initArray("星期日","星期一","星期二","星期三","星期四","星期五","星期六","星期日"); today=new Date(); hrs=today.getHours(); min=today.getMinutes(); sec=today.getSeconds(); clckh=""+((hrs>12)?hrs-12:hrs); clckm=((min<10)?"0":"")+min; clcks=((sec<10)?"0":"")+sec; clck=(hrs>=12)?"下午":"上午"; var stnr=""; var ns="0123456789"; var a=""; function getFullYear(d){ //d is a date object yr=d.getYear(); if(yr<1000) yr+=1900; return yr; } document.write(getFullYear(today)+"年"+isnMonths[today.getMonth()]+""+today.getDate()+"日 "+isnDays[today.getDay()]); 這是我寫的顯示日期的代碼,把我這段代碼放進div, <div> <ul><li class="date">當前日期:<script src="nowdate.js"></script></li></ul></div> 顯示結果就是:當前日期: 2012年4月14日 星期六

4、html,css,javascript在製作網頁中的作用是什麼?三者之間有何種聯系?

HTML、 CSS、 JavaScript三者的關系
網頁主要由三部分組成: 結構( Structure) 、 表現( Presentation) 和行為( Behavior)
HTML —— 結構, 決定網頁的結構和內容( 「是什麼」)
CSS —— 表現( 樣式) , 設定網頁的表現樣式( 「什麼樣子」)
JavaScript( JS) —— 行為, 控制網頁的行為( 「做什麼」)

一、 HTML語言
1.1什麼是HTML語言( HTML概述)
英文全稱: Hyper Text Markup Language
中文全稱: 超文本標記語言
HTML 語言是製作網頁的最基本語言, 並且只能通過web瀏覽器顯示出來。
Hyper( 超) :
用HTML製作的網頁可以通過其中的鏈接從一個網頁「跳轉」至另一個網頁。
Text( 文本) :
HTML是一種文本解釋性的程序語言, 即它的源代碼將不經過編譯而直接在瀏覽器中運行時被「翻譯」。
Markup( 標記) :
HTML的基本規則就是用「標記語言」 ---- 成對尖括弧組成的標簽元素來描述網頁內容是如何在瀏覽器中顯示的。
1.2 HTML文檔結構
HTML文檔一般由兩部分組成:
1. 文檔所要表達的內容信息( 文字、 圖片等) ;
2. 一系列的HTML標簽;
1.3 HTML標簽
1.3.1 什麼是HTML標簽
1. HTML標簽是用 <> 所括住的指令, 主要分為:
單標簽: <起始標簽/>
雙標簽: <起始標簽></結束標簽>
例如:
<br/>
<div></div>
2. 通常使用的是雙標簽。 有一個起始標簽就對應有一個結束標簽。 標簽內容寫在起始標簽和結束標簽之間。
<div>標簽內容</div>
3. 在元素的起始標簽中, 還可以包含「屬性」來設置元素的其他特性。 一個標簽可以有多個屬性,每個屬性之間用空格隔開。
<div 屬性名="屬性值"></div>
例如:
<div class="wrap" id="wrap"></div>
4. 每一對雙標簽之間可以嵌套, 但不能交叉。
正確示例:
<div>
<p></p>
</div>
錯誤示例:
<div>
<p>
</div>
</p>
1.4 編碼器
1.4.1 WebStorm源碼主體標簽含義
<!DOCTYPE> :
是一個聲明不是 HTML 標簽; 它是用來告訴 web 瀏覽器要使用哪個 HTML 版本來對頁面進行編寫。
<html>:
<html>是文檔標識符, 它是成對出現的, 首標簽<html>和尾標簽</html>分別位於 HTML 文檔的最前面和最後面, 明確地表示文檔是以超文本標識語
言( html)編寫的。 該標簽不帶有任何的屬性。
<head>:
<head>標簽用於定義文檔的頭部, 它是所有頭部元素的容器。 <head> 中的元素可以引用腳本、 指示瀏覽器在哪裡找到樣式表、 提供元信息等等。
<meta>:
<meta>標簽位於文檔的頭部, 用於定義文件信息, 對網頁文件進行說明。 其中name屬性主要用於描述網頁, 與之對應的屬性值為content, content中
的內容主要是便於搜索引擎機器人查找信息和分類信息用的。
<body>:
<body>標簽用於定義文檔的主體, 即在瀏覽器上看到的網頁內容。

5、網頁設計里的js文件是什麼

有問題找百度,不要這么懶

先在網頁一般都會用javascript實現頁面的動態效果,甚至用Ajax(javascript+XML)實現非同步通信效果。

用到javascript代碼的頁面中,javascript代碼的存放位置總共有三種情況:
1. 在<script></script>標簽中間
2. 在各個標簽的< ... onClick="javacript代碼" /> 中
3. 外置的javascript代碼,就是以 .js 文件形式存在

6、網頁設計里的js文件是什麼

有問題找百度,不要這么懶

先在網頁一般都會用javascript實現頁面的動態效果,甚至用Ajax(javascript+XML)實現非同步通信效果。

用到javascript代碼的頁面中,javascript代碼的存放位置總共有三種情況:
1. 在<script></script>標簽中間
2. 在各個標簽的< ... onClick="javacript代碼" /> 中
3. 外置的javascript代碼,就是以 .js 文件形式存在

7、jquery在網頁設計中的作用

Web開發人員每天都使用JavaScript為他們創建的網站帶來必要的功能。jQuery提供了一個提供強大功能和靈活性的特殊工具。jQuery是一個JavaScript庫,有助於簡化和標准化JavaScript代碼和HTML元素之間的交互。JavaScript允許網站具有交互性和動態性,jQuery是一種有助於簡化流程的工具。

同時JQuery也是一個緊湊,快速且功能豐富的JavaScript庫。它通過易於使用的API在大量瀏覽器中運行,使得HTML文檔遍歷和操作,事件處理,動畫和Ajax更加簡單。JQuery結合了多功能性和可擴展性,改變了數百萬人編寫JavaScript的方式。換句話說,由於JQuery,JavaScript以簡化形式呈現。閱讀起來相當舒服。

(7)網頁設計js有什麼用擴展資料:

JQuery的優點

1、易於使用:如果我們將它與標准JavaScript和其他庫進行比較,它使用起來既簡單又快捷。它由簡單的語法組成,並且需要較少的代碼行。

2、巨大的庫:與其他庫相比,它允許您執行大量功能。

3、插件的可用性:可以使用許多預先編寫的插件來立即壓縮開發過程。這背後的另一個優點是腳本的效率和安全性。

4、綜合教程: JQuery網站提供了不言自明的文檔和教程,以便在絕對的編程初學者面前進行理解。

5、AJAX支持:它允許我們輕松地開發Ajax模板,Ajax支持更流暢的界面,可以在頁面上執行操作,而不需要重新載入整個頁面。

6、靈活性:所有瀏覽器中的契約,是目前最流行的JavaScript庫。

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

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

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

return false;   

});  

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

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

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

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

$tfoot.append($(this));   

});   

$tfoot.insertAfter(『table thead』);  

3、載入額外的內容:

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

// error handling   

if(status == 「error」) {   

$(「#content」).html(「An error occured: 「 + xhr.status + 」 「 + xhr.statusText);   

}   

});  

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

4、設置多列層等高:

var maxheight = 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); // milliseconds to wait  

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

6、預載入圖像:

$.preloadImages = function() {   

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

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

}   

}   

$(document).ready(function() {   

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

});  

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

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

HTML代碼部分:

<input type=「password」 name=「pass」 id=「pass」 />  

<span id=「passstrength」></span>  

JavaScript腳本代碼:

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

var strongRegex = new RegExp(「^(?=.{8,})(?=.*[A-Z])(?=.*[a-z])(?=.*[0-9])(?=.*W).*$」, 「g」);   

var mediumRegex = new RegExp(「^(?=.{7,})(((?=.*[A-Z])(?=.*[a-z]))|((?=.*[A-Z])(?=.*[0-9]))|((?=.*[a-z])(?=.*[0-9]))).*$」, 「g」);   

var enoughRegex = new RegExp(「(?=.{6,}).*」, 「g」);   

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

$(『#passstrength』).html(『More Characters』);   

} else if (strongRegex.test($(this).val())) {   

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

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

} else if (mediumRegex.test($(this).val())) {   

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

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

} else {   

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

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

}   

return true;   

});  

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

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

// IMAGE RESIZE   

$(『#proct_cat_list img』).each(function() {   

var maxWidth = 120;   

var maxHeight = 120;   

var ratio = 0;   

var width = $(this).width();   

var height = $(this).height();   

if(width > maxWidth){   

ratio = maxWidth / width;   

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

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

height = height * ratio;   

}   

var width = $(this).width();   

var height = $(this).height();   

if(height > maxHeight){   

ratio = maxHeight / height;   

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

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

width = width * ratio;   

}   

});   

//$(「#contentpage img」).show();   

// IMAGE RESIZE   

});  

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

var loading = 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);   

});  

9、網頁設計中Javascript有多重要

在當今的網路時代,製作網站已不再是高不可攀的技術,但要製作出有良好交互性、功能強大的網站並非易事。JavaScript技術可以實現互動式頁面,在建立動態頁面方面有著其他工具不可比擬的優點。
Javascript 在網頁設計中,大部分都是用來實現功能,特效的..
當然 Web2.0如火如荼,其中關鍵技術之一就是JavaScript,例如Ajax技術就是以JavaScript為基礎的。

回到題問 . 其實老實說, Javascript應該算是網頁設計人員必備掌握的技術. 如果伱只會單純的使用Dreamweaver等那些傻瓜式工具,實在是堪稱失敗..

程序員對JavaScript的不重視,直接導致了JavaScript被忽視;而大量互聯網特效應用,加速了JS被地當作一種腳本。而直到Jesse James Garrett 把JavaScript XMLhttp DOM等組合在一起正式提出Ajax後,JavaScript才忽然地炙手可熱起來。加上Google、Yahoo、Microsoft等大型公司在Ajax方面的大量應用,JavaScript隨著Ajax也越來越受到關注。

而使用JavaScript,至少有下面這幾點好處:
1,增加交互動態應用,豐富界面應用,提高用戶體驗
2,節省後台開發成本,減少後台開發量, 顯示HTML/XHTML和格式化數據交給JS處理
3,節省網路帶寬,讓瀏覽速度更快,減輕伺服器壓力,XMLhttp 減少刷新數據
4,體現RIA,B/S模式的利器,通過JS可以達到C/S模式的效果
5,WEB版軟體最好的界面實現者,Flash,Applet也還不錯,不過目前JavaScrip是最好的
6,……

下面參考地址的鏈接 裡面有實例 伱可以自己去看
http://www.blueidea.com/tech/web/2007/4390.asp
要從事網頁設計 加油了!!

與網頁設計js有什麼用相關的知識