JavaScript基础学习第一天

JavaScript

JavaScript作用

1. 表单动态验证（密码强度检测）
2. 网页特效
3. 服务端开发（Node.js）
4. 桌面开发
5. App
6. 控制硬件-物联网
7. 游戏开发（cocos2d-js）

Html/Css/Js的关系

• Html决定网页结构和内容，相当于人的身体
• CSS决定网页呈现给用户的模样，相当于给人穿衣服，化妆
• JS脚本语言实习业务逻辑和页面控制，相当于人的各种动作

浏览器执行JS

• 渲染引擎：用来解析HTML和CSS，俗称内核。比如chrome浏览器的blink，老版本的webkit
• JS引擎：也称为JS解释器，用来读取网页中的Javascript代码，对其处理后运行，比如chrome浏览器的V8

浏览器本身并不会执行JS代码，而是通过内置的JavaScript引擎（解释器）来执行JS代码。JS引擎执行代码时逐行解释每一句源码（转换 为机器语言），然后由计算机去执行，所以JavaScript语言归为脚本语言，会逐行解释执行。

JS组成

1. ECMAScript | JavaScript语法
2. DOM | 页面文档对象模型
3. BOM | 浏览器对象模型

ECMAScript

规定了JS的编程语法和基础技术核心，是所有浏览器厂商共同遵守的一套JS语法工业便准。

---

JS三种书写位置：行内，内嵌，外部

在HTML中推荐使用的是双引号，JS中推荐使用单引号

注释

//	单行注释	ctrl+/
/*
	多行注释	shift+alt+a
*/

JavaScript输入输出语句

方法	说明	归属
alert(msg)	浏览器弹出警示框	浏览器
console.log(msg)	浏览器控制台打印输出信息	浏览器
prompt(info)	浏览器弹出输入框，用户可以输入	浏览器

//	这是一个输入框
prompt('请输入您的年龄：');
//	alert弹出警示框，输出的，展示给用户的
alert('计算的结果是');
//	console控制台输出，给程序员看的
console.log('我是程序员');

---

变量 ------》 一个装东西的盒子（容器）

变量是程序在内存中申请的一块用来存放数据的空间。

变量的使用

1. 声明变量

   var age; //	声明变量
   age = 10;//	赋值
   console.log(age);
   

2. 赋值

   var myName = 'Pink老师';
   console.log(myName);
   

3. 变量的使用

   定义值输出：

   var myName = '旗木卡卡西';
   var address = '火影村';
   var age = 30;
   var email = '140@qq.com';
   var gz = 2000;
   console.log(myName);
   console.log(address);
   console.log(age);
   console.log(email);
   console.log(gz);
   

   //	用户输入姓名 存储到一个myName的变量中
   var myName = prompt('请输入你的名字：');
   alert(myName);
   

变量的扩展

1. 更新变量

   • 一个变量被重新赋值后，它原有的值就会被覆盖，变量值将会以最后一次赋的值为准。

2. 同时声明多个变量

   var age = 30,
       address = '北京',
       gz = 2000;
   

3. 声明的特殊情况

   var sex;
   console.log(sex); // undefined
   console.log(tex); // not defined
   

---

变量的命名规范

• 由字母，下划线，美元符号开头
• 严格区分大小写
• 不能数字开头
• 不能是关键字和保留字
• 变量名必有意义
• 遵守驼峰命名法，首字母小写，后面的单词首字母大写

---

数据类型

在计算机中，不同的数据所需占用的存储空间是不同的，为了便于把数据分成所需内存大小不同的数据，充分利用存储空间，雨是定义了不同的数据类型。

变量的数据类型

//	int num = 10;  java
var num ; //	不确定num是那种数据类型
var std = 10；
//	js的变量数据类型是自由程序在运行过程中，根绝等号右边的值的数据类型来判断的。
//js 是动态语言，变量的数据类型是可以变化的。
var x = 10;	// x是数字型
x = 'pink'; // x是字符型

数据类型的分类

• 简单数据类型（Number,String,Boolean,Undefined,Null）

  • Number 数字型

    • 二进制，八进制，十进制，十六进制

    • 在JS中八进制前面加0，十六进制前面加0x

      console.log(Number.MAX_VALUE); //最大值
      console.log(Number.MIN_VALUE); //最小值
      console.log(Number.MAX_VALUE*2); // Infinity 无穷大
      console.log(-Number.MAX_VALUE*2); //-Infinity 无穷小
      console.log('pinl老师' - 100); //NaN 非数字
      

      isNaN()方法判断是否为数字：

      console.log(isNaN(12)); //false
      console.log(isNaN('PINK老师')); //true
      

    • 字符串型–String

      嵌套字符串（外单内双，外双内单）

      var str = "我是一个'高夫刷'的程序员"
      

    • 转义字符 （写在引号里面）

      /*  
      	\n 换行
      	\\ 斜杠
          \' ’单引号
          \" ”双引号
          \tab tab缩进
          \b 空格
      */
      

  • Boolean 布尔型

    • 参与加法（true=1，false=0）

  • String 字符型

    • 字符串长度（str.length）
    • 字符串拼接（“+”）—数值相加，字符相连

  • Undefined

    • 声明变量，未赋值，未定义数据类型
    • 参与字符串加法成字符串，参数数字加法是NaN.

  • Null

    • 空值
    • 参与字符串加法成字符串，参与数值作“0”

• 复杂数据类型（object）

• 获取数据类型（typeof XX）

  • tupeof null // object

---

字面量

字面量是在源代码中一个固定值的表示法，通俗来说，就是字面量表示如何表达这个值。

• 数字字面量
• 字符串字面量
• 布尔字面量

---

数据类型转换

方式	说明	案例
toString()	转成字符串	var num = 1; alert(num.toString());
String()强制转换	转成字符串	var num = 1;alert(String(num));
加号拼接字符串	和字符串拼接的结果都是字符串	var num = 1;alert(num+‘我是字符串’);

转换成为字符串型：

var num = 10;
// 1.利用toString()
var str = num.toString();
console.log(str); // 10
console.log(typeof str); // String
// 2.利用String()
console.log(String(num)); // 10
// 3.利用字符串拼接(隐式转换)
console.log(num + ''); // 10

转换成数字型：

// parseInt 字符转整数
var age = '请输入您的年龄：';
console.log(parseInt(age)); //18 数字型
console.log(parseInt('3.14')); //3 取整
console.log(parseInt('3.99')); //3 取整
console.log(parseInt('20px')); //120 去掉px这个单位
console.log(parsrINt('rem120px')); //NaN
// parseFloat 字符转浮点数
console.log('2.14'); // 2.14
console.log(parseFloat('20px')); //120 去掉px这个单位
console.log(parsrFloat('rem120px')); //NaN
// Number 
var str = '123';
console.log(Number(str)); //123
console.log(Number('12')); //12
// 利用算数运算符
console.log('12' - 0); //12
console.log('123' - '120') //3

转换成布尔型

// Boolean()
console.log(Boolean('')); //false
console.log(Boolean(0)); //false
console.log(Boolean(NaN)); //false
console.log(Boolean(null)); //false
console.log(Boolean(undefined)); //false
console.log(Boolean('小白')); //true
console.log(Boolean(12)); //true

注意标识符，关键字，保留字

---

运算符

• 算数运算符

  +加 -减 *乘 /除 %取余

  表达式和返回值

• 递增和递减运算符

• 比较运算符

  • = 赋值 把右边给左边
  • == 判断 判断两边值是否相等（隐式转换）
  • === 全等 判断两边的值和数据类型是否完全相同

• 逻辑运算符

  • 短路运算（逻辑中断）：

    // 如果表达式1结果为真，则返回表达式2.如果表达式为假，则返回表达式1
    console.log(123 && 456); //456
    console.log(0 && 465); // 0
    // 表达式1为真，则返回表达式1.如果表达式1为假，则返回返回表达式2
    console.log(123 || 456); // 123
    console.log(123 || 456 || 456+123); // 123
    console.log(0 || 456 || 123+456);// 456
    

• 赋值运算符

---