[notes] javaScript notes

原创

程序员小2 2023-07-07 12:11:24 博主文章分类：FrontEnd ©著作权

文章标签 Boo 字符串数组 文章分类 Html/CSS 前端开发

©著作权归作者所有：来自51CTO博客作者程序员小2的原创作品，请联系作者获取转载授权，否则将追究法律责任

提示：您只能在 HTML 输出流中使用 document.write 。如果您在文档已加载后使用它（比如在函数中），会覆盖整个文档。

提示： JavaScript 是脚本语言。浏览器会在读取代码时，逐行地执行脚本代码(不会先对所有代码进行编译) 。而对于传统编程来说，会在执行前对所有代码进行编译。

变量名称对大小写敏感（y 和 Y 是不同的变量）

如果重新声明 JavaScript 变量，该变量的值不会丢失：

在以下两条语句执行后，变量 carname 的值依然是 "Volvo"：

var carname="Volvo";var carname;

字符串、数字、布尔、数组、对象、Null、Undefined

下面的代码创建名为 cars 的数组：

var cars=new Array ();cars[0]="Audi";cars[1]="BMW";cars[2]="Volvo";

或者 (condensed array):

var cars=new Array("Audi","BMW","Volvo");

或者 (literal array):

实例

var cars=["Audi","BMW","Volvo"];

JavaScript 对象

对象由花括号分隔。在括号内部，对象的属性以名称和值对的形式 (name : value) 来定义。属性由逗号分隔：

var person={firstname:"Bill", lastname:"Gates", id:5566};

上面例子中的对象 (person) 有三个属性：firstname、lastname 以及 id。

空格和折行无关紧要。声明可横跨多行：

var person={firstname : "Bill",lastname : "Gates",id : 5566};

对象属性有两种寻址方式：

实例

name=person.lastname;name=person["lastname"];

Undefined 和 Null

Undefined 这个值表示变量不含有值。

可以通过将变量的值设置为 null 来清空变量。

实例

cars=null;person=null;

亲自试一试

声明变量类型

当您声明新变量时，可以使用关键词 "new" 来声明其类型：

var carname=new String;var x= new Number;var y= new Boolean;var cars= new Array;var person= new Object;

JavaScript 变量均为对象。当您声明一个变量时，就创建了一个新的对象。

创建 JavaScript 对象

JavaScript 中的几乎所有事务都是对象：字符串、数字、数组、日期、函数，等等。

你也可以创建自己的对象。

本例创建名为 "person" 的对象，并为其添加了四个属性：

实例

person=new Object();person.firstname="Bill";person.lastname="Gates";person.age=56;person.eyecolor="blue";

向未声明的 JavaScript 变量来分配值

如果您把值赋给尚未声明的变量，该变量将被自动作为全局变量声明。

这条语句：

carname="Volvo";

将声明一个全局变量 carname，即使它在函数内执行。

==	等于	x==8 为 false
===	全等（值和类型）

onload 和 onunload 事件

onload 和 onunload 事件会在用户进入或离开页面时被触发。

onload 事件可用于检测访问者的浏览器类型和浏览器版本，并基于这些信息来加载网页的正确版本。

onload 和 onunload 事件可用于处理 cookie。

JavaScript 类

JavaScript 是面向对象的语言，但 JavaScript 不使用类。

在 JavaScript 中，不会创建类，也不会通过类来创建对象（就像在其他面向对象的语言中那样）。

JavaScript 基于 prototype，而不是基于类的。

JavaScript for...in 循环

JavaScript for...in 语句循环遍历对象的属性。

所有 JavaScript 数字均为 64 位

JavaScript 不是类型语言。与许多其他编程语言不同，JavaScript 不定义不同类型的数字，比如整数、短、长、浮点等等。

JavaScript 中的所有数字都存储为根为 10 的 64 位（8 比特），浮点数。

精度

整数（不使用小数点或指数计数法）最多为 15 位。

小数的最大位数是 17，但是浮点运算并不总是 100% 准确：

实例

var x=0.2+0.1;

var myDate=new Date()myDate. setFullYear (2008,7,9)

注意：表示月份的参数介于 0 到 11 之间。也就是说，如果希望把月设置为 8 月，则参数应该是 7。

在下面的例子中，我们将日期对象设置为 5 天后的日期：

var myDate=new Date()myDate. setDate (myDate.getDate()+5)

注意：如果增加天数会改变月份或者年份，那么日期对象会自动完成这种转换。

合并两个数组 - concat()

如何使用 concat() 方法来合并两个数组。

用数组的元素组成字符串 - join()

如何使用 join() 方法将数组的所有元素组成一个字符串。

文字数组 - sort()

如何使用 sort() 方法从字面上对数组进行排序。

数字数组 - sort()

如何使用 sort() 方法从数值上对数组进行排序。

JavaScript 语句 try 和 catch 是成对出现的。

验证：

必填（或必选）项目

下面的函数用来检查用户是否已填写表单中的必填（或必选）项目。假如必填或必选项为空，那么警告框会弹出，并且函数的返回值为 false，否则函数的返回值则为 true（意味着数据没有问题）：

function validate_required(field,alerttxt){with (field){if (value==null||value=="") {alert(alerttxt);return false}else {return true}}

E-mail 验证

下面的函数检查输入的数据是否符合电子邮件地址的基本语法。

意思就是说，输入的数据必须包含 @ 符号和点号(.)。同时，@ 不可以是邮件地址的首字符，并且 @ 之后需有至少一个点号：

function validate_email(field,alerttxt){with (field){apos=value.indexOf("@")dotpos=value.lastIndexOf(".")if (apos<1||dotpos-apos<2) {alert(alerttxt);return false}else {return true}}}

提示：绝不要使用在文档加载之后使用 document.write()。这会覆盖该文档。

JavaScript 只有一种数字类型。

可以使用也可以不使用小数点来书写数字。

所有 JavaScript 数字均为 64 位

八进制和十六进制

如果前缀为 0，则 JavaScript 会把数值常量解释为八进制数，如果前缀为 0 和 "x"，则解释为十六进制数。

注释：如果逻辑对象无初始值或者其值为 0、-0、null、""、false、undefined 或者 NaN，那么对象的值为 false。否则，其值为 true（即使当自变量为字符串 "false" 时）！

下面的所有的代码行均会创建初始值为 false 的 Boolean 对象。

var myBoolean=new Boolean();var myBoolean=new Boolean(0);var myBoolean=new Boolean(null);var myBoolean=new Boolean("");var myBoolean=new Boolean(false);var myBoolean=new Boolean(NaN);

下面的所有的代码行均会创初始值为 true 的 Boolean 对象：

var myBoolean=new Boolean(1);var myBoolean=new Boolean(true);var myBoolean=new Boolean("true");var myBoolean=new Boolean("false");var myBoolean=new Boolean("Bill Gates");

正则表达式：

定义 RegExp

RegExp 对象用于存储检索模式。

通过 new 关键词来定义 RegExp 对象。以下代码定义了名为 patt1 的 RegExp 对象，其模式是 "e"：

var patt1=new RegExp("e");

当您使用该 RegExp 对象在一个字符串中检索时，将寻找的是字符 "e"。

RegExp 对象的方法

RegExp 对象有 3 个方法：test()、exec() 以及 compile()。

test()

test() 方法检索字符串中的指定值。返回值是 true 或 false。

例子：

var patt1=new RegExp("e");document.write(patt1.test("The best things in life are free"));

由于该字符串中存在字母 "e"，以上代码的输出将是：

true

exec()

exec() 方法检索字符串中的指定值。返回值是被找到的值。如果没有发现匹配，则返回 null。

例子 1：

var patt1=new RegExp("e");document.write(patt1.exec("The best things in life are free"));

由于该字符串中存在字母 "e"，以上代码的输出将是：

您可以向 RegExp 对象添加第二个参数，以设定检索。例如，如果需要找到所有某个字符的所有存在，则可以使用 "g" 参数 ("global")。

如需关于如何修改搜索模式的完整信息，请访问我们的 RegExp 对象参考手册。

在使用 "g" 参数时，exec() 的工作原理如下：

找到第一个 "e"，并存储其位置
如果再次运行 exec()，则从存储的位置开始检索，并找到下一个 "e"，并存储其位置

var patt1=new RegExp("e","g");do{result=patt1.exec("The best things in life are free");document.write(result);}while (result!=null)

由于这个字符串中 6 个 "e" 字母，代码的输出将是：

eeeeeenull

var patt1=new RegExp("e");document.write(patt1.test("The best things in life are free"));patt1.compile("d");document.write(patt1.test("The best things in life are free"));

由于字符串中存在 "e"，而没有 "d"，以上代码的输出是：

truefalse

浏览器对象模型 (BOM)

浏览器对象模型（ B rowser O bject M odel）尚无正式标准。

由于现代浏览器已经（几乎）实现了 JavaScript 交互性方面的相同方法和属性，因此常被认为是 BOM 的方法和属性。

Window Screen

window.screen 对象在编写时可以不使用 window 这个前缀。

一些属性：

screen.availWidth - 可用的屏幕宽度
screen.availHeight - 可用的屏幕高度

window.location 对象在编写时可不使用 window 这个前缀。

一些例子：

location.hostname 返回 web 主机的域名
location.pathname 返回当前页面的路径和文件名
location.port 返回 web 主机的端口（80 或 443）
location.protocol 返回所使用的 web 协议（http:// 或 https://）

location.pathname 属性返回 URL 的路径名。

实例

返回当前 URL 的路径名：

以上代码输出为：

/js/js_window_location.asp

Window Location Href

location.href 属性返回当前页面的 URL。

实例

返回（当前页面的）整个 URL：

以上代码输出为：

http://www.w3school.com.cn/js/js_window_location.asp

location.assign() 方法加载新的文档。原来的页面被覆盖

history.back() - 与在浏览器点击后退按钮相同
history.forward() - 与在浏览器中点击按钮向前相同

Window Navigator

window.navigator 对象在编写时可不使用 window 这个前缀。

实例

<div id="example"></div><script>txt = "<p>Browser CodeName: " + navigator.appCodeName + "</p>";txt+= "<p>Browser Name: " + navigator.appName + "</p>";txt+= "<p>Browser Version: " + navigator.appVersion + "</p>";txt+= "<p>Cookies Enabled: " + navigator.cookieEnabled + "</p>";txt+= "<p>Platform: " + navigator.platform + "</p>";txt+= "<p>User-agent header: " + navigator.userAgent + "</p>";txt+= "<p>User-agent language: " + navigator.systemLanguage + "</p>";document.getElementById("example").innerHTML=txt;</script>

亲自试一试

警告：来自 navigator 对象的信息具有误导性，不应该被用于检测浏览器版本，这是因为：

navigator 数据可被浏览器使用者更改
浏览器无法报告晚于浏览器发布的新操作系统

Cookie:

function getCookie(c_name)

 

  {

 

  if (document.cookie.length>0)

 

  { 

 

  c_start=document.cookie.indexOf(c_name + "=")

 

  if (c_start!=-1)

 

  { 

 

  c_start=c_start + c_name.length+1 

 

  c_end=document.cookie.indexOf(";",c_start)

 

  if (c_end==-1) c_end=document.cookie.length

 

  return unescape(document.cookie.substring(c_start,c_end))

 

  } 

 

  }

 

  return ""

 

  }

 
 
 
 

  function setCookie(c_name,value,expiredays)

 

  {

 

  var exdate=new Date()

 

  exdate.setDate(exdate.getDate()+expiredays)

 

  document.cookie=c_name+ "=" +escape(value)+

 

  ((expiredays==null) ? "" : "; expires="+exdate.toGMTString())

 

  }

CDN - 内容分发网络

您总是希望网页可以尽可能地快。您希望页面的容量尽可能地小，同时您希望浏览器尽可能多地进行缓存。

如果许多不同的网站使用相同的 JavaScript 框架，那么把框架库存放在一个通用的位置供每个网页分享就变得很有意义了。

CDN (Content Delivery Network) 解决了这个问题。CDN 是包含可分享代码库的服务器网络。

Google 为一系列 JavaScript 库提供了免费的 CDN，包括：