精华内容
下载资源
问答
  • 网页出现javascript问题
    千次阅读
    2022-03-26 16:41:49

    一、Ajax的诞生

    2005年,Jesse James Garrett撰写了一篇文章《Ajax - A New Approach to Web Applications》,这篇文章中描绘了一个被称为Ajax(Asynchronous JavaScript+XML,即异步JavaScript+XML)的技术。这个技术涉及发送服务器请求额外数据而不刷新页面,从而实现更好地用户体验。Garrett解释了这个技术怎样改变自Web诞生以来就一直延续的传统单击等待的模式。
    把Ajax推到历史舞台上的关键技术是XMLHttpRequest(XHR)对象。在XHR出现之前,Ajax风格的通信必须通过一些黑科技实现,主要是使用隐藏的窗格或内嵌窗格。XHR为发送服务器请求和获取相应提供了合理的接口。这个接口可以实现异步从服务器获取额外数据,意味着用户不用页面刷新也可以获取数据。通过XHR对象获取数据后,可以使用DOM方法把数据插入网页。
    XHR对象的API被普遍认为比较难用,而Fetch API自动诞生以后迅速成为了XHR更现代的替代标准,Fetch API支持期约promise和服务线程(service worker),已经成为及其强大的Web开发工具。

    二、跨源资源共享

    通过XHR进行Ajax通信的一个主要限制是跨源安全策略。默认情况下,XHR只能访问与发起请求的页面在同一域内的资源。这个安全限制可以防止某些恶意行为。不过,浏览器也需要支持合法跨源访问的能力。
    跨源资源共享(CORS,Cross-Origin Rerource Sharing)定义了浏览器与服务器如何实现跨源通信。CORS背后的基本思路就是使用自定义的HTTP头部允许浏览器和服务器相互了解,以确定请求或相应应该成功还是失败。
    对于简单的请求,比如GET或POST请求,没有自定义头部,而且请求体是text/plain类型,这样的请求在发送时会有一个额外的头部叫Origin。Origin头部包含发送请求的页面的源(协议、域名、端口),以便服务器确定是否为其提供响应。
    现代浏览器通过XMLHttpRequst对象原生支持CORS,在尝试访问不同源的资源时,这个行为会被自动触发。要向不同域的源发送请求,可以使用标准XHR对象并给open()方法传入一个绝对URL,比如:

    let xhr = new XMLHttpRequest();
    xhr.onreadystatechange = function(){
    	if(xhr.readyState == 4){
    		if((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304){
    			alert(xhr.reaponseText);
    		}else{
    			alert("Request was unsuccessful:"+xhr.status);
    		}
    	}
    };
    xhr.open("get","http://www.nezha.con/page/",true);
    xhr.send(null);
    

    跨域XHR对象允许访问status和statusText属性,也允许同步请求,出于安全考虑,跨域XHR对象也施加了一些额外的限制。

    1. 不能使用setRequestHeader()设置自定义头部;
    2. 不能发送和接收cookie;
    3. getAllResponseHeaders()方法始终返回空字符串;

    因为无论同域还是跨域请求都是用同一个接口,所以最好在访问本地资源时使用相对URL,在访问远程资源时使用绝对URL,这样可以更明确地区分使用场景,同时避免出现访问本地资源时出现头部或cookie信息访问受限的问题。

    三、预检请求

    CORS通过一种叫预检请求的服务器验证机制,允许使用自定义头部、除GET和POST之外的方法,以及不同请求体内容类型。在要发送涉及上述某种高级选项的请求时,会先想服务器发送一个预检请求。这个请求使用OPTIONS方法发送并包含如下头部:

    1. Origin:与简单请求相同;
    2. Access-Control-Request-Method:请求希望使用的方法;
    3. Access-Control-Request-Headers:(可选)要使用的逗号分隔的自定义头部列表;

    四、Fetch API

    Fetch API能够执行XMLHttpRequest对象的所有任务,但更容易使用,接口也更现代化,能够在Web工作线程等Web工具中使用。XMLHttpRequest可以选择异步,而Fetch API则必须是异步。
    fetch()方法是暴露在全局作用域中的,包括主页面执行线程、模块和工作线程。调用这个方法,浏览器就会向给定URL发送请求。
    1、分派请求
    fetch()只有一个必需的参数input。多数情况下,这个参数是获取资源的URL,这个方法返回一个期约:

    let r = fetch('/bar');
    console.log(r);//Promise<pending>
    

    URL的格式(相对路径、绝对路径等)的解释与XHR对象一样。
    请求完成、资源可用时,期约会解决一个Response对象,这个对象是API的封装,可以通过它取得相应资源。获取资源要使用这个对象的属性和方法,掌握响应的情况并将负载均衡转为有用的形式。
    2、读取响应
    读取响应内容的最简单方式是取得纯文本格式的内容,只要用到text()方法。这个方法返回一个期约,会解决为取得资源的完整内容。
    3、处理状态码和请求失败
    Fetch API 支持通过Response的status和statusText属性检查响应状态。成功获取响应的请求通常会产生值为200的状态码。
    4、常见Fetch请求模式

    1. 发送JSON数据
    2. 在请求体中发送参数
    3. 发送文件
    4. 加载Blob文件
    5. 发送跨域请求
    6. 中断请求

    五、websocket

    套接字websocket的目标是通过一个长时连接实现与服务器全双工、双向的通信。在JavaScript中创建websocket时,一个HTTP请求会发送到服务器以初始化连接。服务器响应后,连接使用HTTP中的Upgrade头部从HTTP协议切换到websocket协议,这意味着websocket不能通过标准HTTP服务器实现,而必须使用支持该协议的专有服务器。
    因为websocket使用了自定义协议,所以URL方案稍有变化,不能再使用http://或https://,而要使用ws://和wss://。前者是不安全的连接,后者是安全连接。在执行websocket URL时,必须包含URL方案,因为将来有可能再支持其他方案。
    使用自定义协议而非HTTP协议的好处是,客户端与服务器质检可以发送非常少的数据,不会对HTTP造成任何负担。使用更小的数据包让websocket非常适合宽带和延迟问题比较明显的移动应用。使用自定义协议的缺点是,定义协议的时间比定义JavaScript API的时间要长,websocket得到了所有主流浏览器的支持。

    六、JavaScript思维导图

    在这里插入图片描述

    为什么80%的码农做不了架构师?>>>

    Java专栏目录 | 点击这里

    在这里插入图片描述

    七、关注公众号哪吒编程,回复1024,获取思维导图,还有不定期的送书活动

    1. 一步到位!Java程序设计
    2. 极简Java
    3. C++从入门到精通
    4. 算法入门

    在这里插入图片描述

    更多相关内容
  • 主要介绍了JavaScript网页出现渐隐渐显背景颜色的方法,涉及javascript操作样式的相关技巧,非常具有实用价值,需要的朋友可以参考下
  • 网页设计之JavaScript

    千次阅读 2021-10-05 11:29:49
    文章目录JavaScript笔记一.JavaScript概述1.JavaScript历史2.javaScript与java的区别3.javaScript的作用4.JavaScript与html,css关系二.基本语法1.位置2.变量3.控制语句三.函数,内置对象与事件1.函数基本语法:全局...

    JavaScript笔记

    一.JavaScript概述

    1.JavaScript历史

    JavaScript是由Netscape公司(美国网景公司)开发的一种脚本语言结构简单,使用方便,对用户自身知识水

    平的要求并不高,易学易懂。Netscape公司将这种脚本语言命名为LiveScript,与java一样,也是面向对象的语言,

    而且无需编译,可由浏览器直接解释运行,而不象Java那样需要经过编译Netscape公司见LiveScript大有发展前

    途,而SUN公司( java)也觉得可以 利用Livescript为Java的普及做铺垫,于是两家签订协议,将LiveScript改 为

    JavaScript,造就了这个强力的WEB开发工具。

    2.javaScript与java的区别

    相同点:面相对象

    不同点:JavaScript是脚本语言运行在浏览器,java是高级语言需要整体编译后而执行

    3.javaScript的作用

    JavaScript一种直译式脚本语言,用来为网页添加各式各样的动态功能 (javaScript可以操作网页内容),不需要编译可直接通过浏览器解释运行通常JavaScript脚本是通过嵌入在HTML中来实现自身的功能的。

    具体作用:

    1.响应网页中产生的事件(鼠标和键盘)

    2.进行客户端表单验证

    3.动态改变页面标签的样式

    4.JavaScript与html,css关系

    在这里插入图片描述

    二.基本语法

    1.位置

    javaScript脚本写在一组script标签中,此标签可以放在head中或body中一般习惯放在 head中还可以将脚本写在外部的.js文件中,在html页面中导入外部的.js文件

    在这里插入图片描述

    代码

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8" />
    		<title></title> 
    		<!-- 
    		   javaScript的具体作用:
    			1.响应网页中产生事件
    			2.进行客户端表单验证
    			3.动态改变标签样式
    		 -->
    		
    		<!-- javaScript的位置:写在一组<script>标签中,此标签可以改在head或body中,一般习惯在head中,还可以将脚本写在
    		 外部额.js文件中,在html页面中导入外部的.js文件-->
    		<script type="text/javascript">
    			
    			alert("这是我的第一个JavaScript")
    		</script>
    		<script src="js/demo.js" type="text/javascript" charset="utf-8"></script>
    		
    	</head>
    	<body>
    		
    	</body>
    </html>	
    
    

    2.变量

    声明变量:

    声明变量用var关键字

    例如 var name;

    声明变量的同时对其赋值

    var test=“THIS IS A BOOK

    数据类型:
    在这里插入图片描述

    注意:1.字符串类型 “” ‘’ 都可以表示字符串类型

    ​ 2.underfined类型:声明未初始化赋值的变量

    ​ 3.Object类型:表示对象型

    运算:

    1.算术运算符
    在这里插入图片描述

    2.赋值运算
    在这里插入图片描述

    3.比较运算
    在这里插入图片描述

    4.逻辑运算符
    在这里插入图片描述

    5.条件运算符
    在这里插入图片描述

    代码:

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title></title>
    		
    		<script type="text/javascript">
    			// 变量
    			// 1.声明变量 var(关键字) JavaScript是弱类型语言 java是强类型语言
    			/* 
    			 数据类型:
    			 1.数值型(number)整数和浮点类型
    			 */
    			
    			var a=10;
    			 var b=18.5;
    			 console.log(a+b);    //28.5
    			 
    			 // 2.布尔型  true false
    			 
    			 var c=15;
    			 var d=17;
    			 console.log(c==d)    //false
    			 
    			 
    			 // 3.字符串  "" '' 都可以表示
    			   
    			   var s='asdf';
    			   alert(typeof(s));    //测试传入参数类型
    			   console.log(typeof(s))
    			   
    			   
    			   // 4.underfined类型   声明未初始化赋值的变量
    			    
    			   var g;
    			   alert(g);
    			   
    			   // 5.Object类型  对象型
    			   
    			   var date=new Date();
    			   date.getDate();  
    			   date.getFullYear();
    			   date.getMonth();
    			   
    			   
    			   /* 
    			   算数运算符   + - * / % ==(递加) --(递减)
    			   
    			   比较运算符(值得注意的)   ==(值相等)  ===(值和类型都相等)
    			   
    			   逻辑运算符 
    			   
    			   注:值得注意的是字符串类型和数值类型的隐式转换
    			   
    			   */
    			
    		</script>
    	</head>
    	<body>
    	</body>
    </html>
    
    

    3.控制语句

    控制语句:
    在这里插入图片描述

    三.函数,内置对象与事件

    1.函数

    基本语法:

    定义函数:

    function functionName([arguments]){ 
    
           javascript statements 
    
         [return expression] 
    
    } 
    
    /*function: 表示函数定义的关键字; 
    
    functionName:表示函数名; 
    
    arguments:表示传递给函数的参数列表,各个参数之间用逗号隔开,可以为空; 
    
    statements: 表示实现函数功能的函数体; 
    
    return expression:表示函数将返回expression的值,同样是可选的的语句。*/
    

    调用函数:

    <script type="text/javascript"> 
        function fun(){ 
            alert(“test”); 
        }fun();//函数名调用
        function fun2(){
            fun();//在其他函数中调用
        }
    </script>
    

    全局函数:

    • parseInt(arg) 把括号内的内容转换成整数之后的值。如果括号内是字符串, 则字符串开头的数字部分被转换成整数,如果以字母开头,则返回 “NaN”。

    • parseFloat(arg) 把括号内的字符串转换成浮点数之后的值,字符串开头的 数字部分被转换成浮点数,如果以字母开头,则返回“NaN”。

    • typeof (arg)返回arg值的数据类型。

    • eval(arg) 可运算某个字符串。

    代码:

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title></title>
    		
    		<script type="text/javascript">
    			
    			var a="10";
    			var b="10";
    			
    			
    			// 声明函数
    			function test(){
    				console.log(a+b)
    			}
    			
    			function test1(a,b,c){       //在functio中传入的参数不用指定类型传入的参数可以是任意类型   function不用值类型
    			return a+b+c; 
    			}
    			var d=test1(10,'11',12);
    			
    			alert(d);
    			
    			// 调用函数
    			test()
    			
    			
    			
    			// 全局函数
    			
    			// Parseint() 	把括号内的内容转换成整数后的值。如果括号内是字符串则字符串开头的数字部分被转换成为整
    			// 数 如果是字母开头则返回 NaN
    		console.log(parseInt(10.5));    //10   
    		console.log(parseInt(10));    //10
    		console.log(parseInt('10a1'));    //10
    		console.log(parseInt('a10'));    //NaN
    		
    		
    		// typeof(变量)     返回变量的数据类型
    		
    		var d=10;
    		var e="10";
    		var f=true;
    		
    		
    		console.log(typeof(d));     //number
    		console.log(typeof(e));     //string
    		console.log(typeof(f));     //boolean
    		
    		
    		// eval(String)  可运算某个字符串 可以把一段字符串当做js脚本运行
    		
    		eval("alert(111)");     //直接弹出111
    			
    		</script>
    	</head>
    	<body>
    	</body>
    </html>
    
    

    2.内置对象

    (1)String字符串

    属性: length 用法:返回该字符串的长度

    方法:

    charAt(n):返回该字符串位于第n位的单个字符.

    indexOf(char):返回指定char首次出现的位置.

    lastIndexOf(char) :跟 indexOf() 相似,不过是从后边开始找.

    substring(start,end) :返回原字符串的子字符串,该字符串是原字符串从start位 置到end位置的前一位置的一段.

    substr(start,length) :返回原字符串的子字符串,该字符串是原字符串从start位 置开始,长度为length的一段.

    split(分隔符字符) :返回一个数组,该数组是从字符串对象中分离开来的,<分隔 符字符>决定了分离的地方,它本身不会包含在所返回的数组中。

    例如:‘1&2&345&678’.split(’&’)返回数组:1,2,345,678

    实例代码及注释:

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title></title>
    		
    		<script type="text/javascript">
    			
    			// 内置对象     String 字符串
    			
    			var s="abcdefg";
    			
    			console.log(s.length);         //length() 属性:字符串长度
    			
    			console.log(s.charAt(1));       // chartAt(n)   :返回该字符串位于第n位的单个字符
    			
    			console.log(s.indexOf("b"));       // 1   indexOf(char):返回指定char首次出现的位置
    			console.log(s.lastIndexOf("b"));    //1  跟 indexOf() 相似,不过是从后边开始找.
    			
    			console.log(s.substring(1,3));       //bc  substring(开始位置,结束位置) 如(1,3)返回的是1-2的值
    			
    			console.log(s.substr(1,3));            //bcd     substr()  开始位置,截取的长度  如:1-3  返回的值1,2,3
    			
    		</script>
    	</head>
    	<body>
    	</body>
    </html>
    
    

    (2)Aarry数组

    数组创建方式(三种):

    var <数组名> = new Array();

    var <数组名> = new Array(<元素1>, <元素2>, <元素3>…);

    var <数组名> = [<元素1>, <元素2>, <元素3>…];

    **属性:**length :数组的长度,即数组里有多少个元素。

    方法:

    concat() 用于连接两个或多个数组。arrayObject.concat(arrayX,arrayX,…,arrayX)

    pop() 用于删除并返回数组的最后一个元素。

    push() 可向数组的末尾添加一个或多个元素,并返回新的长度。

    shift() 用于把数组的第一个元素从其中删除,并返回第一个元素的值。

    slice() 可从已有的数组中返回选定的元素。arrayObject.slice(start(必须),end(可选)),该方法并 不会修改数组

    splice() 向/从数组中添加/删除项目,然后返回被删除的项目。该方法会改变原始数组。 splice(index(删除的位置),howmany(数量,为0不删除),item1,…,itemX(插入的元素))

    join(<分隔符>) :返回一个字符串,该字符串把数组中的各个元素串起来,用<分隔符>置于元 素与元素之间。

    reverse() 使数组中的元素顺序反过来。如果对数组[1, 2, 3]使用这个方法,它将使数组变成: [3, 2, 1]。

    sort() :使数组中的元素按照一定的顺序排列。如果不指定<方法函数>,则按字母顺序排列。 对数字排序需要调用排序函数。

    ​ function sortNumber(a,b){

    ​ return a - b;

    ​ }

    代码示例及注释:

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title></title>
    		<script type="text/javascript">
    			
    			//内置对象  array数组对象
    			
    		
    			// 数组的创建   不用指定数组长度和类型
    			// 数组创建方式 1     
    			
    			var array=new Array();      
    			
    			array[0]=1;      
    			array[1]="2";
    			array[3]=true;
    			console.log(array);       //[1,"2",empty,true]
    			
    			
    			// 创建方式2
    			
    			// var aray =new Array(1,2,"3",true);
    			
    			// 创建方式3
    			
    			// var array=[1,2,4,"11",15];
    			
    			console.log(array.length);         //   4 数组属性 length() 数组的长度即数组有多少个元素
    			
    			var array2=[1,8];
    			var array3=[5,9];
    			
    			console.log(array.concat(array2,array3));    //concat()链接多个数组 不改变本来的数组
    			
    			console.log(array.pop());       //删除数组最后一个元素斌返回它
    			
    			console.log(array.push(0,0,0,0));      //向末尾添加n个元素, 并返回新的数组长度
    			
    			console.log(array.shift());    //删除第一个元素并返回它
    			
    			
    			console.log(array.slice(1,3));       //      从数组中截取  slice(开始位置,结束位置)
    			
    			console.log(array.splice(1,3,1,1,1,1));    //splice(index(删除的位置),howmany(数量,为0不删除),item1,.....,itemX(插入的元素))
    
                 console.log(array.join(":"));			  // join()  用指定的字符将数组中的每个元素连接为字符串
    			 
    			 console.log(array.reverse());     //逆转数组
    			 
    			 
    			 var array4=[2,5,8,9,13];
    			 // console.log(array4.sort())    错误用法   怎么用?
    			 //需要定义一个排序函数然后将排序函数传入到sort()方式中
    			 function numberSort(a,b){
    				 return a-b;
    			 }
    			 
    			 console.log(array4.sort(numberSort));      //这样才是正确的用法
    			
    		</script>
    	</head>
    	<body>
    	</body>
    </html>
    
    

    (3)Date对象

    ● 获取日期

    new Date() 返回当日的日期和时间

    getFullYear() 返回四位数字年份

    getDate() 返回一个月中的某一天 (1 ~ 31)

    getMonth() 返回月份 (0 ~ 11)

    getDay() 返回一周中的某一天 (0 ~ 6)

    getHours() 返回 Date 对象的小时 (0 ~ 23)

    getMinutes() 返回 Date 对象的分钟 (0 ~ 59)

    getSeconds() 返回 Date 对象的秒数 (0 ~ 59))

    ● 设定日期

    setDate() 设置 Date 对象中月的某一天 (1 ~ 31))

    setMonth() 设置 Date 对象中月份 (0 ~ 11))

    setYear() 设置

    (4)Math对象

    • Math 对象,提供对数据的数学计算。

    属性:PI 返回π(3.1415926535…)。

    方法:

    Math.abs(x) 绝对值计算;

    Math.pow(x,y) 数的幂;x的y次幂

    Math.sqrt(x) 计算平方根;

    Math.ceil(x) 对一个数进行上舍入

    Math.floor(x) 对一个数进行下舍入。

    Math.round(x) 把一个数四舍五入为最接近的整数

    Math.random() 返回 0 ~ 1 之间的随机数

    Math.max(x,y) 返回 x 和 y 中的最大值

    Math.min(x,y) 返回 x 和 y 中的最小值

    3.事件

    ● 一些常用的事件:

    onclick() 鼠标点击时;

    ondblclick() 鼠标双击时;

    onblur() 标签失去焦点;

    onfocus() 标签获得焦点;

    onmouseover() 鼠标被移到某标签之上;

    onmouseout () 鼠标从某标签移开;

    onload() 是在网页加载完毕后触发相应的的事件处理程序;

    onchange() 是指当前标签失去焦点并且标签的内容发生改变时触发事件处理程序。

    Onkeydown 键盘按下

    Onkeyup 键盘抬起

    代码示例及注释:

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title></title>
    		
    		<script type="text/javascript">
    			
    			function test(){
    				console.log("事件触发了!")
    			}
    			
    		</script>
    		
    	</head>
    	<body onload="test()">
    		<!-- 事件 -->
    		
    		<!-- 1.onclick()  鼠标左键单击事件onclick事件  单击事件-->
    		<input type="button" name="" id="" value="点击" onclick="test()" />
    		
    		<!-- 2.ondblclick 鼠标左键双击事件 双击事件 -->
    		<input type="button" name="" id="" value="双击" ondblclick="test()" />
    		
    		<!-- 3.onfocus  输入框获得鼠标焦点触发事件 聚焦事件 -->
    		<input type="text" name="" id="" value="" onfocus="test()" />
    		
    		<!-- 4.onblur  输入框失去鼠标焦点事件 失焦事件-->
    		<input type="text" name="" id="" value="" onblur="test()" />
    		
    		<!-- 5.onmouseover 鼠标移入到标签上触发 移入事件-->
    		<div  style="width: 500px; height: 400px; background-color: aqua;"  onmouseover="test()">  </div>
    		
    		<!-- 6.onmouseout 鼠标移出标签触发 移出事件 -->
    		<div  style="width: 500px; height: 400px; background-color: aqua;"  onmouseover="test()">  </div>
    		
    		<!-- 7.onckeydown 键盘按下时触发 -->
    		<input type="button" name="" id="" value="" onkeydown="test()" />
    		<input type="text" name="" id="" value="" onkeydown="test()" />
    		
    		<!-- 8.onkeydown   键盘抬起来触发  -->
    		<input type="button" name="" id="" value="" onkeyup="test()" />
    		<input type="text" name="" id="" value="" onkeyup="test()" />
    		
    		<!--9.onload 当网页加载后自动触发  放在body标签中 -->
    		
    		
    		<!-- 10.onchange   当输入框失去鼠标焦点写且内容内容发生改变事件触发-->
    		<input type="text" name="" id="" value="" onchange="test()" />
    	</body>
    </html>
    
    

    四.Event对象

    • Event 对象代表事件的状态,比如键盘按键的键位、鼠标的位置

    如:

    type 事件类型

    Button 被点击的鼠标键位

    altKey 按下altKey返回true

    ctrlKey 按下ctrlKey返回true

    shiftKey按下shiftKey返回true

    keyCode 返回被按下的键位编码

    offsetX 当前标签内的鼠标X轴

    offsetY 当前标签内的鼠标Y轴

    clientX 鼠标在浏览器内部X轴

    clientY鼠标在浏览器内部Y轴

    screenX 鼠标在显示器内的X轴

    screenY 鼠标在显示器内的Y轴

    代码及注释示例:

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8" />
    		<title></title>
    		
    		<script type="text/javascript">
    			
    			/*  Event对象 */
    			
    			function test(a,e){
    				console.log(e)
    			}
    			
    		</script>
    	</head>
    	<body>
    		
    		<!-- 事件产生的同时,会创建一个event事件对象,此对象中可以包含时间的一些信息 -->
    		
    		<input type="button" name="" id="" value="测试" onmousedown="test(1,event)" />
    		<!-- 一些信息比如: event.button   鼠标标记位 0-左键 1-滚轮 2-右键
                               event.type  事件的类型		
    		
    		-->
    		
    		<div style="width: 200px; height: 500px; background-color: aquamarine;" onclick="test(1,event)"  ></div>
    		<!-- e.offsetX+"------"+e.offsetY   获得鼠标在前亲标签中的坐标 -->
    		<!-- e.clientX+"------"+e.clientX  获得鼠标在浏览器中的坐标 -->
    		<!-- e.screenX+"------"+e.screenY  获得鼠标在显示器中的坐标 -->
    		
    		<input type="text" name="" id="" value=""  onkeydown="test(1,event)" />
    		<!-- e.keyCode  获得按键的是Askall码值 -->
    		<!-- e.ctrlKey  当按下键盘上键是ctrl则返回true如果不是则返回false
    	  	     e.AltKey    同上
    			 e.shiftKey   同上
    		  -->
    		
    		
    		
    		
    	</body>
    </html>
    
    

    五.HTML Dom对象

    DOM是Document Object Model文档对象(网页中的标签)模型的缩写.通过html dom,可用javaScript操作html文档的所有标签

    • js要对网页网页中的标签进行操作那么js认为网页中的每个标签都是一个对象**(dom对象)**操作网页就可以认为是操作对象

    • 那么我们要在js中的标签进行操作,首先要获得网页中的标签(要操作,先获得)

    • 如何获得网页中的标签?

      • document对象:表示整个html文档,当浏览器加载网页时会创建个document对象

    1.获得标签的四种方式

    (1)通过 id 找到 HTML 标签 document.getElementById(“id");

    (2)通过标签名找到 HTML 标签 document.getElementsByTagName(“p”);

    (3)通过类名找到 HTML 标签 document.getElementsByClassName(“p”);

    (4)通过name找到 HTML 标签 document.getElementsByName(“name");

    2.HTML DOM - 改变 HTML内容

    Html dom允许javaScript 改变html标签的内容。

    改变 HTML 标签的属性

    修改 HTML 内容的最简单的方法时使用 innerHTML 属性

            document.getElementById(“username").value=“new value"; 
    
            document.getElementById("image").src=“new.jpg"; 
    
            document.getElementById(“div”).innerHTML=new HTML;
    
    
    

    3.HTML DOM-改变 CSS

    html dom允许 javaScript改变html标签的样式。

    语法:

    document.getElementById(“id”).style.property=new style;

    例:

          document.getElementById("p2").style.backgroundImage="url(bg.jpg)"; 
    

    4.HTML DOM - 改变标签的属性

    html dom允许 javaScript改变html标签的属性。

    5.代码示例

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title></title>
    	</head>
    	<body>
    		<!-- Dom 是Documeent Object Model 文档对象(网页中的标签)模型的缩写
    		     js要对网页中的标签进行操作,那么js认为网页中的每个标签都是一个队形(dom对象)操作网页就可以认为是操作对象
    			 那么我们要在js中的标签中进行操作,首相要获得网页中的标签(要操作,先得到)
    			 
    			 如何获得网页中的标签?
    			   document对象表示整个html文档,当浏览器记载网页时,会创建个document对象
    			   如:通过id获得对象  document.getElementById("id");  返回对应id的标签对象
    			   
    		-->
    		
    		<script type="text/javascript">
    			function oper1(){     //操作一:对标签中的内容进行操作
    			
    			var div1Obj=document.getElementById("div1");
    			var div2Obj=document.getElementById("div2");
    			
    			div2Obj.innerHTML=div1Obj.innerHTML;             //将id="div1"的标签的内容赋给id="div2标签
    			}
    			
    			
    			function oper2(){      //操作二:操作标签的css
    			
    			var div1Obj=document.getElementById("div1");
    			var div2Obj=document.getElementById("div2");
    			
    			// div2Obj.style.display="none";            //将id="div2"的标签隐藏
    			
    			// div1Obj.style.backgroundColor="red";          //将id="div1"的标签的背景颜色变为红色
    			
    			div2Obj.style.width="200px";                  //将id="div2"的标签的宽度改为200px
    			
    				
    			}
    			
    			function oper3(){      //操作三:操作标签属性
    				
    				var text1Obj=document.getElementById("text1");
    				var text2Obj=document.getElementById("text2");
    				
    				// text2Obj.value=text1Obj.value;      将id="text1"的标签的value属性赋给id="text1"的标签
    				
    				// text1Obj.value=""; 	    将id="text2"的标签的value属性赋值为""
    				
    				text1Obj.type="button";     //将id="text1"的标签的type属性赋值为"button"
    				
    			}
    			
    			
    		</script>
    		
    		
    		<div id="div1">
    			div1
    			
    		</div>
    		<div id="div2"></div>
    		
    		
    		<input type="button" name="" id="" value="测试1" onclick="oper1()" />
    				<!-- 点击按钮将id="div1"的标签的内容赋给id="div2标签 -->
    				
    		
    		<input type="button" name="" id="" value="测试2" onclick="oper2()" />
    		<!-- 点击按钮将做出oper2()方法中的对CSS属性做出的改变-->
    		
    		<input type="text" name="" id="text1" value="" />
    		<input type="text" name="" id="text2" value="" />
    		<input type="button" name="" id="" value="测试3" onclick="oper3()" />
    		
    		
    	</body>
    </html>
    
    

    6.一个小应用

    描述:

    页面中有三个按钮分别写有颜色: 红色 绿色 蓝色。点击相应的按钮页面变换相应的颜色

    代码:

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title></title>
    		
    		<script type="text/javascript">
    			function text(c){
    				
    				var bodyObj=document.getElementById("body1");
    				
    				bodyObj.style.backgroundColor=c;
    				
    			}
    		</script>
    	</head>
    	<body id="body1">
    		
    		<input type="button" name="" id="" value="红色" onclick="text('red')" />
    		<input type="button" name="" id="" value="绿色" onclick="text('green')" />
    		<input type="button" name="" id="" value="蓝色" onclick="text('blue')" />
    		
    	</body>
    </html>
    
    

    效果:
    在这里插入图片描述

    7.除了id剩下三种HTMLdom对象的获取方法

    代码:

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title></title>
    		
    		 <script type="text/javascript">
    		 	 
    			 function test(){
    				 //根据标签名获取指定名称的标签对象, 得到的是一个集合, 哪怕满足条件的只有一个
    				 //var objs = document.getElementsByTagName("input");
    				 //var objs = document.getElementsByClassName("h");
    				 var objs = document.getElementsByName("c");
    			     for (var i = 0; i < objs.length; i++) {
    			     	    objs[i].checked = true;
    			     }
    			 }	 
    			 
    			 window.onload=function(){
    				 var objs1 = document.getElementsByClassName("c1");
    				 for (var i = 0; i < objs1.length; i++) {
    					objs1[i].onclick = function(){
    						  alert(this.value); //批量为多个标签的事件绑定处理函数
    					}
    				 }
    			 }
     	
    		 </script>
    	</head>
    	<body>
    	
    		  <input type="checkbox" value="1" class="h" name="c"/>
    		  <input type="checkbox" value="2" class="h"  name="c"/>
    		  <input type="checkbox" value="3" class="h"  name="c"/>
    		  <input type="checkbox" value="4" class="h"  name="c"/>
    		  <input type="button" value="全选"  id="btn1" onclick="test()"/>
    		  
    		  <input type="button" value="1"   class="c1"/>
    		  <input type="button" value="2"   class="c1"/>
    		  <input type="button" value="3"   class="c1"/>
    
    
    	</body>
    </html>
    
    

    效果:
    在这里插入图片描述

    8.批量处理为事件绑定函数【重要】

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title></title>
    		
    		 <script type="text/javascript">
    		 	/* function test(){
    				 
    			 } */
    			               //匿名函数
    			 window.onload=function(){  //在js中为onload事件 绑定一个处理函数
    				 
    				 var btn1 = document.getElementById("btn1");
    				 //在js代码为标签事件绑定处理函数,将js函数从html中分离出来
    				     btn1.onclick = function(){
    				 					 alert(111);
    				 				 }
    								 
    			 }
    		 </script>
    	</head>
    	<body>
    		<!-- <input type="button" οnclick="test()" /> -->
    		 
    		  <input type="button" value="保存"  id="btn1"/>
    		 
    	</body>
    </html>
    
    

    六.浏览器对象(BOM对象)

    1.window对象

    在这里插入图片描述

    代码示例:

    父:

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title></title>
    		
    		<script type="text/javascript">
    		
    		function Open(e){
    			var x=e.screenX;    //鼠标在屏幕上的位置横坐标
    			var y=e.screenY;    //鼠标在屏幕上的位置纵坐标
    			window.open("window-子.html","窗口","width=400 height=500 left="+x+" top="+y);
    		}	
    			
    		 function show(msg){
    						 var fatherdiv = document.getElementById("father_div");
    						  fatherdiv.innerHTML  = msg;              
    					 } 
    		</script>
    		
    	</head>
    	<body><div id="father_div"></div>
    		<iframe src="window-子.html" width="500px" height="500px" name="child"></iframe>
    		<input type="button" name="" id="newWindow" value="打开新窗口" onclick="Open(event)" />
    		<a href="window-父.html"  target="_top">内联样式</a>  <!--  这里的target是可以指向内联框架在内联框架中打开指定
    		路径的的网页前提是得给内联框架设置名字(name属性)然后让target指向它-->
    	</body>
    </html>
    
    

    子:

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title></title>
    		
    		<script type="text/javascript">
    			
    			function showfather(){
    				
    				
    				/* var fatherObj=window.parent.document.getElementById("father_div");  //子类调用父类第一种方法
    				var chlidTextObj=document.getElementById("text_id");             //直接将父类对象取过来
    				fatherObj.innerHTML=chlidTextObj.value;
    				 */
    				
    				var msg=document.getElementById("text_id").value;      //子类调用父类第二种方法:直接调用父类的方法(通过传参)
    				window.parent.show(msg);      //在子窗口中调用父方法
    				
    			}
    		</script>
    		
    	</head>
    	<body>
    		文本框:
    		<input type="text" name="" id="text_id" value="" />
    		<input type="button" name="" id="" value="发送"  onclick="showfather()"/>
    		
    	</body>
    </html>
    
    

    效果:
    在这里插入图片描述

    2.location对象

    在这里插入图片描述

    代码示例:

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title></title>
    		
    		<script type="text/javascript">
    			
    			//1.重新设置新地址,重定向
    			// location.href="window-子.html";
    			
    		function assaginDemo(){
    			location.assign("window-子.html");
    			// 2.加载新页面,保留原文档(页面)
    			
    		}
    		
    		function reloadDemo(){
    			location.reload();
    			// 3.重新加载当前文档
    		}
    		
    		function replaceDemo(){
    			location.replace("window-父.html");
    			// 4.用一个新文档取代当前文档,加载新页面替换当前页面,不保留原页面
    		}
    			
    		</script>
    		
    	</head>
    	<body>
    		<div></div>
    		
    		<input type="button" name="" id="" value="assagin" onclick="assaginDemo()" />
    		<input type="button" name="" id="" value="reload" onclick="reloadDemo()"/>
    		<input type="button" name="" id="" value="replace" onclick="replaceDemo()" />
    		
    		
    		
    		
    	</body>
    </html>
    
    

    效果:
    在这里插入图片描述

    3.计时

    在这里插入图片描述

    代码:

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title></title>
    		
    		<script type="text/javascript">
    			
    			function test(){
    				alert("弹出");
    			}
    			
    			//在指定的时间后,调用指定的函数,只调用一次 
    			// var t = setTimeout("test()",5000);
    			
    			//每隔相同的时间调用指定的函数
    			var t=setInterval("test()",3000);
    			
    			function clearTime(){
    				// clearTimeout(t);       清除计时器
    				clearInterval(t);      //清除计时器
    				
    			}
    			
    		</script>
    		
    	</head>
    	<body>
    		
    		<input type="button" name="" id="" value="清除计时器" onclick="clearTime()"/>
    		
    	</body>
    </html>
    
    

    效果:
    [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-YhjNmOLN-1633404576066)(C:\Users\封纪元\AppData\Roaming\Typora\typora-user-images\1631780514858.png)]

    展开全文
  • 当ASP.NET网页空白并带有JavaScript alert()时,如何解决问题
  • 经典网页三剑客html、css 和 JavaScript实现的导航网页

    千次阅读 多人点赞 2022-03-08 16:51:35
    从互联网时代到移动互联网时代,一直流传着一句话,得入口者的天下,入口是指用户寻找信息、解决问题的方式,成为入口意味着获得巨量的用户。虽然掌握用户并不直接等同于商业变现,但如果失去这个阵地,也就同时失去...

    全套资料下载地址:https://download.csdn.net/download/sheziqiong/85594013

    一、选题简介

    时间过得很快,这门课马上也要结课了,想了很多选题,最后我还是想做一个导航相关的网页。自己断断续续花了快一周的时间做了一个网页导航的网页作为我的期末大作业,也是对我所学过知识的总结与应用。

    二、设计理念

    从互联网时代到移动互联网时代,一直流传着一句话,得入口者的天下,入口是指用户寻找信息、解决问题的方式,成为入口意味着获得巨量的用户。虽然掌握用户并不直接等同于商业变现,但如果失去这个阵地,也就同时失去了成为行业巨头的机会。从微软做windows占领了PC的桌面,google做Android占领了手机的搜索框,到现在的浏览器、网址导航、手机桌面、手机应用市场,其初衷还是占领入口。

    作为学生,我们每天都在打开浏览器,在互联网上寻觅我们想要的信息,所以一个好的网页导航作为我们的入口,这应该是非常不错的。

    但是随着现在互联网的发展,很多网址导航变得很臃肿,还有很多广告,用户体验非常不好,有的流氓软件甚至自动更改我们的主页,真的让用户很恶心。所以自己学习了网页设计这门课,最后就想自己弄一个简约、没有广告、页面美观的网页导航,设计理念就是:简约、没有广告、美观。

    三、用户市场分析

    学生和公司职员是网址导航的主力用户,性别男性居多,在年龄层面偏年轻化,由于网址导航的便利性,低龄用户群体将会越来越多。所以这个市场还是非常大的,一个好的网页导航,只要能站在用户角度思考问题,帮助用户解决问题,做出让用户满意的产品,后续的市场肯定是不小的。

    互联网在日益成熟,网民的理解程度和需求也相应的在提高,普通的网址推荐已经很难满足用户的需求,那么网址导航类网站该如何改进呢,我觉得有下面几点:

    实用简约+年轻时尚化+个性化定制。

    四、案例分析

    1999年,网络在中国逐渐普及,当时中文网站不仅内容不够丰富,数量也较少,而且复杂的英文域名很难记忆,对于那时候连打字都困难的网民来说,在网上找资料的确不是件易事。此时,第一代网址导航应运而生,仅仅是以网站收录归类为主,便获得了广大网民的青睐,国内比较早的是李兴平创建的hao123导航和后来蔡文胜创建的265导航,而后分别被百度和谷歌两家巨头纳入旗下。

    说到发展史,不得不提到hao123,于1999年5月由李兴平创建,不仅是国内网址导航的鼻祖,也是第一个被互联网巨头百度认可并收购的网站;蔡文胜是笔者到现在都非常崇拜的一个草根创业者,当年卖域名赚得了人生第一桶金,就是这样一个具有慧眼的创业者创办的265导航也足足比hao123晚了4年,不过在2008年也被谷歌中国斥巨资收购了。http://www.biyezuopin.vip

    这两个网页导航为什么能做得如此成功,我觉得就是抓住用户的痛点,真真实实为用户解决问题。

    五、网站介绍及使用

    我的网页导航大体分三部分,左边的导航栏、右边的主内容栏、还有最下面的版权信息声明,当然我也加入了一些有用的功能,提升用户体验。

    先看一下进去的页面吧:

    页面很清爽,右边主体部分上面是一个搜索框,我们可以输入我们想要搜索的文字,按回车或者点击 百度一下 就会链接到百度的相关搜索页面,如下GIF图所示:

    主体部分除了上面的搜索框外,下面基本上都是超链接,比如我们点一下知乎那个框,那么浏览器就会为我们增加一个新的页面跳转到知乎的首页。我们来通过一个GIF图片看一下效果:

    左边是分类的导航,可以帮助用户更好的进行定位查找。我是运用了锚点链接这一技术,当用户点击左边的分类导航时,右边的页面就会上下自动滑动滑动到于之相对应的位置。还是通过GIF图片来更好的看一下:

    还有最下面的版权,我们看下面的图:

    这是我自己的相关信息,当然,我还为用户设计了返回顶部的小按钮,它可以帮助用户更好的返回到顶部。http://www.biyezuopin.cc

    下面是我用谷歌浏览器一个工具截的这个网站的全图,如下:

    六、开发总结

    对了,为了快捷开发,我引入了 jquery 的库,然后下面记录一下我在开发过程中遇到的一些问题以及解决方法。

    6.1 页面左右分栏

    开发第一个难题就是怎样让左右两栏分开并且右边的高度是不定的,左边的高度要自适应。我试过用flex布局,但是左栏会出现问题,最终的解决方法是让左边栏浮动,定位fixed固定并设置最小高度为100vh。然后右边栏设置一个margin值,left-margin的值正好设置成左栏的宽度即可,右边栏width设置成100%。这样就能做成这样的效果了。

    6.2 右边栏的复用

    右边栏是网站的主要内容,它们的样式基本都一样。所以我们通过设置相同的class类名,这样会简便我们css代码的编写,其实我们前期只用设置一个栏目就行,后面增加的那些html元素,全部和我们的第一栏设置成一样的,只用把超链接的地址和网站名和介绍改一下就可以了。

    6.3 css选择器权重问题

    有的时候我在样式的css文件中设置相关的属性,就比如我们常用的颜色属性,我想改一下然后设置了,但是在浏览器就是没有用,还是原来的颜色。经过一些排查,发现是css选择器权重的问题。相关的原理如下:

    权值等级划分, 一般来说是划分4个等级:

    • 第一等级:代表 内联样式,如 style=“”,权值为 1,0,0,0;

    • 第二等级:代表 ID选择器,如 #id=“”, 权值为 0,1,0,0;

    • 第三等级:代表 calss | 伪类 | 属性 选择器,如 .class | :hover,:link,:target | [type], 权值 0,0,1,0;

    • 第四等级:代表 标签 | 伪元素 选择器,如 p | ::after, ::before, ::fist-inline, ::selection, 权值 0,0,0,1;

    此外,通用选择器(*),子选择器(>), 相邻同胞选择器(+)等选择器不在4等级之内,所以它们的权值都为 0,0,0,0;

    权值计算公式:

    权值 = 第一等级选择器个数,第二等级选择器个数,第三等级选择器个数,第四等级选择器个数;

    所有如果出现了我们在css文件中更改了颜色等属性,但是没有生效的话,我们要设置一下它的选择器,让这个选择器的权重比本来的更大,就能解决这个问题。

    6.4 左侧栏锚点的显示及更改

    网页左侧我们点击锚点的时候,要把这个锚点的颜色改变,给出用户提示,右侧页面并转到对应的地点。有一个小细节就是我们前一个锚点的颜色要变回来,并把当前点击的锚点高亮显示。这个怎么解决?

    我的解决方法就是通过设置一个 active 的class类名,哪个是点击的锚点就把这个类增加这个 active 类名,原来的具有 active 的那个类,并把它取消 active 就可以了。

    说白了就是,遍历那个列表,类名全部设置成空,然后再给点击的那个增加 active 类名就可以了。

    七、不足与后续展望

    当然,网站基本上就是这样了,也花费了自己不小的时间和精力。但是由于自己本身知识的欠缺,这个网站也存在一些不足之处,或者需要后续完善的地方。自己现阶段所掌握的知识还不足以让我把这些问题一一解决,下面我把后续需要自己改进的地方列出来,等待自己有了一些后端开发的学习之后再看看能不能解决。

    • 页面的利用率还不高,缺少一些天气信息、热榜信息、或者日历相关的展示等。

    • 网页左侧栏和右侧栏是固定的,还不能动态的添加和删除一些网站。

    • 没有后端以及服务器,不能让用户个性化定制并保存其修改的信息。

    大概想到的也就这么多,可能需要后端的一些设置才能弥补这些不足,这个也是我目前的知识所不能支撑的。

    总而言之,选了这个课学到了很多有用的知识,自己也在课下查看了很多网页设计的知识并学习,这个过程可能不是那么容易,但是真的学到了很多知识,感谢老师,祝老师身体健康、万事如意。

    这门课结束了,但是希望自己对网页的学习不会结束,后续再加油吧!

    全套资料下载地址:https://download.csdn.net/download/sheziqiong/85594013

    展开全文
  • HTML+CSS+JavaScript网页制作案例教程

    千次阅读 2021-06-14 02:42:46
    《高等学校计算机科学与技术项目驱动案例实践规划教材:网页制作案例教程(HTML+CSS+JaScript)》以DreamweerCS5软件和FlashCS5软件的使用为基础,以AscentSys医药商务系统...全书共14章,分5大部分,内容包括网页制作...

    url_none.png

    《高等学校计算机科学与技术项目驱动案例实践规划教材:网页制作案例教程(HTML+CSS+JaScript)》以DreamweerCS5软件和FlashCS5软件的使用为基础,以AscentSys医药商务系统项目案例的贯穿为主线,围绕AscentSys医药商务系统实际项目,详细全面系统地介绍了网页制作、设计、规划的基本知识以及网站设计、开发、发布的完整流程。全书共14章,分5大部分,内容包括网页制作基础,HTML语言基础及网页元素设计和网页布局规划,CSS技术及布局设计,JaScript技术及网页应用,网页Flash制作、网站服务器的创建以及网站系统的发布与维护。《高等学校计算机科学与技术项目驱动案例实践规划教材:网页制作案例教程(HTML+CSS+JaScript)》每一章结合内容知识都给出了相应的项目案例,方便读者进行实训练习,力求由浅入深,使读者快速掌握网页制作及网站设计、开发的相关技术。《高

    ¥25.85定价:¥190.67(1.36折)

    /2000-01-01

    url_none.png

    本书当前实时库存为: 本 书名:HTML+CSS+JavaScript网页制作案例教程 ISBN:9787115296580 出版社:人民邮电出版社 作者:本书编委会 页数:340 出版日期:2015年09月 参考重量:0.550Kg 定价: 49.80 元 图书编号: 3642590 温馨提示:亲!旧书库存变动比较快,有时难免会有断货的情况,为保证您的利益,拍前请务必联系卖家咨询库存情况!谢谢!。

    ¥12.00定价:¥49.80(2.41折)

    本书编委会/2015-09-01

    url_none.png

    《网页设计与制作案例教程》把介绍知识与实例制作融于一体,以爱家商城网站(包括主页、栏目页、内容页、会员管理等页面)作为案例讲解,配以宇宙商务网站的实训练习,两条主线互相结合、相辅相成,自始至终贯穿于本书的主题之中。

    ¥32.40定价:¥49.80(6.51折)

    url_none.png

    《网页设计与制作案例教程》把介绍知识与实例制作融于一体,以爱家商城括主页、栏目页、内容页、会员管理等页面)作为案例讲解,配以宇宙商务的实训练条主线互相结合、相辅相成,自始至终贯穿于本书的主题之中。

    ¥34.90定价:¥49.80(7.01折)

    /2018-02-01

    url_none.png

    《HTML CSS JavaScript网页制作案例教程》采用“案例驱动式”教学方法,内容包括29个原创经典案例,1个综合实战项目,10道动手实践题,并提供丰富的教学素材,其中包括精美教学PPT、80个辅助案例、1208道测试题,长达26小时的教学视频。

    ¥15.00定价:¥133.50(1.13折)

    url_none.png

    《HTML CSS JavaScript网页制作案例教程》采用“案例驱动式”教学方法,内容包括29个原创经典案例,1个综合实战项目,10道动手实践题,并提供丰富的教学素材,其中包括精美教学PPT、80个辅助案例、1208道测试题,长达26小时的教学视频。

    ¥15.00定价:¥64.96(2.31折)

    url_none.png

    本书当前实时库存为: 本 书名:网页设计与制作案例教程(HTML+CSS+DIV+JavaScript) ISBN:9787115442727 出版社:人民邮电出版社 作者:李志云 页数:278 出版日期:2017年01月 参考重量:0.460Kg 定价: 49.80 元 图书编号: 3982320 书友好,二手书采购呢比较困难,然后又很好卖,所以有时候会出现缺货的情况,建议您下单前呐,咨询下咱们的客服库存情况哈。

    ¥9.90定价:¥49.80(1.99折)

    /2017-01-01

    url_none.png

    本书当前实时库存为: 本 书名:网页制作案例教程(HTML+CSS+JavaScript) ISBN:9787302262220 出版社:清华大学出版社 作者:毋建军 页数:458 出版日期:2011年09月 参考重量:0.750Kg 定价: 45.00 元 图书编号: 2838348 书友好,二手书采购呢比较困难,然后又很好卖,所以有时候会出现缺货的情况,建议您下单前呐,咨询下咱们的客服库存情况哈。

    ¥6.70定价:¥45.00(1.49折)

    /2011-09-01

    url_none.png

    《HTML CSS JavaScript网页制作案例教程》采用“案例驱动式”教学方法,内容包括29个原创经典案例,1个综合实战项目,10道动手实践题,并提供丰富的教学素材,其中包括精美教学PPT、80个辅助案例、1208道测试题,长达26小时的教学视频。

    ¥46.31定价:¥50.27(9.22折)

    url_none.png

    《HTML CSS JavaScript网页制作案例教程》采用“案例驱动式”教学方法,内容包括29个原创经典案例,1个综合实战项目,10道动手实践题,并提供丰富的教学素材,其中包括精美教学PPT、80个辅助案例、1208道测试题,长达26小时的教学视频。

    ¥46.31定价:¥50.77(9.13折)

    url_none.png

    《网页设计与制作案例教程》把介绍知识与实例制作融于一体,以爱家商城网站(包括主页、栏目页、内容页、会员管理等页面)作为案例讲解,配以宇宙商务网站的实训练习,两条主线互相结合、相辅相成,自始至终贯穿于本书的主题之中。

    ¥37.40定价:¥50.86(7.36折)

    url_none.png

    《HTML CSS JavaScript网页制作案例教程》采用“案例驱动式”教学方法,内容包括29个原创经典案例,1个综合实战项目,10道动手实践题,并提供丰富的教学素材,其中包括精美教学PPT、80个辅助案例、1208道测试题,长达26小时的教学视频。

    ¥36.39定价:¥173.08(2.11折)

    url_none.png

    《HTML CSS JavaScript网页制作案例教程》采用“案例驱动式”教学方法,内容包括29个原创经典案例,1个综合实战项目,10道动手实践题,并提供丰富的教学素材,其中包括精美教学PPT、80个辅助案例、1208道测试题,长达26小时的教学视频。

    ¥46.31定价:¥50.54(9.17折)

    url_none.png

    《高等学校计算机科学与技术项目驱动案例实践规划教材:网页制作案例教程(HTML+CSS+JaScript)》以DreamweerCS5软件和FlashCS5软件的使用为基础,以AscentSys医药商务系统项目案例的贯穿为主线,围绕AscentSys医药商务系统实际项目,详细全面系统地介绍了网页制作、设计、规划的基本知识以及网站设计、开发、发布的完整流程。全书共14章,分5大部分,内容包括网页制作基础,HTML语言基础及网页元素设计和网页布局规划,CSS技术及布局设计,JaScript技术及网页应用,网页Flash制作、网站服务器的创建以及网站系统的发布与维护。《高等学校计算机科学与技术项目驱动案例实践规划教材:网页制作案例教程(HTML+CSS+JaScript)》每一章结合内容知识都给出了相应的项目案例,方便读者进行实训练习,力求由浅入深,使读者快速掌握网页制作及网站设计、开发的相关技术。《高

    ¥18.04定价:¥250.19(0.73折)

    /2011-09-01

    url_none.png

    《HTML CSS JavaScript网页制作案例教程》采用“案例驱动式”教学方法,内容包括29个原创经典案例,1个综合实战项目,10道动手实践题,并提供丰富的教学素材,其中包括精美教学PPT、80个辅助案例、1208道测试题,长达26小时的教学视频。

    ¥46.31定价:¥50.64(9.15折)

    url_none.png

    Web标准的大特点是采用HTML+CSS+JaScript将网页内容、外观样式及动态效果彻底分离,从而减少页面代码、提高网速,便于分工设计和代码重用。本书站在初学者的角度,以实用的案例、通俗易懂的语言详细介绍了使用HTML、CSS及JaScript进行网页制作的各方面内容和技巧。

    ¥13.49定价:¥114.92(1.18折)

    url_none.png

    《HTML CSS JavaScript网页制作案例教程》采用“案例驱动式”教学方法,内容包括29个原创经典案例,1个综合实战项目,10道动手实践题,并提供丰富的教学素材,其中包括精美教学PPT、80个辅助案例、1208道测试题,长达26小时的教学视频。

    ¥26.35定价:¥78.14(3.38折)

    url_none.png

    Web标准的大特点是采用HTML+CSS+JaScript将网页内容、外观样式及动态效果彻底分离,从而减少页面代码、提高网速,便于分工设计和代码重用。本书站在初学者的角度,以实用的案例、通俗易懂的语言详细介绍了使用HTML、CSS及JaScript进行网页制作的各方面内容和技巧。

    ¥7.49定价:¥110.69(0.68折)

    url_none.png

    Web标准的大特点是采用HTML+CSS+JaScript将网页内容、外观样式及动态效果彻底分离,从而减少页面代码、提高网速,便于分工设计和代码重用。本书站在初学者的角度,以实用的案例、通俗易懂的语言详细介绍了使用HTML、CSS及JaScript进行网页制作的各方面内容和技巧。

    ¥19.05定价:¥168.52(1.14折)

    url_none.png

    《HTML CSS JavaScript网页制作案例教程》采用“案例驱动式”教学方法,内容包括29个原创经典案例,1个综合实战项目,10道动手实践题,并提供丰富的教学素材,其中包括精美教学PPT、80个辅助案例、1208道测试题,长达26小时的教学视频。

    ¥49.80定价:¥49.80

    url_none.png

    《网页设计与制作案例教程》面向学习网页制作的读者,采用全新流行的Web标准,以HTML技术为基础,由浅入深地介绍了HTML、CSS及JaScript网页制作的内容。本书把介绍知识与实例制作融于一体,以爱家商城网站(包括主页、栏目页、内容页、会员管理等页面)作为案例进行讲解,配以宇宙商务网站的实训练习,两者相辅相成,自始至终贯穿于本书的主题中。本书采用案例驱动的教学方法,以案例为引导,结构上采用点面结合的方式,引导读者学习网页规划、设计、制作的基本知识以及项目开发、测试的完整流程。本书适合作为高职高专院校计算机及相关专业的教材,也可以作为培训网站开发与网页制作的教材。

    ¥46.06定价:¥294.00(1.57折)

    /2018-02-01

    url_none.png

    《HTML CSS JavaScript网页制作案例教程》采用“案例驱动式”教学方法,内容包括29个原创经典案例,1个综合实战项目,10道动手实践题,并提供丰富的教学素材,其中包括精美教学PPT、80个辅助案例、1208道测试题,长达26小时的教学视频。

    ¥26.90定价:¥49.80(5.41折)

    url_none.png

    Web标准的大特点是采用HTML+CSS+JaScript将网页内容、外观样式及动态效果彻底分离,从而减少页面代码、提高网速,便于分工设计和代码重用。本书站在初学者的角度,以实用的案例、通俗易懂的语言详细介绍了使用HTML、CSS及JaScript进行网页制作的各方面内容和技巧。

    ¥13.39定价:¥139.93(0.96折)

    展开全文
  • 使用JavaScript网页上生成自定义数量和范围的口算题,使用随机数来选择加减法,不会出现负数答案,不会出现重复题目,输入答案后可以验证答案正误或没做
  • javascript网页特效实例大全

    热门讨论 2010-01-25 12:24:43
    9.7 转动出现的窗口 239 9.8 自动弹出的窗口 241 9.9 自动消失的广告窗口 242 9.10 窗口的震动效果 243 9.11 同时打开10个窗口 244 9.12 检测系统信息窗口 245 9.13 测试链接速度的窗口 248 9.14 关闭窗口...
  • 在上网时出现Javascript:void(0)网页没有反应

    万次阅读 热门讨论 2017-03-16 18:51:57
    网页左下角显示Javascript:void(0),如图所示 后来查的问题是脚本错误,有以下几种解决方案 1、可能是浏览器不兼容首先换个浏览器试试,如果还是不行还有其他解决方案。 2、可能是注册表中没有注册JScript,...
  • 网页内的资源(包括了javascript、文字、图像等)可以通过非常简单的方式获取! 目前网络上提供了各种针对javascript(简称js)的加密手段,主要还是以混淆,Base64,去逻辑化等手段进行保护。先不说此类的加密是否...
  • 在HTML网页中书写JavaScript

    万次阅读 2016-10-30 17:32:06
    参考书籍:《JavaScript 权威指南----...元素定义JavaScript脚本代码 在HTML文档中,可以使用使用<script>元素向HTML页面中插入JavaScript脚本,<script>元素的语法格式如下: <script type...
  • 我们通过浏览器访问这些服务器上的网页。不同的网页通过超链接联系在一起,构成了WWW的网状结构。 2.HTML是表示网页的一种规范,它通过标记符定义了网页内容的显示,并使用属性进一步控制内容的显示。 3.Web标准...
  • JavaScript一种直译式脚本语言,是一种动态类型、弱类型、基于原型的语言,内置支持类型。它的解释器被称为JavaScript引擎...[removed]标签要成对出现,并把JavaScript代码写在[removed][removed]之间。 <script ty
  • JavaScript简单语法; 浏览器DevTools(即F12快捷键呼出的界面); Code 选中表格元素 F12调出DevTools,切换到控制台Console Ctrl+Shift+C,鼠标点击网页中的表格。 之后在控制台输入$0,可以打印出最近一次在页面...
  • JavaScript制作网页动画

    千次阅读 多人点赞 2018-11-01 09:27:28
    代码如下 &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt;...text/javascript"&gt; //定义几个全局变量
  • JavaScript(js)网页--下拉菜单制作

    千次阅读 多人点赞 2020-11-19 20:40:15
    JavaScript(js)网页–下拉菜单制作 在网页的设计中,经常会出现二级下拉菜单,当鼠标经过时,显示二级菜单,鼠标离开时隐藏。例如新浪网 鼠标放到微博、博客或邮箱上面时,会出现一个二级菜单,鼠标离开则隐藏。 ...
  • 1.1 JavaScript 概述 1.1.1 JavaScript 简介 1.1.2 JavaScript 的概念和执行原理 1.1.3 JavaScript 脚本代码的位置 1.1.4 实践练习 1.2 JavaScript 核心语法 1.2.1 变量 1.2.2 数据类型 1.2.3 JavaScript ...
  • JavaScript网页制作–五秒后自动跳转页面 通常在浏览一些网站时,会出现网页不存在的情况,网页不存在之后,有些网站会在5秒后自动跳转到一个新的网页,比如网站的首页。可以利用定时器和location属性写自动跳转的...
  • javascript渲染错误 JavascriptException: Message: javascript error: Failed to execute 'elementsFromPoint' on 'Document': The provided double value is non-finite. (Session info: chrome=80.0.3987.162) ...
  • 如何实时修改网页javascript代码

    万次阅读 多人点赞 2020-07-26 08:19:08
    最近在做upload-labs需要修改网页的js代码,貌似比较复杂,记录留念一下。 首先我们打开开发人员工具做修改,试图在element编辑框内修改代码,把上传的文件改为允许php,然而修改的代码并不会生效,因为chrome已经...
  • JavaScript之点击打开新网页--渐入HTML8

    千次阅读 2020-02-14 21:23:36
    JavaScript之点击打开新网页--渐入HTML8代码关键代码解释结果展示 代码 非常简单的一个代码,所有代码都可以在我的GitHub中找到,链接在此 <!DOCTYPE html> <html lang="en"> <head> <meta ...
  • 基于HTML5、JavaScript和CSS3的网页开发应用技术的网页

    万次阅读 多人点赞 2019-11-27 19:54:42
    我的网站的构思是建一个基于HTML5、JavaScript和CSS3的网页开发应用技术的网页,网站的主题思想是同舟共济六十载、民族团结一家亲。网站包括主页、成就、广西福利、民族活动、展望未来以及关于。网站最大的特点是...
  • JavaScript审计

    千次阅读 2022-03-22 10:47:26
    前言 Javascript (.js) 文件一般存储的是客户端代码,Javascript 文件可帮助网站执行某些功能,例如监视单击某个按钮的时间,或者当用户将鼠标移到图像上,甚至代表用户发出请求(例如检索信息)时。有时开发人员...
  • 在开始学习JavaScript代码编写的时候,会发现我们程序编写的正确,但是在运行的时候页面出现的空开,一点效果都没有,下面介绍出现这种现象可能的原因。 1.就例如这段代码,是书上一段简单的判断学生成绩的代码,...
  • HTML5期末大作业:大学生个人网站设计——我们的班级(7页) HTML+CSS+JavaScript 学生DW网页设计作业成品 web课程设计网页规划与设计 计算机毕设网页设计源码 常见网页设计作业题材有 个人、 美食、 公司、 学校、 ...
  • JavaScript 页面刷新方法

    千次阅读 2021-05-27 14:50:28
    其他的都有明显的浏览器滚动条的出现。 一.Javascript刷新页面的几种方法: 1 history.go(0) 除非有<%…%>等需在服务端解释才能生成的页面代码,否则直接读取缓存中的数据 不刷新 2 location.reload() 要重新...
  • javascript:void(0)用法及常见问题解析

    千次阅读 2020-06-11 11:54:40
    下面我们先来看下javascript:void(0) 的基础介绍及用法,然后再来看使用它会出现什么问题,该怎么解决。 提示:在学习一下内容之前,你可以先通过javascript:void(0) 含义一节的内容来了解或者复习什么是javascript:...
  • javascript中void(0);用法及常见问题解析

    万次阅读 多人点赞 2018-06-08 23:08:14
    转载这篇文章 使用过ajax的朋友经常会见到这样的...下面我们先来看下javascript:void(0) 的基础介绍及用法,然后再来看使用它会出现什么问题,该怎么解决。 提示:在学习一下内容之前,你可以先通过javascript:vo...
  • 25 道神奇的 javascript 示例

    千次阅读 2021-08-19 10:54:11
    前言 JavaScript 是一种很好的语言。它有一个简单的语法,庞大的生态系统,以及最重要, 最伟大的社区。同时,我们都知道,JavaScript ...如果您是专业开发人员,您可以将这些示例视为您公司新手访问问题和测验的重要资
  • 在什么地方插入 JavaScript JavaScript 可以出现在 HTML 的任意地方使用标记 JavaScript 有什么特点 你可以在 HTML 文档的任意地方插 入 JavaScript甚至在之前插入也不成问题不过 JavaScript 使网页增加互动性...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 180,742
精华内容 72,296
关键字:

网页出现javascript问题