JavaScript学习day01

笔记内容来自javascript基础

JS的概念

HTML/CSS标记语言——描述类语言

HTML决定网页结构和内容（决定看到什么），相当于人的身体
CSS决定网页呈现给用户的模样（决定好不好看），相当于给人穿衣服、化妆

JS脚本语言——编程类语言

实现业务逻辑和页面控制（决定功能），相当于人的各种动作
JavaScript是一种运行在客户端的脚本语言（Script是脚本的意思）

JS的作用

• 表单动态校验（密码强度检测）
• 网页特效
• 服务端开发（Node.js）
• 桌面程序（Electron）
• APP（Cordova）
• 控制硬件——物联网（Ruff）
• 游戏开发（cocos2d-js）

浏览器执行JS简介

浏览器分成两部分：

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

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

JS的组成

ECMAScript:规定了JS编程语法和基础核心知识
DOM：文档对象模型
BOM：浏览器对象模型

HTML\ <script> 标签

<script> 标签用于定义客户端脚本，比如 JavaScript。
<script> 元素既可包含脚本语句，也可通过 src 属性指向外部脚本文件。
JavaScript 最常用于图片操作、表单验证以及内容动态更新。

JS书写位置

my.js

// js代码使用单引号
alert('第三种书写位置');

JS注释

单行注释：CTRL+/
多行注释：SHIFT+ALT+A

JS输入输出语句

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

JS变量

//声明变量
var age;//声明一个名称为age的变量
age = 10;//给age这个变量赋值为10
//变量的初始化
var myname = 'echo';

将用户输入内容存入变量

<script>    
	var myname = prompt('请输入姓名');    
	alert(myname);
</Script>

<script>
//声明多个变量
    var age=18,        
    	address='火影村',       
    	gz=2000;
    var sex;//默认undefined
 //不声明直接赋值使用,不提倡
    qq = 10;
</Script>    

变量命名规则

• 由大小写字母，数字，下划线和￥组成
• 严格区分大小写
• 不能是关键字、保留字
• 不能以数字开头
• 遵循驼峰命名法

数据类型

js的变量的数据类型，根据=右边变量值的数据类型来判断
js是动态语言，变量的数据类型可以变化
JS把数据类型分为两类：

1. 简单数据类型：

• Number 默认0 前面加0表示八进制，前面加0x表示十六进制

<script>    
	var num1 = 010;//0开头，八进制    
	var num2 = 0xAF;//十六进制    
	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（'eho'-100）;//NaN 非数字
	//isNaN判断是否非数字    
	console.log(isNaN(12));//false    		 
	console.log(isNaN('echo'));//true   
</Script>

• Boolean 默认false
• String 默认“” 单引号双引号都可 嵌套（外双内单，外单内双）
  \n 换行
  \\ 斜杠\
  \’ 单引号
  \" 双引号
  \t缩进
  \b 空格
• Undefined
• Null
  查看数据类型typeof

var str = '我是\necho';    
console.log(typeof str);//string

把数字型转换为字符串型的三种方式

var num = 10;    
var str = num.toString();    
console.log(String(num));//强制转换    
console.log(num+'');//隐式转换

字符串转为数字类型

// 1. parseInt(变量)  可以把字符型转换为数字型，得到的是整数    
console.log(parseInt('3.14'));//3    
console.log(parseInt('120px'));//120,会去掉px单位    
console.log(parseInt('rem12px'));//NaN    
// 2.parseFloat(变量) 可以把字符型转换为数字型，得到的是小数    
console.log(parseFloat('3.15'));//3.15    
// 3. 利用Number(变量)    
var str = '123';    
console.log(Number(str));//123    
// 4. 利用算术运算    
console.log('12'-0);//12    
console.log('123'-'120');//3

转换为布尔型Boolean()
代表空、否定的值会被转换成false，如’’、0、NaN、undefined、null
其余的都会被转换为true

2. 复杂数据类型

编译型语言与解释型语言

运算符

与java语言不同的地方：
==：判等号（会转型）
>=、<=都有隐式转换
===、!==:全等，要求值和数据类型都一致 switch-case里面的表达式判断就是全等匹配

console.log(18=='18');//true  会转型 字符串型转换为数字型   
console.log(18==='18');//false 数值和类型都要一样    
console.log(18!=='18');//true

逻辑与、或短路运算（常用）

逻辑与： 表达式1结果为真，则返回表达式2，反之直接返回表达式1
逻辑或：表达式1结果为真，返回表达式1，反之则返回表达式2

console.log(123 && 456);//456   
console.log(0 && 123);//0
console.log(0 && 123 && 5+7 && 4*78);//0
console.log(123|| 456);//123   
console.log(0|| 456);//456   

典型例子

var num = 0;
console.log(123 || num++);//直接返回表达式1，表达式2压根没执行
console.log(num);//输出还是0

运算符优先级

&& 比 || 优先级高