JavaScriptWeb前端之路程序员

JavaScript基础

2017-03-08  本文已影响112人  LuisX
JavaScript

JavaScript 开始的时候是叫 LiveScript

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 网页的任何地方。

  1. HTML 网页的 <head>...</head> 里。
  2. HTML 网页的 <body>...</body> 里。
  3. HTML 网页的 <head>...</head> 和 <body>...</body> 里。
  4. 外部文件里,并且引用在 <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
上一篇下一篇

猜你喜欢

热点阅读