网页设计javascript,网页设计javascript的应用

JavaScript 在网页制作中起得作用

能够具有交互性，能够包含更多活跃的元素，就有必要在网页中嵌入其它的技术。如：Javascript、VBScript、Document Object Model（DOM，文档对象模型）、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网页而量身定做的一种简单的编程语言。 JavaScript 使网页增加互动性。JavaScript 使有规律地重复的HTML文段简化，减少下载时间。JavaScript 能及时响应用户的操作，对提交表单做即时的检查，无需浪费时间交由 CGI 验证。JavaScript 的特点是无穷无尽的，只要你有创意。

相关问答

Q1: 网页设计中JavaScript,欢迎您!怎么设计文字为蓝色加粗？

给需要设计的文字加个id，用document.getElementById("id")去访问该元素，获取dom,然后如下：

document.getElementById("id").style.color="blue"

document.getElementById("id").style.fontWeight="bold"

Q2: 简述javascript在网页设计中有哪些方面的应用？

响应浏览器端的事件。比如，鼠标事件，二级菜单，显示隐藏部分内容。滚动图片，表单验证等等。

Q3: 网页设计中常用的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; iarguments.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

$(‘#product_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);

});

Q4: JavaScript网页设计

input id="Button1" type="button" value="button" onclick='replaceStr("how do you do", "do", "are")';/