JAVASCRIPT程序设计语言免费技术教程

JAVASCRIPT程序设计语言

H5+C3+JS 三合一全栈开发基础课

https://edu.51cto.com/course/14164.html

第一章：JS程序设计基础

一.知识点

1.1 JAVASCRIPT

1.2语言

1.3 程序设计

1.4语法格式

1.5类型判断

1.6关系运算

1.7 一元、二元、三元运算符

1.8 类型转换

二.重点

2.1 语法格式

2.2类型判断

2.3关系运算

三.课后题

四.内容：

1.1 JAVASCRIPT

最开始由网景公司（已经被微软干掉了），名字叫LiveScript。因为当时JAVA比较火，凑热点， JAVASCRIPT，保证它死不了。

特点：基于对象的程序设计语言，JAVA：面向对象。

脚本语言，可以嵌入到很多语言里面，来执行,嵌入到python，C#、asp.net，java等。

比如说：HTML，JAVASCRIPT就可以嵌入到HTML里面执行。

可以嵌入到Asp.Net（微软语言执行）、嵌入到Java里面执行、嵌入到Linux，嵌入到苹果机都可以。

优点：灵活度比较高。

缺点：不是严谨性的语言，JS5

用途：主要用在网页设计，以及现在的WEB、VR、AI的游戏之中。

1.2 语言

语言：汉语、英语、日语

计算机里面：语言：

最基础、最难的就是二进制语言：0 1代码，太难搞定。

所以，在这个基础上就设计出来了C语言、Basic语言、Pascal语言等等，都是面向机器稍微级别高一点的语言，还不太好搞定。

再升级：JAVA、C#都是面向对象的语言，属于流行趋势语言。

大前端的基础语言：核心就是JS，相当于后端程序员Java。

我们现在学习的计算机语言，给计算机进行通话的语言。

程序员就是给计算机进行交流的工程师，还得给客户交流。

只会给计算机交流，方向--》技术工程师--》技术总监--》架构师这个方向。

这俩都可以--》项目组长--》项目经理--》产品经理--》CEO--创业

吹--》产品经理--售前项目经理 市场分析师等方向

1.3 程序设计

要给计算机进行交流，也会计算机语言了，要有一定的逻辑思路，计算机更明白的逻辑思路。

进行计算机语言的思路，就是程序设计。

计算机设计思路就三个：

1.3.1：顺序结构（按照时间顺序进行的有序步骤）

​ 起床、刷牙、吃早饭、上课、吃午饭、睡觉

1.3.2：条件结构（分支结构）

​ 国庆节回家：安阳、项城、洛阳、开封等等，你家是哪里的，放假：各回各家，各找各妈。

​ 性别：男 女 ，男生去男生宿舍， 女生去女生宿舍。

1.3.3 循环结构（跑圈结构）

​ 作业没完成，跑圈，20圈。

​ 玩游戏，输了，再玩一把，又输了，国庆7天，输了7天。

1.4 语法格式：（重点）

JAVASCRIPT--》简称为JS

声明变量使用的关键字：var 它是variable的缩写，编程大师，在设计语言的时候，一般使用英文前3个字母进行缩写，代表这个英文单词，3个不够，用4个，4个不够用5个。

关键字就是计算机语言里面的特定的编码单词，级别比较高，程序员不能自定义,定义的一些符号，和关键子一样，一样则报错；出去创业，去广袤的亚非拉大地，那是我们的战场，农村包围城市。公司名：

深圳市xx税务局.税务局，工商等，官方使用的名词，代表的是官方的权力机构。观世音菩萨。

var function 等,我们不能使用，因为已经被js语言，所定义过了。

**变量：**小学的时候，学过x=3,x+6=？，x是未知数，计算机里面的变量就是相当于数学里面的未知数。

由程序猿（你进行给值，设计）

给值---》赋值

<script>
			//var 变量的使用
			//1.定义一个变量，相当于你定义一个未知数;
			//2.定义多个变量
			var name;
			var age=16;  //这个是声明变量，并且赋值;
			//2.给变量赋值
			name="董超人";
			//3.输出;+-->连接的作用;
			//双引号的这个叫字符串;
			document.write("姓名："+name+"<br/>");
			document.write("年龄"+age);
		</script>

变量的注意事项：

<script>
			//变量的定义;
			//变量名以字母 _ $ 打头;
			//老外大师级别的人物定义。￥
			//var string; //1.变量名和关键字一样了
			var a222=222;//2.变量名不能是数字打头;
			document.write(a222);
			var $name="李四2";
			var _Name="李斯222";//3.区分大小写;
			document.write($name);
			document.write(_Name);
			//var a,b;
			var a=b=10;
			document.write(a+","+b);
</script>

变量的类型判断：

<script>
			//现实世界，体重：多少斤？都有单位；米 斤 等都是
			//类型：长度 重量  容量等
			//证明：字符串类型可以是双引号，也可以单引号引起来的内容
			var name="后羿";
			document.write(typeof name+"<br/>");
			var address='月宫';
			document.write(typeof address+"<br/>");
			var age=88; //number：数字
			document.write(typeof age+"<br/>");
			var birth=new Date();//object:对象
			document.write(typeof birth+"<br/>");
			var tt;//没有赋值，出来的是undefined 
			document.write(typeof tt);
			//还有一个类型是null：空
			//总结：js类型：字符串 String
			//数字：Number,对象：object；没有定义：undefined
			//空:null
			var t=new Object();
			t.p=null;
			document.write(t.p);
		</script>

变量的关系运算:

比大小 是否相等 大于小于

//单等号，用来赋值；双等号用来比较是否相等.
			var name1="朱梦瑶";
			var name2="朱梦耀";
			document.write((name1==name2)+"<br/>"); //false：假
			var age1=18;
			var age2=18;
			document.write((age1==age1)+"<br/>");//true:真，正确;
			var chang1=250;
			var chang2=250;//只要满足小于或等于就可以
			document.write(chang1<=chang2);

复杂的逻辑运算符：

<script>
//			&&:7上面的符号,Sfhit+7
//&&:运算符,特征,多个表达式都为true的时候,结果才为true
			var result1=250<30 && 40<20 && 5==2;
			document.write(result1);
//||:运算符;只要一个为true，结果就为true。
			var result2=250>30 || 40<20;
			document.write(result2);
//!:运算符,取反运算符;
			var result3=!true;
			document.write(result3);
		</script>

总结：与：相当于串联电路；或：相等于并联电路； 非：

最简单的计算器，石器时代：

<script>
			var num1=9,num2=3;
			var he=num1+num2;
			var cha=num1-num2;
			var ji=num1*num2;
			var shang=num1/num2;
			var yu=num1%num2;//求余数
			document.writh("和："+he+"，差："+cha+"<br/>");
			document.write("积："+ji+",商："+shang+"<br/>");
			document.write("余数："+yu);
</script>

1.7：一元、二元、三元运算符

这里元：元素，表示有几个元素的元素参与运算；

二元：+ - * / %

a+b a-b a*b a/b a%b

一元：++ --

翻译一下：自增 自减

一元运算符：

<script>
			var x=1;
//	1.0		var y=x+1;
//			document.write(y);
	//计算机它是可以执行?
	//赋值：从右到左；
//2.0			x=x+1;
//			document.write("x="+x);
//3.0;x++= 等价于x=x+1
			//x++;
			--x;//x=x-1
			document.write("x:"+x);
		</script>		

自增和自减

<script>
			//++x和x++的区别？
//			var x=1;
//			var y=++x; 先加1，再赋值
//			document.write("x="+x);
//			document.write("y="+y);

			var x=1;
			var y=x++; //先赋值，再加1
			document.write("x="+x);
			document.write(",y="+y);
		</script>

赋值运算符

运算符	例子	等同于
=	x = y	x = y
+=	x += y	x = x + y
-=	x -= y	x = x - y
*=	x *= y	x = x * y
/=	x /= y	x = x / y
%=	x %= y	x = x % y

位运算符

指 是数字按bit位进行运算；一个字母、数字，有对应的1个字节，1个字节占8个bit位。

运算符	描述	例子	等同于	结果	十进制
&	与	5 & 1	0101 & 0001	0001	1
|	或	5 | 1	0101 | 0001	0101	5
~	非	~ 5	~0101	1010	10
^	异或	5 ^ 1	0101 ^ 0001	0100	4
<<	零填充左位移	5 << 1	0101 << 1	1010	10
>>	有符号右位移	5 >> 1	0101 >> 1	0010	2
>>>	0填充右位移,无符号数移	5 >>> 1	0101 >>> 1	0010	2

JavaScript 将数字存储为 64 位浮点数，但所有按位运算都以 32 位二进制数执行。

在执行位运算之前，JavaScript 将数字转换为 32 位有符号整数。

执行按位操作后，结果将转换回 64 位 JavaScript 数。

上面的例子使用 4 位无符号二进制数。所以 ~ 5 返回 10。

由于 JavaScript 使用 32 位有符号整数，JavaScript 将返回 -6。

00000000000000000000000000000101 (5)

11111111111111111111111111111010 (~5 = -6)

有符号整数使用最左边的位作为减号。

运算符优先级

运算符	结合性	优先级
.、[ ]、( )	从左到右	高 ↑ | | | | | | | | | | | 低
++、--、-、！、new、typeof	从右到左
*、/、%	从左到右
+、-	从左到右
＜、＜=、＞、＞=、in、instanceof	从左到右
==、!=、===、!==	从左到右
&&	从左到右
II	从左到右
?:	从右到左
=、*=、/=、％=、+=、-=、&=、^=、!=	从右到左
,	从左到右

1.8类型转换：

Number(原始类型),parseInt(原始类型) parseFloat()

可以计算器，结合输入框获取值，做这种操作。

面试题：

​ 某个字符串'123',最快的转换成数字类型的方式:

'123'-0

1.9 关键字

JavaScript 可以在 HTML 外部使用。它可在许多其他应用程序中作为编程语言使用。

在 HTML 中，您必须（为了可移植性，您也应该这么做）避免使用 HTML 和 Windows 对象和属性的名称作为 Javascript 的变量及函数名：
alert 	all 	anchor 	anchors 	area
assign 	blur 	button 	checkbox 	clearInterval
clearTimeout 	clientInformation 	close 	closed 	confirm
constructor 	crypto 	decodeURI 	decodeURIComponent 	defaultStatus
document 	element 	elements 	embed 	embeds
encodeURI 	encodeURIComponent 	escape 	event 	fileUpload
focus 	form 	forms 	frame 	innerHeight
innerWidth 	layer 	layers 	link 	location
mimeTypes 	navigate 	navigator 	frames 	frameRate
hidden 	history 	image 	images 	offscreenBuffering
open 	opener 	option 	outerHeight 	outerWidth
packages 	pageXOffset 	pageYOffset 	parent 	parseFloat
parseInt 	password 	pkcs11 	plugin 	prompt
propertyIsEnum 	radio 	reset 	screenX 	screenY
scroll 	secure 	select 	self 	setInterval
setTimeout 	status 	submit 	taint 	text
textarea 	top 	unescape 	untaint 	window

五.课后题

课后作业

空格处理：

<script>
			//HTML多少个空格，都认为一个;方法1
//			document.write("a&nbsp;&nbsp;&nbsp;b&nbsp;c");
				//空白处理，保持原有格式方法2
			document.write("AA<span style='white-space:pre'>a b   c</style> BBB")
		</script>

升级的计算器：

<script>
			//需求提升，希望任意输入多个数？
			//IPO:input(输入) process(处理) output(输出)
			//1.声明一个变量，并使用一个window.prompt()系统函数来接受用户的输入
			//+可以当加法操作符，也可以起到连接作用？
			//+:连接作用在字符串的时候，字符串连接其它类型，都转为字符串类型;
			var num1=parseInt(window.prompt("请输入数字1："));
			var num2=Number(window.prompt("请输入数字1："));
			document.write(typeof num1);
			var he,cha,ji,shang,yu;//一次性声明多个变量
			he=num1+num2;
			cha=num1-num2;
			ji=num1*num2;
			shang=num1/num2;
			yu=num1%num2;
			
			document.write("<br/>和："+he+"<br/>");
			document.write("差："+cha+"<br/>");
			//小数后取两位小数：数字.toFixed(待截取位数)
			document.write("商："+shang.toFixed(3)+"<br/>");
			document.write("积："+ji+"<br/>");
			document.write("余数："+yu+"<br/>");
</script>

第二章：分支结构

所有的语言三种结构：顺序、分支、循环;

一.知识点：

1.if分支语句

2.switch 分支语句

二.重点：

都是，要求大家熟练掌握

三.难点：

多重分支

switch case匹配

四.内容：

4.1 if 分支语句

4.1.1语法格式：

​ if(条件){ 当条件为true,执行下面花括号里面的代码.

​ }

翻译：if（如果）条件为真，则执行{里面的代码}

var name=window.prompt("请输入您的英雄的名：");
			if(name=="百里玄策"){
				document.write("刺客，敏捷很高，跑的快");
			}

4.1.2语法格式：

if(条件){

​ //真的代码;true

}else{ else是否则 其他false

​ //假的代码

}

在js里面有三个弹框，这三个弹框，alert('信息框');

confirm('询问语句?')

propmpt('信息'):返回

var name=window.prompt("请输入您的英雄的名：");
			if(name=="百里玄策"){
				document.write(name+":刺客，敏捷很高，跑的快");
			}else{
				document.write("您输入的不是百里玄策是"+name);
			}