WEB►前端

JavaScript学习笔记

JavaScript

  • 涉及到的函数

    • alert()
    • prompt()
    • confirm()

  • JavaScript 放置的位置
    JavaScript 代码可以放置到任何地方，但仍有通用的模式

    1
    2
    3
    4
    5
    6
    7
    8
    9
    <!DOCTYPE html>
    <html>
    <head>
        ... load JavaScript libraries here ...
    </head>
    <body>
        ... your JavaScript code typically goes at the end of body ...
    </body>
    </html>

  • JavaScript 在同一文件中

    1
    2
    3
    4
    5
    <script>
    function surprise() {
        alert("Hello!");
    }
    </script>

  • JavaScript 在其他文件中

    1
    <script src="mycode.s"></script>

    在 mycode.js :

    1
    2
    3
    function surprise() {
        alert("Hello!");
    }

  • 简单交互

    这里有3个 JavaScript 弹出窗口

    • alert()
    • confirm()
    • prompt()

  • 显示信息 - alter()

    • alert() 给用户显示文本
      1
      alert("Welcome!");

  • 做出选择 - confirm()

    • confirm() 显示一个带有信息的弹出窗口，并带有 OK 和 Cancel 按钮
      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      <!DOCTYPE html>
      <html>
          <head>
              <title>Example of confirm()</title>
              <script>
                  if (confirm("Want to go to Disneyland?"))
                      document.location.href = "http://park.hongkongdisneyland.com";
              </script>
          </head>
      </html>

  • 简单的文本输入 - prompt()

    • 为获取用户的输入，你可以使用 prompt() 如：

      1
      2
      var user_name; /Create a variable
      user_name = prompt("What is your name?");

      不是必须在使用变量前创建它，但提前创建变量是一个好习惯。

      示例：

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      <!DOCTYPE html>
      <html>
          <head>
              <title>Example of prompt()</title>
              <script>
                  var user_name;
                  user_name=prompt("What is your name?");
                  document.write("Welcome to my page "
                      + user_name + "!");
              </script>
          </head>
      </html>

变量

  • 涉及到的内容
    • var
    • typeof
    • 数字
    • 字符串
    • 布尔类型
    • 其他雷人，如，对象

  • 数字

    • JavaScript 只有一种数字类型

    • 可以使用小数或整数

      1
      2
      var number1 = 34.289;
      var number = 100;

    • 可以使用科学计数法

      1
      2
      var big_number = 123e5; //12300000
      var small_number = 123e-5; //0.00123

  • 字符串

    • 你可以使用单引号或双引号

      1
      2
      var name = "David";
      var title = 'Professor';

    • 你可以在字符串中使用引号，只要它和最外面的引号不冲突

      1
      var message = "It's alright";

  • 布尔值

    • 布尔值只可以是 true 或 false

      1
      2
      var condition1 = true;
      var condition2 = false;

    • 不要把布尔值和字符串混淆

      1
      2
      var myBool = true; //布尔值
      var myString = "true"; //字符串

  • 变量类型可以改变
    如果你执行如下操作

    1
    2
    var storage = "David";
    storage = 98;

    变量类型会立即改变。

  • 使用 typeof
    你可以使用 typeof 操作检查变量的类型

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    <!DOCTYPE html>
    <html>
    <head>
        <title>Variable Type Example</title>
    </head>
    <body?
        <script>
        alert ( '"John" is type: ' + typeof "John" + "\n\n"
                + "3.14 is type" + typeof 3.14  + "\n\n"
                + "false is type: " + typeof false)
        </script>
    </body>
    </html>

  • 常用修改

Code Quicker Typing
count = count + 1 count++
count = count - 1 count–
count = count + 10 count += 10
hello = hello + “!” hello += “!”
marks = marks - 20 marks -= 20
pigs = pigs * 5 pigs *= 5
cakes = cakes /students cakes /= students
  • 类型转换

Function | Meaning
parseInt() | 转换为整数
parseFloat() | 转换为浮点数
String() | 转换为字符串

事件和函数

  • 涉及到的内容
    • 事件
      • onload
    • 函数
      • function
      • return

  • 事件 EVENT

    事件指一些事情发生，如单机、移动鼠标和敲击键盘。你可以通过编写代码扩展这些事件发生后执行的动作。

  • ONLOAD EVENT

    onload 当对象被加载后出发。

    1
    2
    3
    <body onload="alert('Hello!')">
        ... the main web page content goes there ...
    </body>

    示例

    1
    2
    3
    4
    5
    6
    7
    8
    <!DOCTYPE html>
    <html>
        <body onload="alert('Hello!')">
            <p>
                A message is shown as soon as the page is loaded.
            </p>
        </body>
    </html>

    你可以不受限制地执行代码

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    <!DOCTYPE html>
    <html>
        <body onload="alert('Hello!');
                alert('We start soon..');
                prompt('Exicited!') ">
                <p>
                    3 popup windows are shown as soon as the page is loaded.
                </p>
        </body>
    </html>
    </html>

  • 函数
    函数是一组代码，其基本结构如下:

    1
    2
    3
    fucntion do_something {
        ... codes go there ...
    }

    函数的返回值如下:

    1
    do_something()

    示例

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    <!DOCTYPE html>
    <html>
        <head>
            <title>Example of funcion</title>
            <script>
                function greet_the_user(){
                    alert('Hello!');
                    alert('We start soon...');
                    prompt('Excited!');
                }
            </script>
        </head>
        <body onload="greet_the_user()">
        </body>
    </html>

  • 函数参数

    你可以将参数传递给函数:

    1
    2
    3
    function purchase(cats){
        ... code here uses cats ...
    }

    执行方法如下：

    1
    purchase(10)

  • 函数的相应

    你可以从函数中得到响应：

    1
    2
    3
    4
    function do_something(){
        ... code here stores something in answer ...
        return answer;
    }

    使用方法如下：

    1
    result = do_something();

  • 示例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!DOCTYPE html>
<body onload="check_user_age()" style="position:absolute">
    <h1> This is my naughty home page.</h1>
    <script>
        function check_user_age()
        {
            if(age_of_user())
                alert("Please go to another page.");
        }
        function age_of_user() {
            var age_next, age;
            age_next = prompt("What is your age");
            age = parseInt(age_next);
            return age;
        }
    </script>
<body>
</html>

  • 递归函数

    函数可以调用其自身

    1
    2
    3
    function do_something(control_value) {
        ... code here calls do_something() ...
    }

    调用方式如下:

    1
    result = do_something(10)

    示例

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    <!DOCTYPE html>
    <html>
    <body>
        <script>
            alert("It's my " + build_great(5) + "grandmother!");
            function build_great( depth ) {
                if (depth > 0)
                    return "great " + build_great( depth - 1 );
                else
                    return "";
            }
        </script>
    </body>
    </html>

选择

while 循环

全局变量与局部变量

逻辑运算

数组

随机数

示例项目

for 循环

  • 涉及到的内容
    • for
    • for … in
    • for … of

  • for

    • for 明确指明了开始和结束的值
    • for 非常有利于处理一组数据

    • data_structure.length 告诉我们 data_structure 里包含多少个元素

      示例：

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      <html>
      <head>
          <script>
              var continents = ["Australia", "Africa", "Antarctica", "Eurasia", "America"];
              var response, count = 0;
              for(var index=0; index< continents.length; index++) {
                  response = confirm("Have you benn to" + continents[index] + "?");
                  if(response) count++;
              }
              alert("You have benn to" + count + " continents!");
          </script>
      </head>
      </html>

    • for … in

      for ... in 提供每个元素的索引，示例：

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      <html>
      <head>
          <script>
              var continents = ["Australia", "Africa", "Antarctica", "Eurasia", "America"];
              var response, count = 0;
              for(var index in continents) {
                  response = confirm("Have you benn to" + continents[index] + "?");
                  if(response) count++;
              }
              alert("You have benn to" + count + " continents!");
          </script>
      </head>
      </html>
      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      <!DOCTYPE html>
      <html>
      <title>Example of for in</title>
      <script>
      var response, count=0;
      var onesPerson = { initials:"DR", age:40, job:"Professor"};
      for (var property in onePerson) {
          alert(property + "=" + onePerson[property]);
      }
      </script>
      </html>

    • for … of

      for ... of 提供每个元素，示例：

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      <html>
      <head>
          <script>
              var continents = ["Australia", "Africa", "Antarctica", "Eurasia", "America"];
              var response, count = 0;
              for(var continent of continents) {
                  response = confirm("Have you benn to" + continent + "?");
                  if(response) count++;
              }
              alert("You have benn to" + count + " continents!");
          </script>
      </head>
      </html>

  • for 中的3个参数可以省略，这会产生一个无线循环，如：

    1
    2
    3
    for(;;) {
        alert("Welcome!");
    }

    这样做是可以的

    1
    2
    3
    4
    var number=1;
    for ( ; number <= 12; number++) {
        alert(number + " times 9 = ", number*9);
    }

    这样也行

    1
    2
    3
    4
    5
    for (var rabbits=2, gneration=1;
        generation<=12;
        generation++, rabbits *= 2  ){
            alert("gen" + generation + " total:" + rabbits)
        }

循环控制

  • break
  • continue

更多数组相关函数

  • 涉及到的内容
    • sort()
    • indexOf()
    • slice()
    • reverse()
    • lastIndexOf()
    • splice()

函数数组

  • 涉及到的函数

    • foreach()
    • map()

  • FOREACH()

    你可以通过 for / while 循环变量每个元素

    1
    2
    3
    4
    var pets = ["Dog", "Cat", "Hamster"];
    for (var i=0; i<pets.length; i++) {
        alert(pets[i]);
    }

    你也可是使用array.forEach函数

    1
    2
    3
    var pets = ["Dog", "Cat", "Hamster"];
    pets.forEach(alert);
    // This show 3 separate alerts

    可以按一下形式理解forEach():

    1
    2
    3
    4
    5
    6
    7
    8
    function forEach(theArray, fn){
        for(var i=0; i<theArray.length; i++)
        {
            for(var i=0; i < theArray.length; i++) {
                fn(theArray[i], i, theArray);
            }
        }
    }

    对应的你的函数形式应该如下，如果你需要所有的３个参数:

    1
    function yourFunction(element, index, array) {}

    示例

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    <!DOCTYPE html>
    <html>
    <body>
        <script>
            var numbers = [1, 2, 3, 4, 5];
            numbers.forEach( function(elem, idx, arr) {
                arr[idx] = elem * elem;
            });
            alert(numbers); // This shows [1, 4, 9, 15, 25];
        </script>
    </body>
    </html>

  • MAP()

    map(函数)将函数数组中的每一个执行结果保持起来．你可以这样理解map():

    1
    2
    3
    4
    5
    6
    7
    function map(theArray, fn) {
        var results = [];
        for(var i = 0; i < theArray.length; i++) {
            results.push(fn(theArray[i], i, theArray));
        }
        return results;
    }

    示例

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    <!DOCTYPE html>
    <html>
    <body>
        <script>
            var square = function(e1) { return e1 * e1; )
            var numbers = [1, 2, 3, 4, 5];
            var results = numbers.map(square);
            alert(results); //This shows [1, 4, 9, 16, 25];
        </script>
    </body>
    </html>