JavaScript学习总结

JavaScript学习总结：

JavaScript字母大小写是敏感的，使用 Unicode 字符集。

一、JavaScript 输出：

使用 window.alert() 弹出警告框。---alert("浏览器8弹窗显示！");
使用 document.write() 方法将内容写到 HTML 文档中。---document.write("向body中输出文本！");
使用 innerHTML 写入到 HTML 元素。
	---<p id="e1">段落原内容！</p>---document.getElementById("e1").innerHTML = [40,'新内容',5*9,5+2];
使用 console.log() 写入到浏览器的控制台。---console.log("控制台输出！");

二、JavaScript 数据类型：

var length = 16;                                     // Number 通过数字字面量赋值
var points = x * 10;                                 // Number 通过表达式字面量赋值
var lastName = "Johnson";                            // String 通过字符串字面量赋值
var cars = ["Saab", "Volvo", "BMW"];                 // Array 通过数组字面量赋值
var person = {firstName:"John", lastName:"Doe"};     // Object 通过对象字面量赋值
typeof "John"                                        // 返回 string
typeof 3.14                                          // 返回 number
typeof false                                         // 返回 boolean
typeof [1,2,3,4]                                     // 返回 object
typeof {name:'John', age:34}                         // 返回 object

三、JavaScript 函数：

<Button onclick="my()">点击显示当前时间</Button>
    <script>
        function my(){
            alert(Date());
        }
    </script>

四、JavaScript 变量：

局部变量：在 JavaScript 函数内部声明的变量，只能在函数内部访问它。

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

作为参数的的变量称为*形参*,带入的参数称为*实参*。

function myFunction(a,b){ return a*b;}  // 形参
document.getElementById("demo").innerHTML=myFunction(4,3);  // 实参

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

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

<button onclick="myFunction()">点击创建变量</button>
<p id="demo"></p>
    <script>
    function myFunction(){
        var carname="显示内容";
        document.getElementById("demo").innerHTML=carname;
    }
    </script>

一条语句，多个变量：var name=“学习”, age=18, job=“Java程序猿”。

如果重新声明 JavaScript 变量，该变量的值不会丢失：var carname=“学习”; var carname; 语句执行后，变量 carname 的值依然是 “学”。

如果重复声明 JavaScript 变量，后声明的覆盖之前的：var a = 1; var a = ‘x’; console.log(a); 语句执行后，变量 a 的值为 ‘x’。

五、JavaScript 数组：

创建数组：

var arr1 = new Array('a', 'b', 'c');    //这是一个预定义的数组，在创建时初始化
var arr2 = ['a', 'b', 'c' ];       //同样是在创建时初始化，但是这种创建更为简洁直观

六、JavaScript 对象：

• 字符串可以是对象，var x = “John”; x 是字符串 var y = new String(“John”); y 是对象

• 对象的属性以名称和值对的形式 (name : value) 来定义。

var person=
{
	firstname : "John",
	lastname  : "Doe",
	id        :  5566
};

• 对象的创建：

直接创建：var people = {name : 'Tom', age : 21, eat : function(){  } }
先创建对象再追加属性： 
    var people = new Object();
    people.name = 'Tom';   
    people.age = 21;  
    people.eat = function(){  }

• 对象属性有两种寻址方式：

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

七、JavaScript 函数：

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

function functionname()
{
    // 执行代码
}

当调用该函数时，会执行函数内的代码。

• 带参数的函数:

function myFunction(var1,var2)
{
	// 执行代码
}

或：<button onclick="myFunction('Hello','World!')">点击这里</button>

• 带有返回值的函数:

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

• 函数的调用：在使用 return 语句时，函数会停止执行，并返回指定的值。

var myVar=myFunction();
或
document.getElementById("demo").innerHTML=myFunction();

函数实例：
1. javascript CheckBox 全选与取消全选：
HTML：
    看书：<input type="checkbox" name="checkbox" value=1><br>
    写字：<input type="checkbox" name="checkbox"value=2><br>
    打飞机：<input type="checkbox" name="checkbox"value=3><br>
    玩游戏：<input type="checkbox" name="checkbox"value=4><br>
    <button onclick="allcheck()">全选/取消</button>
JavaScript：
    var checkAll = false;
    function allcheck(){
        checkAll = !checkAll;
        let inputs = document.getElementsByName('checkbox')
        for(var i =0;i<inputs.length;i++){inputs[i].checked = checkAll}
    }
    
 2.javascript  简单计算器：
 HTML：
 	<p>简单计算器:</p>
    <table border="1" style="position:center;">
      <tr>
        <td>第一个数：</td>
        <td><input type="text" id="first"/></td>
      </tr>
      <tr>
        <td>第二个数：</td>
        <td>