• JavaScript入门


    一、JavaScript 简介

    JavaScript 是世界上最流行的编程语言。这门语言可用于 HTML 和 web,更可广泛用于服务器、PC、笔记本电脑、平板电脑和智能手机等设备。


    JavaScript 是脚本语言。

    JavaScript 是一种轻量级的编程语言。

    JavaScript 是可插入 HTML 页面的编程代码。

    JavaScript 插入 HTML 页面后,可由所有的现代浏览器执行。


    HTML 中的脚本必须位于 <script>与 <script> 标签之间。脚本可被放置在 HTML 页面的 <body> 和 <head> 部分中。

    那些老旧的实例可能会在 <script> 标签中使用type="text/javascript"。现在已经不必这样做了,因为JavaScript 已经是所有现代浏览器以及 HTML5 中的默认脚本语言。


    二、JavaScript 变量

    变量是存储信息的容器。变量可以使用短名称(比如 x 和 y),也可以使用描述性更好的名称(比如 age, sum, totalvolume)。

    • 变量必须以字母开头
    • 变量也能以 $ 和 _ 符号开头(不过我们不推荐这么做)
    • 变量名称对大小写敏感(x 和 X 是不同的变量)

    1. 声明(创建) JavaScript 变量

    在 JavaScript 中创建变量通常称为 “声明” 变量。我们使用 var 关键词来声明变量。

    var carname; // 只声明变量不赋值,则该变量的值是Undefined
    var carname = "Volvo"; // 声明变量的同时赋值
    
    // 在一条语句中声明很多变量
    var name = "Gates", age = 56, job = "CEO";
    // 声明也可横跨多行
    var name = "Gates",
    age = 56,
    job = "CEO";
    

    2. 重新声明 JavaScript 变量

    如果重新声明 JavaScript 变量,该变量的值不会丢失。在以下两条语句执行后,变量 carname 的值依然是 "Volvo"。

    var carname = "Volvo";
    var carname;
    

    三、JavaScript 数据类型

    JavaScript 的数据类型有:字符串、数字、布尔、数组、对象、Null、Undefined


    1. JavaScript 拥有动态类型

    JavaScript 拥有动态类型。这意味着相同的变量可用作不同的类型。

    var x                // x 为 undefined
    var x = 6;           // x 为数字
    var x = "Bill";      // x 为字符串
    

    2. JavaScript 字符串

    字符串是存储字符(比如 "Bill Gates")的变量。字符串可以是引号中的任意文本。您可以使用单引号双引号

    var carname = "Bill Gates";
    var carname = 'Bill Gates';
    

    3. JavaScript 数字

    JavaScript 只有一种数字类型。数字可以带小数点,也可以不带。

    var x1 = 34.00;     // 使用小数点来写
    var x2 = 34;        // 不使用小数点来写
    var y = 123e5;      // 12300000
    var z = 123e-5;     // 0.00123
    

    4. JavaScript 布尔

    布尔(逻辑)只能有两个值:true 或 false。

    var x = true
    var y = false
    

    5. JavaScript 数组

    下面的代码创建名为 cars 的数组。

    var cars = new Array();
    cars[0] = "Audi";
    cars[1] = "BMW";
    cars[2] = "Volvo";
    //或者
    var cars = new Array("Audi","BMW","Volvo");
    //或者
    var cars = ["Audi","BMW","Volvo"];
    

    6. JavaScript 对象

    对象由花括号分隔。在括号内部,对象的属性以名称和值对的形式(name : value)来定义。属性由逗号分隔。

    var person = {firstname:"Bill", lastname:"Gates", id:5566};
    

    对象属性有两种寻址方式:

    name = person.lastname;
    name = person["lastname"];
    

    7. Undefined 和 NULL

    Undefined 这个值表示变量不含有值。可以通过将变量的值设置为 NULL 来清空变量。

    cars; // Undefined
    person = NULL; // NULL
    

    8. 声明变量类型

    当您声明新变量时,可以使用关键词 "new" 来声明其类型:

    var carname=new String; //字符串
    var x=      new Number; //数字
    var y=      new Boolean; //布尔
    var cars=   new Array; //数组
    var person= new Object; //对象
    

    JavaScript 变量均为对象。当您声明一个变量时,就创建了一个新的对象。


    四、JavaScript 对象

    JavaScript 中的所有事物都是对象:字符串、数字、数组、日期,等等。在 JavaScript 中,对象是拥有属性和方法的数据。


    1. 属性和方法

    属性是与对象相关的值。方法是能够在对象上执行的动作。举例:汽车就是现实生活的对象。

    汽车的属性▼

    cars.name = "Fiat";
    car.weight = 500;
    car.color = "white";
    

    汽车的方法▼

    car.start();
    car.drive();
    car.brake();
    

    2. JavaScript 中的对象

    在 JavaScript 中,对象是数据(变量),拥有属性和方法。当您像这样声明一个 JavaScript 变量时:

    var txt = "Hello";
    

    您实际上已经创建了一个 JavaScript 字符串对象。字符串对象拥有内建的属性 length。对于上面的字符串来说,length 的值是 5。字符串对象同时拥有若干个内建的方法。

    属性▼

    txt.length = 5;
    

    方法▼

    txt.indexOf();
    txt.replace();
    txt.search();
    

    提示:在面向对象的语言中,属性和方法常被称为对象的成员。


    3. 创建 JavaScript 对象

    你也可以创建自己的对象,下面是创建对象的另一种方法,使用new Object()创建。本例创建名为 "person" 的对象,并为其添加了四个属性:

    person = new Object(); // ()可加可不加
    person.firstname = "Bill";
    person.lastname="Gates";
    person.age=56;
    person.eyecolor="blue";
    

    五、JavaScript 函数

    函数是由事件驱动的或者当它被调用时执行的可重复使用的代码块。


    1. JavaScript 函数语法

    函数就是包裹在花括号中的代码块,前面使用了关键词 function:

    function functionname()
    {
    	// 这里是要执行的代码
    }
    

    2. 调用带参数的函数

    在调用函数时,您可以向其传递值,这些值被称为参数。这些参数可以在函数中使用。

    实例▼

    <button onclick="myFunction('Bill Gates','CEO')">点击这里</button>
    
    <script>
    function myFunction(name,job)
    {
    alert("Welcome " + name + ", the " + job);
    }
    </script>
    

    3. 带有返回值的函数

    有时,我们会希望函数将值返回调用它的地方。通过使用 return 语句就可以实现。在使用 return 语句时,函数会停止执行,并返回指定的值。

    语法▼

    function myFunction()
    {
        var x = 5;
        return x;
    }
    

    4. 局部 JavaScript 变量

    在 JavaScript 函数内部声明的变量(使用 var)是局部变量,所以只能在函数内部访问它。(该变量的作用域是局部的)。

    只要函数运行完毕,本地变量就会被删除。


    5. 全局 JavaScript 变量

    在函数外声明的变量是全局变量,网页上的所有脚本和函数都能访问它。


    6. 向未声明的 JavaScript 变量来分配值

    如果您把值赋给尚未声明的变量,该变量将被自动作为全局变量声明。

    carname="Volvo";
    

    上面将声明一个全局变量 carname,即使它在函数内执行。


    六、JavaScript 运算符

    JavaScript 中的运算符跟C语言中的运算符基本一致,没什么区别。


    JavaScript 算术运算符

    运算符 描述 例子 结果
    + x = y + 2 x = 7
    - x = y - 2 x = 3
    * x = y * 2 x = 10
    / x = y / 2 x = 2.5
    % 求余数 (保留整数) x = y % 2 x = 1
    ++ 累加 x = ++y x = 6
    -- 递减 x = --y x = 4

    JavaScript 赋值运算符

    运算符 例子 等价于 结果
    = x = y x = 5
    += x += y x = x + y x = 15
    -= x -= y x = x - y x = 5
    *= x *= y x = x * y x = 50
    /= x /= y x = x / y x = 2
    %= x %= y x = x % y x = 0

    JavaScript 比较运算符

    运算符 描述 例子
    == 等于 x == 8 为 false
    === 全等(值和类型) x === 5 为 true;x==="5" 为 false
    != 不等于 x != 8 为 true
    > 大于 x > 8 为 false
    < 小于 x < 8 为 true
    >= 大于或等于 x >= 8 为 false
    <= 小于或等于 x <= 8 为 true

    JavaScript 逻辑运算符

    运算符 描述 例子
    && and (x<10 && y>1) 为 true
    || or (x5 || y5) 为 false
    ! not !(x == y) 为 true

    JavaScript 条件运算符

    语法▼

    greeting=(visitor=="PRES")?"Dear President ":"Dear ";
    

    如果变量 visitor 中的值是 "PRES",则向变量 greeting 赋值 "Dear President ",否则赋值 "Dear"。


    对字符串和数字进行加法运

    如果把数字与字符串相加,结果将成为字符串。请看这些例子:

    x=5+"5";
    document.write(x);
    

    七、JavaScript 语句

    JavaScript 中的语句类型和语法,跟C语言中的也基本一致,都有:if...else、switch 条件语句,for、while 循环语句,break 、 continue语句。


    sf...else 条件语句

    语法▼

    if (条件)
    {
      // 当条件为 true 时执行的代码
    }
    else
    {
      // 当条件不为 true 时执行的代码
    }
    

    也可以使用 if....else if...else 语句来选择多个代码块之一来执行。


    switch 条件语句

    语法▼

    switch(n)
    {
    case 1:
      // 执行代码块 1
    break;      
    case 2:
      // 执行代码块 2
    break;
    default:
      // n 与 case 1 和 case 2 不同时执行的代码
    }
    

    for 循环语句

    语法▼

    for (语句 1; 语句 2; 语句 3)
    {
      // 被执行的代码块
    }
    

    for/In 循环语句

    JavaScript for/in 语句用来循环遍历对象的属性。

    实例▼

    var x;
    var txt="";
    var person={fname:"Bill",lname:"Gates",age:56}; 
    
    for (x in person)
    {
    	txt=txt + person[x];
    }
    

    while 循环语句

    语法▼

    while (条件)
    {
      // 需要执行的代码
    }
    

    do/while 循环语句

    语法▼

    do
    {
      // 需要执行的代码
    }
    while (条件);
    

    Break 和 Continue 语句

    break 语句可用于跳出循环。continue 语句中断循环中的迭代,如果出现了指定的条件,然后继续循环中的下一个迭代。


    JavaScript 标签

    可以对 JavaScript 语句进行标记,如需标记 JavaScript 语句,请在语句之前加上冒号:

    label:
    语句
    

    continue 语句(带有或不带标签引用)只能用在循环中。

    break 语句(不带标签引用),只能用在循环或 switch 中。通过标签引用,break 语句可用于跳出任何 JavaScript 代码块。

    实例▼

    cars=["BMW","Volvo","Saab","Ford"];
    list:
    {
    	document.write(cars[0] + "<br>");
    	document.write(cars[1] + "<br>");
    	document.write(cars[2] + "<br>");
    	break list;
    	document.write(cars[3] + "<br>");
    	document.write(cars[4] + "<br>");
    	document.write(cars[5] + "<br>");
    }
    

    八、JavaScript 错误

    当 JavaScript 引擎执行 JavaScript 代码时,会发生各种错误:

    • 可能是语法错误,通常是程序员造成的编码错误或错别字。

    • 可能是拼写错误或语言中缺少的功能(可能由于浏览器差异)。

    • 可能是由于来自服务器或用户的错误输出而导致的错误。

    • 当然,也可能是由于许多其他不可预知的因素。

    try 语句测试代码块的错误。

    catch 语句处理错误。

    throw 语句创建自定义错误。


    JavaScript 测试和捕捉

    JavaScript 语句 trycatch 是成对出现的。


    语法▼

    try
    {
      // 在这里运行代码
    }
    catch(err)
    {
      // 在这里处理错误
    }
    

    实例▼

    <!DOCTYPE html>
    <html>
    <head>
    <script>
    var txt="";
    function message()
    {
      try
      {
      	adddlert("Welcome guest!");
      }
      catch(err)
      {
      	txt="There was an error on this page.
    
    ";
      	txt+="Error description: " + err.message + "
    
    ";
      	txt+="Click OK to continue.
    
    ";
      	alert(txt);
      }
    }
    </script>
    </head>
    
    <body>
    <input type="button" value="View message" onclick="message()">
    </body>
    
    </html>
    

    Throw 语句

    throw 语句允许我们创建自定义错误。

    正确的技术术语是:创建或抛出异常(exception)。

    如果把 throw 与 try 和 catch 一起使用,那么您能够控制程序流,并生成自定义的错误消息。


    语法▼

    throw exception
    

    异常可以是 JavaScript 字符串、数字、逻辑值或对象。


    实例▼

    本例检测输入变量的值。如果值是错误的,会抛出一个异常(错误)。catch 会捕捉到这个错误,并显示一段自定义的错误消息:

    <script>
    function myFunction()
    {
      try
      {
      	var x=document.getElementById("demo").value;
      	if(x=="")    throw "empty";
      	if(isNaN(x)) throw "not a number";
      	if(x>10)     throw "too high";
      	if(x<5)      throw "too low";
      }
      catch(err)
      {
      	var y=document.getElementById("mess");
      	y.innerHTML="Error: " + err + ".";
      }
    }
    </script>
    
    <h1>My First JavaScript</h1>
    <p>Please input a number between 5 and 10:</p>
    <input id="demo" type="text">
    <button type="button" onclick="myFunction()">Test Input</button>
    <p id="mess"></p>
    

    参考:

    W3School - JavaScript 教程


  • 相关阅读:
    第 9 章 完成购物车
    新建 ASP.NET MVC 项目快速代码
    一个真正的应用程序(第7~8章)(所需代码在下一篇随笔里)
    HTML
    squid 高匿设置
    Linux操作系统上ADSL拨号上网的方法详解
    MYSQL-max_binlog_cache_size参数
    mysql查杀会话
    centos配置Tomcat以指定的身份(非root)运行
    mysql load data导入脚本
  • 原文地址:https://www.cnblogs.com/linuxAndMcu/p/10133966.html
Copyright © 2020-2023  润新知