JavaScript基础

JavaScript

JavaScript 开始的时候是叫 LiveScript

• JavaScript 是一种轻量级，解释性编程语言。
• 为了创建以网络为中心的应用程序而设计。
• 补充和集成了 Java
• 补充和集成了 HTML
• 开放和跨平台

JavaScript 的优点

• 更少的服务器交互
• 即时反馈给访问者
• 增加互动性
• 丰富的接口

JavaScript 的限制

• 客户端 JavaScript 不允许读取或写入文件。这是出于安全的原因。
• JavaScript 不能用于网络应用程序，因为没有可用的这种支持。
• JavaScript 没有任何多线程或多进程功能。

语法

< script >标签

JavaScript 语句放置HTML 中 标签内
可以把包含你的 JavaScript 的

两个重要属性

HelloWord

调用document.write()函数,将字符串写入HTML文档

使用分号

区分大小写

使用注释

为不支持 JavaScript 的浏览器添加提示

位置结构

JavaScript 脚本可以很灵活的写在几乎 HTML 网页的任何地方。

1. HTML 网页的 ... 里。
2. HTML 网页的 ... 里。
3. HTML 网页的 ... 和 ... 里。
4. 外部文件里,并且引用在 ... 中。

...位置

效果:

1.0

...位置

  
  
  
    
    
This is Web Page body
  

效果:

1.1

和位置

效果:

1.3

引用外部JavaScript脚本

//home.js文件
function sayHello() {
  alert("Home Hello World")
}

效果:

1.4

变量

基础数据类型

数值类型：比如 123,120.50 等
字符串类型：比如“This text string”
布尔类型：比如 true / false
null和undefined仅限定一个单一的值
JavaScript 中的数值均使用浮点值来表示(64位浮点格式)

JavaScript变量

JavaScript变量作用域

全局变量：全局变量具有全部整体范围的作用域。
局部变量：局部变量仅在定义它的函数体内可以访问到。

JavaScript 变量名称

不能使用 JavaScript 中的保留关键字来命名变量。
JavaScript 变量名称不能以数字 （0-9） 开头，只能以字母或下划线来命名变量。
JavaScript 变量名称对大小写敏感。

保留关键字	保留关键字	保留关键字	保留关键字
abstract	else	instanceof	switch
boolean	enum	int	synchronized
break	export	interface	this
byte	extends	long	throw
case	FALSE	native	throws
catch	final	new	transient
char	finally	null	TRUE
class	float	package	try
const	for	private	typeof
continue	function	protected	var
debugger	goto	public	void
default	if	return	volatile
delete	implements	short	while
do	import	static	with
double	in	super	...

运算符

算术运算符
比较运算符
逻辑（或关系)运算符
赋值运算符
条件（或三元）运算符

算数运算符

运算符	描述	说明
+	加	a + b (支持: 字符串+变量)
-	减	a - b
*	乘	a * b
/	除	a / b
%	取余	a % b
++	累加1	a++
--	累减1	a--

比较运算符

运算符	描述	说明
==	相等	a == b
!=	不相等	a != b
>	大于	a > b
<	小于	a < b
>=	大于或者等于	a >= b
<=	小于或者等于	a <= b

逻辑运算符

运算符	描述	说明
&&	逻辑与	a && b
\	逻辑或	a \\ b
!	逻辑非	!(a && b)

按位运算符

a=2，b=3

运算符	描述	说明
&	按位与	a & b = 2
\	按位或	a \ b = 3
^	按位异或	(a ^ b) = 1
~	按位非	~b = -4
<<	按位左移	a << 1 = 4
>>	按位右移	a >> 1 = 1
>>>	0补最高位无符号右移	a >>> = 1

赋值运算符

运算符	描述	说明
=	赋值	c = a + b
+=	加等赋值	c += a
-=	减等赋值	c -= a
*=	乘等赋值	c *= a
/=	除等赋值	c /= a
%=	模等赋值	c %= a

条件运算符

运算符	描述	说明
? :	条件表达式	a ? b : c

typeof 运算符

typeof是一个置于单个参数之前的一元运算符，这个参数可以是任何类型的。
它的值是一个表示运算数的类型的字符串。
根据判断结果返回true或者false。

类型	Typeof返回字符串
数值	"number"
字符串	"string"
布尔	"boolean"
对象	"object"
函数	"function"
未定义	"undefined"
空	"null"

判断

If...Else

Switch Case

循环

While 循环

For 循环

For...in

函数

定义函数

调用函数

效果:

1.4

reture 语句

效果:

1.5

事件

事件都是文档对象模型（DOM）三级的一部分，并且每个HTML元素有一定的事件可以触发 JavaScript 代码。

  
    
  
  
    

    
 This is inside the division 
  

Cookies

Web 浏览器与服务器之间利用 HTTP 协议进行通信，而且 HTTP 是一种无状态的协议类型。
利用 Cookies 可以记录和跟踪一些用户的偏好，购物车，工资，和其他的信息，而利用这些信息可以更好的了解用户经历或者进行网站统计。

Cookies如何起作用的？

服务器以 Cookies 的形式发送一些数据给访问者的浏览器。浏览器可以选择接收这些 Cookies。如果它被接收了，它就会被以纯文本的形式存储在访问者的硬盘中。接着，当访问者访问网站中的另外一个网页时，那些被缓存的 Cookies 会被发送到服务器进行检索。一旦服务器在服务端检索到该 Cookies 信息，服务器就会知道访问者本地已经缓存了的数据。

Cookies 是纯文本数据，记录了 5 个可变长度的字段

字段	说明
Expires	记录 Cookies 有效时间长度。如果这个字段为空，该 Cookies 将会在用户关闭浏览器时过期，即该 Cookies 的数据不再可用。
Domain	记录网站名。
Path	记录设置 Cookies 的目录或者网页的路径。如果你想在任何目录或网页里面等够检索到 Cookies 数据这个字段可以被设置为空。
Secure	如果这个字段包含"secure"这个单词，那么 Cookies 仅仅只能被安全服务器进行检索。如果这个字段为空，就没有前面的限制。
Name=Value	Cookies 以键值对的形式进行赋值和检索。

Cookies 最初是为 CGI 编程提供的，并且 Cookies 数据在网页浏览器和服务器之间是自动的传输的，因此服务器端的 CGI 脚本能够读写存储在客户端的 Cookies。
JavaScript 通过使用 Document 对象的 Cookies 属性同样可以操作 Cookies。
JavaScript 可以读、创建、修改、和删除 Cookie，或者那些应用于当前网页的 Cookies。

Cookies存储

创建 Cookie 最简单的方式就是给 document.cookie 对象赋值一个字符串值。

//语法
    //expires: 可选,Cookie 将在设定的日期或时间达到时过期，之后Cookie的属性值都会变的不可访问。
document.cookie = "key1=value;key2=value2;expires=date";
/*注意: 
Cookie 的值不包括分号，逗号或者空格。因此，在存储 Cookie 之前，你可能需要利用 JavaScript 提供的 escape() 函数来对其值进行转义。如果你按照那样做的话，当你读取 Cookie 的值时，你就需要利用相应的 unescape() 函数。
*/

  
    
  
  
    
    

      请输入name
      
      
    
    
  

效果:

1.6

Cookies读取

设置Cookies有效日期

  
    
  

  

  Enter name: 
  
  

效果:

1.7

删除一个Cookie

  
    
  

  

    Enter name: 
    
  

效果:

1.8

页面重定向

什么是页面重定向？

当你点击一个 URL 会跳转到页面 X，但是在一个页面内部点击会直接跳转到另外一个页面 Y，这里能够跳转的原因是因为页面重定向。

对话框

JavaScript 支持三种重要的对话框类型。这些对话框可以用来弹出警告，或者根据用户的输入来得到确定的信息，或者得到用户输入的某一类型。

警告对话框

效果:

1.9

确认对话框

  
    
  
  
      删除
  

效果:

1.10

提示对话框

效果:

1.11

Void 关键字

void可以用作一个一元运算符，此时它会出现在一个操作数之前，这个操作数可以是任意类型的。

    

  
    Click me!
  

  

  
    Click me!
  

页面打印

当JavaScript的打印方法 window.print() 执行后，就会打印当前的 web 页面。

效果:

1.12