首页 > 代码库 > JavaScript 笔记(1) -- 基础 & 函数 & 循环 & ...

JavaScript 笔记(1) -- 基础 & 函数 & 循环 & ...

2024-09-18 10:46:03   218人阅读

 目录（代码编写）：

     显示数据

     语法

　　变量 & 变量类型

　　对象

　　函数

　　事件

　　字符串

　　运算符

　　条件语句

　　循环语句

　　Break 和 Continue

　

使用 JS 近两年，现整理下一些基本：

  • HTML 中的脚本必须位于 <script> 与 </script> 标签之间。
  • 脚本可被放置在 HTML 页面的 <body> 和 <head> 部分中。
  • 那些老旧的实例可能会在 <script> 标签中使用 type="text/javascript"。现在已经不必这样做了。JavaScript 是所有现代浏览器以及 HTML5 中的默认脚本语言。
  • JavaScript 是脚本语言。浏览器会在读取代码时，逐行地执行脚本代码。而对于传统编程来说，会在执行前对所有代码进行编译。

 

代码编写：

 

显示数据：

 

  • 使用 window.alert() 弹出警告框。
    
使用 document.write() 方法将内容写到 HTML 文档中。  #    请使用 document.write() 仅仅向文档输出写内容。如果在文档已完成加载后执行 document.write，整个 HTML 页面将被覆盖。
    使用 innerHTML 写入到 HTML 元素。    # eg：document.getElementById("idName").innerHTML = "段落已修改。";
    
使用 console.log() 写入到浏览器的控制台。

对比 document.write() 和 innerHTML

document.write是直接写入到页面的内容流，如果在写之前没有调用document.open, 浏览器会自动调用open。每次写完关闭之后重新调用该函数，会导致页面被重写。

innerHTML则是DOM页面元素的一个属性，代表该元素的html内容。你可以精确到某一个具体的元素来进行更改。如果想修改document的内容，则需要修改document.documentElement.innerElement。

innerHTML很多情况下都优于document.write，其原因在于其允许更精确的控制要刷新页面的那一个部分。

 

语法：JavaScript 中，常见的是驼峰法的命名规则，如 lastName (而不是lastname)。

  • 变量和函数为驼峰法（ camelCase）
  • 全局变量为大写 (UPPERCASE )
  • 常量 (如 PI) 为大写 (UPPERCASE )
  • - （中杠） 通常在 JavaScript 中被认为是减法，所以不允许使用。
  • 载入 JavaScript 文件 ( type 属性不是必须的): <script src=http://www.mamicode.com/"myscript.js">

 

变量 & 变量类型：

  • 变量必须以字母开头
  • 变量也能以 $ 和 _ 符号开头（不过我们不推荐这么做）
  • 变量名称对大小写敏感（y 和 Y 是不同的变量）
  • 如果重新声明 JavaScript 变量，该变量的值不会丢失：在以下两条语句执行后，变量 carname 的值依然是 "Volvo"： 
    var carname="Volvo";
var carname;

 

  • 变量类型：字符串（String）、数字(Number)、布尔(Boolean)、数组(Array)、对象(Object)、空（Null）、未定义（Undefined），

    声明新变量时，可以使用关键词 "new" 来声明其类型：

    var carname=new String;
var x=      new Number;
var y=      new Boolean;
var cars=   new Array;
var person= new Object;

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

 

对象：在 JavaScript中，几乎所有的事物都是对象。

 

  • 键值对（ name : value (键与值以冒号分割)）在 JavaScript 对象通常称为 对象属性。

  • 定义及使用，eg： 
    var person = {
    firstName:"John",      # 对象属性
    lastName:"Doe",       
    age:50,
    eyeColor:"blue"，
    
    methodName： function(){ ..... }    # 对象方法
    　　fullName: function(){ return this.firstName + " " + this.lastName; }
};

访问属性，有两种方式：可以使用 .property 或 ["property"]， eg：person.lastName; 或者 person["lastName"]
访问方法：不加括号输出函数表达式：function () { return this.firstName + " " + this.lastName; }
             加括号输出函数执行结果, person.methodName();

 

函数：函数声明后不会立即执行，会在我们需要的时候调用到。

// 函数声明： 
function myFunction([var1,var2,...]){  //传参：可有可无，可多个

    代码
    var arg1;  # 局部变量：在 JavaScript 函数内部声明的变量（使用 var）是局部变量，所以只能在函数内部访问它。
    [return ....;]    # 返回值：可有可无
}    

var argX;   # 在函数外声明的变量是全局变量，网页上的所有脚本和函数都能访问它。
// 分号是用来分隔可执行 JavaScript 语句。 
// 由于函数声明不是一个可执行语句，所以不以分号结束。

 

  • JavaScript 变量的生存期：JavaScript 变量的生命期从它们被声明的时间开始。

    • 局部变量会在函数运行以后被删除。

    • 全局变量会在页面关闭后被删除。

  • 函数定义 及 使用：
    • 声明函数：函数声明后不会立即执行，会在我们需要时执行： 
      function myFunction(a, b) {
    return a * b;
}  // 该函数不能添加 ; 结尾，因为它不是执行语句

var  res = myFunction(3, 5);   // 返回 15
    • 函数表达式：函数表达式存储在变量中，从而，变量也可作为一个函数使用： 
      实质：该函数实际上是一个匿名函数（函数没有名称），函数存储在变量中，不需要函数名称，通常通过变量名来调用。
    • var x = function (a, b) {return a * b};  // 该函数以分号结尾，因为它是一个执行语句。
var z = x(4, 3);   // 返回 12
    • Function() 构造函数：函数同样可以通过内置的 JavaScript 函数构造器（Function()）定义 
      var myFunction = new Function("a", "b", "return a * b");
var x = myFunction(4, 3);

// 实际上，你不必使用构造函数。上面实例可以写成：
var myFunction = function (a, b) {return a * b}
var x = myFunction(4, 3);

      在 JavaScript 中，很多时候，你需要避免使用 new 关键字。

  • 函数提升（hosting）：提升（Hoisting）应用在变量的声明与函数的声明。因此，函数可以在声明之前调用：
myFunction(5);

function myFunction(y) {
    return y * y;
}

　　　　注：使用表达式定义函数时无法提升。

  • 自调用函数：自调用表达式会自动调用。
    • 如果表达式后面紧跟 () ，则会自动调用。
    • 不能自调用声明的函数。
    • 通过添加括号，来说明它是一个函数表达式： 
      (function () {
    var x = "Hello!!";      // 我将调用自己
})();
  • 函数是对象：JavaScript 函数有 属性 和 方法。
    • arguments.length 属性返回函数调用过程接收到的参数个数： 
      function myFunction(a, b) {
    return arguments.length;
}
    • toString() 方法将函数作为一个字符串返回： 
      function myFunction(a, b) {
    return a * b;
}
var txt = myFunction.toString();
  • 函数隐式参数：
    • 一种是自定义但未使用的，不提倡，建议最好为参数设置一个默认值，eg： 
      function myFunction(x, y) {   
    if (y === undefined) {  // 该 if 语句整个，可简化为  y = y || 0;如果y已经定义 ， y || 返回 y, 因为 y 是 true, 否则返回 0, 因为 undefined 为 false。
        y = 0;     
    }    
    return x * y;
}
document.getElementById("demo").innerHTML = myFunction(4);
    • 二是 JavaScript 内置的 Arguments 对象，argument 对象包含了函数调用的参数数组，通过这种方式你可以很方便的找到最大的一个参数的值： 
      x = findMax(1, 123, 500, 115, 44, 88);
 
function findMax() {
    var i, max = arguments[0];
    
    if(arguments.length < 2) return max;
 
    for (i = 0; i < arguments.length; i++) {
        if (arguments[i] > max) {
            max = arguments[i];
        }
    }
    return max;
}

// 或者创建一个函数用来统计所有数值的和：
x = sumAll(1, 123, 500, 115, 44, 88);
function sumAll() {
　　var i, sum = 0;
　　for (i = 0; i < arguments.length; i++) {
　　　　sum += arguments[i];
　　}
　　return sum;
}
  • 函数闭包：它使得函数拥有私有变量变成可能。如，计数器问题： 
    function add() {
    var counter = 0;
    counter += 1;
}
add();
add();
add();

// 本意是想输出 3, 但事与愿违，输出的都是 1 !
// 或 var count = 0; 定义在函数外(全局变量)时，页面上的任何脚本都能改变计数器，即便没有调用 add() 函数。

    因此，需要 JavaScript 内嵌函数: 嵌套函数可以访问上一层的函数变量。如下：内嵌函数 plus() 可以访问父函数的 counter 变量：

    function add() {
    var counter = 0;
    function plus() {counter += 1;}
    plus();    
    return counter; 
}
/*  如果我们能在外部访问 plus() 函数，这样就能解决计数器的困境。
     我们同样需要确保 counter = 0 只执行一次。
     我们需要闭包     */

    JavaScript 闭包：

    var add = (function () {
    var counter = 0;
    return function () {return counter += 1;}   // 实质： 多次调用，只执行内部的匿名方法
})();

add();
add();
add();

// 计数器为 3

/*
　　变量 add 指定了函数自我调用的返回字值。
　　自我调用函数只执行一次。设置计数器为 0。并返回函数表达式。
　　add变量可以作为一个函数使用。非常棒的部分是它可以访问函数上一层作用域的计数器。
　　这个叫作 JavaScript 闭包。它使得函数拥有私有变量变成可能。
　　计数器受匿名函数的作用域保护，只能通过 add 方法修改。
*/

    闭包是可访问上一层函数作用域里变量的函数，即便上一层函数已经关闭。

事件： 常见eg：<button onclick=‘getElementById("demo").innerHTML=Date()‘>现在的时间是??</button>

　　技术分享

事件可以用于处理表单验证，用户输入，用户行为及浏览器动作:

    • 页面加载时触发事件
    • 页面关闭时触发事件
    • 用户点击按钮执行动作
    • 验证用户输入内容的合法性
    • 等等 ...

可以使用多种方法来执行 JavaScript 事件代码：

    • HTML 事件属性可以直接执行 JavaScript 代码
    • HTML 事件属性可以调用 JavaScript 函数
    • 你可以为 HTML 元素指定自己的事件处理程序
    • 你可以阻止事件的发生。
    • 等等 ...

字符串

  • 字符串可以是对象，eg：

    通常， JavaScript 字符串 是原始值，可以使用字符创建： var firstName = "John"    # firstName 是 String 类型
但也可以使用 new 关键字将 字符串 定义为一个 对象： var firstName = new String("John")  # firstName 是 Object 类型 
实例，如下：
var x = "John";
var y = new String("John");
typeof x // 返回 String
typeof y // 返回 Object
  • 不要创建 String 对象。它会拖慢执行速度，并可能产生其他副作用： 
    var x = "John";              
var y = new String("John");
(x === y) // 结果为 false，因为 x 是字符串，y 是对象

# === 为绝对相等，即数据类型与值都必须相等。
  • 字符串 属性 和 方法： 
    原始值字符串，如 "John", 没有属性和方法(因为他们不是对象)。
    原始值可以使用 JavaScript 的属性和方法，因为 JavaScript 在执行 方法 和 属性 时可以把 原始值当作对象。
  • 字符串属性：
属性                   描述
constructor    返回创建字符串属性的函数
length    返回字符串的长度
prototype    允许您向对象添加属性和方法

字符串方法：更多方法实例可以参见：JavaScript String 对象。
方法            描述
charAt()    返回指定索引位置的字符
charCodeAt()    返回指定索引位置字符的 Unicode 值
concat()    连接两个或多个字符串，返回连接后的字符串
fromCharCode()    将 Unicode 转换为字符串
indexOf()    返回字符串中检索指定字符第一次出现的位置
lastIndexOf()    返回字符串中检索指定字符最后一次出现的位置
localeCompare()    用本地特定的顺序来比较两个字符串
match()    找到一个或多个正则表达式的匹配
replace()    替换与正则表达式匹配的子串
search()    检索与正则表达式相匹配的值
slice()    提取字符串的片断，并在新的字符串中返回被提取的部分
split()    把字符串分割为子字符串数组
substr()    从起始索引号提取字符串中指定数目的字符
substring()    提取字符串中两个指定的索引号之间的字符
toLocaleLowerCase()    根据主机的语言环境把字符串转换为小写，只有几种语言（如土耳其语）具有地方特有的大小写映射
toLocaleUpperCase()    根据主机的语言环境把字符串转换为大写，只有几种语言（如土耳其语）具有地方特有的大小写映射
toLowerCase()    把字符串转换为小写
toString()    返回字符串对象值
toUpperCase()    把字符串转换为大写
trim()    移除字符串首尾空白
valueOf()    返回某个字符串对象的原始值

运算符：+，  -， *， /， %（取模(余数)）， ++， --， 组合....

  • + 运算符用于把文本值或字符串变量加起来（连接起来）。eg： 
    txt1="What a very ";
txt2="nice day";
txt3=txt1+txt2;    # What a very nice day     or    txt3=txt1+" "+txt2;
  • 如果把数字与字符串相加，结果将成为字符串！eg： y="5"+5;   # 结果为：55 ，typeOf：String
  • 比较运算符（略）
  • 逻辑运算符： 
    运算符   描述    例子
&&      and    (x < 10 && y > 1) 为 true
||      or     (x==5 || y==5) 为 false
!       not    !(x==y) 为 true
  • 条件运算符：语法： 
    variablename=(condition)?value1:value2

    实例：如果变量 age 中的值小于 18，则向变量 voteable 赋值 "年龄太小"，否则赋值 "年龄已达到"。

    voteable=(age<18)?"年龄太小":"年龄已达到";

条件语句：条件语句用于基于不同的条件来执行不同的动作。

  • if 语句 - 只有当指定条件为 true 时，使用该语句来执行代码
  • if...else 语句 - 当条件为 true 时执行代码，当条件为 false 时执行其他代码
  • if...else if....else 语句- 使用该语句来选择多个代码块之一来执行
  • switch 语句 - 使用该语句来选择多个代码块之一来执行，语法： 
    switch(n){  
    ‘‘‘ 工作原理：首先设置表达式 n（通常是一个变量）。随后表达式的值会与结构中的每个 case 的值做比较。如果存在匹配，则与该 case 关联的代码块会被执行。请使用 break 来阻止代码自动地向下一个 case 运行。 ‘‘‘
        case 1:
        执行代码块 1
        break;
    case 2:
        执行代码块 2
        break;
    default:    # default 关键词来规定匹配不存在时做的事情
        与 case 1 和 case 2 不同时执行的代码
}

循环语句：如果您希望一遍又一遍地运行相同的代码，并且每次的值都不同，那么使用循环是很方便的。

  • for - 循环代码块一定的次数，eg: 

 

#     语句1 ;           语句2;   语句3    
for(var i = 0, len = 5;i < len; i++){
     x=x + "该数字为 " + i + "<br>"; 
}

强调：（1）语句 1 是可选的，也可以在语句 1 中初始化任意（或者多个）值；（2）语句 2 用于评估初始变量的条件；语句 2 同样是可选的；如果语句 2 返回 true，则循环再次开始，如果返回 false，则循环将结束。如果您省略了语句 2，那么必须在循环内提供 break。否则循环就无法停下来。这样有可能令浏览器崩溃。（3）语句 3 也是可选的。

 

  • for/in - 循环遍历对象的属性 ，eg: 
    # JavaScript for/in 语句循环遍历对象的属性：
var person={ fname: "John", lname: "Doe", age: 25 }; 
for (x in person){
    txt = txt + person[x];
}
  • while - 当指定的条件为 true 时循环指定的代码块，注意如果您忘记增加条件中所用变量的值，该循环永远不会结束。这可能导致浏览器崩溃。
  • do/while - 同样当指定的条件为 true 时循环指定的代码块，该循环会在检查条件是否为真之前执行一次代码块，然后如果条件为真的话，就会重复这个循环。注意：（1）该循环至少会执行一次，即使条件为 false 它也会执行一次，因为代码块会在条件被测试前执行；（2）别忘记增加条件中所用变量的值，否则循环永远不会结束！

 

 Break 和 Continue 语句：

  • break 语句用于跳出代码块, 所以 break 可以使用与循环和 switch 等。eg：

    for (i=0;i<10;i++){
    if (i==3){
        break;
    }
    x = x + "The number is " + i + "<br>";   # result: 0, 1, 2
}

  • continue 用于跳过循环中的一个迭代，进入下一个迭代, 所以 continue 只能用于循环的代码块。continue 语句跳出循环后，会继续执行该循环之后的代码（如果有的话）,eg:

    for (i=0;i<=10;i++){
    if (i==3) continue;
    x=x + "The number is " + i + "<br>";   # result: [0-2 4-10]
}
  • 标记 JavaScript 语句: 请在语句之前加上冒号，语法： 
    label:
statements

    break 和 continue 语句仅仅是能够跳出代码块的语句。语法:

    break labelname; 
    continue labelname;

    明确： 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>"); 
}     
# result： BMW  Volvo   Saab

 

 

 

如果将 break 换成 continue 会有惊喜，违反了明确中的第二点，因为list只是个普通代码块，而不是循环。除非list写成如下形式：

list:
for(var i=0; i<10; ++i){
　　continue list;
}

有了标签，可以使用break和continue在多层循环的时候控制外层循环。eg：

outerloop:
for (var i = 0; i < 10; i++){
 innerloop:
   for (var j = 0; j < 10; j++){
    if (j > 3){
    　　break;
　　}
    if (i == 2){
        break innerloop;
    }
    if (i == 4){
       break outerloop;
    }
    document.write("i=" + i + " j=" + j + "");
  }
}

　　　　　

        鉴于一节太长，分为几节记录，下节继续\(^o^)/~

 

JavaScript 笔记(1) -- 基础 & 函数 & 循环 & ...


联系
我们