01初识JavaScript

初识JavaScript

JavaScript了解

诞生于1995年 LiveScript 更名为 JavaScript （Netscape出品）

JavaScript的概述

JavaScript是一个轻量级的语句，他是单线程的语言（一个线程解析）。他是一个弱语言（他没有固定的类型划分 你给定的值是什么类型 他就是什么类型）他还是一个脚本语言（侵入 实现xss攻击）。他是怎么被解析的（有浏览器的地方就能解析对应的JavaScript（v8引擎））

JavaScript的包含的内容

JavaScript的构成为三方面，ECMAScript (基本语法及相关对象 es3 es5 es6 es7 ...) , DOM(文档对象模型 操作HTML) , BOM（浏览器对象模型 操作浏览器）

JavaScript的入门

JavaScript标签

1.导入JavaScript标签：

<script type=“text/javascript”></script>

2.在标签中间写js代码：

alert(“hello world!”) ; /*弹窗提示*/
document.write(“亲，我在页面上，跟alert不一样噢！”);/*浏览器弹窗显示*/
console.log(“我是在控制台打印的, 以后常用我！”);/*浏览器网页内容显示*/
console.log(“我是在控制台打印的, 以后常用我！”);/*浏览器控制台显示，常用*/

3, script标签可以出现多次, 且可以出现在html文件的任何地方, 建议写在之间; 另外,同一个文件中Javascript和HTML代码, 它们的执行顺序都是自上而下，谁在前就谁先执行, 谁在后就后执行.

4, JavaScript的注释：
单行注释: //, 多行注释 /* */

书写方式(类似于css的书写方法，外部，内部，行内)

1. 书写在script标签里面（常用，教学上课时一般会用到的，方便快捷）

   <script>
      //语句书写
      console.log('hello world')
   </script>
   

2. 书写在js文件里面（推荐，公司上班时一般是这种方式，分区清晰）

   定义一个js文件(index.js)

   console.log('hello world')
   

   引入这个js文件

   <script src="./index.js"></script>js<!-- 相对路径 --!>
   

3. 书写对应的事件属性里面（比较少用）

   <a href="javascript:void()">去百度</a>
   

   <a href="#" onclick="alert('hello world')"></a>
   

变量定义（使用var关键词声明）

//var 变量名 = 值
  var number = 10

//可以一次定义多个变量：
  var name='zhangsan'age=18，weight=108;
  console.log(name);

//js是弱数据类型的语言，容错性较高, 在赋值的时候才确定数据类型
  var b；           //temp时啥数据类型？不确定 
  b = 12;            //temp变量是数字类型
  b = “hello”;      //temp变量变成了字符串类型
  console.log(typeof b);

变量命名规范：！！！
1, 变量名可以是数字,字母,下划线_和美元符$组成；
2, 第一个字符不能为数字；
3, 不能使用关键字或保留字；
4, 标识符区分大小写，如：age和Age是不同的变量。但强烈不建议用同一个单词的大小写区分两个变量；
5, 变量命名尽量遵守驼峰原则: myStudentScore（除首单词，后面单词首字母都大写，其它小写）；
6, 变量命名尽量见名思意, 可参考下图；

数据类型(值类型 基本数据类型)

number类型（所有的数值）

字符串类型 String （单引号 双引号 都是字符串）

boolean类型 （true false）

null 空类型 （是null值的情况）

undefined 未定义 （当前没有给值）！

object （对象类型 引用数据类型）！

注意: 变量的类型在赋值时才能确定

使用typeof来查看对应的类型（基本数据类型返回的是对应的类型名 null类型object）

//类型查看 typeOf 查看对应的类型的 null显示的是object （undefined是对应的null的对象扩展） 
Undefined数据类型的值为:  undefined   未定义
Boolean数据类型的值为:    boolean     布尔值
String数据类型的值为:     string      字符串
Number数据类型的值为:     number      数值
Object数据类型的值为:     object      对象或者null
Function数据类型的值为:   function    函数

类型转换

number类型转为string类型 （string>number 隐式转换 toString方法）

//将对应number类型转为string类型
var str1 = number1.toString()

1.string转为number （显式转换）

//将对应number类型转为string类型
var str1 = number1.toString()

2.Number方法（直接转number类型）

3.使用parseInt方法（转整型）

4.使用parstFloat方法 （转小数）

var str2 = "1a123.12a"
console.log(Number(str2));//当你将一个内容转为的数值过程中无法被解析就会出现NaN
//从前到后拿出里面的数值 前面没有数值变成NaN
console.log(parseInt(str2));
console.log(parseFloat(str2));

将字符串转为对应的boolean类型

Boolean方法 转为布尔类型

var str = "abc"
//转为boolean类型 非空就是true 空字符串表示false
var b = Boolean(str) //true
var b1 = Boolean('') //false

将number转为布尔类型

var number1 = 10
//number转布尔 非0和非NaN则为true   NaN和0就是false
console.log(Boolean(number1))//true
console.log(Boolean(0))//false
console.log(Boolean(NaN))//false

将undefined和对应的null转为boolean（false）

var un//不赋值
console.log(Boolean(un)) //false
console.log(Boolean(null)) //false

将boolean类转为number类型 （false 0 true 1）

console.log(Number(true)) //1
console.log(Number(false)) //0

将对应的undefined和null转为number

var un//不赋值
console.log(Number(un)) //NaN
console.log(Number(null)) //0

isNaN 是NaN返回true不是返回false（not a number）

var a = 10
console.log(isNaN(a)) //false
var str = 'abc'
console.log(isNaN(Number(str)))//true

无穷大 无穷小（Infinity）

//无穷大
var max = Infinity
//无穷小
var min = -Infinity

运算符和表达式

算术运算

+ - * / % ++ --

自增和自减的前置和后置的区别

前置先执行对应的++（--） 再执行对应的代码

后置先执行对应的代码 再执行++（--）

逻辑运算

&& 与（同true则为true） || 或 （有true就是true） ! 非（取反）

比较运算

> < >= <= == != ===(全等 俩个类型和对应的值一模一样 这个俩个是一个东西)

赋值运算

=  +=  -=  /=  *=  %= 

var j = 10
j+=100 //j=j+100
j/=10 //11
j*=5 //55
console.log(j);

位运算（转为二进制再进行位的变化运算）

 >> 右移  << 左移  ~~ 去掉小数

计算顺序 先算括号里面的 ++或-- 再进行乘除取余 再进行+- 再进行比较运算 再逻辑运费 再进行赋值*

三元运算符（三目运算符）

表达式（boolean类型表达式）? true的内容 :false的内容
var a = 10
var b = 20
a>b?10:20 //20
'123a'/10?'hello':'hi'//hi 

number对应的方法

保留几位小数的方法 toFixed

var number1 = 3
var number2 = 10
//默认的大小16位 整数位也是16位 超出不能显示（问题）
console.log(number2/number1);
//保留小数(方法会优先调用) 转成字符串
console.log((number2/number1).toFixed(3));