前端基础——JavaScript(一)

一.JavaScript基础内容

1.初识JavaScript

(一)JavaScript是什么
1.JavaScript是世界上最流行的语言之一，是一种运行在客户端的脚本语言(Script是脚本的意思)。
2.脚本语言：不需要编译，运行过程中由js解释器(js引擎)逐行来进行解释并执行。
3.现在也可以基于Nodejs技术进行服务器端编程。
(二)JavaScript的作用
1.表单动态校验(密码强度检测)(JS产生最初的目的)网页特效
2.服务端开发(Node.js)
3.桌面程序(Electron)
4.App(Cordova)
5.控制硬件-物联网(Ruff)
6.游戏开发(cocos2d-js)
(三)JS的组成
1.ECMAScript
ECMAScript是由ECMA国际(原欧洲计算机制造商协会)进行标准化的一门编程语言，这种语言在万维网上应用广泛，它往往被称为JavaScript或JScript，但实际上后两者是ECMAScript语言的实现和扩展。
2.DOM——文档对象模型
文档对象模型(DocumentObject Model，简称DOM)，是W3C组织推荐的处理可扩展标记语言的标准编程接口。通过DOM提供的接口可以对页面上的各种元素进行操作(大小、位置、颜色等)。
3.BOM——浏览器对象模型
BOM (Browser Object Model，简称BOM)是指浏览器对象模型，它提供了独立于内容的、可以与浏览器窗口进行互动的对象结构。通过BOM可以操作浏览器窗口，比如弹出框、控制浏览器跳转、获取分辨率等。
(四)JS初体验
JS有3种书写位置，分别为行内、内嵌和外部。
1.行内式JS

<input type="button"value="点我试试”οnclick="alert('Hello World')"/>

•可以将单行或少量JS 代码写在HTML标签的事件属性中(以on开头的属性)，如：onclick。
•注意单双引号的使用：在HTML中我们推荐使用双引号，JS中我们推荐使用单引号。
•可读性差，在html中编写JS大量代码时，不方便阅读。
•引号易错，引号多层嵌套匹配时，非常容易弄混。
•特殊情况下使用。
2.内嵌JS

<script>
alert('HelloWorld~!');
</script>

•可以将多行JS代码写到

<script src="my.js"><script>

•利于HTML页面代码结构化，把大段JS代码独立到HTML页面之外，既美观，也方便文件级别的复用。
•引用外部 JS文件的 script标签中间不可以写代码。
•适合于JS 代码量比较大的情况。

2.JavaScript输入输出语句

3.变量

(一)变量的概述
变量是用于存放数据的容器，我们通过改变变量名获取数据，甚至数据可以修改。
(二)变量的使用
1.声明变量

// 声明变量
var age; //声明一个名称为age的变量

•var是一个JS关键字，用来声明变量(variable变量的意思)。使用该关键字声明变量后，计算机会自动为变量分配内存空间，不需要程序员管。
•age是程序员定义的变量名，我们要通过变量名来访问内存中分配的空间。
2.赋值

age = 10；//给age 这个变量赋值为10

•=用来把右边的值赋给左边的变量空间中 此处代表赋值的意思。
•变量值是程序员保存到变量空间里的值。
3.变量的初始化

var age = 18; //声明变量同时赋值为18

(三)变量语法扩充
1.更新变量
一个变量被重新复赋值后，它原有的值就会被覆盖，变量值将以最后一次赋的值为准。

var age - 18;
age = 81; //最后的结果就是81因为18 被覆盖掉了

2.同时声明多个变量
同时声明多个变量时，只需要写一个var，多个变量名之间使用英文逗号隔开。

var age = 10,name ='zs',sex= 2;

3.声明变量特殊情况

4.变量命名规范
•由字母(A-Za-z)、数字(0-9)、下划线()、美元符号($)组成，如：usrAge,num01, name。
•严格区分大小写。varapp;和var App;是两个变量。
•不能 以数字开头。18age 是错误的。
•不能是关键字、保留字。例如：var、for、while。
•变量名必须有意义。MMD BBD nl一age。
•遵守驼峰命名法。首字母小写，后面单词的首字母需要大写。myFirstName。
•推荐翻译网站：有道 爱词霸。

4.数据类型简介

(一)为什么需要数据类型
在计算机中，不同的数据所需占用的存储空间是不同的，为了便于把数据分成所需内存大小不同的数据，充分利用存储空间，于是定义了不同的数据类型。简单来说，数据类型就是数据的类别型号。比如姓名“张三”，年龄18这些数据的类型是不一样的。
(二)变量的数据类型
变量是用来存储值的所在处，它们有名字和数据类型。变量的数据类型决定了如何将代表这些值的位存储到计算机的内存中。JavaScript是一种弱类型或者说动态语言。这意味着不用提前声明变量的类型，在程序运行过程中，类型会被自动确定。

var age = 10; //这是一个数字型
var areYouok='是的'；//这是一个字符串

在代码运行时，变量的数据类型是由JS引擎根据=右边变量值的数据类型来判断的，运行完毕之后，变量就确定了数据类型。
(三)简单数据类型

1.数字型Number
JavaScript数字类型既可以用来保存整数值，也可以保存小数(浮点数)。

var age = 21; // 整数
var Age = 21.3747；//小数

a.数字型进制：
最常见的进制有二进制、八进制、十进制、十六进制。

//1.八进制数字序列范围：0~7
var num1 = 07; //对应十进制的7
var num2 = 019； //对应十进制的19var num3 = 08; //对应十进制的8
//2.十六进制数字序列范围：0~9以及A~Fvar num =0xA;

b.数字型的三个特殊值

alert(Infinity);// Infinity
alert(-Infinity)；// -Infinity +
alert(NaN) ; 1/NaN

•Infinity，代表无穷大，大于任何数值。
•-Infinity，代表无穷小，小于任何数值。
•NaN，Nota number，代表一个非数值。
c.isNaN()
用来判断一个变量是否为非数字类型，返回true或者false。

2.字符串型String
字符串型可以是引号中的任意文本，其语法为双引号””和单引号”。

var strMsg="我爱北京天安门~"；//使用双引号表示字符串
var strMsg2='我爱吃猪蹄~'； //使用单引号表示字符串
//常见错误
var strMsg3=我爱大肘子； // 报错，没使用引号，会被认为是js代码，但js没有这些语法

因为 HTML标签里面的属性使用的是双引号JS这里我们更推荐使用单引号。
a.字符串引号嵌套
JS可以用单引号嵌套双引号，或者用双引号嵌套单引号(外双内单，外单内双)。

var strMsg='我是"高帅富"程序猿'；//可以用·包含””
var strMsg2="我是'高帅富'程序猿"；//也可以用““包含”
// 常见错误
var badguotes - "what on earth?"；//报错，不能单双引号搭配

b.字符串转义符

c.字符串长度
字符串是由若干字符组成的，这些字符的数量就是字符串的长度。通过字符串的length属性可以获取整个字符串的长度。

var strMsg="我是帅气多金的程序猿！"；
alert(strMsg.length)；// 显示 11

d.字符串拼接
•多个字符串之间可以使用+进行拼接，其拼接方式为字符串+任何类型=拼接之后的新字符串。
•拼接前会把与字符串相加的任何类型转成字符串，再拼接成一个新的字符串。

//1.1 字符串"相加”
alert('hello'+''+ 'world'); // hello world
//1.2 数值字符串“相加”
alert('100'+'100')；// 100100
//1.3 数值字符串+数值
alert('11'+ 12)； // 1112

3.布尔型Boolean
布尔类型有两个值：true和false，其中true代表真，false代表假。
4.Undefined和Null
一个声明后没有被赋值的变量会有一个默认值undefined(如果进行相连或者相加时，注意结果)。

var variable;
console.log(variable); // undefined
console.log('你好’+variable)；//你好undefined
console.log(11 + variable); // NaN
console.log(true + variable); //NaN

一个声明变量给null值，里面存的值为空(学习对象时，我们继续研究null)。

var vari = null;
console.log('你好’+vari)；//你好nu1l
console.log(11 + vari); // 11
console.log(true + vari); // 1