javascript之基础入门

心语：我多么期望和我走向婚礼殿堂的那个人，是我青春年少时义无反顾不掺任何虚假爱上的你。

说到javascript这门语言，其实对于很多初次接触的人或许会很陌生，其实像我们平时常见的一些购物、旅游、交友的网站中不乏有javascript的影子，对于那些网站来说，不仅仅是展示我们所需要的一些物品或者信息啊啥的，还伴随着用户对于这个网站的一些操作，这些就是javascript所实现的了。

1. javascript简介

JavaScript（简称“JS”） 是一种具有函数优先的轻量级，解释型或即时编译型的编程语言。虽然它是作为开发Web页面的脚本语言而出名，但是它也被用到了很多非浏览器环境中，JavaScript 基于原型编程、多范式的动态脚本语言，并且支持面向对象、命令式、声明式、函数式编程范式。
JavaScript在1995年由Netscape公司的Brendan Eich，在网景导航者浏览器上首次设计实现而成。因为Netscape与Sun合作，Netscape管理层希望它外观看起来像Java，因此取名为JavaScript。

2.javascript的用途

我们都知道单纯的HTML页面是静态的（只供浏览），而JavaScript的出现，把静态的页面转换成支持用户交互并响应相应事件的动态页面。

3.javascript的特点

• 脚本语言。JavaScript是一种解释型的脚本语言，C、C++等语言先编译后执行，而JavaScript是在程序的运行过程中逐行进行解释。
• 基于对象。JavaScript是一种基于对象的脚本语言，它不仅可以创建对象，也能使用现有的对象。
• 弱类型。JavaScript语言中采用的是弱类型的变量类型，对使用的数据类型未做出严格的要求，是基于Java基本语句和控制的脚本语言，其设计简单紧凑。
• 动态性。JavaScript是一种采用事件驱动的脚本语言，它不需要经过Web服务器就可以对用户的输入做出响应。在访问一个网页时，鼠标在网页中进行鼠标点击或上下移、窗口移动等操作JavaScript都可直接对这些事件给出相应的响应。
• 跨平台性。JavaScript脚本语言不依赖于操作系统，仅需要浏览器的支持。因此一个JavaScript脚本在编写后可以带到任意机器上使用，前提是机器上的浏览器支 持JavaScript脚本语言，JavaScript已被大多数的浏览器所支持。

4.javascript的组成部分

• ECMAScript
  ECMAScript规定了语言的组成部分，具体包括语法、类型、语言、关键字、保留字、操作符、对象。
• DOM
  文档对象模型,被标签包裹的那些节点，都可以称为DOM元素或者DOM节点
• BOM
  浏览器对象模型,习惯上把所有针对浏览器的JavaScript扩展算作是BOM的一部分

5.定义javascript变量

在javascript中，使用var这个关键字来定义变量

var  name = "幕筱佳"
var sex = "男"

6.JavaScript注释

在编写JavaScript代码时，我们经常要在一些关键代码旁做一下注释，这样做的好处很多。

//单行注释内容
/*多行注释内容*/

7.javascript的数据类型

javascript的数据类型包括两类，基本数据类型和复杂数据类型
数据类型：undefined，null，number，boolean，string
数据类型：object （Array、object、function）

随着javascript的不断完善，还增加了一种symbel的数据类型，这是一种在ES6 中新添加的数据类型，Symbol 本质上是一种唯一标识符，可用作对象的唯一属性名，有深入想了解的可以自行查阅相关文章。

8.javascript的变量命名规范

• 首字母必须是字母、下划线_ 或者美元符号$，其它字母可以是下划线-美元符号$、字母或者数字

  var _name="幕筱佳";   //正例
  var 45name="幕筱佳"   //反例
  

• 一般采用驼峰命名法。第一个首字母小写，后面单词的首字母需要大写‘’

var userName="幕筱佳"  // //尽量这样使用
var username="幕筱佳"  //可以用但是最好遵循规范

• 尽量要见名知意，不要使用拼音或者关键字来定义变量

var age = 18  	//正例
var nianling = 18 //反例
var return = true  //反例，因为return是关键字

9.javascript的引入方式

• 行间事件： 将javascript代码通过标签的事件属性写在标签中

<button type="button" name="" onclick="alert('ok！');"></button>

• 内嵌式：在head标签中插入script标签，然后在script标签中写JavaScript代码

<script type="text/javascript">        
    var name="幕筱佳"
    console.log(name)
</script>

• 外链式：将JavaScript代码写在一个js文件中，html文件中通过script标签来引入这个js文件

<script type="text/javascript" src="js/demo.js"></script>

10.javascript运算符

JavaScript的运算符按运算符类型可以分为以下5种：

• 算术运算符：主要是来进行 + - / * 计算的

var num1 = 10  
var num2 =20
var num3 =num1 + num2   //30  

• 比较运算符：比如像 > < >= <= !== 这些运算符就是用来比较值的

var age1 = 18
var age2 =23
age2>age1

• 赋值运算符

var str = "我是幕筱佳"
var newStr = str  //相当于将str赋值给了newStr，那么此时newStr ="我是幕筱佳"

• 逻辑运算符：&& || ！

var flag = true;
//对a进行非运算
flag  = !flag ;
console.log("flag =" +flag );   //输出结果为flag = false

• 条件运算符：条件运算符也称三木运算符,三元运算符;

	//	判断是否年满18岁
	var age = 18;
	age >=18  ?alert('你已成年'):alert('你未满18岁');

11.类型转换

• 字符串型转换为数值型
  在JavaScript中，将字符串型数据转换为数值型数据有parseInt()和parseFloat()这2种方法。

parseInt()  //将字符串型转换为整型
parseFloat()  //将字符串型转换为浮点型

• 数值型转换为字符串型
  在JavaScript中，将数值型数据（整型或浮点型）转换为字符串，都是使用toString()方法。

var id= 18
id =toString(id)   // "18"

12.流程控制

在一个程序执行的过程中，各条代码的执行顺序对程序的结果是有直接影响的。很多时候我们要通过控制代码的执行顺序来实现我们要完成的功能。javascript流程控制主要有三种结构，分别是 顺序结构、 分支结构 和 循环结构

顺序结构：顺序结构是程序中最简单、最基本的流程控制，他没有特定的语法结构，程序会按照代码的先后顺序，依次执行 ，程序中大多数的代码都是这样执行的。

在实际的开发中主要是用的还是分支结构跟循环结构

• if 语句

// 条件成立执行代码，否则什么也不做
if(条件表达式) {
	// 条件成立执行的代码语句
}

• if else 语句（双分支语句）

// 条件成立执行 if 里面代码，否则执行 else 里面的代码
if(条件表达式) {
	// 如果条件成立执行的代码语句
} else {
	// 否则执行的代码
}

• switch 语句

switch(表达式) {
	case value1: 
		// 表达式 等于 value1 时要执行的代码
		break;
	case value2: 
		// 表达式 等于 value2 时要执行的代码
		break;
	...
	default: 
		// 表达式 不等于任何一个 value 时要执行的代码
}

注意：
1.在开发过程中，表达式经常写成 变量
2.表达式 和 case 里面的值相匹配的时候是全等必须是值和数据类型一致
3.break 如果当前的case里面没有break，则不会退出switch 是继续执行下一个case

if else 跟switch 是可以相互替换，具体得根据使用场景来使用，当分支比较少时，if…else 语句的执行效率比 switch 语句高，当分支比较多时， switch 语句的执行效率比较高，而且结构更清晰

常用的循环结构有for 循环、while 循环、do while 循环

• for 循环主要用于把某些代码循环若干次，通常跟计数有关系

var num=0
for(var i =0 ;i<10; i++) {
	num+=i   //用来计算0-9的和
}

• while 语句
  可以在条件表达式为真的前提下，循环执行指定的一段代码，直到表达式不为真时结束循环。

while(条件表达式) {  //表达式为真，首先会执行循环体，为假则退出循环
	// 循环体代码
}

• do while 循环
  do…while 语句其实就是 while 语句的一个变体。改循环会先执行一次循环体，然后对条件表达式进行判断，如果条件为真，就会重复执行循环体，否则退出循环。

do {
	// 循环体
} while (条件表达式)

这里，还有两个关键字要说一下，continue 和 break
continue关键字 用于立即 跳出本次循环，继续下一次循环 （本次循环体中 continue 之后的代码就会少执行一次）
break 关键字用于 立即跳出整个循环 （循环结束）