敲黑板():本章内容属于个人对Javascript基础浅薄的总结,对于本章内容有不同见解,恳请各位大佬指点不足。 内容不多,就两点而已。
一、一张图带你走进JavaScript
源文件都放在这里了我的GitHub,或者从我的百度网盘下载,提取码:xzm8。
因为文件为xxx.emmx类型文件,所以还要移步mindMaster打开。
当然,嫌麻烦可以不用看图。直接看正文也行,图只是辅助直观地了解JavaScript.
二、正文走你
1、小知识(第一次建议一定要看)
1.1 为什么会出现
JavaScript的出现,最初为了解决表单校验问题。希望在用户注册时,浏览器就能判定用户填写信息格式是否正确,而不用通过提交用户信息到后台后才能对用户信息做出判定。(因为当时1995年的网速真的不好,比如你注册个qq,提交信息等半天回来的结果是网名命名不规范,然后你再重新提交,再等半天,你网瘾都戒了。)
1.2 组成(三部分)
1.2.1 ECMAScript(核心)
js标准语法,提供核心语言功能。
包含:变量,操作符,操作数,表达式,语句,数组,函数,对象。
1.2.2 DOM
文档对象模型(document object model),js操作html的API,提供访问和操作网页内容的方法和接口。
注:dom虽是js重要组成部分,但其他语言也实现了dom
1.2.3 BOM
浏览器对象模型(browswe object model),js操作浏览器的API,提供与浏览器交互的方法和接口。
因为浏览器之间存在不同,所以存在兼容性问题,进而不同的浏览器呈现的效果不同。
举个小栗子:alert();大重点里面会细讲的,放心吧。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>2</title>
</head>
<body>
<script>
alert("不同的浏览器,弹框样式就不同");
</script>
</body>
</html>
火狐浏览器效果图:
谷歌浏览器效果:
1.3 运行环境
1.3.1 浏览器
在.html文件里面加上<script>标签,写在标签里面就行。像上面的例子一样,至于<script>标签为什么不应该在head里,而在body里,写在哪里都可以,只是写在head里面要这样写:script标签里面加window.onload = function(){};然后
代码再写到函数里面,才会被浏览器加载。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>加载</title>
<script>
window.onload = function(){
alert(1);
// 代码在这里面写
};
</script>
</head>
<body>
</body>
</html>
1.3.2 node.js
当然,你要是对Linux不了解,没关系,用第一种方法学习js就够了。
这个我一般都会用在服务器端的linux系统里面写,要先在Linux安装nodejs。
然后创建xxx.js文件,用vi命令打开,直接在里面码代码。
这样写:
保存退出后执行 node xxx.js就出结果了
console.log();是输出语句,打印内容并显示出来
1.4 与Java的关系
JavaScript跟Java没有关系;一开始Javascript叫livescript,研发公司当时为了蹭Java热度,发布的时候临时改名为JavaScript。然后就一直这么叫了。
说到了就比较一下吧:
Java:强类型语言(变量的数据类型取决于变量的声明。比如说,int a;你给a的值只能是整数,如果给a的值为其他类型,就会报错,但js不会)。
JavaScript:弱类型语言(变量的数据类型取决于值的类型。比如var a;你给a赋值a=123;它就是数字类型,你给它赋值a=‘123’;它就是字符串类型)。因为类型转换的原因,导致效率低于java.
还有其他区别这里就不细说了,想知道的出门左转。
1.5 简单使用
1.5.2 浏览器中
1.创建一个xxx.html文件
2.这样写:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>2</title>
</head>
<body>
<script>
//定义函数
function say(){
document.write('1');
console.log(2);
}
//执行函数
say();
</script>
</body>
</html>
效果:
不建议用document.write();因为网页一旦写入其他元素,会覆盖掉的。
1.6 怎样命名
由字母、数字、下划线、$组成;不能使用数字作为开头。
举例:
- _bab();这样可以
- h34a();这样也可以
- 2a();这样就不可以了
1.7 怎样在HTML引用
1.7.1 页面中
代码写在script标签里,script标签可以放在body里,也可以放在head里。怎么放,看上面。
如:
<script>
var a;
a =123;
console,log();
</script>
1.7.2 引入
引入外部xxx.js文件,script标签只能放在head标签里。同时script标签里不能再写其他代码了,写了也不会被加载,只会加载src里所引用的xxx.js文件。
如:<script src="./xxx.js"></script>
1.8 注释
1.单行代码,双斜杠//
//注释内容
2.多行代码/**/
/*
这里写注释内容
*/
1.9 结束语
看完不理解没关系,等你再看完2、大重点,再回来看你就会感觉到不一样。
2、大重点(精华都在这)
2.1 ECMAScript(es5)
2.1.1 变量
a.变量类型
又叫做数据类型。分为两大类。
1、基本数据类型
五个基本数据类型。
- number(数字类型)
整数:var a = 3;
小数:var a = 3.0;
二进制:var a = 011;
十六进制:var a = 0x11;
等。。 - string(字符串类型)
单引号:var str = ' hello';
双引号:var str = "hello";
单、双引号都可以表示为字符串类型。 - boolean(布尔类型)
正确:var b = true;
错误:var b = false;
布尔类型的值要么为true,要么为false,只有这两种结果。 - null
一般表示一个空对象。
例如;
var a = null;
console.log(typeof a);
结果:null object
- undefined
有声明未初始化。
举例:
var a;
console,log(a);
结果:undefined
2、引用数据类型
- 对象(object)
例:var p = {name:"terry",age:21,gf:null}
- 数组(Array)
例:var arr = [1,2,3,4,5,6];
- 函数(function)
例:function sayHello(){console.log();}
- 正则表达式(RegExp)
例:var e =/hello/ig;
注:这里都不做过多解释,先知道有这个东西就行。下面会详细讲解的。
3、怎样检测数据类型
-
判断是什么类型 typeof
-
判断是否为空 == null
-
判断是不是一个数字 is NaN(result)
-
判断是否有穷数
4、区分
b.变量声明
声明一个a变量:var a;
声明一个str变量:var str;
c.变量初始化
也叫做定义变量类型。
d.
e.
2.1.2 类型
2.1.3 操作符
2.1.4 关键字/保留字
2.1.5 流程控制语句
2.1.6 对象
2.1.7 数组
2.1.8 函数
2.2 dom
2.3 bom
2.4
三、文章以外
a.关于本文内容
1、文章的内容只是对初学者快速上手而写,内容上自然不会全部都概括,文章只是将较为常用的内容写出,如果想更详细了解,我这里有一本电子书JavaScript高级程序设计:提取码:bj0z 。要用的自行带走。
b.参考文档
每一门语言都有它的参考文档,MDN中文版,MDN英文版,都给大家列出来了。中文版对于初学者确实友好,但同样的别人翻译过来的东西总会差那么点意思,所以入门以后看英文版的比较好。
c.工具库
工具库就是将原生【基础语法,上面大重点里面的内容】的东西封装起来,让你使用JavaScript更简单,更高效,(通俗地说,你要去一个地方,你可以选择走路,也可以开车去。不管你选择哪种方法,都能到达你想要去的地方。这里说的走路就是使用原生的东西,而开车就是使用工具库,使用原生确实很费劲,但你会走得更扎实,记住更多的路标(原理),深刻记住这条路怎么走,当你熟悉原生以后,再去使用工具库,你就能达到即快速到达目的,又清楚每一个路标(原理),要先学会走,才能去跑,不然最后可能就摔跟头了)。
这里跟大家分享的是两个工具库。
1、jquery中文文档,jquery英文文档, jQuery是一个JavaScript函数库。有同学可能会说这不是已经要淘汰了吗,是,在真正开发过程中,我们可能会偏向于vue,react这些更大,更高效的框架。但你连简单的jQuery上手都没有做到,你去碰更高级的东西,就是给自己找不痛快。学习是进阶式的,一步一步来嘛。
2、lodash中文文档,lodash英文文档,是封装ECAMAScript的增强库。
JavaScript和ECAMAScript还是有区别的,大家别搞混淆了。怎么去用这两个工具库,精力有限,暂时就不说了,大家可以百度。当然了,JavaScript的工具库可能还有其他的,我所了解的就这些。