JavaScript基础

JavaScript

JavaScript 开始的时候是叫 LiveScript

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

JavaScript 的优点

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

JavaScript 的限制

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

语法

< script >标签

JavaScript 语句放置HTML 中 <script> ... </script> 标签内
可以把包含你的 JavaScript 的 <script> 标签放置在你的网页的任何地方

JavaScript 的简单语法

<script ...>
    JavaScript 代码
</script>

两个重要属性

<!-- 
language: 语言
type:     类型
-->
<script language="javascript" type="text/javascript">
    JavaScript 代码
</script>

HelloWord

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

<html>
  <head>
  </head>
  <body>
    <script language="javascript" type="text/javascript">
      document.write("hello World")
    </script>
  </body>
</html>

使用分号

<script language="javascript" type="text/javascript">
  num1 = 10
  num2 = 20
</script>
<!-- 等价于 -->
<script language="javascript" type="text/javascript">
  num1 = 10; num2 = 20;
</script>

区分大小写

<!-- 
JavaScript 是一种区分大小写的语言
关键字，变量，函数名，以及任何其他的标识符必须使用一致的大小写字母类型
-->

使用注释

<script language="javascript" type="text/javascript">
  // 注释方式1
  
  /*
   *注释方式2
   */

  <!-- 注释方式3 //--> 
</script>

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

<!-- 
几乎所有浏览器均支持 JavaScript
一般情况下需要用户手动的启动或禁用浏览器对 JavaScript 的支持
-->
<html>
  <head>
  </head>
  <body>
    <script language="javascript" type="text/javascript">
      document.write("Hello World!")
    </script>
    <noscript>
      Sorry...请允许运行JavaScript
    </noscript>
  </body>
</html>

位置结构

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

HTML 网页的 <head>...</head> 里。

HTML 网页的 <body>...</body> 里。

HTML 网页的 <head>...</head> 和 <body>...</body> 里。

外部文件里,并且引用在 <head>...</head> 中。

<head>...</head>位置

<!-- 
在某个事件中编写脚本
--> 
<html>
   <head>
     <script type="text/javascript">
       function sayHello() {
         alert("Hello World")
       }
     </script>
   </head>
   <body>
     <input type="button" onclick="sayHello()" value="Say Hello">
   </body>
 </html>

效果:

1.0

<body>...</body>位置

<!-- 
页面加载后将信息内容显示在页面中
-->
<html>
  <head>
  </head>
  <body>
    <script type="text/javascript">
      document.write("Hello World")
    </script>
    <p>This is Web Page body</p>
  </body>
</html>

效果:

1.1

<body>和<head>位置

<!-- 
可以同时将脚本编写在<body>与<head>中
-->
<html>
  <head>
    <script type="text/javascript">
      function sayHello() {
        alert("Hello World")
      }
    </script>
  </head>
  <body>
    <script type="text/javascript">
      document.write("Hello World")
    </script>
    <input type="button" onclick="sayHello()" value="Say Hello">
  </body>
</html>

效果:

1.3

引用外部JavaScript脚本

<!-- 
在外部文件中编写JavaScript脚本并引用在HTML文件中
-->
<html>
  <head>
    <script type="text/javascript" src="home.js">

    </script>
  </head>
  <body>
    <input type="button" onclick="sayHello()" value="home.js sayHello">
  </body>
</html>

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

效果:

1.4

变量

基础数据类型

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

JavaScript变量

<!-- 
必须先声明一个变量，这个变量才能被使用
var关键字仅能用于变量的声明或初始化
同一个 HTML 网页中，同一变量名称不能声明多次
-->
<script type="text/javascript">
  // 声明
  var money;
  var name;
  /* 等价于
   * var money, name;
   */
  
  // 赋值
  var address = "北京";
  money = 2000.50;
</script>
<!--
JavaScript是一种无类型语言
JavaScript变量可以存储任何类型的值
变量中存储的数据类型在程序执行阶段可以被改变
-->

JavaScript变量作用域

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

<!--
局部变量可以与全局变量同名，此时是局部变量在起作用。
-->
<html>
  <head>
  </head>
  <body>
    <script type="text/javascript">
    var str1 = "global";     //全局变量
    function checkscope() {
      var str2 = "local";    //局部变量
      document.write(str1);
    }
    </script>
    <input type="button" onclick="checkscope()"value="变量">
  </body>
</html>

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

<script type="text/javascript">
//if 语句
  //表达式true，执行if{}
  //表达式false，不会执行任何语句
if (expression){
  
}
//if...else 语句
  //表达式true，执行if{}
  //表达式false，执行else{}
if (expression){
  
}else{
  
}
//if...else if...语句
  //根据表达式true，执行if{}，else if{}
  //不满足任何条件，执行else{}
if (expression1){
  
}else if (expression2){
  
}else{
  
}
</script>

Switch Case

<script type="text/javascript">
  //给定一个判断表达式以及若干不同语句，根据表达式的值来执行这些语句
  //break语句用于在特殊case的最后终止程序
  switch (expression) {
      case 1:
        
        break;
      case 2:
          
          break;
      case 3:
            
            break;
      default:
    }
</script>

循环

While 循环

<script type="text/javascript">
//While语句
  //表达式true，执行{}
  //表达式false，退出循环
while(expression){  
  
}  
//do...While语句
  //先执行一次循环后，再判断条件是否成立
do{   
  
}while(expression);
</script>

For 循环

<script type="text/javascript">
  //initialize：初始化
  //test condition：判断条件
  //iteration statement：循环操作
for(initialize;test condition;iteration statement){
}
</script>

For...in

<script type="text/javascript">
//在每次迭代中将一个对象的属性赋值给变量，这个循环会持续到这个对象的所有属性都枚举完
for (variablename in object){  
}    
</script>

函数

定义函数

<script type="text/javascript">
  //functionname：函数名称
  //parameter：   参数
  //statements：  操作
function functionname(parameter){
        statements
}
</script>

调用函数

<html>
  <head>
  </head>
  <body>
    <script type="text/javascript">
    sayHello("张三", 100);
    function sayHello(name, age){
       alert( name + " is " + age + " years old.");
    }
    </script>
  </body>
</html>

效果:

1.4

reture 语句

<html>
  <head>
  </head>
  <body>
    <script type="text/javascript">
    function returnValueExample(first, last) {
      var result;
      result = first + " " + last;
      return result;
    }
    value = returnValueExample("one", "two")
    alert(value)
    </script>
  </body>
</html>

效果:

1.5

事件

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

<html>
  <head>
    <script type="text/javascript">
      function over() {
        alert("鼠标在元素上");
      }

      function out() {
        alert("鼠标在元素上移开");
      }
    </script>
  </head>
  <body>
    <div onmouseover="over()" onmouseout="out()">
    <h2> This is inside the division </h2>
  </body>
</html>

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() 函数。
*/

<!--
将用户的名称记录在 Cookie。
可以利用多个key=value键值对，用逗号分开，来设置多个Cookie信息。
-->
<html>
  <head>
    <script type="text/javascript">
    
      function writeCookie() {
        if (document.myform.customer.value == "") {
          alert("请输入name!");
          return;
        }
        cookieValue = escape(document.myform.customer.value) + ";";
        document.cookie = "name=" + cookieValue;
        alert("Cookies: " + "name=" + cookieValue);
      }
      
    </script>
  </head>
  <body>
    
    <form name="myform">
      请输入name
      <input type="text" name="customer">
      <input type="button" onclick="writeCookie()" value="设置Cookie">
    </form>
    
  </body>
</html>

效果:

1.6

Cookies读取

<!--
document.cookie 对象的值就是 Cookie 的属性值
利用 split() 函数将字符串分解成如下形式的 key 和 value
-->
<html>
  <head>
    <script type="text/javascript">
      function ReadCookie(){
         var allcookies = document.cookie;
         alert("All Cookies : " + allcookies );

         // Get all the cookies pairs in an array
         cookiearray  = allcookies.split(';');

         // Now take key value pair out of this array
         for(var i=0; i<cookiearray.length; i++){
            name = cookiearray[i].split('=')[0];
            value = cookiearray[i].split('=')[1];
            alert("Key is : " + name + " and Value is : " + value);
         }
      }
  </script>
</head>
<body>
  <form name="myform" action="">
    <input type="button" value="Get Cookie" onclick="ReadCookie()"/>
  </form>
</body>
</html>

设置Cookies有效日期

<!--
设置有效日期并且将该有效日期与Cookie进行绑定，延长Cookie的生存时间超过当前浏览器的会话。
为expires属性赋值一个日期或者时间来实现。
-->
<html>
  <head>
    <script type="text/javascript">
    function WriteCookie(){
     if( document.myform.customer.value == "" ){
        alert("Enter some value!");
        return;
     }

     var now = new Date();
     now.setMonth( now.getMonth() + 1 ); 
     cookievalue= escape(document.myform.customer.value) + ";";
     document.cookie="name=" + cookievalue;
     document.cookie = "expires=" + now.toUTCString() + ";"
     alert("Setting Cookies : " + "name=" + cookievalue );
    }
    </script>
  </head>
<body>
  <form name="myform" action="">
  Enter name: <input type="text" name="customer"/>
  <input type="button" value="Set Cookie" onclick="WriteCookie();"/>
  </form>
</body>
</html>

效果:

1.7

删除一个Cookie

<!--
将一个Cookie的有效时间设置为过去的一个月来删除Cookie。
-->
<html>
  <head>
    <script type="text/javascript">

      function WriteCookie(){
         var now = new Date();
         now.setMonth( now.getMonth() - 1 );
         cookievalue = escape(document.myform.customer.value) + ";"
         document.cookie="name=" + cookievalue;
         document.cookie = "expires=" + now.toUTCString() + ";"
         alert("Setting Cookies : " + "name=" + cookievalue );
      }
    </script>
  </head>
<body>
  <form name="myform" action="">
    Enter name: <input type="text" name="customer"/>
    <input type="button" value="Set Cookie" onclick="WriteCookie()"/>
  </form>
</body>
</html>
<!--
注意:
除了设置日期你还可以利用 setTime() 方法来实现设置有效时间。
-->

效果:

1.8

页面重定向

什么是页面重定向？

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

<!--
重定向网站的访问者
-->
<head>
  <script type="text/javascript">
     window.location="http://www.baidu.com";
  </script>
</head>

<!--
重定向网网站之前，给访问者显示一些合适的提示信息
-->
<head>
  <script type="text/javascript">
    function Redirect(){
      window.location="http://www.baidu.com";
    }
    document.write("You will be redirected to main page in 10 sec.");
    setTimeout('Redirect()', 10000);
  </script>
</head>

<!--
基于用户的浏览器跳重定向网页到不同的网页
-->
<head>
  <script type="text/javascript">
    var browsername=navigator.appName;
    if( browsername == "Netscape" ){
       window.location="http://www.baidu.com";
    }else if ( browsername =="Microsoft Internet Explorer"){
       window.location="http://www.360.com";
    }else{
      window.location="http://www.google.com";
    }
  </script>
</head>

对话框

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

警告对话框

<!--
警告对话框是最常用的，它通常被用来给用户提示一些警告信息。
-->
<head>
  <script type="text/javascript">
     alert("Warning Message");
  </script>
</head>

效果:

1.9

确认对话框

<!--
确认对话框是最常用来获取用户对任何选项的赞成的观点。
confirm()函数
-->
<html>
  <head>
    <script language="JavaScript">
      function delete_confirm(e) {
        if (event.srcElement.outerText == "删除") {
            event.returnValue = confirm("删除是不可恢复的，你确认要删除吗？");
        }
      }
      document.onclick = delete_confirm;
    </script>
  </head>
  <body>
      <a href="Delete.aspx" onClick="delete_confirm">删除</a>
  </body>
</html>

效果:

1.10

提示对话框

<!--
当你想弹出一个文本框，并且得到用户的输入数据，提示框就可以实现这个功能。
prompt() 函数
-->
<head>
  <script type="text/javascript">
     var retVal = prompt("Enter your name : ", "your name here");
     alert("You have entered : " +  retVal );
  </script>
</head>

效果:

1.11

Void 关键字

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

<!--
在 URL 中可以写带有副作用的表达式，而 void 则让浏览器不必显示这个表达式的计算结果。
-->
<head>
    <script type="text/javascript">

    </script>
</head>
  <body>
    <a href="javascript:void(alert('Warning!!!'))">Click me!</a>
  </body>

<!--
表达式 “0” 已被计算，但是它并没有在当前文档处装入任何内容。
-->
<head>
  <script type="text/javascript">

  </script>
</head>
  <body>
    <a href="javascript:void(0))">Click me!</a>
  </body>

<!--
void 的另一种用法是有意的生成 undefined 值。
-->
<head>
  <script type="text/javascript">
    getValue();
    function getValue(){
        var a,b,c;
        a = void ( b = 5, c = 7 );
        document.write('a = ' + a + ' b = ' + b +' c = ' + c );
      }
  </script>
</head>

页面打印

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

<html>
  <head>

  </head>
  <body>
    <form>
    <input type="button" value="Print" onclick="window.print()" />
    </form>
  </body>
</html>

效果:

1.12

最后编辑于：2018.04.21 22:40:19

人面猴
序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
沈念sama阅读 204,684评论 6赞 478
死咒
序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
沈念sama阅读 87,143评论 2赞 381
救了他两次的神仙让他今天三更去死
文/潘晓璐我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
开封第一讲书人阅读 151,214评论 0赞 337
道士缉凶录：失踪的卖姜人
文/不坏的土叔我叫张陵，是天一观的道长。经常有香客问我，道长，这世上最难降的妖魔是什么？我笑而不...
开封第一讲书人阅读 54,788评论 1赞 277
港岛之恋（遗憾婚礼）
正文为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
茶点故事阅读 63,796评论 5赞 368
恶毒庶女顶嫁案：这布局不是一般人想出来的
文/花漫我一把揭开白布。她就那样静静地躺着，像睡着了一般。火红的嫁衣衬着肌肤如雪。梳的纹丝不乱的头发上，一...
开封第一讲书人阅读 48,665评论 1赞 281
城市分裂传说
那天，我揣着相机与录音，去河边找鬼。笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。我是一名探鬼主播，决...
沈念sama阅读 38,027评论 3赞 399
双鸳鸯连环套：你想象不到人心有多黑
文/苍兰香墨我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
开封第一讲书人阅读 36,679评论 0赞 258
万荣杀人案实录
序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
沈念sama阅读 41,346评论 1赞 299
护林员之死
正文独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋以下内容为张勋视角年9月15日...
茶点故事阅读 35,664评论 2赞 321
白月光启示录
正文我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
茶点故事阅读 37,766评论 1赞 331
活死人
序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
沈念sama阅读 33,412评论 4赞 321
日本核电站爆炸内幕
正文年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
茶点故事阅读 39,015评论 3赞 307
男人毒药：我在死后第九天来索命
文/蒙蒙一、第九天我趴在偏房一处隐蔽的房顶上张望。院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
开封第一讲书人阅读 29,974评论 0赞 19
一桩弑父案，背后竟有这般阴谋
文/苍兰香墨我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。一阵脚步声响...
开封第一讲书人阅读 31,203评论 1赞 260
情欲美人皮
我被黑心中介骗来泰国打工，没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。一个月前我还...
沈念sama阅读 45,073评论 2赞 350
代替公主和亲
正文我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
茶点故事阅读 42,501评论 2赞 343