JavaScript初识

Js的组成:

 EAMAScript；语法以及语法规范，现阶段主要学习ES5和ES6版本;

 BOM，全称browser object model（浏览器对象模型），提供了操作浏览器的接口页面跳转。

 DOM，全称document object model（文档对象模型），提供了操作文档的接口和方法。

 

Js的引入方式:

 内部引入，在body最后添加标签<script></script>，在标签内书写js即可

 外部引入，在头部插入标签<script  scr=“引入路径”></script>，优点：

  • 提取共有的js方法
  • 结构和行为的分离

 内联引入，写在标签内部，现在用的较少，了解即可。例如

  • 绑定事件：在标签里插入onclick点击事件
  • a标签绑定：在标签里的href里写入JavaScript：... ；...为js语句，如果...为空， 即代表阻止a标签的默认（点击）行为

  由于页面是自上而下加载的，所以js大部分情况下是谁先加载谁在前面。

注意使用外部引入时，标签内不能写代码（严格意义上是可以写，但是不能生效）。

 

 

Js三种输出方式:

  在文档中打印一段或者多段内容

Document.write（...，...）；//输入多段内容使用逗号隔开

  在控制台打印一个或者多个内容

Console.log（...）；

  弹出一段内容

Alert（...）；

  对比三种，比较好的是在控制台打印，因为这种方法不会影响页面原本的结构。

  弹出输入框

Prompt（“....”）;

  弹出确认框

Confirm（“...”）；点击确定会返回true，反之则会返回false

  innerHTML用于非表单元素，可以获取或设置元素的html结果（文本也可以）

  打印一个对象/函数的所有的相关属性和方法

console.dir（）；

 innerText用于非表单元素，可以获取或设置元素的文本内容，仅限于文本，如果赋值HTML结构，会转义成文本。

  Js操作元素改变css样式时，都是通过内联（行内）样式实现的

  getElementsByClassName（“xxx”）；表示获取类名为xxx的元素放在一个集合（数组）中，如果需要操作元素，需要将元素从集合中取出来（下标取值)

 

常见错误解决

  先看控制台（console）有没有报错，再找到报错的位置，最后再修改错误。

  在js中，单词都有需要有一定的代表意义

  • 官方的

Document表示文档

Console表示控制台

Window表示窗口

  • 自己定义的（变量）

如果没有定义就会报错。

  双引号不能嵌套双引号，一般都是单引号嵌套双引号，或者双引号嵌套单引号。

  小数运算失精度问题

  • 问题原因：小数也是二进制的形式存储，有些小数靠二进制无法完全存储，存储的是近似值，就会导致结果出现误差
  • 解决方法：
  1. 先扩大相应的倍数计算，再之后缩小相应的倍数，例如：

赋值x为0.1，y为0.2，z为x+y，显示结果为0.30000000000000004

这时需要给x和y分别乘10或其他倍数，输出时再除10或其他倍数即可解决，

完整代码：

        var x = 0.1, y = 0.2, z = x + y;

        x = x * 10;

        y = y * 10;

        z = (x + y) / 10;

  1. num.toFixed（n）；保留num的n位小数（四舍五入），返回的的是相应数值的字符串，此方法为官方提供的方法

  XXX is not defined；//defined表示定义

  注意字符串是不允许换行的，解决方法：

  • 不换行
  • 改为字符串拼接的形式
  • ES6的模板字符串（反引号` `），允许字符串换行，如果需要在添加元素，可以使用${}，将元素放在括号即可。

l  给父元素绑定onmouseover和onmouseout事件，在划过子元素时，会先触发划出，再触发划入，解决方法：

  • 用onmouseenter（划入）和onmouseleaver（划出）替换

 

 

变量

l  变量可以理解为是一个存储数据的容器

l  声明变量

  • 声明变量的关键词：var；需要先声明再赋值
  • “=”表示赋值，把等号后面的值赋值给等号前面的变量，以后每次使用该变量，都使用的是变量存储的值，例如：

Var a = 100；//声明的同时赋值

表示把100赋值给a，输出document.write（a）；的最终结果为100

  一次性声明多个变量，使用逗号隔开

Var a = 100，b = 200；

  局部变量

  • 在函数内部通过关键词（var，let，const）声明的变量是局部变量
  • 在函数内声明的变量只在函数内生效。
  • 形式参数也是局部变量

  全局变量

  • 在函数外通过关键词声明的变量叫做全局变量。
  • 不通过关键词直接声明的变量也是局部变量。缺点：预编译过程中，强制提升会报错

  作用域

  • 指代码生效的区域
  • 局部变量作用域：局部作用域（函数作用域），只在函数内部生效
  • 全局变量作用域：全局作用域，自当前script标签开始的任意位置都可以使用，前提是不存在同名的局部变量

  delete表示删除变量，可以用在对象中，delete 对象名.属性名；

 

常量

  又称为字面量或直接量，可以直接使用的数据类型

  100表示数字（数字的字面量）

  “100”表示文本/字符串（字符串字面量）

  True/false表示布尔值（布尔值字面量）

 

Js运行流程

  语法解析

  • Ø 通篇检查当前script标签的js语法，如果语法有误，则报错。

  预编译

  • Ø 发生在代码执行之前，为代码执行提前做的一些准备工作
  • Ø 全局作用域

  变量提升，即把变量的声明提升到当前作用域（script标签）最前面，赋值还是在对应位置赋值

 确定函数体，即把整个函数声明提前（把函数整体提前到script标签的最前面）

  • Ø 函数作用域

  变量提升，即把变量的声明提升到当前作用域（函数作用域）最前面，赋值还是在对应位置赋值

  确定函数体，把函数“（命名函数）的声明提前，即把函数整体提前到当前script标签的最前面

  把实际参数赋值给形式参数（形式参数和实际参数一一对应）

  • Ø 块级作用域

  为ES6新增的，表示只要含有花括号（{}）的语法，都叫块级作用域，在块级作用域中let声明的变量是局部变量，块级作用域对var声明的变量没有影响

  解释执行

  • Ø 按照代码流程从上到下开始执行

 

语法规范

  语句执行结束加分号（；）

  等号前后加空格

 

数据类型

  js是弱类型语言，数据类型和变量有关，存什么类型就是什么类型

  Js中的数据类型有number（数字）类型，string（字符串）类型，boolean（布尔值）类型，undefined（不赋值/未定义），array（数组），object（对象）。

  基本数据类型：number，boolean，string。

  复合/引用数据类型：object，array，function。

  特殊数据类型：null，undefined，NaN。

  对象也是一种数据形式，是对一个或一类事物，特征和行为的描述，对象是以键值对（key：value）形式存在的，键值之间用逗号分隔，key为键名/属性名，value为键值/属性值。

  使用挂坚持typeof xxx来判断数据类型，typeof是返回对应数据类型的字符串。

 

强制类型转换

  Number（）；将其他类型强制转化为number，空字符串和空格字符串转换为数字为0

  String（）；将其他类型强制转化为字符串

  Boolean（）；将其他类型强制转换为boolean类型（true | false），只要有实际内容转化为布尔值都为true，如果没有实际内容或空内容转换为布尔值都是false，0、NaN、null、undefined转换为布尔值为false，字符串里空格和infinity转换为布尔值为true，空字符串转换为布尔值为false

  parseInt（）；把他其它类型转换为整型（整数）。找到第一个非数字之前的数，将其转化为整数，变相用法：向下取整。

  parseFlost（）；将其他类型转换为浮点型（小数）。找到第一个非数字之前的数，将其转化为number（保留小数）。

  parseInt（）；和parseFlost（）；一般适用于数字和字符串转换为number类型，如果第一个非数字字符之前没有数字，会返回到NaN；如果转化其他类型（如null、true等）这会显示NaN。

 

算数运算符

  普通的数字与数字之间的运算符有+、-、*、/和%，其中%表示取余

  纯数字类型的字符串与数字之间的运算

  • 假设a=“10”；b=10；c=a+b；

字符串遇到+会拼接新的字符串，即则c为103

字符串遇到-、*、/、%会隐式转换为数字然后再运算

纯数字类型的字符串转化为对应的数值

非纯数字类型的字符串转化会显示NaN（not a number/非数字）

  NaN为number类型，NaN和任何数运算都是NaN，infinity为正无穷/正无限，例如1/0无意义就会显示infinity，假如1为负数，则会显示-infinity。

  布尔值的运算，布尔值有两个属性值，true和false，true隐式转换为1，false隐式转换为0

  Null运算符隐式转换为0

  Undefined遇到算数运算符会转换为NaN

  数组和对象一般不会与数字进行运算

 

关系运算符

  关系运算符一般用来比较两个数据，也可以作为单个判断条件，其符号有大于（>）、大于或等于（>=）、小于（<）、小于或等于（<=）、等于（==）、全等/恒等（===）、非等/不等（!=）、不全等/不恒等（!==）

  等于（==）是只比较数值，不比较类型；全等（===）是既比较数值，也比较类型。

  优先级：乘除和取余的优先级大于加减，>、>=、<、<=优先级大于==、===、!=、!==

  关系运算符的隐式转换

  • 字符串、布尔值和数字进行比较时，会先隐式转换为数字类型，之后再比较（不适          用于全等和不全等）
  • 字符串和字符串比较时，按照从左到右的顺序比较字符在码表（标准信息交换码）              中的大小
  • Null和undefined在和数字比较时，如果遇到==不进行转换，没有可比性，如果遇到大于，大于等于，小于，小于等于会隐式转换为数字（null=>0，undefined=>NaN）可以进行比较
  • Null和undefined的在数值上相等（官方规定），类型上不相同
  • NaN和任何值（包括自己  ）比较都不相等

 

逻辑运算符

  与/且：&&，同真为真，遇假为假（遇假则停）

  或：||，同假为假，遇真为真（遇真则停）

  非：！，条件翻转，颠倒是非。！遇到非布尔值的数据类型，会先转化为布尔类型，然后再取反，例如：console.log（！1）；其中的1隐式转换布尔值为true，最终输出结果为false。

  1 && 2；输出结果为2，这种情况没有将数字转化为布尔值，而是将其当作布尔值来看，即为1当作布尔值来看为true，继续向后，2当作布尔值来看为true，如果后续还有就以此类推，没有的话就输出当前位置的值（落脚点）。

  1 || 2；输出结果为1，把1当作布尔值来看为true，，代码在此结束，输出当前位置的值。

  优先级：！> && > ||

  优先级：（）> !、++、--、typeof >算数运算符 > 关系运算符 > 逻辑运算符 > 赋值运算符

 

赋值运算符

  a=a+5可以表示为a+=5，以此类推，既然有+=，也有-=，*=，/=和%=

  自增和自减

  • a=a+1可以表示为a+=1再简化a++（自增1）
  • a=a-1可以表示为a-=1再简化a--（自减1）
  • a++和++a都是自增1，在自增或自减的过程中出现其他操作（比如在自增的过程中出现赋值），a++先赋值再自增，而++a是先自增再赋值，例如：

Var a=10；

Var n=a++； //在自增的过程中出现赋值，a++ => var n=a；a+=1；

这时打印a和n，a为11，n为10，

如果把n=a++改为n=++a，这时n的值就会变为11，即为++a => a+=1；n=a；

  • var sum = a++ + ++a + ++a * 2 + a-- + --a;

13(a++)+15(++a)+16*2(++a*2)+16(a--)+14(--a)=90，a=14;

 

表达式

由运算符和操作数（变量或常量）组成的式子，例如：

  a+1；算数表达式

  a>=1；关系表达式

  a>=1  &&  a<=10；逻辑表达式

posted @ 2021-01-18 08:56  浪流连  阅读(126)  评论(0)    收藏  举报