Java-Script学习笔记-1

---

前言

---

以下都是自己的一些学习笔记，可能有写的不对的地方，还望各位大佬体谅和加以指正。

---

JavaScript基本介绍

JavaScript是目前web开发中不可缺少的脚本语言，js不需要编译即可运行，运行在客户端，需要通过浏览器来解析执行JavaScript代码。
诞生于1995年，当时的主要目的是验证表单的数据是否合法。
JavaScript本来应该叫Livescript，但是在发布前夕，想搭上当时超热的java顺风车，临时把名字改为了JavaScript。（也就是说js跟java没有关系，当时只是想借助java的名气）。

javaScript 被用来改进设计、验证表单、检测浏览器、创建cookies，等等。JavaScript 是因特网上最流行的脚本语言，并且可在所有主要的浏览器中运行，比如： Internet Explorer、 Maxthon、Mozilla、Firefox、Netscape、Chrome和 Opera等。

常用于
修改html及css代码
验证表单

---

一、js的嵌入方法

内嵌式

理论上js可以写在任何第一个地方 但是一般写在head标签里或者 body下

<script type="application/javascript">
alert("内嵌式");
</script>
<script>alert("内嵌式");</script>

外链式

首先新建一个文件类型为.js的文件，然后在该文件中写js语句，通过script标签对引入到html页面中。

<script src="js文件路径地址">这里不能写js语句</script>

行内式

直接书写在标签身上，是一个简写的事件，所以又称之为事件属性。 onclick单击事件

<input type="button" value="点我呀!" onclick="alert('xss');">
<button onclick="alert('xss');">点我呀!</button>

二、js简单语法

语句

在编程语言中，这些编程指令被称为语句。

1. JavaScript 程序就是一系列的编程语句。 注释：在 HTML 中，JavaScript 程序由 web 浏览器执行。
2. JavaScript 语句由以下构成： 值、运算符、表达式、关键词和注释。
3. 用分号（;）分隔JavaScript语句。

注释

单行注释： // 注释语句 快捷键ctrl+/
多行注释： /* 注释语句 */ 快捷键ctrl+shift+/
注意：多行注释相互不能嵌套使用，只能在多行注释里面使用单行注释！

变量

变量是用于存储信息的"容器"
javascript单双引号没区别

定义变量需要使用关键字 var

var a=’hello world！’;  // 定义一个a变量 并赋值为 hello world！

JavaScript 保留关键字

Javascript 的保留关键字不可以用作变量、标签或者函数名。有些保留关键字是作为 Javascript 以后扩展使用。

三、JavaScript 作用域

Javascrpt 局部变量

局部作用域 变量在函数内声明，变量为局部作用域。

 // function 定义函数的关键字
function myFunction() { 
    var carName = "Volvo";
    // 函数内可调用 carName 变量
}

JavaScript 全局变量

变量在函数外定义，即为全局变量。
全局变量有 全局作用域: 网页中所有脚本和函数均可使用。

var carName = " Volvo";
// 此处可调用 carName 变量
function myFunction() {
	console.log(carName)  // 控制台打印变量
    // 函数内可调用 carName 变量
}

四、运算符

用于执行程序代码运算，会针对一个以上操作数来进行

算术运算符

+   -   *   /   %  ++  --

字符串拼接使用“+”

比较运算符

<
>
==
！=
<=
>=
=== 全等于：将数值以及数据类型一并比较
！==不全等于：将数值以及数据类型一并比较

赋值运算符

=
+= 

-=
*=
/=
%=
a=a+2; 	==>	a+=2
a=a-2;	==>	a-=2
a=a*2;	==>	a*=2
a=a/2;	==>	a/=2
a=a%2;	==>	a%=2

逻辑运算符

&&  // 全真为真 等于python中的 and
||  // 一个为真就是真 等于python中的 or
！  // 取反 等于python中的 !

五、JavaScript 数据类型

在js中有以下几种数据类型：

• 数值型：number（凡是数字都是数值型，不区分整数和小数）
• 字符串：string（凡是引号包裹起来的内容全部都是字符串）
• 布尔：boolean（true、false）
• 对象类型：object（特殊取值null）
• 未定义型：undefined
• 对象类型： 数组 字典

JavaScript 如何判断数据类型

在JavaScript中可以使用函数 typeof() 判断数据类型
判断类型

var a = "iamstring.";
var b = 222;
var c= [1,2,3];
var d = new Date();
var e = function(){alert(111);};
var f = function(){this.name="22";};　

alert(typeof a)  ------------> string
alert(typeof b)  ------------> number
alert(typeof c)  ------------> object
alert(typeof d)  ------------> object
alert(typeof e)  ------------> function
alert(typeof f)  ------------> function

数字类型（Number）

只有一种数字类型，数字 可以是小数 ，也可以的整数
以0开头 默认使用8进制来表示我的这个数字
以0x开头 默认使用16进制来表述我的这个数字
如果以-开头 默认以负数
如果我带有e：以科学计数法来解析我的这个数字

parseInt(..)    // 将某值转换成数字，不成功则NaN
parseFloat(..) // 将某值转换成浮点数，不成功则NaN

// 特殊值：
NaN，非数字。可使用 isNaN(num) 来判断。
Infinity，无穷大。可使用 isFinite(num) 来判断。

字符串型（string）

字符串是存储字符的变量，用来表示文本的数据类型，程序中的字符串是包含单引号/双引号的，由单引号来界定我双引号中包含的字符串

obj.length                           // 长度
 
obj.trim()                           // 移除空白
obj.trimLeft()
obj.trimRight)
obj.charAt(n)                        // 返回字符串中的第n个字符
obj.concat(value, ...)               // 拼接
obj.indexOf(substring,start)         // 子序列位置
obj.lastIndexOf(substring,start)     // 子序列位置
obj.substring(from, to)              // 根据索引获取子序列
obj.slice(, end)        		     // 切片
obj.toLowerCase()                    // 大写
obj.toUpperCase()                    // 小写
obj.split(delimiter, limit)          // 分割
obj.search(regexp)                   // 从头开始匹配，返回匹配成功的第一个位置(g无效)
obj.match(regexp)                    // 全局搜索，如果正则中有g表示找到全部，否则只找到第一个。

// javascript 中的 re 模块
obj.replace(regexp, replacement)     // 替换，正则中有g则替换所有，否则只替换第一个匹配项，
                                     $数字：匹配的第n个组内容；
                                     $&：当前匹配的内容；
                                     $`：位于匹配子串左侧的文本；
                                     $'：位于匹配子串右侧的文本
                                     $$：直接量$符号

布尔类型（boolean）

一般是用在流程控制语句中，字符串和数字类型都是无穷多个，然而我们的布尔数据类型只有两个：true 和 false
这两个个值一般用于说明某个事物是真或者假
js一般用布尔类型来比较所得到的结果

布尔类型仅包含真假，

==      // 比较值相等
!=      // 不等于
===     // 比较值和类型相等
!===    // 不等于
||      // 或
&&      // 且

null（空）

null

关键字null是一个特殊的值，它表示变量为空值，用来定义空的或者是不存在的引用。
如果试图去引用一个没有定义的值，就会返回一个null。
这里注意一点：null并不等于"" 或者0

undefined（未定义）

这个值表示变量不含有值，没有定义的值，或者被定义了一个不存在的属性值

！null和undefined区别：
null它表示一个变量被赋予一个空值，而undefined是表示变量还没有被赋值

六、JavaScript 数组

1. 数组内可以存放任意数据类型的数据（本质上它也是对象）
2. 数组元素不赋值的情况下 值为undefined
3. 如果数组打印的时候，元素不赋值""
4. 访问数组范围之外的元素，不会出现越界的问题，undefined
5. 定义数组大小，照样可以添加更多元素

定义数组的方法：

var arr=[]		//定义一个空数组

//定义的同时赋值
var arr=[10,20,{"name":"tomy","age":19},0.1,"string",true,["aaa","bbb"]]; 

//定义一个空数组
var arr=new Array();	

//定义的同时赋值
var arr = new Array(10,20,{"name":"tomy","age":19},0.1,"string",true,["aaa","bbb"])

//定义一个长度为10的数组
var arr=new Array(10)//定义一个长度为10的数组

数组的操作

obj.length()        // 数组的大小
obj.push(ele)       // 尾部追加元素
obj.pop()           // 尾部获取一个元素
obj.unshift(ele)    // 头部插入元素
obj.shift()         // 头部移除元素
obj.splice(start, deleteCount, value, ...)  // 插入、删除或替换数组的元素
obj.splice(n,0,val) // 指定位置插入元素
obj.splice(n,1,val) // 指定位置替换元素
obj.splice(n,1)     // 指定位置删除元素
obj.slice( )        // 切片
obj.reverse( )      // 反转
obj.join(sep)       // 将数组元素连接起来以构建一个字符串
obj.concat(val,..)  // 连接数组
obj.sort( )         // 对数组元素进行排序

七、JavaScript 字典

Tips：JavaScript 中的字典同 python 中的字典大同小异

字典

字典 是一种以键-值对形式存储数据的数据结构

var dict = {'k1':"moonsec",'k2':'moon','age':18};

// 输出字典元素
for(var item in dict){
console.log(dict[item]);
}

// 获取指定元素
dict['age'] 获取key为age的元素

// 赋值
dict['age']=10

// 删除元素
delete dict['one'];
delete dict.age;

八、JavaScript 流程控制语句 if 语句

if语句

if(条件){
函数体
}

if else语句

if(条件){
函数体1
}else{
函数体2
}

例如：

var num = 10;

if (num > 2){
	console.log('num > 2');
}else{
	console.log('num < 2');
}

if…else if…else 语句

if(条件1){

}else if(条件2){

}else if(条件n){

}else{

}

例如：

var number = 1;

if (number == 1){
	console.log('number = 1')
}else if (number == 2){
	console.log('number = 2')
}else if (number == 3){
	console.log('number = 3')
}else{
	console.log('number > 3 or number < 1')
}

switch语句:多分支语句

switch(表达式) {
     case n:
        代码块
        break;
     case n:
        代码块
        break;
     default:
        默认代码块
} 

例如：

// new 一个时间的对象
// getDay() 获取当前星期X(0-6,0代表星期天)
switch (new Date().getDay()) {
    case 6:
        text = "今天是周六";
        break; 
    case 0:
        text = "今天是周日";
        break; 
    default: 
        text = "期待周末~";
} 

九、JavaScript 循环结构

while 循环

while循环：先判断条件 当条件成立 再执行

while(循环成立条件){
....
}

do…while 循环

do...while循环:不论条件成不成立 先执行一遍 再判断

do{
.....
}while(循环成立条件)

for 循环

// 打印1-99
for (var i = 1;i < 100;i++){
	console.log(i);
}

for…in 循环

// 遍历一个列表并打印
var list = ['tom', '今年', 19, '正在学习', 'JavaScript'];

for (item in list){
	console.log(list[item]) // list 使用索引获取值
}

注意：JavaScript 中的 for 循环遍历出来的值是 索引

---

总结

总体来说，学过一门计算机语言学习JavaScript 还是比较简单的，但是想要深入了解还是需要时间的累计。
我们在下一章会学习 JavaScript 中的面向对象，时间，js的序列化，时间以及原型。