php综合web开发（4）

来源：互联网发布：js split去除空字符串编辑：程序博客网时间：2024/06/15 19:25

本博客介绍了进行php综合web开发需要的技术与方法。

JavaScript详解

浏览器内部运行，且可直接访问网页文档的所有元素。

javascript是完全在网页浏览器上运行的客户端脚本语言，要将javascript放在<script>与</script>之间调用。

<html>  <head><title>Hello World</title></head>  <body>    <script type="text/javascript">      document.write("Hello World")    </script>    <noscript>      Your browser doesn't support or has disabled JavaScript    </noscript>  </body></html>

要为不支持javascript浏览器的用户提供可选的html使用<noscript></noscript>.为了支持不能提供脚本的浏览器，需要借助html注释标记：

<html>  <head><title>Hello World</title></head>  <body>    <script type="text/javascript"><!--      document.write("Hello World")    // --></script>  </body></html>

可以使用包含js文件的方式包含js代码：

<script type="text/javascript" src="script.js" ></script>

也可从internet上获取文件：

<script type="text/javascript" src="http://someserver.com/script.js"></script>

对于脚本文件本身，不能包含<script>与</script>标记。

javascript语法：
注释——//与/…/
分号结束语句
变量可以包含$且可以以之开头，区分大小写
字符串变量可以用‘或“
比较运算也有===与！==
逻辑运算只有&& || !
字符串连接用+
转义字符——\b退格 \f换页 \r回车 \XXX代表000-377间的8进制数代表了Latin-1字符 \xXX代表00-ff间的16进制数代表了Latin-1字符 \uXXXX代表0000-ff之间的16进制数代表了Unicode字符
javascript同样是类型松散型语言
函数声明：

<script>  function product(a, b)  {    return a*b  }</script>

全局变量是在函数外定义的变量或在函数内但没有var：
a=123; var b=123;
传参时数组传的是引用

<script>  function test()  {        a = 123               // Global scope    var b = 456               // Local scope    if (a == 123) var c = 789 // Local scope  }</script>

测试变量范围用typeof：

<script>  test()  if (typeof a != 'undefined') document.write('a = "' + a + '"<br />')  if (typeof b != 'undefined') document.write('b = "' + b + '"<br />')  if (typeof c != 'undefined') document.write('c = "' + c + '"<br />')  function test()  {     a     = 123    var b = 456    if (a == 123) var c = 789  }</script>

文档对象模型：
js借助DOM将html的文档部分分解为独立的对象，每个对象有自己的属性方法，并且服从js的控制。
js用句点分离对象、属性与方法
DOM

用js读取链接的url：

<html>  <head>    <title>Link Test</title>  </head>  <body>    <a id="mylink" href="http://mysite.com">Click me</a><br />    <script>      url = document.links.mylink.href      document.write('The URL is ' + url)    </script>  </body></html>

也可用url=mylink.href代替
对于IE，需用：
url=document.getElementById(‘mylink’).href;
还可以替换为：

<script>  function $(id)  {    return document.getElementById(id)  }</script>

从而将getDocumentById(‘mylink’)替换为$(‘mylink’)
使用DOM——
links对象是一个URL数组，所以也可用：
url=document.links[0].href代替
还可查询链接对象的length属性：

for(j=0;j<document.links.length;++j)document.write(document.links[j].href+'<br>');

可使用history.go(-3)沿着历史纪录倒退3页
还可使用history.back()或history.forward()后退或前进一页
还可用document.location.href=’http://google.com‘替代当前url

使用console.log可将信息输出到浏览器的控制台
使用alert将信息显示在弹出窗口
使用document.write在当前浏览器上写信息

bool值的显示就是字符串true与false，除了字符串false、+-0、空串、null、undefined与NaN外都是true
js中true与false必须为小写

with语句是javascript独有，可将对一个对象的多个引用将为一个引用，对with块里的属性与方法的引用视为是对对象的引用。

<script>  string = "The quick brown fox jumps over the lazy dog"  with (string)  {    document.write("The string is " + length + " characters<br>")    document.write("In upper case it's: " + toUpperCase())  }</script>

使用onerror或try与catch可以捕获js的错误并进行处理
网页上的每个元素可以触发某种事件，如按钮的onclick事件

<script>  onerror = errorHandler  document.writ("Welcome to this website") // Deliberate error  function errorHandler(message, url, line)  {    out  = "Sorry, an error was encountered.\n\n";    out += "Error: " + message + "\n";    out += "URL: "   + url     + "\n";    out += "Line: "  + line    + "\n\n";    out += "Click OK to continue.\n\n";    alert(out);    return true;  }</script>

<script>  try  {    request = new XMLHTTPRequest()  }  catch(err)  {    // Use a different method to create an XML HTTP Request object  }</script>

也可以使用finally子句

js没有显式的类型转换，如(int)或(float)，需使用js内建的函数实现：
parseInt() Boolean() parseFloat() String() split()

在函数中使用参数数组：

<script>  function displayItems()  {    for (j = 0 ; j < displayItems.arguments.length ; ++j)      document.write(displayItems.arguments[j] + "<br>")  }</script>

使用这项技术可以得到一个包含尽可能多参数的数组

<script>  document.write(fixNames("the", "DALLAS", "CowBoys"))  function fixNames()  {    var s = ""    for (j = 0 ; j < fixNames.arguments.length ; ++j)      s += fixNames.arguments[j].charAt(0).toUpperCase() +           fixNames.arguments[j].substr(1).toLowerCase() + " "    return s.substr(0, s.length-1)  }</script>

返回数组：

<script>  words = fixNames("the", "DALLAS", "CowBoys")  for (j = 0 ; j < words.length ; ++j)    document.write(words[j] + "<br>")  function fixNames()  {    var s = new Array()    for (j = 0 ; j < fixNames.arguments.length ; ++j)      s[j] = fixNames.arguments[j].charAt(0).toUpperCase() +             fixNames.arguments[j].substr(1).toLowerCase()    return s  }</script>

声明类及其构造方法：

<script>  function User(forename, username, password)  {    this.forename = forename    this.username = username    this.password = password    this.showUser = function()    {      document.write("Forename: " + this.forename + "<br>")      document.write("Username: " + this.username + "<br>")      document.write("Password: " + this.password + "<br>")    }  }</script>

也可以用：

<script>  function User(forename, username, password)  {    this.forename = forename    this.username = username    this.password = password    this.showUser = showUser  }  function showUser()  {    document.write("Forename: " + this.forename + "<br>")    document.write("Username: " + this.username + "<br>")    document.write("Password: " + this.password + "<br>")  }</script>

创建对象可以：
details=new User(“1”,”2”,”3”);
或
details=new User();
details.forename=”1”;
details.username=”2”
details.password=”3”;
还可以为对象添加新的属性：
details.greeting=”Hello”;

访问对象可以访问属性：
name=details.forename;
访问方法：
details.showUser();

prototype关键字可以节省内存空间，主要是声明新的变量时引用方法的单个实例而不是创建拷贝：

<script>  function User(forename, username, password)  {    this.forename = forename    this.username = username    this.password = password    User.prototype.showUser = function()    {      document.write("Forename: " + this.forename + "<br>")      document.write("Username: " + this.username + "<br>")      document.write("Password: " + this.password + "<br>")    }  }</script>

任何时候都可以添加prototype属性或方法，所有对象都可以继承这个属性，如：
User.prototype.greeting=”Hello”;
document.write(details.greeting);

静态成员：
比如读取静态字符串——
User.prototype.greeting=”Hello”;
document.write(User.prototype.greeting);

prototype关键字允许在内建对象中加入功能性，比如为了防止字符串折返，要添加这种功能使字符串的所有空格被替换为非间断空格，可通过在JavaScript的默认字符串定义中加入一个prototype方法完成：
String.prototype.nbsp=function(){
return this.replace(/ /g,’$nbsp;’);
}

而后使用document.write("The quick brown fox".nbsp());将输出字符串"The&nbsp;quick&nbsp;brown&nbsp;fox

还可以削减字符串前后导空格：
String.prototype.trim=function(){
return this.replace(/^\s+|\s+$/g,”);

js的数组需要用push方法添加元素，length属性获取数目
js的关联数组：

<script>  balls = {"golf":   "Golf balls, 6",           "tennis": "Tennis balls, 3",           "soccer": "Soccer ball, 1",           "ping":   "Ping Pong balls, 1 doz"}  for (ball in balls)    document.write(ball + " = " + balls[ball] + "<br>")</script>

数组方法有：
concat连接如arr1.concat(arr2,arr3);或arr1.concat(item1,item2,item3);
forEach遍历如:

<script>  pets = ["Cat", "Dog", "Rabbit", "Hamster"]  pets.forEach(output)  function output(element, index, array)  {    document.write("Element at index " + index + " has the value " +      element + "<br>")  }</script>

join方法将数组的所有值转换为字符串并连接为一个大的字符串并可设置分隔符（默认为，）：

<script>  pets = ["Cat", "Dog", "Rabbit", "Hamster"]  document.write(pets.join()      + "<br>")  document.write(pets.join(' ')   + "<br>")  document.write(pets.join(' : ') + "<br>")</script>

push插值pop弹出：

<script>  sports = ["Football", "Tennis", "Baseball"]  document.write("Start = "      + sports +  "<br>")  sports.push("Hockey");  document.write("After Push = " + sports +  "<br>")  removed = sports.pop()  document.write("After Pop = "  + sports +  "<br>")  document.write("Removed = "    + removed + "<br>")</script>

弹出的是新加入的。

<script>  numbers = []  for (j=0 ; j<3 ; ++j)  {    numbers.push(j);    document.write("Pushed " + j + "<br>")  }  // Perform some other activity here  document.write("<br>")  document.write("Popped " + numbers.pop() + "<br>")  document.write("Popped " + numbers.pop() + "<br>")  document.write("Popped " + numbers.pop() + "<br>")</script>

reverse颠倒顺序：

<script>  sports = ["Football", "Tennis", "Baseball", "Hockey"]  sports.reverse()  document.write(sports)</script>

sort排序：

<script>  // Alphabetical sort  sports = ["Football", "Tennis", "Baseball", "Hockey"]  sports.sort()  document.write(sports + "<br>")  // Reverse alphabetical sort  sports = ["Football", "Tennis", "Baseball", "Hockey"]  sports.sort().reverse()  document.write(sports + "<br>")  // Ascending numeric sort  numbers = [7, 23, 6, 74]  numbers.sort(function(a,b){return a - b})  document.write(numbers + "<br>")  // Descending numeric sort  numbers = [7, 23, 6, 74]  numbers.sort(function(a,b){return b - a})  document.write(numbers + "<br>")</script>

0 0