学习Web开发-JS笔记1（JavaScript第一步）

1 什么是JavaScript（JS）?

内置于浏览器的，跨平台，面向对象的动态脚本语言
ps:JS和Java的关系
JS除了名字和语法有点类似Java，其他方面跟Java并没有任何关系
JS和Java的一些区别对比

比较项	JS	Java
发明公司	Netscape（网景）	Sun（后面被Oracle收购）
定位	网页中使用的脚本语言（前端标配，也可用于后端Node.js）	完全面向对象的高级程序设计语言（主要用于服务器应用开发）
主要特点	内置于浏览器、弱类型、非常灵活	体系结构中立、强类型、安全性好、多线程、分布式、高性能

2 JS能做什么

JS能给网页添加动态效果，实现与用户的动态交互。

1. 具有编程语言的基本功能：保存变量值、操作字符串、运行代码以响应网页上发生的特定事件（如click）等
2. 利用API实现很多强大的功能：
   • 浏览器内建API：DOM(动态选取/创建和操作HTML元素)
   • 第三方API：调用地图、制作2D/3D动画等

3 JS在页面上做了什么

3.1 JS的执行顺序

最好在其需要用到的HTML元素加载完之后运行，否则可能会出错，方法有以下几种：

1. 在</body>标签上一行引入JS代码
2. 使用外部JS时指定async或defer属性
   • async表示异步独立加载
   • defer表示异步依赖加载（后面的脚本依赖前面的脚本）
3. 利用jQuery将JS代码写在$(document).ready(function(){ JS代码 })里面

3.2 引用JS代码的方法

3.2.1 内部引用

<script>
// 代码段
</script>

3.3.2 外部引用

<script src="xxx.js" 属性></script>

3.3 脚本调用策略

3.3.1 async异步属性

不会阻塞HTML页面的加载，但各JS文件的调用顺序不确定，适用于各JS脚本独立的情况

3.3.2 defer属性

也不会阻塞HTML页面的加载，但有顺序之分，脚本按照在页面出现的顺序加载运行

<script defer src="js/vendor/jquery.js"></script>

<script defer src="js/script2.js"></script>

<script defer src="js/script3.js"></script>

4 JS代码调试

方法：调出浏览器的开发者模式（通常是F12）->点击Console

常用调试函数：

• alert() 界面弹窗形式
• console.log() 控制台输出

语法错误：根据浏览器的控制台提示信息，通常较容易发现
JS错误参考

5 JS变量

5.1 var（旧）和let（新）关键字区别

let比var更规范，推荐用let

5.2 五种基本类型

• Number
• Boolean
• String
• Array
• Object

6 JS字符串

类似Java中的字符串（字符串连接可直接使用+）

6.1 与数字的互转

6.1.1 数字->字符串

• 使用+与字符串连接

• 调用toString方法

6.1.2 字符串->数字

• 调用parseInt方法

• 利用Number强制类型转换

6.2 一些常用的字符串方法

6.2.1 在字符串中查找并提取子字符串

• 查找字符串indexOf()

• 提取子字符串slice()

6.2.2 转换大小写

• 转换大写：toUpperCase()
• 转换小写：toLowerCase()

6.2.3 替换字符串某部分

str.replace('moz','van');

7 数组

7.1 一些有用的数组方法

.##### 7.1.1 字符串和数组互转

• 字符串->数组:split(’,’)

• 数组->字符串:join(’,’)或者toString()

7.2.2 增删数组项

• 在尾部增删（按栈方式）:push(“xxx”)/pop()

• 在头部增删（按队列方式）:unshift(“xxx”)/shift()

• 在中间增删:splice(startIdx, n, […])

n=0表示增加；n>0且后面没有参数表示删除；其它情况表示删除后再增加

参考资料：
https://developer.mozilla.org/zh-CN/docs/Learn/JavaScript/First_steps