Cristiano前端学习之JavaScript语言基础

一、学习路线
在这里插入图片描述
二、JavaScript简介

JavaScript是一种脚本语言，可以直接嵌入HTML页面之中
JavaScript特点：解释性、嵌套在HTML中、弱数据类型、跨平台、基于对象、基于事件驱动

三、JavaScript使用形式

3.1 行内JavaScript脚本
- 在HTML中嵌入JavaScript脚本

		<body>
		    <h1>校园评选活动</h1>
		    <img src="images/girl1.jpg" onclick="alert('你选择了一号种子选手')"/>
		    <img src="images/girl2.jpg" onclick="alert('你选择了二号种子选手')"/>
		    <img src="images/girl3.jpg" onclick="alert('你选择了三号种子选手')"/>  
		    <a href="javascript:alert('请等待评选结果，谢谢');">查看评选结果</a>  
		</body>

3.2 内部JavaScript脚本
- 将这些JavaScript脚本提取出来统一放在<script></script>标签中
- <script>标签位于<head>或<body>标签内

	<head>
	    <script type="text/javascript">
			alert("head中的JavaScript");
	    </script>
	</head>
	 <body>
	    <script type="text/javascript">
			alert("body中的JavaScript");
	    </script> 
	</body>

3.3 外部JavaScript脚本
- 将JavaScript脚本以单独文件进行存放，实现JavaScript脚本与HTML代码彻底进行分离
- 在HTML页面中通过

// test.js文件
alert("外部JavaScript脚本，导入成功。");
 
 //html文件
<script type="text/javascript" src="js/test.js"></script>

四、基本语法

4.1 标识符、关键字
4.2 数据类型
- 在JavaScript中，变量的类型可以改变，但某一时刻的类型是确定的。
- 常见的数据类型有String、Boolean、Array、Number和Undefinded等类型。
4.3 变量
- 4.3.1 变量的定义
  - 在使用变量之前，可以通过关键字var对变量进行声明
  - 语法： var 变量1[, 变量2, ...];
  - var是定义变量的关键字
  - 多个变量可以一起定义，变量名之间用逗号隔开
- 4.3.2 变量的类型
  - JavaScript中的变量是弱数据类型
  - 在声明变量时不需要指明变量的数据类型，通过关键字var进行声明；
  - 在变量的使用过程中，变量的类型可以动态改变，类型由所赋值的类型来确定。
  - 通过typeof运算符或typeof()函数来获得变量的当前数据类型。
- 4.3.3 变量的类型作用域
  - （一）全局变量：全局变量是指定义在函数之外的变量或者未定义而直接使用的变量
    - 注：未定义的变量直接赋值时，浏览器会将变量定义为全局变量，而未定义的变量直接使用时，会抛出Undefined错误
  - （二）局部变量：局部变量是指在函数内部声明变量，仅对当前函数体有效。

五、运算符

5.1 赋值运算符： =
5.2 算术运算符：+ - * / % ++ –
5.3 比较运算符：> >= < <= != == !== ===
- = =与= = =的区别在于：
  - = = 支持自动类型转换，只要前后两个变量的值相同就返回true，而忽略数据类型的比较
  - = = = 需要两个变量的值相同并且数据类型一致时才返回true
5.4 逻辑运算符：&& || ！
5.5 三元运算符：expression ? value1 : value2;

六、流程控制

6.1 分支结构
- 6.1.1 if语句
- 6.1.2 switch语句
6.2 循环结构
- 6.2.1 while 循环
- 6.2.2 do while 循环
- 6.2.3 for 循环
- 6.2.4 for in 循环
  - for in循环是JavaScript提供的一种特殊循环；可以对字符串、数组、对象集合、对象属性等进行遍历

		for (property in object){
			statement;
		}
		1、object表示字符串、数组、对象、对象集合
		2、property表示对象的属性名或元素的下标索引
		3、获取对象（或数组）中的属性（或元素）时，可以使用object[property]格式

6.3 转移语句
- 6.3.1 break 语句
- 6.3.2 continue 语句
- 6.3.3 return 语句
- 6.3.4 with 语句

七、函数

函数是一组延迟动作集的定义，可以通过事件触发或在其他脚本中进行调用
在JavaScript中，函数可分为预定义函数和用户自定义函数。
7.1 预定义函数
- 7.1.1 parseInt() 函数
  - parseInt(string,[radix])
  - parseInt()函数用于从解析字符串，从中返回一个整数
  - 当字符串中存在除了数字、符号、小数点和指数符号以外的字符时，parseInt()函数就停止转换，返回已有的结果
  - 当第一个字符就不能转换时，函数将返回“NaN”（即Not a Number，不是一个数字）。
- 7.1.2 parsefloat()函数
  - parseFloat(string)
  - parseFloat()函数用于解析字符串，从中返回一个浮点数。
- 7.1.3 isNaN() 函数
  - isNaN(value)
  - isNaN()函数用于检查其参数是否是一个非数字值。
- 7.1.4 eval()函数
  - eval(string)
  - val()函数用于将JavaScript中的字符串作为脚本代码来执行
  - 当参数string 时一个表达式时，eval()函数将执行表达式，并返回计算结果
- 7.1.5 对话框
  - alert()函数用于弹出一个提示对话框
  - confirm()函数用于弹出一个确认对话框，在确认对话框中，点击“确定”时返回true，点击“取消”时返回false
  - prompt()用于接收用户输入的输入框
7.2 自定义函数
- function 是定义函数的关键字
- funcNam 表示函数的名称
- parameters 参数可选，当提供多个参数是参数之间使用逗号隔开
- statements 表示函数体，实现函数功能的脚本
- 7.2.1 命名函数
  - 函数是由函数定义和函数调用两部分组成。在使用函数时，应先定义函数，然后再进行调用。

		function funcName([parameters]){
			statementes;
			[return expression];
		}

7.2.2 匿名函数
- 匿名函数，是网页前端设计者经常使用的一种函数形式，通过表达式的形式来定义一个函数。
- 匿名函数的定义格式与命名函数基本相同，只是没有提供函数的名称，且在函数结束位置以分号（；）结束。
- 由于没有函数名字，所以需要使用变量对匿名函数进行接收，方便后面函数的调用。

		function ([parameters]){
			statementes;
			[return expression];
		};

7.2.3 对象函数
- JavaScript还提供了Function类，用于定义函数
- Function是用来定义函数的关键字，首字母必须大写
- var funcName=new Function([parameters],statements;);
7.2.4 自调用函数
- 函数本身不会自动执行，只有调用时才会被执行。
- 在JavaScript中，提供了一种自调用函数，将函数的定义与调用一并实现

		(function([parameters]){
			statementes;
			[return 表达式];
		}) ([params]);

Cristiano前端学习之JavaScript语言基础

Guess you like