Web前端学习
前言
我现在要且必要学习一下js知识，学习笔记必不可少，在这里，我将写下我学习遇到的重难点以及一些bug和自己犯得错误（主要是自己犯得低级错误）。
关于—img标签onclick点击不跳转function
遇到这个问题调了半天，用alert提示发现根本就没跳转自定义方法，后来发现最后多加了一个"}"!!!!!
<input type="image" id="test1" onclick="changeImage()" src="../static/images/22.jpg" width="400" height="400" >
function changeImage(){
element=document.getElementById('test1')
if (element.src.match("22"))
{
element.src="../static/images/11.jpg";
}
else
{
element.src="../static/images/22.jpg";
}
}
}
以后要认真点啊，先确保语法正确。
JavaScript 中最重要的保留字（按字母顺序）：
| abstract | else | instanceof | super |
|---|---|---|---|
| boolean | enum | int | switch |
| break | export | interface | synchronized |
| byte | extends | let | this |
| case | false | long | throw |
| catch | final | native | throws |
| char | finally | new | transient |
| class | float | null | true |
| const | for | package | try |
| continue | function | private | typeof |
| debugger | goto | protected | var |
| default | if | public | void |
| delete | implements | return | volatile |
| do | import | short | while |
| double | in | static | with |
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 通过对象字面量赋值
三种变量命名规则：
var firstName=‘king’;//小驼峰
var FirstName=‘queen’;//大驼峰
var first_name=‘maizi’;//下划线法
JavaScript 语句标识符
JavaScript 语句通常以一个 语句标识符 为开始，并执行该语句。
语句标识符是保留关键字不能作为变量名使用。
下表列出了 JavaScript 语句标识符 (关键字) ：
| 语句 | 描述 |
|---|---|
| break | 用于跳出循环。 |
| catch | 语句块，在 try 语句块执行出错时执行 catch 语句块。 |
| continue | 跳过循环中的一个迭代。 |
| do … while | 执行一个语句块，在条件语句为 true 时继续执行该语句块。 |
| for | 在条件语句为 true 时，可以将代码块执行指定的次数。 |
| for … in | 用于遍历数组或者对象的属性（对数组或者对象的属性进行循环操作）。 |
| function | 定义一个函数 |
| if … else | 用于基于不同的条件来执行不同的动作。 |
| return | 退出函数 |
| switch | 用于基于不同的条件来执行不同的动作。 |
| throw | 抛出（生成）错误 。 |
| try | 实现错误处理，与 catch 一同使用。 |
| var | 声明一个变量。 |
| while | 当条件语句为 true 时，执行语句块。 |
声明变量类型
当您声明新变量时，可以使用关键词 “new” 来声明其类型：
var carname=new String;
var x= new Number;
var y= new Boolean;
var cars= new Array;
var person= new Object;
 |
JavaScript 变量均为对象。当您声明一个变量时，就创建了一个新的对象。 |
|---|---|
利用 toString() 方法可以把数值转换为字符串。
<script>
var a=100;
var c=a.toString();
alert(typeof(c)); //typeof()方法验证转换后的数据类型
</script>
使用 parseInt() 和 parseFloat() 方法可以把字符串转换为数值。
<script>
var str="123.30";
var a=parseInt(str); //parseInt()方法把字符串转换为整数，parseFloat()方法把字符串转换为浮点数
var b=parseFloat(str);
</script>
要把任何值转换为布尔型数据，在值的前面增加两个 !! 感叹号即可，!!0 为 False，其余的均为 True。
基本类型的变量是存放在栈内存（Stack）里的
var a,b;
a = "zyj";
b = a;
console.log(a); // zyj
console.log(b); // zyj
a = "呵呵"; // 改变 a 的值，并不影响 b 的值
console.log(a); // 呵呵
console.log(b); // zyj
图解如下：栈内存中包括了变量的标识符和变量的值。
引用类型的值是保存在堆内存（Heap）中的对象（Object）
var a = {name:"percy"};
var b;
b = a;
a.name = "zyj";
console.log(b.name); // zyj
b.age = 22;
console.log(a.age); // 22
var c = {
name: "zyj",
age: 22
};
图解如下：
栈内存中保存了变量标识符和指向堆内存中该对象的指针
堆内存中保存了对象的内容
数组有四种方式：
var arr1 = new Array('a', 'b', 'c'); //这是一个预定义的数组，在创建时初始化
var arr2 = ['a', 'b', 'c' ]; //同样是在创建时初始化，但是这种创建更为简洁直观
var arr3 = new Array( ); var arr4 = [ ]; //这两种是创建空的数组
在数组操作中，最值得注意的是下标的使用，容易出错
对象的创建，一般推荐使用
var people = {name : 'Tom', age : 21 , eat : function(){ } }
也可先创建对象再追加属性和方法
var people = new Object();
people.name = 'Tom';
people.age = 21;
people.eat = function(){ }
限制复选框最多选择几项的方法：
HTML代码：
<input type= "checkbox" name= "sport"/>篮球<br />
<input type= "checkbox" name= "sport"/>足球<br />
<input type= "checkbox" name= "sport"/>排球<br />
<input type= "checkbox" name= "sport"/>羽毛球<br/>
<input type= "checkbox" name= "sport"/>乒乓球<br/>
<p>最多选择三项</p>
JavaScript代码：
var sportSelect = document.getElementsByName('sport' ),
maxNums = 3;
for(var i in sportSelect){
sportSelect[i]. onclick = function (){
var _sportSelect = document.getElementsByName('sport' ),
cNums = 0;
for(var i in _sportSelect){
if(i == 'length') break ;
if(_sportSelect[i].checked){
cNums ++;
}
}
if(cNums > maxNums){
this.checked = false;
alert('最多只能选择三项');
}
}
}
局部变量：在函数中通过var声明的变量。
全局变量：在函数外通过var声明的变量。
没有声明就使用的变量，默认为全局变量，不论这个变量在哪被使用。
在 ES6 中，提供了 let 关键字和 const 关键字。
let 的声明方式与 var 相同，用 let 来代替 var 来声明变量，就可以把变量限制在当前代码块中。
使用 const 声明的是常量，其值一旦被设定便不可被更改。
let 和 var 的区别代码实例：
function varTest() {
var x = 1;
if (true) {
var x = 2; // 同样的变量!
console.log(x); // 2
}
console.log(x); // 2
}
function letTest() {
let x = 1;
if (true) {
let x = 2; // 不同的变量
console.log(x); // 2
}
console.log(x); // 1
}
常见的HTML事件
下面是一些常见的HTML事件的列表:
| 事件 | 描述 |
|---|---|
| onchange | HTML 元素改变 |
| onclick | 用户点击 HTML 元素 |
| onmouseover | 用户在一个HTML元素上移动鼠标 |
| onmouseout | 用户从一个HTML元素上移开鼠标 |
| onkeydown | 用户按下键盘按键 |
| onload | 浏览器已完成页面的加载 |
更多事件列表: JavaScript 参考手册 - HTML DOM 事件。
反斜杠是一个转义字符。 转义字符将特殊字符转换为字符串字符：
转义字符 () 可以用于转义撇号，换行，引号，等其他特殊字符。
下表中列举了在字符串中可以使用转义字符转义的特殊字符：
| 代码 | 输出 |
|---|---|
| ' | 单引号 |
| " | 双引号 |
| \ | 反斜杠 |
| \n | 换行 |
| \r | 回车 |
| \t | tab(制表符) |
| \b | 退格符 |
| \f | 换页符 |
不要创建 String 对象。它会拖慢执行速度，并可能产生其他副作用。。。
=== 为绝对相等，即数据类型与值都必须相等。
var x = "JohnJohn"; // x 是字符串
y = x.charAt(2); // h
y = x.charCodeAt(2); // 104
y = x.concat(y, y); // JohnJohn104104, x+y+y
y = x.indexOf('h'); // 2, 索引从0开始
y = x.lastIndexOf('h'); // 6
y = x.slice();
y = x.split('o'); //J,hnJ,hn
y = x.substr(2); // hnJohn
y = x.substring(2,4) // hn，[2,3]
y = x.toLocaleLowerCase(); // johnjohn,小写
y = x.toLocaleUpperCase(); // JOHNJOHN,大写
y = x.toString(); // 转成Stirng
y = x.toUpperCase(); // JOHNJOHN,大写
y = x.trim(); // JohnJohn,去除两端的空格
y = x.valueOf(); // 返回某个字符串对象的原始值
1、字符串一个很能强大的数据类型；在执行加 + 时,将被加的对象统一处理为字符串。
2、bool 类型在与数字类型进行相加时，视为 0 或者 1 处理。
3、null 类型与数字类型进行累加时，视为 0 处理。
4、bool 类型与 null 类型进行累加时，视为其与整数类型累加处理。
5、undefined 除了与字符串进行累加时有效（undefined 视为字符串"undefined"处理），其他情况皆返回 NaN。
6、求模 % 运算，运算结果只取决于第一个数字的正负。
-12 % -8 = -4;
12 % -8 = 4;
-12 % 8 = -4;
7、查看 String 数据类型支持的方法和属性：
打开网页后 F12 进行开发调试环境，找到 console 标签页面，执行：
var str = new String('string');
str
点开列表下拉箭头即可:
1、定义
- （1）undefined：是所有没有赋值变量的默认值，自动赋值。
- （2）null：主动释放一个变量引用的对象，表示一个变量不再指向任何对象地址。
2、何时使用null?
当使用完一个比较大的对象时，需要对其进行释放内存时，设置为 null。
3、null 与 undefined 的异同点是什么呢？
共同点：都是原始类型，保存在栈中变量本地。
不同点：
（1）undefined——表示变量声明过但并未赋过值。
它是所有未赋值变量默认值，例如：
var a; // a 自动被赋值为 undefined
（2）null——表示一个变量将来可能指向一个对象。
一般用于主动释放指向对象的引用，例如：
var emps = ['ss','nn'];
emps = null; // 释放指向数组的引用
4、延伸——垃圾回收站
它是专门释放对象内存的一个程序。
- （1）在底层，后台伴随当前程序同时运行；引擎会定时自动调用垃圾回收期；
- （2）总有一个对象不再被任何变量引用时，才释放。
JavaScript 数据类型
在 JavaScript 中有 6 种不同的数据类型：
- string
- number
- boolean
- object
- function
- symbol
3 种对象类型：
- Object
- Date
- Array
2 个不包含任何值的数据类型：
- null
- undefined
你可以使用 constructor 属性来查看对象是否为数组 (包含字符串 “Array”):
function isArray(myArray) {
return myArray.constructor.toString().indexOf("Array") > -1;
}
你可以使用 constructor 属性来查看对象是否为日期 (包含字符串 “Date”):
function isDate(myDate) {
return myDate.constructor.toString().indexOf("Date") > -1;
}
在 Date 方法 章节中，你可以查看更多关于日期转换为字符串的函数：
| 方法 | 描述 |
|---|---|
| getDate() | 从 Date 对象返回一个月中的某一天 (1 ~ 31)。 |
| getDay() | 从 Date 对象返回一周中的某一天 (0 ~ 6)。 |
| getFullYear() | 从 Date 对象以四位数字返回年份。 |
| getHours() | 返回 Date 对象的小时 (0 ~ 23)。 |
| getMilliseconds() | 返回 Date 对象的毫秒(0 ~ 999)。 |
| getMinutes() | 返回 Date 对象的分钟 (0 ~ 59)。 |
| getMonth() | 从 Date 对象返回月份 (0 ~ 11)。 |
| getSeconds() | 返回 Date 对象的秒数 (0 ~ 59)。 |
| getTime() | 返回 1970 年 1 月 1 日至今的毫秒数。 |
下表展示了使用不同的数值转换为数字(Number), 字符串(String), 布尔值(Boolean):
| 原始值 | 转换为数字 | 转换为字符串 | 转换为布尔值 | 实例 |
|---|---|---|---|---|
| false | 0 | “false” | false | 尝试一下 » |
| true | 1 | “true” | true | 尝试一下 » |
| 0 | 0 | “0” | false | 尝试一下 » |
| 1 | 1 | “1” | true | 尝试一下 » |
| “0” | 0 | “0” | true | 尝试一下 » |
| “000” | 0 | “000” | true | 尝试一下 » |
| “1” | 1 | “1” | true | 尝试一下 » |
| NaN | NaN | “NaN” | false | 尝试一下 » |
| Infinity | Infinity | “Infinity” | true | 尝试一下 » |
| -Infinity | -Infinity | “-Infinity” | true | 尝试一下 » |
| "" | 0 | "" | false | 尝试一下 » |
| “20” | 20 | “20” | true | 尝试一下 » |
| “Runoob” | NaN | “Runoob” | true | 尝试一下 » |
| [ ] | 0 | "" | true | 尝试一下 » |
| [20] | 20 | “20” | true | 尝试一下 » |
| [10,20] | NaN | “10,20” | true | 尝试一下 » |
| [“Runoob”] | NaN | “Runoob” | true | 尝试一下 » |
| [“Runoob”,“Google”] | NaN | “Runoob,Google” | true | 尝试一下 » |
| function(){} | NaN | “function(){}” | true | 尝试一下 » |
| { } | NaN | “[object Object]” | true | 尝试一下 » |
| null | 0 | “null” | false | 尝试一下 » |
| undefined | NaN | “undefined” | false | 尝试一下 » |
return myArray.constructor.toString().indexOf(“Array”) > -1;这句话怎么解释?
1、myArray 是函数 isArray 的参数，这里调用函数的时候，会传来数组 fruits。
2、constructor 是一个属性，构造函数属性，不同类型的数据，会得到相应不同的值。因为 myArray 是个数组，这里的 myArray.constructor 的值就是 function Array() { [native code] }。(如果 myArray 是个字符串，myArray.constructor 的值就是function String() { [native code] }。还有 number，boolean，object，等等。)
3、toString() 是个方法，变字符串的方法，这里把 function Array() { [native code] } 变成字符串，为了后面好检索。
4、indexOf(“Array”) 是个方法，检索字符串，这里看字符串 function Array() { [native code] } 里有没有Array，有就返回首次出现的位置，是一个数值，这里是 9。如果出现在第一个字符，会返回 0。空格参与计数。如果没有找到，就返回 -1。只要 >-1，就说明有 Array，就能判断原来那个函数调用传来的 fruits 是一个数组。如果 myArray.constructor.toString().indexOf(“Object”)>-1，那么 myArray 就是一个 Object 对象。不过那样地话，这个参数的名字就没取好了，应该叫做 myObject。
==JSON 和 XML 都用于接收 web 服务端的数据。==