JavaScript学习笔记

最新推荐文章于 2025-07-11 20:27:23 发布

weixin_33860147

最新推荐文章于 2025-07-11 20:27:23 发布

阅读量55

点赞数

文章标签： javascript json ViewUI

转载请注明原文地址：http://www.cnblogs.com/ygj0930/p/6682781.html

一：JS基本语法

1：6大字面量

1）数字（Number）字面量：可以是整数或者是小数，或者是科学计数(e)。

2）字符串（String）字面量：使用单引号或双引号括起来的内容。

3）表达式字面量：算术表达式。

4）数组（Array）字面量：一个数组。

5）对象（Object）字面量：同Json对象语法，一个｛｝一个对象，对象内容是键值对格式。

6）函数（Function）字面量：定义一个函数：function myFunction(参数) {操作 }

2：JS数据类型

在 JavaScript 中有 5 种不同的数据类型：

string
number
boolean
object
function

3 种对象类型：

Object
Date
Array

2 个不包含任何值的数据类型：

null
undefined

3：统一变量

JS中的变量是一个同一概念，都用 var 来定义，根据变量值来区分类型。

4：JS流程控制语句

语句	描述
break	用于跳出循环。
catch	语句块，在 try 语句块执行出错时执行 catch 语句块。
continue	跳过循环中的一个迭代。
do ... while	执行一个语句块，在条件语句为 true 时继续执行该语句块。
for	在条件语句为 true 时，可以将代码块执行指定的次数。
for ... in	用于遍历数组或者对象的属性（对数组或者对象的属性进行循环操作）。
function	定义一个函数
if ... else	用于基于不同的条件来执行不同的动作。
return	退出函数
switch	用于基于不同的条件来执行不同的动作。
throw	抛出（生成）错误。
try	实现错误处理，与 catch 一同使用。
var	声明一个变量。
while	当条件语句为 true 时，执行语句块。

5：JS字符串操作

属性	描述
constructor	返回创建字符串属性的函数
length	返回字符串的长度
prototype	允许您向对象添加属性和方法

Method	描述
charAt()	返回指定索引位置的字符
charCodeAt()	返回指定索引位置字符的 Unicode 值
concat()	连接两个或多个字符串，返回连接后的字符串
fromCharCode()	将 Unicode 转换为字符串
indexOf()	返回字符串中检索指定字符第一次出现的位置
lastIndexOf()	返回字符串中检索指定字符最后一次出现的位置
localeCompare()	用本地特定的顺序来比较两个字符串
match()	找到一个或多个正则表达式的匹配
replace()	替换与正则表达式匹配的子串
search()	检索与正则表达式相匹配的值
slice()	提取字符串的片断，并在新的字符串中返回被提取的部分
split()	把字符串分割为子字符串数组
substr()	从起始索引号提取字符串中指定数目的字符
substring()	提取字符串中两个指定的索引号之间的字符
toLocaleLowerCase()	根据主机的语言环境把字符串转换为小写，只有几种语言（如土耳其语）具有地方特有的大小写映射
toLocaleUpperCase()	根据主机的语言环境把字符串转换为大写，只有几种语言（如土耳其语）具有地方特有的大小写映射
toLowerCase()	把字符串转换为小写
toString()	返回字符串对象值
toUpperCase()	把字符串转换为大写
trim()	移除字符串首尾空白
valueOf()	返回某个字符串对象的原始值

6：JS函数

1）函数定义

function 函数名(var1,var2){//这里变量只是一个代称，无需用var修饰，直接用。也可以不使用形参，通过JS内置的 arguments 对象获取参数数组进行参数访问。

执行代码;

return x;//JS函数返回值的话直接用return即可，函数定义时无返回值类型一说

}

变量提升：函数声明和变量声明总是会被解释器悄悄地被"提升"到方法体的最顶部。

即：在函数中如果有函数、变量的声明语句，那么在解析时，会默认把声明语句提升到该函数的顶部。所以，在函数内可以出现先使用变量，再在后面声明的情况。

2）函数调用

通过函数名(参数）调用：myfunction(var1,var2);

3）函数赋值

JS中可以把函数作为一个值来赋值，注意赋值时只是函数名作为右操作数即可，不需()。

如：xmlhttp.onreadyStateChange=callback;

7：异常处理

try {

}catch(err) {//同函数传参，这里err也是一个代数，不需要Exception关键字修饰的

}

二：JS操作浏览器对象——BOM对象模型

1：window对象：操作浏览器窗口

浏览器内的一切内容，都可以通过 window.XX.xxx()方式来获取、操作。

如：

window.open() - 打开新窗口
window.close() - 关闭当前窗口
window.moveTo() - 移动当前窗口
window.resizeTo() - 调整当前窗口的尺寸

2：window.location对象：操作浏览器地址

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

3：window.history 对象：包含浏览器的历史。

history.back() - 与在浏览器点击后退按钮相同：history.back() 方法加载历史列表中的前一个 URL。
history.forward() - 与在浏览器中点击按钮向前相同：history forward() 方法加载历史列表中的下一个 URL。

4：弹窗

JavaScript 中有三种消息框：警告框、确认框、提示框。

警告框：alert(警告信息)

确认框：confirm(信息）

var r=confirm("按下按钮");
if (r==true)
{
    x="你按下了\"确定\"按钮!";
}
else
{
    x="你按下了\"取消\"按钮!";
}

提示框：prompt(信息）：提醒用户进行某个输入

var person=prompt("请输入你的名字","在此输入");//此处前面为提示信息，后面为输入框默认值。在输入框中输入信息并确认，则输入信息会返回给调用处。

三：JS表单验证

1：Html5的自动表单验证

可以在表单的输入框标签添加以下属性，这样就进行自动验证了：

属性	描述
disabled	规定输入的元素不可用
max	规定输入元素的最大值
min	规定输入元素的最小值
pattern	规定输入元素值的模式
required	规定输入元素字段是必需的
type	规则输入元素的类型

2：JS验证方式一：元素的onclick等事件响应函数进行表单验证

如：

3：JS验证方式二：表单的onsubmit属性：注意onsubmit属性值是：return 验证函数()

如：<form name="myForm" action="" onsubmit="return validateForm()" method="post">

四：JS操作Cookies

Cookie用于存储 web 页面的用户信息，存储于你电脑上的文本文件中。

Cookie以一组键/值对形式存储，如:username=charles。

当浏览器发出请求时， cookie 会被添加到该请求中。服务端通过这种方式来获取用户的信息。

1：JS创建、修改cookie（修改其实是创建新的覆盖旧的）

document.cookie = "key=val,key=val...;expires=过期时间";

2：JS删除cookie

删除是通过设置过期时间为当前来实现的。

3：JS获取cookie

var x = document.cookie;

document.cookie 将以字符串的方式返回所有的 cookies，类型格式： cookie1=value; cookie2=value; cookie3=value...

因为document.cookie返回的是所有cookie键值对的字符串，如果您需要查找一个指定 cookie 值，你需要自己去遍历、选取。

function getCookie(cname)
{
//获取cookies数组
var ca = document.cookie.split(';');
//遍历
for(var i=0; i<ca.length; i++) 
  {
   获取值
}

五：JS操作html页面的DOM对象

1：查找元素

1）通过 id 查找 HTML 元素

var x=document.getElementById("intro");

2）通过标签名查找 HTML 元素

var y=document.getElementsByTagName("p");

3）通过类名找到 HTML 元素

var x=document.getElementsByClassName("intro");

2：改变页面内容

1）改变 HTML 输出流：在某位置进行输出

document.write(内容);

2）改变 HTML 内容

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

document.getElementById("id").innerHTML="新文本!";

3）改变 HTML 属性

某元素.属性=新属性值

document.getElementById("id").属性="新属性值";

3：改变页面样式

document.getElementById("id").style.样式名="新样式值"

六：JS的解析过程

放在head中的JS代码会在页面加载完成之前就读取，而放在body中的JS代码，会在整个页面加载完成之后读取。

如果我们想定义一个全局对象，而这个对象是页面中的某个按钮时，我们必须将其放入body中，道理很明显：如果放入head，那当你定义的时候，那个按钮都没有被加载，可能获得的是一个undefind。

浏览器是从上到下解析代码，解析头的时候，中、尾部的代码是不知道的，如果我们想把body中的一个对象定义为全局变量（即：在head中有 var 对象=getElementById("") 语句）的话，在head中定义它会报错，因为中部代码还没加载进来，这个对象是未知的。而body中的JS代码是等页面全部加载进来后再加载执行，所以该有的对象全部都已知了，此时在body中JS把某个对象定义、执行操作等都会合法。

有一个解决方法就是，放在window.onload=function(){ <script></script>}中，这样就会在页面加载完成后才调用函数，并执行里面的script。