JavaScript小白入门笔记(一)

一、JavaScript简介

1. 什么是JavaScript

JavaScript简称为JS，由网景公司开发的客户端脚本语言，不需要编译，可以直接运行

Web前端三层：

结构层 HTML 定义页面的结构
样式层 CSS 定义页面的样式
行为层 JavaScript 用来实现交互，提升用户体验

2. JavaScript的作用

在客户端动态的操作页面
在客户端做数据的校验
在客户端发送异步请求

二、引用方式

1. 内联方式

在页面中使用script标签，在script标签的标签体中编写js代码

script标签可以放在页面的任意位置，一般放在head中

<script type=\"text/javascript\">js代码</script>

2. 行内方式

在普通标签中编写js代码，一般需要结合事件属性，如onclick、onmouseover等

<input type=\"button\" value=\"点我\" onclick=\"alert(\'Hello\')\"/><!--使用超链接的href属性执行js时，必须添加javascript前缀--><a href=\"javascript:alert(\'World\')\">我是超链接</a>

3. 外部方式

使用单独的

.js

文件定义，然后在页面中使用script标签引入外部脚本文件

<script type=\"text/javascript\" src=\"js文件的路径\"></script>

注：如果某个script标签用于引入外部js文件，则该script标签的标签体中不能再写js代码

.js

文件：

alert(\"哈哈\");

.html

文件：

<!DOCTYPE html><html lang=\"en\"><head><meta charset=\"UTF-8\"><title>JS的引用方式</title><style>div{width: 100px;height: 100px;background: #ccc;}</style><!--1.内嵌方式--><script>alert(\"Hello JavaScript\");  //弹出一个窗口</script><!--3.引用外部的js文件--><script src=\"js/hello.js\"></script></head><body>第一个JavaScript程序 <br><!--2.内部方式--><input type=\"button\" value=\"点我\" onclick=\"alert(\'我被点了，晕了！\')\"><div onmouseover=\"alert(\'走开！\')\">把鼠标移上来！</div><a href=\"javascript:alert(\'超链接被触发\')\">我是超链接</a></body></html>

三、基本用法

1. 变量

js是一门弱类型的语言，声明变量时使用var关键字，不需要指定变量的类型

语法：

var 变量名=变量值;

在ECMAScript 6规范中新增let关键字，也用于声明变量

使用let声明的变量支持块级作用域，而使用var声明的变量不支持块级作用域

注：在IDEA中配置ES版本 Settings——>Languages & FrameWorks——>JavaScript——>JavaScript Language version

<!DOCTYPE html><html lang=\"en\"><head><meta charset=\"UTF-8\"><title>Title</title><script>//变量var age;age = 18;var name = \"tom\";sex = \"male\";  //强烈不建议var a = 5, b = 2, c = 3;var 姓名 = \"张三\"; //不建议alert(age);//使用var声明的变量不支持块级作用域,在代码块中的变量外部也可以使用,如果需要支持块级作用域,使用let声明变量{var x = 6;let y = 7;}alert(x);//使用let声明的变量不能在代码块外使用//alert(y);</script></head><body></body></html>

2. 输入和输出

输出：

alert() 弹出警告框
console.log() 输出到浏览器的控制台
document.write() 输出到页面

输入：

prompt() 弹出输入框，获取用户输入的数据
使用
```
typeof 变量
```
判断变量的类型
使用
```
Number(变量)
```
将字符串转换为数值

3. 转义符

常用转义符：

```
\\n
```
换行
```
\\t
```
缩进
```
\\\"
```
双引号
```
\\\'
```
单引号

4. 注释

单行注释：

//

多行注释：

/* */

5. 编码规范

代码区分大小写

每条语句以分号

结尾代码缩进

<!DOCTYPE html><html lang=\"en\"><head><meta charset=\"UTF-8\"><title>Title</title><script>//输出信息alert(\'嘿嘿\');console.log(\'哈哈\');document.write(\'嘻嘻\');//输入var age = prompt(\'请输入您年龄:\');console.log(typeof age);console.log(age+2);age = Number(age);console.log(age+2);//转义符console.log(\'Hello\\nWorld\');console.log(\'Hello\\tWorld\');console.log(\"Hello\\\'World\");console.log(\'Hello\\\"World\');</script></head><body></body></html>

四、核心语法

1. 数据类型

基础数据类型：

string 字符串
number 数值（NaN表示非数字Not a Number，其自身是number类型，表示数值的不正常状态）
boolean 布尔
null 空类型（使用typeof查看类型，如果数据是null、Date、Array等，会返回object）
undefinded 未定义类型

数据类型转换：

转换为number
使用Number()、parseInt()、parseFloat()
转换为string
拼接空字符串
转换为boolean

使用Boolean()
注：0、空字符串、null、undefinded、NaN会被转换成false，其他值都会被转换为true

2. 运算符

算术运算符:+、-、*、/、%、**（a**b表示a的b次方）、++、- –

比较运算符：<、>、>=、<=、== 、===、!=（==是等于，只判断内容是否相等；===是全等于，既要判断内容，也要判断数据类型）

赋值运算符：=、+=、=、*=、/=、%=

逻辑运算符：&&、||、!

条件运算符：条件?表达式1:表达式2

3. 选择结构

if…else、switch

4. 循环结构

while、do…while、for、for…in

break、continue

var str=\'welcome\'; // 可以将字符串看作是由多个字符组成的集合for(var index in str){	//index表示集合中每个元素的索引，并不是元素本身// console.log(index);console.log(str[index]);}

5. 数组

5.1 定义方式

语法：

var arr = new Array();var arr = new Array(值1,值2...);var arr = [值1,值2...];

注意：

数组长度会自动扩展
数组中元素的默认值为undefined
使用length属性来获取数组的长度

5.2 常用方法

方法	描述
sort()	排序，默认按字符编码的顺序排列，非string类型会自动转换为string，可自定义比较规则
reverse()	反转，将数组元素倒序排列
join(separator)	将数组中元素使用指定的分隔符连接成字符串，默认通过逗号进行连接
indexOf()	返回指定元素在数组中首次出现的位置
slice(begin,end)	截取数组中索引从begin到end的元素，左闭右开，如果省略第二个参数，则表示截取到末尾
toString()	将数组转换为字符串

5.3 二维数组

二维数组可以认为是特殊的一维数组，即一维数组中的每个元素又是一个一维数组

语法：

var arr = new Array();arr[0] = new Array();arr[1] = new Array();arr[][] = 值;var arr=[[值1,值2...],[值1,值2...],[值1,值2...]];

6. 函数

6.1 自定义函数

语法：

function 函数名(参数1,参数2...){// 函数体}

注意：

定义函数时不需要指定参数的类型
实参个数和形参个数可以不同，未指定参数时其默认值为undefined
不需要指定返回值的类型，如果有返回值，直接使用return返回即可
如果函数中没有使用return返回值，则默认返回undefined

变量的作用域：

局部作用域
在函数中声明的变量，只能在该函数内访问，函数运行结束后变量自动销毁
全局作用域
在函数外声明的变量，在任何位置都可以访问
块级作用域
使用let关键字声明的变量，只能在声明它的代码块内访问

6.2 回调函数

不立即执行的函数调用，满足一定条件时才会执行或者由别的代码调用执行，称为回调函数callback 调用时只写函数名，没有小括号()和参数

应用：

作为事件绑定的函数
作为另一个函数的参数

<script>function f1() {console.log(111);}//将一个函数作为另一个函数的参数来回调function f2(x,y){y();}//点击页面时执行函数f1window.onclick = f1;  //回调函数,不能加小括号f2(5,f1);/**示例：利用回调函数自定义sort（）的比较规则*/var arr = [12,4,23,6,2,86];/*定义一个比较器*升序：如果第一个参数比第二个参数大，则返回正数*     如果第一个参数比第二个参数小，则返回负数*     如果两个参数相等，则返回0*/function compareFn(a,b) {return a-b;}arr.sort(compareFn); //将自定义的比较规则函数作为参数传入console.log(arr);</script>

6.3 匿名函数

没有名字的函数，称为匿名函数，一般用于回调

应用场景：

用于函数的回调

window.onclick=function(){ // 匿名函数，用于回调console.log(\"点击了页面！\");};

用于一次性执行的函数，会自动执行，称为自执行函数

(function(){console.log(\"此函数只执行一次！\");})();

6.4 箭头函数

ES6中允许使用“箭头” => 定义函数，称为箭头函数，也叫lambda表达式，是一种特殊的匿名函数

<script>/**箭头函数,语法:参数 => 返回值*///示例1// var a = function (x) {//     return x*2;// }var a = x => x*2;//示例2:如果箭头函数没有参数或有2个以上参数，则必须使用小括号表示参数部分// var a = function () {//     return 5;// }var a = () => 5;// var a = function (x,y) {//     return 5;// }var a = (x,y) => 5;//示例3:如果箭头函数的函数体多于一条语句，则必须使用大括号将它们括起来// var a = function (x,y) {//     var sum = x + y;//     return sum;// }var a = (x,y) => {var sum = x + y;return sum;};</script>

注：因为内容过多，所以我分成了三篇博客，分别为JavaScript小白入门笔记（一）、JavaScript小白入门笔记（二）、JavaScript小白入门笔记（三），没有看过其他两篇的朋友可以关注我的博客阅读