JS学习笔记（一）——概念/变量/数组/字符串

零、参考教程

主教程：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript

相关知识：

WEB教程：https://developer.mozilla.org/zh-CN/docs/Web/Tutorials

学习WEB开发：https://developer.mozilla.org/zh-CN/docs/Learn

项目构思：https://developer.mozilla.org/zh-CN/docs/Learn/Common_questions/Thinking_before_coding

互联网工作原理：https://developer.mozilla.org/zh-CN/docs/learn/How_the_Internet_works

网络工作原理：https://developer.mozilla.org/zh-CN/docs/Learn/Getting_started_with_the_web/How_the_Web_works

【可以简单解释从键入地址到返回页面的过程原理】

 

网页，网站，网络服务器和搜索引擎的区别是什么？

https://developer.mozilla.org/zh-CN/docs/Learn/Common_questions/Pages_sites_servers_and_search_engines

术语表：https://developer.mozilla.org/zh-CN/docs/Glossary

什么是URL：https://developer.mozilla.org/zh-CN/docs/Learn/Common_questions/What_is_a_URL

<iframe>了解一下：https://www.cnblogs.com/wyhlightstar/p/7066153.html

【好像被H5抛弃了…】

文件处理：https://developer.mozilla.org/zh-CN/docs/Learn/Getting_started_with_the_web/Dealing_with_files

【要做好网站结构，把文件分类好放在不同文件夹】

可访问性：https://developer.mozilla.org/zh-CN/docs/learn/Accessibility

【包括aria技术，搜索引擎优化也了解一下】

 

 

一、JavaScript起步

https://developer.mozilla.org/zh-CN/docs/Learn/JavaScript/First_steps

【只记录了自己不熟悉的部分；太长的原理也不会记录，要自己多看多积累。】

 

1.什么是JS

https://developer.mozilla.org/zh-CN/docs/Learn/JavaScript/First_steps/What_is_JavaScript

【注意点：

考虑浏览器适配，

JavaScript 是轻量级解释型语言（代码边解释边执行），

JS也可以作为后端语言，

尽量用addEventListener('click',createParagraph);代替onclick="createParagraph()，实现JS与HTML代码分离

 

脚本调用策略（防止JS调用未加载的HTML）：

<script src="script.js" async></script>可以让外部JS在HTML加载完再执行；内部JS就写在body结束之前

async 和 defer了解一下（defer可以实现JS调用顺序就是执行顺序）

】

 

2.JS初体验

https://developer.mozilla.org/zh-CN/docs/Learn/JavaScript/First_steps/A_first_splash

猜数字例子

【

let userGuess = Number(guessField.value);

把表单的value转换成number属性，可用typeof看value的属性

】

 

3.查找JS代码的错误

https://developer.mozilla.org/zh-CN/docs/Learn/JavaScript/First_steps/What_went_wrong

 

4.JS变量

https://developer.mozilla.org/zh-CN/docs/Learn/JavaScript/First_steps/Variables

【

顶置：初始化变量之后再实际声明它，并且它仍然可以工作。这是因为变量的声明通常在其余的代码执行之前完成（预编译）。

变量类型：Number 、String、 Boolean、 Array、 Object

动态类型语言：自动识别变量类型

查看类型：typeof variables

】

 

5.数字和运算符

https://developer.mozilla.org/zh-CN/docs/Learn/JavaScript/First_steps/Math

【运算符：+ - * / %（取余）】

 

6.文本处理（字符串）

https://developer.mozilla.org/zh-CN/docs/Learn/JavaScript/First_steps/Strings

【

单引号和双引号：都可以，建议统一单引号，然后var sglDbl = 'Would you eat a "fish supper"?';也可以正常赋值了，

转义字符的使用：var bigmouth ='I\'ve got no right to take my place...';

连接字符串：可直接用+

window.prompt() 函数， 它要求用户通过一个弹出对话框回答一个问题然后将他们输入的文本存储在一个给定的变量中 — 在这个例子中是就是name变量。例子：var name = prompt('What is your name?');

数字与字符：'Front ' + 242;不会报错，但是会把242变成字符串然后与前者连接变成Front242

二者转换：

var myNum = Number(myString);

var myString = myNum.toString();

】

 

7.有用的字符串方法

https://developer.mozilla.org/zh-CN/docs/Learn/JavaScript/First_steps/Useful_string_methods

【

获取字符串长度（有多少个字符）：myString.length;

获取最后一位字符：myString[myString.length-1];

查找子字符串：var browserType = 'mozilla';     browserType.indexOf('zilla');

返回2，因为找到子字符串的第一位是browserType[2]，如果找不到返回-1

 

提取子字符串：

browserType.slice(0,3);返回moz，从位置0开始提取到3，但不包括browserType了[3]

browserType.slice(2);返回zilla，从2开始提取到最后

 

转换大小写：

字符串方法toLowerCase()和toUpperCase()字符串并将所有字符分别转换为小写或大写。

 

替换子字符串：

browserType = browserType.replace('moz','van');

 

实例：

关键词过滤（还可以做搜索匹配）

首字母大写

】

 

8.数组

https://developer.mozilla.org/zh-CN/docs/Learn/JavaScript/First_steps/Arrays

【

混合类型的数组：var random = ['tree', 795, [0, 1, 2]];

多维数组：像上面的random[2][2];就代表2了

获取数组长度（元素个数）：myArray.length

字符串与数组的转换：split() ， join() ，toString()

添加和删除数组项：push() 和 pop()、unshift() 和 shift()

 

实例：

打印产品

历史搜索记录

】

 

9.实例：笑话生成器

https://developer.mozilla.org/zh-CN/docs/Learn/JavaScript/First_steps/Silly_story_generator