Web 编程

wodeyingyusiji

已于 2022-08-29 16:08:58 修改

阅读量284

点赞数

文章标签： javascript

于 2022-08-27 00:16:44 首次发布

本文链接：https://blog.csdn.net/wodeyingyusiji/article/details/126552266

版权

XML 是一种标记语言，很类似 HTML XML 的设计宗旨是传输数据，而非显示数据 XML 是各种应用程序之间进行数据传输的最常用的工具
2.3.4 元信息标记<meta>

1、提供有关页面的元信息，比如针对搜索引擎和更新频度的描述和关键词

2、<meta> 标签位于文档的头部，不包含任何内容。

3、<meta> 标签的属性定义了与文档相关联的名称/值对。

4、在 HTML 中，<meta> 标签没有结束标签。

5、<meta> 标签永远位于 head 元素内部。

6、元数据总是以名称/值的形式被成对传递的。
<meta 属性=值 content=值> 例如：<meta name=“keywords” content=“W3school”>
< head >

< meta charset = "utf‐8" > <!‐‐ 解决中文乱码问题，设置当前网页的编码格式为 utf ‐ 8
< meta name = "author" content = "teacher" > <!‐‐ 说明当前网页的编写者 ‐‐>

<!‐‐ 5 秒后网页自动跳转找指定的页面 ‐‐>

< meta http ‐ equiv = "refresh" content = "5;url=http://www.baidu.com/" >
HTML的style属性提供了一种改变所有 HTML 元素的样式的通用方法。
可以通过style来设置背景颜色、字体、字体颜色、字体尺寸、对齐方式。
HTML不推荐使用<center>、<font>、<align>、<color>、<bgcolor>等来设置HTML

样式，style、CSS成为首选
<p style="background-color: white; font-family: arial; color: #ff00ff; font-

size:50px; text-align: center"></p>
< img src =" ./image/dog.jpg ">
电子邮件超链接 <a href="mailto:kitty_zjy@126.com?subject=Hi"></a> 注：subject ---主题
页面内的超链接

回到顶部：<a href="#top"></a>

回到某一位置：<a name="tome"></a>

<a href="#tome"></a>
页面外的超链接

外网：<a href="http://www.baidu.com/"></a>

内网：<a href="a.html" target="_blank"></a>

图片超链接 :<a src="a.html"><img src="image/a.jpg"></a>
<th></th>是定义表格的表头，也就是表格的第一行
<td colspan="3"></td> <td rowspan="3"></td>
<form name="" method="get" action="/he.html">
< input type =" button " name =" login " value =" 登录 ">
< select name =" car ">

< option value =" f "> 特斯拉 </ option >

< option value =" g " selected = true > 红旗 </ option >

</ select >
size 显示的选项数目 multiple 列表中的选项为多项
<textarea> </textarea>
name 文字域的名称 rows 文字域的行数 cols 文字域的列数
&nbsp这个表示空格
JavaScript
3.2 网页使用js脚本的三种方式

3.2.1 直接添加脚本

<input type=”button” οnclick=”alert(‘欢迎’);” value=”点击”> 3.2.2 使用script标记插入脚本
< script type =" text/javascript ">

alert("oh! see you again!");

</ script > 3.2.3 链接脚本文件（常用） < script type =" text/javascript " src =" 1.js "></ script >
< input type =" button " name =" mybutton " value =" 点击一下 " onclick =" myfun() ">用上面第三种JS方法时，点击这里的button,执行onclick的那个函数，会在1.js中找myfun()并执行

说白了，<input>标签里面的onclick的函数可以写在js里
typeof（x）可以得到变量的类型
var b = "b = " ; b += 100 ;alert(b); 执行结果为100
JavaScript中的常用对象：浏览器对象Window、文本对象Document（HTML

DOM）
Window 对象表示浏览器中打开的窗口，打开一个HTML网页会创建一个window对象

Window 对象是全局对象

window.open()打开一个新的窗口

window.close()关闭当前窗口

window.location.href：返回完整的URL;对其进行赋值，则能够跳转到相应的网页
每个载入浏览器的 HTML 文档都会成为 Document 对象。

Document 对象使我们可以从脚本中对 HTML 页面中的所有元素进行访问

1、提供了从JS脚本中对 HTML 页面中的所有元素进行访问 2、可以通过getElementById()方法,来根据对应的ID号去访问、控制HTML页面中的标签元

素

3、可以通过title，URL属性获取当前文档的标题，URL信息等

4、可以通过write方法在HTML页面中写入HTML表达式

document . write ( "<br>" );

<label id="mylabel">label原名称</label>


function myfun() { 
 //获取网页的标题 
alert("网页标题："+document.title); 
 //获取网页的url 
 alert("网页网址："+document.URL); 
 //通过getElementById获取或者设置指定标签的值 
var value = document.getElementById("mylabel").innerHTML; //得到"label原名称"
 alert(value); 
11 document.getElementById("mylabel").innerHTML = "hello world"; //label名改成"hello world"
}

内部对象（Date对象）
getTime()方法可返回距1970 年1 月 1 日 00:00:00.000（GMT时间）到现在的毫

秒数。
Date对象方法

getFullYear()：返回当前年份

getMonth()：返回当前月份，0～11

getDay()：返回星期中的某一天，0~6,0表示周日

getDate()：返回一月中的某一天

getHours()：返回当前时间的小时，0～23

getMinutes()：返回当前时间的分钟，0～59

getSeconds()：返回当前时间的秒，0～59
var d = new Date ();
setTimeout 与 setInterval函数区别：

setTimeout函数设置超时调用函数，超时后自动调用所设置的函数。

超时后自动调用了回调函数，如果还想调用回调函数，必须重新调用

setTimeout进行超时设定。

而setInterval 函数只需要设置一次，就可以多次调用回调函数，

直到调用clearInterval
< body onload =" start_onload() "> <!‐‐ onload 属性用于设置后面 js 语句在页面打开时

就立即执行 ‐‐>

var stop_flag = 0; 
function timeout()  { 
var time = new Date(); 
var h = time.getHours(); 
var m = time.getMinutes(); 
var s = time.getSeconds();
document.getElementById("time").value = h+":"+m+":"+s; 
stop_flag = setTimeout("timeout()",1000); //指定的毫秒数后调用函数 timeou t11 
} 
 function start_onload() { 
timeout(); 
} 
function stop() { 
clearTimeout(stop_flag); //通过 setTimeout 返回值，停止定时 
} 
function start() { 
timeout(); 
}

// 判断 num1 和 num2 是否是数字

if ( isNaN ( num1 ) || isNaN ( num2 ))
四个button，分别为加法，减法，乘法，除法，分别赋οnclick="math(1)"~οnclick="math(4)",.在js中定义一个function math(arg)就可以了
Math . max ( num1 , num2 );
在文本框中获取的数字，在进行运算时，要用Number(num1)转成整形数字后在运算
内部对象（String类对象）
常用方法

charAt()返回在指定位置的字符

indexOf()检索字符串

substr(start,length)从起始索引号提取字符串中指定数目的字符串

substring(start,stop)提取字符串中两个指定的索引号之间的字符串
< div id =" content " style =" text‐align : center ; font‐size : 20px ;"></ div >

<body onload="start_printer()">
var str = "成功人士<br><br>专家正在讲课：什么是成功人士你们知道吗？<br><br>成 功人士就是：一、不给别人发名片；<br><br>二、自己不开车；三、衣服没logo；<br><br> 四、住的是小独院；五、每天有时间午睡；！"; 
var index = 0; 
var timer; 
function printer() { 
if(index == str.length) { 
    clearInterval(timer) 
} else { 
     document.getElementById("content").innerHTML=str.substring(0, index); 14 index++; } 
} 
function start_printer() 
{
     timer = setInterval("printer()", 100); 
 }

注意上图代码的循环方式，利用onload和setInterval
全局函数

全局函数可用于整个JavaScript程序中
AJAX是 Asynchronous JavaScript And XML的缩写

2、AJAX 是一种用于创建快速动态网页的技术

3、AJAX 不是新的编程语言，而是一种使用现有标准的新方法

4、AJAX 最大的优点是在不重新加载整个页面的情况下，可以与服务器交换数据并更新部

分网页内容。

传统的网页（不使用 AJAX）如果需要更新内容，必需重载整个网页面

5、AJAX 不需要任何浏览器插件，但需要用户允许JavaScript在浏览器上执行。

6、有很多使用 AJAX 的应用程序案例：新浪微博、Google 地图、开心网等等。
浏览器与服务器通信采用的就是AJAX技术，AJAX 核心是XMLHttpRequest对象;
AJAX异步流程：

1、创建对象

2、设置回调函数，fun函数

3、open 创建服务器请求

4、send 向服务器发送请求，

5、服务器有结果会自动调用fun回调函数

在回调函数里面根据服务器返回的响应信息更新用户界面

//根据不同的浏览器创建异步请求对象
function getXMLHttpRequest()  { 
var xmlhttp = null; 
if (window.XMLHttpRequest)
//自动检测当前浏览器的版本，如果是IE5.0以上的高版 本的浏览器  
{
// code for IE7+, Firefox, Chrome, Opera, Safari 
    xmlhttp=new XMLHttpRequest();//创建请求对象 
 }else//如果浏览器是底版本的 
 {
// code for IE6, IE5 10
     xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");//创建请求对象 
 } 
     return xmlhttp;//返回请求对象 
 }

//在js文件中开始定义这个函数，其他js函数直接调用就能创建一个异步请求对象

4.3.2 标准的XMLHttpRequest属性

Onreadystatechange 每个状态改变时都会触发这个事件处理器，通常会调用一个

JavaScript函数。

状态：

readyState：请求的状态。

0：未初始化，1 ：正在加载，2：已加载，3：交互中，4：完成

status：服务器的HTTP状态码 ,200对应OK，404对应Not Found（未找到）

状态的改变会触发异步函数，调用回调函数。

不是每一种状态改变都要处理，一般在readyState 状态值为4，status状态值为200的

时候，处理服务器应答，所以在回调函数里写一个判断，判断readyState 为4，status

为200，再做处理
responseText 和 responseXML就是服务器的反馈的结果。
4.3.3 标准的XMLHttpRequest方法


function deal_request() { 
//创建XMLHttpRequest对象
var xmlhttp = null; 
//getXMLHttpRequest()见上一个代码图
xmlhttp = getXMLHttpRequest(); 
 //设置回调函数并结构服务器的状态 
xmlhttp.onreadystatechange=function() { 
//如果服务器的状态为4表示完成，状态码为200表示OK，则可以获取服务器返回的数据         
     if(xmlhttp.readyState == 4 && xmlhttp.status == 200) { 
    //获取数据并对网页执行局部的操作 
        var ret = xmlhttp.responseText; 
        document.getElementById("mylabel").innerHTML = ret; 
     } 
 } 
 //创建http请求，并发送请求服务器 
 //创建http请求 
//在ubuntu系统www文件下先创建一个file.txt
 xmlhttp.open("GET", "file.txt", true); 
//清理缓存 
 xmlhttp.setRequestHeader("If‐Modified‐Since", "0"); 
//发送请求 
 xmlhttp.send(); 
}

CGI是通用网关接口(Common Gateway Interface);是HTTP服务器与其它程序进

行“交谈”的工具 ,通过CGI接口就能在服务器端运行其他的程序
CGI可以用任何一种语言编写，只要这种语言具有标准输入、标准输出、和获取环

境变量

（1）CGI程序通过标准输入(stdin)、标准输出(stdout)实现与web服务器间信息

的传递

（2）环境变量为Web服务器和CGI接口之间约定的,用来向CGI程序传递一些重要

的参数
CGI就是服务器和硬件的沟通桥梁，通过浏览器控制硬件，就要用到CGI
CGI传送给Web服务器的信息可以用各种格式,通常是以HTML文本或者XML文本的

形式

（1）传输HTML 文本第一行输出的内容必须是 ”Content-Type:text/html”

（2）传输XML文本第一行输出的内容必须是 ”Content-Type:text/xml”

（3）还有其他的一些格式：JIF(image/gif)、JPEG(image/jpeg)、 AVI(video/avi)
< FORM ACTION =" ./cgi‐bin/cgi1.cgi ">是这个表单提交后，就会执行cgi1.cgi这个C程序，这个cgi1.cgi是由cgi1.c编译过来的，而且编译完后后缀必须是.cgi，且cgi1.c中第一行必须是 ”Content-Type:text/html”，比如printf(”Content-Type:text/html\n”)
js中string常用+=来追加字符串，比如var str=""; str+="world";执行后str="world"
发送CGI请求的三种方式，一，form表单 <FORM ACTION="./cgi‐bin/cgi1.cgi"> ；二，get方式：url = "/cgi‐bin/cgi2.cgi?12+13"， xmlhttp.open("GET", url, true);在C中通过getenv("QUERY_STRING")来获取url的内容中的12+13,然后在sscanf(data, "%f%c%f",&a, &c, &b);求来拆开12+13,最后通过printf输出到网页三，post方式，url = "/cgi‐bin/cgi2.cgi"，页它这个没有?12+13，而是通过xmlhttp.send("12+13");在C中通过getenv("CONTEN_LENGTH")来获取

char *dataLen = NULL,buff[100] = {0}; 
float a = 0.0, b = 0.0; 
char c = 0; 9 int len = 0; 
printf("content‐type:text/html\n\n");
dataLen = getenv("CONTENT_LENGTH"); 
if(NULL == dataLen) { 
    printf("error1"); 
     return 0; 
}else{
    len = atoi(dataLen); 
     if(len > 0) { 
        if(NULL == fgets(buff, len+1, stdin))//buff == "12+23" 
         { 
             printf("error2"); 
             return 0; 
}