6 javaScript基础

敲黑板():本章内容属于个人对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的工具库可能还有其他的,我所了解的就这些。

©️2020 CSDN 皮肤主题: 创作都市 设计师:CSDN官方博客 返回首页