javaScript基础01

0.web前端需要学习的知识:

(ps, 

html5,

css3,

javascript核心,

DOM编程,

UI交互设计,

HTTP协议,

服务端,

Ajax,

JQury,

BootStrap


1.json =  javascript object notation.

"employees":[

{"firstName":"John", "lastName":"Doe"},

{"firstName":"Anna", "lastName":"Smith"},

{"firstName":"Peter", "lastName":"Jones"}

]


2.

浮点型数据使用注意事项

JavaScript 中的所有数据都是以 64 位浮点型数据(float) 来存储。

所有的编程语言,包括 JavaScript,对浮点型数据的精确度都很难确定:

下午 5:19:54

lustre 2016/8/23 星期二 下午 5:19:54

Undefined 不是 Null

在 JavaScript 中, null 用于对象, undefined 用于变量,属性和方法。

对象只有被定义才有可能为 null,否则为 undefined。

如果我们想测试对象是否存在,在对象还没定义时将会抛出一个错误。

错误的使用方式:

下午 5:30:47

lustre 2016/8/23 星期二 下午 5:30:47

JSON 是用于存储和传输数据的格式。

JSON 通常用于服务端向网页传递数据 。

3.var obj = JSON.parse(text);

4.函数描述

JSON.parse()用于将一个 JSON 字符串转换为 JavaScript 对象。

JSON.stringify()用于将 JavaScript 值转换为 JSON 字符串。


5.HTML 载入外部 JavaScript 文件

使用简洁的格式载入 JavaScript 文件 ( type 属性不是必须的):

6。以上函数不属于任何对象。但是在 JavaScript 中它始终是默认的全局对象。

在 HTML 中默认的全局对象是 HTML 页面本身,所以函数是属于 HTML 页面。

在浏览器中的页面对象是浏览器窗口(window 对象)。以上函数会自动变为 window 对象的函数。

myFunction() 和 window.myFunction() 是一样的:

7。

局部变量计数。

计数!

0

var add = (function () {

var counter = 0;

return function () {return counter += 1;}

})();

function myFunction(){

document.getElementById("demo").innerHTML = add();

}


8.查找 HTML 元素

通常,通过 JavaScript,您需要操作 HTML 元素。

为了做到这件事情,您必须首先找到该元素。有三种方法来做这件事:

通过 id 找到 HTML 元素

通过标签名找到 HTML 元素

通过类名找到 HTML 元素

9.document.getElementById(id).attribute=新属性值

10.

JavaScriptHTML DOM

通过 HTML DOM,可访问 JavaScript HTML 文档的所有元素。

HTML DOM (文档对象模型)

当网页被加载时,浏览器会创建页面的文档对象模型(Document Object Model)。

HTML DOM模型被构造为对象的树:

11.

click me

注意,this代表的是

Ooops!


javaScript基础01_第1张图片

12.方法要赋值一下。

this.changeName=changeName;

function changeName(name){

this.lastname=name;

}


13.JavaScript 是面向对象的语言,但 JavaScript 不使用类。

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

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


14.所有 JavaScript 数字均为 64 位

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

在JavaScript中,数字不分为整数类型和浮点型类型,所有的数字都是由 浮点型类型。JavaScript采用IEEE754标准定义的64位浮点格式表示数字,它能表示最大值为±1.7976931348623157 x 10308,最小值为±5 x 10 -324

15.RegExp:是正则表达式(regular expression)的简写。

16.浏览器对象模型 (BOM) 使 JavaScript 有能力与浏览器"对话"。

browser object model

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

17.Window 对象

所有浏览器都支持 window 对象。它表示浏览器窗口。

所有 JavaScript 全局对象、函数以及变量均自动成为 window 对象的成员。

全局变量是 window 对象的属性。

全局函数是 window 对象的方法。

甚至 HTML DOM 的 document 也是 window 对象的属性之一:

window.document.getElementById("header");

与此相同:

document.getElementById("header");

18.Window 尺寸

有三种方法能够确定浏览器窗口的尺寸(浏览器的视口,不包括工具栏和滚动条)。

对于Internet Explorer、Chrome、Firefox、Opera 以及 Safari:

window.innerHeight - 浏览器窗口的内部高度

window.innerWidth - 浏览器窗口的内部宽度

对于 Internet Explorer 8、7、6、5:

document.documentElement.clientHeight

document.documentElement.clientWidth

或者

document.body.clientHeight

document.body.clientWidth

实用的 JavaScript 方案(涵盖所有浏览器):

实例<这个十分好,涵盖所有浏览器>

var w=window.innerWidth

|| document.documentElement.clientWidth

|| document.body.clientWidth;

var h=window.innerHeight

|| document.documentElement.clientHeight

|| document.body.clientHeight;

19.Window History

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

为了保护用户隐私,对 JavaScript 访问该对象的方法做出了限制。

一些方法:

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

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

20.JavaScriptWindow Navigator

window.navigator 对象包含有关访问者浏览器的信息。

Window Navigator

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

21.JavaScript弹窗

可以在 JavaScript 中创建三种消息框:警告框、确认框、提示框。

22.JavaScript计时事件

通过使用 JavaScript,我们有能力作到在一个设定的时间间隔之后来执行代码,而不是在函数被调用后立即执行。我们称之为计时事件。

在 JavaScritp 中使用计时事件是很容易的,两个关键方法是:

setInterval() - 间隔指定的毫秒数不停地执行指定的代码。

setTimeout() - 暂停指定的毫秒数后执行指定的代码

Note:setInterval() 和 setTimeout() 是 HTML DOM Window对象的两个方法。

23.每隔一段时间弹窗。

setInterval(function(){alert("hello")}, 3000);

24.JavaScript Cookies

Cookies 用于存储 web 页面的用户信息。

什么是 Cookies?

Cookies 是一些数据, 存储于你电脑上的文本文件中。

当 web 服务器向浏览器发送 web 页面时,在连接关闭后,服务端不会记录用户的信息。

Cookies 的作用就是用于解决 "如何记录客户端的用户信息":

当用户访问 web 页面时,他的名字可以记录在 cookie 中。

在用户下一次访问该页面时,可以在 cookie 中读取用户访问记录。

Cookies 以名/值对形式存储,如下所示:

username=John Doe  // john:厕所  doe:母鹿

当浏览器从服务器上请求 web 页面时, 属于该页面的 cookies 会被添加到该请求中。服务端通过这种方式来获取用户的信息。


使用 JavaScript 创建Cookie

JavaScript 可以使用document.cookie属性来创建 、读取、及删除 cookies。

JavaScript 中,创建 cookie 如下所示:

25.使用 JavaScript 删除 Cookie

删除 cookie 非常简单。您只需要设置 expires 参数为以前的时间即可,如下所示,设置为 Thu, 01 Jan 1970 00:00:00 GMT:

document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 GMT";

注意,当您删除时不必指定 cookie 的值。

26.获取 cookie 值的函数

然后,我们创建一个函数用户返回指定 cookie 的值:

function getCookie(cname)

{

var name = cname + "=";

var ca = document.cookie.split(';');

for(var i=0; i

{

var c = ca[i].trim();

if (c.indexOf(name)==0) return c.substring(name.length,c.length);

}

return "";

}

函数解析:

cookie 名的参数为 cname。

创建一个文本变量用于检索指定 cookie :cname + "="。

使用分号来分割 document.cookie 字符串,并将分割后的字符串数组赋值给 ca (ca = document.cookie.split(';'))。

循环 ca 数组 (i=0;i

如果找到 cookie(c.indexOf(name) == 0),返回 cookie 的值 (c.substring(name.length,c.length)。

如果没有找到 cookie, 返回 ""。

27.检测 cookie 值的函数

最后,我们可以创建一个检测 cookie 是否创建的函数。

如果设置了 cookie,将显示一个问候信息。

如果没有设置 cookie,将会显示一个弹窗用于询问访问者的名字,并调用 setCookie 函数将访问者的名字存储 365 天:

function checkCookie()

{

var username=getCookie("username");

if (username!="")

{

alert("Welcome again " + username);

}

else

{

username = prompt("Please enter your name:","");

if (username!="" && username!=null)

{

setCookie("username",username,365);

}

}

}


28.

JavaScript 库 - jQuery、Prototype、MooTools。

29.JavaScript 框架(库)

JavaScript 高级程序设计(特别是对浏览器差异的复杂处理),通常很困难也很耗时。

为了应对这些调整,许多的JavaScript (helper)库应运而生。

这些 JavaScript 库常被称为JavaScript 框架

在本教程中,我们将了解到一些广受欢迎的 JavaScript 框架:

jQuery

Prototype

MooTools

所有这些框架都提供针对常见 JavaScript 任务的函数,包括动画、DOM 操作以及 Ajax 处理。

在本教程中,您将学习到如何开始使用它们,来使得 JavaScript 编程更容易、更安全且更有乐趣。

你可能感兴趣的:(javaScript基础01)