js-day01-js语言基础

JavaScript简介:
JavaScript一种直译式脚本语言，是一种动态类型、弱类型、基于原型的语言，内置支持类型。它的解释器被称为JavaScript引擎，为浏览器的一部分，广泛用于客户端的脚本语言，最早是在HTML（标准通用标记语言下的一个应用）网页上使用，用来给HTML网页增加动态功能。Node.js。
在1995年时，由Netscape公司的Brendan Eich，在网景导航者浏览器上首次设计实现而成。因为Netscape与Sun合作，Netscape管理层希望它外观看起来像Java，因此取名为JavaScript。但实际上它的语法风格与Self及Scheme较为接近。
为了取得技术优势，微软推出了JScript，CEnvi推出ScriptEase，与JavaScript同样可在浏览器上运行。为了统一规格，因为JavaScript兼容于ECMA标准，因此也称为ECMAScript。
组成部分:
JavaScript 的内容，包含以下三部分：
ECMAScript（核心）：JavaScript 语言基础(规定了 JavaScript 脚本的核心语法，如数据类型、关键字、保留字、运算符、对象和语句等，它不属于任何浏览器。)；
DOM（文档对象模型）：规定了访问HTML和XML的接口(提供了访问 HTML 文档（如body、form、div、textarea等）的途径以及操作方法)；
BOM（浏览器对象模型）：提供了独立于内容在浏览器窗口之间进行交互的对象和方法(提供了访问某些功能（如浏览器窗口大小、版本信息、浏览历史记录等）的途径以及操作方法)。
基本特点:
是一种解释性脚本语言（代码不进行预编译）。
主要用来向HTML（标准通用标记语言下的一个应用）页面添加交互行为。
可以直接嵌入HTML页面，但写成单独的js文件有利于结构和行为的分离。
日常用途:
嵌入动态文本于HTML页面。
对浏览器事件做出响应。
读写HTML元素。
在数据被提交到服务器之前验证数据。
检测访客的浏览器信息。
控制cookies，包括创建和修改等。

JavaScript存在的位置:

方式1: 在<html>标签中,任何地方添加<script></script>标签.标签中内容就是js代码. 虽然可以放在页面的任何地方,但是规范放在<head>标签中.

    <!-- 方式一:直接存在html页面中 -->
    <script type="text/javascript">
    //这段代码在加载页面的时候就执行
        alert(123);
    </script>

方式2:单独使用一个文件来编写javascript代码(js文件),在需要使用的页面中引入该文件.

    <!-- 方式二:在一个单独的js文件中编写JavaScript代码,然后再引入 -->
    <!-- 引入js文件 -->
    <script type="text/javascript" src="index2.js"></script>

方式3:把代码编写的a标签的href属性中,点击a标签的时候,就执行里面代码.

    小天
    <a href="javascript:alert(234);">松鼠</a>

ECMAScript(JS基本语法):

基本语法(大多数和Java一样):
JavaScript中的标识符:
　　变量，常量，函数，语句块也有名字，我们统统称之为标识符。标识符可以由任意顺序的大小写字母、数字、下划线(_)和美元符号($)组成，标识符不能以数字开头，不能是JavaScript中的保留字或关键字(和Java一样)。
　　合法的标识符举例：indentifier、username、user_name、_userName、$username
　　非法的标识符举例：int、98.3、Hello World
JavaScript严格区分大小写.
　　username和userName是两个完全不同的符号
JavaScript程序代码的格式
　　每条功能执行语句的最后必须用分号(;)结束，每个词之间用空格、制表符、换行符或大括号、小括号这样的分隔符隔开。
语句块使用{}来表示
JavaScript程序的注释
　　/*…*/中可以嵌套“//”注释，但不能嵌套“ /*…*/”。、/**..文档注释.*/

定义变量:
什么是变量，系统为之设置一个标识，程序可以用变量名来指向具体的对象内存，并通过变量名来获得对应的对象值。
声明变量要使用var关键字
　　例如：var name;//一般不使用name作为变量名
声明变量的同时为其赋值
　　例如：var name = "will";
对已赋值的变量赋予一个其他类型的数据
　　例如：name = 17;
不事先声明变量而直接使用,报错 not defined.(未定义)
　　例如：x = 1234;
　提示：javascript定义变量无需指定类型，任何类型都使用var声明,感觉var就有点类型于java中的Object类型了

//定义变量,使用var关键字,切忌使用String、int等
var msg;
//给变量赋值
msg = "Asuna";

//打印变量的值
//弹窗打印
alert(msg);
//在控制台打印
console.debug(msg);
console.debug(typeof msg);//打印msg的真实类型

msg = 17;
alert(msg);
console.debug(msg);
console.debug(typeof msg);//打印msg的真实类型

console.debug("===================")
console.debug(17 == "17");//true
console.debug(17 === "17");//false

变量的打印:
　　方式1:使用alert(内容);
　　方式2:使用console.debug(内容); 注意:只有W3C的浏览器才支持(IE不行),Firebug中,Google的控制台.
　　　　好比System.out.println(内容);

JS的基本类型和常量:
Number(数字类型)
1、整型常量(10进制8进制16进制)
　　十六进制以0x或0X开头，例如：0x8a。
　　八进制必须以0开头，例如：0123。
　　十进制的第一位不能是0（数字0除外），例如：123。
２、实型常量
　　12.32、193.98、 5E7、4e5等。
特殊数值：NaN(Not a Number)、Infinity(除数为零)，所对应的判断函数isNaN()、isFinite()
Boolean(布尔值) true和false。
String字符串(注意js中没有char类型，所有'a'也是一个字符串)
　　“a book of JavaScript”、‘a’、 “a”、“”。
　　字符串中的特殊字符，需要以反斜杠（）后跟一个普通字符来表示。
null常量:表示引用任何的内存空间.
undefined常量 (未定义,定义未赋值)

var age1 = 17;//字面量(开发中推荐使用)
console.debug(age1);
console.debug(age1 instanceof Number);//false

age2 = new Number(17);//面向对象设计
console.debug(age2);
console.debug(age2 instanceof Number);//true

JS中的运算符和Java中大多数相同:
算术运算符
赋值运算符
比较运算符
逻辑运算符
三元运算符
位运算符
------------------------------------------------
JS中特殊存在的案例:
第一个不同:
在JS中,比较相等的运算符: ==,===.
问题:=和==以及===的区别:
= : 和Java相同,用于给变量赋值.
== : 用来比较变量或者常量的内容,不管数据类型.
===: 比较数据类型和内容,若数据类型相同,且内容相同返回true.
console.debug(17 == "17");//true
console.debug(17 === "17");//false
第二个不同:
在逻辑运算中，0、""、false、null、undefined、NaN均表示false。
----------------------------------------------------------------------------------
a && b : 将a, b转换为Boolean类型, 再执行逻辑与, 若表达式结果为true返回b, false返回a
a || b : 将a, b转换为Boolean类型, 再执行逻辑或, 若表达式结果为true返回a, false返回b
---------------------------------------------------------------------------------
&& 和|| 运算符的区别(开关)：
&&操作:返回最后一个为true的值,或者第一个为false的值.
||操作:返回第一个为true的值,或则最后一个为false的值.

console.debug(true && true)　//true
console.debug(1 && true)　//true
console.debug(1 && 2)　//2
console.debug("A" && 2)　//2
console.debug("" && 2)　//""
console.debug(null && "B")　//null
console.debug("A" && "B")　//"B"
console.debug(1 && 2 && 3)　//3
console.debug(1 && null && 3)　//null
console.debug("" && null && 0)　//""

函数(function):

函数的作用
　　1):将脚本编写为函数，就可以避免页面载入时执行该脚本。
　　2):函数包含着一些代码，这些代码可以多次被调用。

函数的定义和调用:
　　定义函数分类:普通函数/匿名函数.
　　函数必须调用才会执行.

定义语法:
　　function 函数名(参数列表)
　　{
　　　　函数体
　　　　[return 值/变量]
　　}

函数的返回:
　　如果在函数中使用了return,那么函数的返回结果就是 return 后的值.
　　如果在函数中没有使用return,说明该函数没有结果,不用接受,若接受,结果为:undefined.

//js中定义函数的语法
/*
     function 函数名(参数列表)
     {
         函数体(函数代码)
         [return 值/变量]
     }
 */

//第一个:无参数、无返回的函数:打印华丽的分割线
function p(){
    console.debug("----------");
}
//调用函数
p();

//第二个:有参数、无返回的函数:打印传入的变量
function num(data){
    console.debug(data);
}
//调用函数
num(16);

//第三个:有参数、有返回的函数:求两个参数之和
function getNum(x, y){
    return x + y;
}
//调用函数
console.debug(getNum(4,5));

匿名函数(经常使用):
　　在定义函数的时候,没有定义函数名称.
　　此时,可以把函数当做是一个值/变量,可以赋给另一个变量.

//第四个:定义匿名函数:求两个参数之和(此种做法,常用)
var add = function(x, y){//给匿名函数起别名
    return x + y;
}
//使用匿名函数的别名来调用函数
console.debug(add(1, 2 ));
var n = add;//add后面不要加(),否则就是调用函数
console.debug(n(9, 7));

全局变量和局部变量:

变量根据在function的内外定义位置不同,分成:
全局变量:function外部定义的变量称为全局变量
局部变量:function内部定义的变量称为局部变量
访问变量原则：就近原则，谁离我最近我就使用谁。

<script language="javascript">
        var msg = "全局变量";
      function show()
       {
              msg = "局部变量";
        }
        show();
       alert(msg);//局部变量
</script>
-----------------------------------------------------
<script language="javascript">
        var msg = "全局变量";
        function show()
       {
             var msg; 
               msg = "局部变量";
      }
        show();
        alert(msg);//全局变量
</script>

系统函数：

参见与:W3C javascript.chm ---> JavaScript 全局对象参考手册.
在JS中已经预先定义好的,可以直接拿来使用的函数.
-------------------------------------------------------------
encodeURI及encodeURIComponent方法。
　　返回对一个URI字符串编码后的结果。
decodeURI及decodeURIComponent()方法。
　　将一个已编码的URI字符串解码成最初始的字符串并返回。
parseInt方法
　　将一个字符串按指定的进制转换成一个整数，语法格式为：parseInt(numString, [radix])。如果没有指定第二个参数，则前缀为 ‘0x’ 的字符串被视为十六进制，前缀为 ‘0’ 的字符串被视为八进制，所有其他字符串都被视为是十进制。
parseFloat方法
　　将一个字符串转换成对应的小数。
isNaN方法
　　检查一个值是否为NaN。
escape方法(不推荐使用,改为encodeURIComponent)
　　返回对一个字符串进行编码后的结果字符串。所有空格、标点、重音符号以及任何其他非 ASCII 字符都用 %xx 编码替换，其中xx等于表示该字符的Unicode编码的十六进制数，字符值大于255的字符以%uxxxx格式存储。
unescape 方法(不推荐使用，改为decodeURIComponent)
　　将一个用escape方法编码的结果字符串解码成原始字符串并返回。
eval 方法 (常用)
　　将参数字符串作为一个JavaScript表达式执行。

//编码
var ret1 = encodeURI("https://bilibili.com?keyword=松鼠航");
var ret2 = encodeURIComponent("https://bilibili.com?keyword=松鼠航");
p(ret1);//https://bilibili.com?ketword=%E6%9D%BE%E9%BC%A0%E8%88%AA
p(ret2);//https%3A%2F%2Fbilibili.com%3Fketword%3D%E6%9D%BE%E9%BC%A0%E8%88%AA
//解码
var ret3 = decodeURI("https://bilibili.com?ketword=%E6%9D%BE%E9%BC%A0%E8%88%AA");
var ret4 = decodeURIComponent("https%3A%2F%2Fbilibili.com%3Fketword%3D%E6%9D%BE%E9%BC%A0%E8%88%AA");
p(ret3);//https://bilibili.com?keyword=松鼠航"
p(ret4);//https://bilibili.com?keyword=松鼠航"

console.debug("=======================================");

//isFinite(param):检查某个值是否为有穷大,若为无穷大则返回false
p(isFinite(1/0));//false
p(isFinite(-1/0));//false
p(isFinite(1/1));//true

console.debug("=======================================");

//isNaN(param):检查某个值是否不为数字,若不是返回true
p(isNaN(0.0/0.0));//true
p(isNaN(1/1))//false

console.debug("=======================================");

//parseInt(param):解析一个字符串并返回一个整数(常用)
//parseFloat(param):解析一个字符串并返回一个浮点数(常用)
p(parseInt("123"));//123
p(parseInt("123.123"));//123
p(parseInt("123s"));//123
p(parseInt("1A2s3d"));//1

p(parseFloat("123"));//123
p(parseFloat("123.123"));//123.123
p(parseFloat("123s"));//123
p(parseFloat("1s2d3f"));//1

console.debug("=======================================");

//eval(String):可以把字符串类型的参数作为JavaScript代码执行(常用)
var str = "alert('圣光阿，那个邪恶看起来值得一战！');";
p(str);
eval(str);//把str所表示的字符串当做JavaScript代码执行了,弹窗

//==============
function p(data){
    console.debug(data);
}

面向对象：

对象中所包含的变量就是对象的属性，对象中所包含的对属性进行操作的函数就是对象的方法，对象的属性和方法都叫对象的成员。
类是对某一类事物的描述，是抽象上的概念；而对象实例是一类事物中的具体个例。
能够被用来创建对象实例的函数就叫对象的构造函数。使用new关键字和对象的构造函数就可以创建对象实例，
语法格式如下：var objInstance = new ObjName([传递给该对象的实际参数列表]);
----------------------------------------------
函数:面向过程的,可以独立存在和运行.
方法:面向对象的,函数在面向对象中的称谓,此时不能独立存在,因为要依附于对象,也使用对象来调用.
构造函数:专门用来构建对象的.
类:就是一个函数,是一个特殊的函数,构造函数.

js创建一个类,只需要定义类的构造函数(方法):

//定义一个函数,表示功能
function sayHello(){
    console.debug("hello world")
}
//定义一个类,表示一类事物,是对象的类型:人类
function User(){
    
}
//创建对象
var user = new User();
p(user);
//给user对象设置name属性为will,age属性为17
user.name = "will";
user.age = 17;
//给user对象设置一个功能(函数)
user.sayHi = function(){
    console.debug("hello");
    //alert("66");
}
p(user);
user.sayHi();

//==============
function p(data){
    console.debug(data);
}

在JS中this表示什么? this就表示当前对象
　　1):this在构造器(类)中,此时this就表示当前被创建的对象.
　　2):this在方法中,此时哪一个对象调用this所在的方法,this就是哪一个对象.

//在创建对象的时候就传递name和age
function Person(name, age){
    this.name = name;
    this.age = age;
    this.dowork = function(){
        console.debug(this.name,this.age);
    };
}
var person = new Person("will", 18);
p(person);
//使用person对象调用doWork方法
person.dowork();

//==============
function p(data){
    console.debug(data);
}

函数参数的值传递方式：
　　1）将基本类型的变量作为函数参数传递的情况:

//将基本类型的变量作为函数参数传递的情况:
//该情况的值传递是传递值的副本
function changeValue(x){
    x = 5;
}
var x = 3;
changeValue(x);
console.debug(x);//3

　　2）将对象类型的变量作为函数参数传递的情况:

//将对象类型的变量作为函数参数传递的情况:
//该情况的值传递,是传递引用地址的副本,使用同一片堆空间
function Person(name, age){
    this.name = name;
    this.age = age;
    this.say = sayFunc;
}

function sayFunc(){
    console.debug(this.name,this.age);
}

function change(person){
    person.name = "松鼠";
}

var person = new Person("十六",18);
person.say();
change(person);
person.say();

内置对象：

for in循环好比是Java中的foreach循环:
for in循环作用:
　　1.遍历数组里所有的数组元素的索引.
　　2.遍历js对象的所有属性.

//使用for-in语法迭代出对象中的所有属性和属性值
//for(类型  变量名  in  集合/对象/数组){}
function Person(name,age){
    this.name = name;
    this.age = age;
}
var person = new Person("松鼠", 19);
for(var p in person){
    //打印属性和属性值,获取属性值:对象[变量]
    console.debug(p, person[p ]);
}

参见与:W3C javascript.chm ---> ECMAScript 引用类型.
Object:

//创建对象,并设置属性和方法
var obj = new Object();
obj.name = "will";
obj.age = 17;
obj.sayHello = function() {
};
// 对象的构造函数
alert(obj.constructor);
// 是否有指定的属性
debug(obj.hasOwnProperty("name1"));
// 迭代对象所有的属性+方法:for...in
for (attr in obj) {
alert(attr)//属性名
}

---------------------------------------------------------
Array(单独讲)
Boolean
----------------------------------------------------------
Date:

//打印当前系统时间:
var d = new Date();
var day = d.getDate();
day = day<10?"0"+day:day;
var time = d.getFullYear() + "-" + (d.getMonth()+1) + "-" + day + " "
+ d.getHours() + ":" + d.getMinutes() + ":" + d.getSeconds();

----------------------------------------------------------
Math:
var num = Math.random();
----------------------------------------------------------
Number
----------------------------------------------------------
String:

// 随机生成A到Z之间的字母:65+26
// 随机生成0~25
var num = parseInt(Math.random() * 26);//
num = num + 65;
alert(String.fromCharCode(num));

//Object类:根类
var obj = new Object();
obj.name = "will";
obj.age = 15;
p(obj);
p(obj.constructor);//查看构造器
p(obj.hasOwnProperty("age"));//查看是否有age属性,true

console.debug("=================================");

//String类
var str1 = new String("will");
var str2 = new String("will");
p(str1 == str2);//false
p(str1.valueOf() == str2.valueOf());//true

p("will".length);//4
p("will".charAt(0))//w
p("will".charCodeAt(0));//119:小写w的Unicode值
//fromCharCode:传入一个Unicode值,返回对应的字符
var ch = String.fromCharCode(65);
p(ch);//A

p("will".slice(0));//will,从哪里开始截取字符串
p("will".slice(0, 2));//wi,从哪里开始截取字符串(输入开始和结束索引)(前闭后开)
p("will".substring(0));//will,从哪里开始截取字符串
p("will".substring(0, 2));//wi,从哪里开始截取字符串(输入开始和结束索引)(前闭后开)

console.debug("=================================");

//math类
//random方法返回[0, 1)之间的随机数
p(Math.random());
//随机生成A~Z之间的字符
ch = String.fromCharCode(parseInt(Math.random() * 26) + 65);
p(ch);

console.debug("=================================");

//Date类
var d = new Date();
p(d);

var mon = d.getMonth() + 1 >= 10 ? d.getMonth() + 1 : "" + d.getMonth() + 1;
var time = d.getFullYear() + "-" + mon + "-" + d.getDate()
            + "  " + d.getHours() + ":" + d.getMinutes() + ":" + d.getSeconds();
p(time);
//==============
function p(data){
    console.debug(data);
}

console.debug("------------");
//使用for-in语法迭代出对象中的所有属性和属性值
//for(类型  变量名  in  集合/对象/数组){}
function Person(name,age){
    this.name = name;
    this.age = age;
}
var person = new Person("松鼠", 19);
for(var p in person){
    //打印属性和属性值,获取属性值:对象[变量]
    console.debug(p, person[p ]);

数组：

为什么使用数组:存储多个数据.
js中的数组和Java中的ArrayList有异曲同工之妙,爽.
------------------------------------------------------
如何创建数组对象:

//创建数组,方式一,(最多使用):
var arr1 = new Array();
arr1[0] = "A";
arr1[1] = "B";
arr1[2] = "C";
p(arr1);
//创建数组,方式二,好比静态初始化:
var arr2 = new Array("A","B","C");
p(arr2);
//创建数组,方式三,好比动态初始化:
var arr3 = new Array(4);
p(arr3);
//创建数组,方式四,方式二的简单写法(最多使用):
var arr4 = ["A","B","C"];
p(arr4);

数组的方法和操作：

//数组的方法和操作
var arr = ["A","B","C"];
//for循环
for (var index = 0; index < arr.length; index++) {
    console.debug(arr[index]);
}
//for-in循环,迭代变量是索引,而不是元素
for(var index in arr){
    console.debug(arr[index]);
}

操作数组的属性和方法：

//length－获得数组的长度;
p(arr.length);//3
//concat－连接数组;
var arr1 = arr.concat("D",1,2,3);
p(arr1);//["A", "B", "C", "D", 1, 2, 3]
//join－把数组转换成字符串;
var str = arr.join("-");
p(str);//A-B-C
//pop－删除并返回数组的最后一个元素;    
arr1 = arr.pop();
p(arr);//["A", "B"]
p(arr1);//C
//push－放入一个元素;
arr.push("C");
p(arr);//["A", "B", "C"]
//reverse－颠倒数据中的元素顺序;
arr.reverse();
p(arr);//["C", "B", "A"]
arr.reverse();
//shift－移出第一个元素;
arr.shift();
p(arr);//["B", "C"]
//unshift－在前面追加元素;
arr.unshift("A");
p(arr);//["A", "B", "C"]
//splice(start, deletecount, items)－用于插入、删除或者替换数组;
//删除
arr.splice(1,1);//从索引1的位置开始,删除一个元素
p(arr);// ["A", "C"]
//插入
arr.splice(1, 0, "Z","X","Y");//在索引1的位置开始,插入Z、X、Y
p(arr);//["A", "Z", "X", "Y", "C"]
//替换
arr.splice(1,3,"B");//从索引1的位置开始,删除3个元素,并且再插入B(相当于替换)
p(arr);//["A", "B", "C"]
//sort－排序数组;
var arr1 = [1,5,4,3,2];
arr1.sort();
p(arr1);//[1, 2, 3, 4, 5]


//==============
function p(data){
    console.debug(data);
}

prototype:

需求:给数组提供一个修改指定索引位置元素的方法(set).

//使用prototype,可以理解为在类上添加静态方法
//需求:给数组提供一个修改指定索引位置元素的方法(set)
Array.prototype.set = function(index, newEl){
    this.splice(index, 1, newEl);
};
//需求:把B修改为2B
var arr1 = ["A","B","C","D"];
p(arr1);
arr1.set(1, "2B");
p(arr1);

//需求:把十六改为苏氏阿十六
var arr2 = ["松鼠","十六","豆豆","果果"];
p(arr2);
arr2.set(1,"苏氏阿十六");
p(arr2);
//==============
function p(data){
    console.debug(data);
}

使用prototype:

可以理解为在类上增加静态方法.

静态方法属于类,属于该类所有的对象,如此该方法就属于所有的对象.

今日小结：