05_JavaScript

一、认识JavaScript

1.JavaScript是由Netscape公司 (网景

)的Livescript发展而来,js是一种基于对象(object)和事件驱动的安全性脚本语言 利用js可以完成:

  • 响应事件:页面加载完成或者点击某天元素时,调用指定的js程序

  • 读写HTML元素:JS可以读取及改变当前页面内的某个元素的内容

  • 验证用户输入的数据

  • 检测访问者的浏览器:根据所检测到的浏览器,为这个浏览器载入相应的页面

  • 创建cookies:存储和取回位于访问者的计算机中的信息

  1. JS的作用是给浏览器指令(命令),负责和浏览器进行沟通的

  2. 计算机语言的发展史:

  • 阶段一 : 计算机语言 0101

  • 阶段二 : 汇编语言 ,用符合来来代替0101(mov/add)

  • 阶段三:高级语言 ,接近自然语言 c 、c++、 c# 、 java、 OC 、python、 go\ swift、 Dart、 JS 、TypeScript

二、 JavaScript的历史

  1. 诞生背景:1995网景公司 EIC和,Scheme发明了JavaScript

  2. 微软: Jsscript

  3. 1996年网景公司向ECMA(欧洲计算机制造商协会)提交了提案 ,ECMA指定这门语言为标准

  4. 1997年ECMA指定标准 ECMAScript

  5. JavaScript 只是ECMA一种实现

  6. JavaScript:Javascript + DOM + Bom

三、 JavaScript的特点

  • 解释性语言

    • 读取一行 解释一行 ,执行一行
  • 动态类型语言

    • 在运行阶段可以动态修改变量类型的类型
  • js是一种脚本编写语言,采用小程序段的方式实现,开发过程简单

  • js是一种基于对象的语言,能运用已经创建的对象

  • js是一种基于Java基本语句的控制流之上的简单而紧凑的设计语言

  • js是动态的,可以直接对用户的输入作出响应,无需经过web服务程序

  • js是安全性语言

  • js具有跨平台性

四、JavaScript编写位置

  • 内联 行内 HTML元素中

  • script 标签里

  • 外部引用 js

五、JavaScript注释使用

  • 单行 多行 文档注释

/*

*/

/*

*/带解释的注释

六、 和浏览器交互

  • alert

  • Console.log

  • Document.write()

  • prompt

七 、如何定义变量

  1. 常量变量
  • 常量 :不可改变

  • 变量:由字母、数字、下划线组成,以字母开头,除此之外不能有空格和其他符号 ,不能使用关键字

  • 变量的使用







    Document

    1. 循环

      • for

      • Switch

      • while

        Break 终止包含for、Switch、while,当遇到break语句的时候,会退出循环并执行下一条语句

        continue :在循环体结构中 提前结束本次循环周期并开始下一个循环周期,停止当前循环的迭代,从循环的开始处继续程序流程

    2. JS中的事件

      • onClick 点击事件

      • onChange 表单相关 利用 text 或者textarea输入的字符值改变发生的事件

      • onSelect事件: 当文本框内容被选中时发生的事件

      • onFocus事件 :当单击表单对象时

      • onLoad事件:当加载网页文档时,会产生该事件。onLoad 事件的作用是在首次载入一个页面文件时检测cookie,并用一个变量为其赋值,使其可以被源代码使用

      • onUnload 事件:退出网页

      • onBlur事件:失去焦点正好和获取焦点对立,当text,textarea或者select对象不再拥有焦点而退到后台时;

      • onMouseOver事件 鼠标指针移动到某对象范围的上方时触发的事件

      • onMouseOut 鼠标指针离开某对象范围时

      • onDblClick 鼠标双击

      • onmousedown 鼠标按下

      • onmouseup 鼠标按下后松开

      • Onmousemove 鼠标移动

      • onKeypress 当键盘上某个键被按下并且释放时触发

      • Onkeydown 键盘上某个按键 按下

      • Onkeyup 键盘某个按键被松开

      • Onabort 图片在下载时被用户中断

      • onmove 浏览器的窗口被移动时触发

      • Onscroll 浏览器的滚动条位置发生变化

      • Onstop 浏览器的停止按钮按下或者正在下载的文件被中断

      • Onreset 当表单中的reset属性被激发

      • Onsubmit 表单提交信息时

    3. 内部对象

      浏览器内部对象,可以实现与HTML文档进行交互,主要包括:

      • 浏览器对象 (navigator) :浏览信息

      • 文档对象(document):document对象包含了与文档元素一起工作的对象

        • anchorm锚对象:指 a标签中存在时产生的对象,办好文档中所有的anchor 信息

        • link链接对象:使用 a标签标记超链接一个超文本或者超媒体的元素作为一个特定的URL

        • form窗体对象:包含多种格式的对象存储信息,可以在js脚本中编写程序,并可以用来动态改变文档的行为

      • 窗口对象(windows):提供处理浏览器窗口的方法和属性

      • 位置对象(location):提供了当前打开的URL一起工作的方法和属性,是一个静态对象

      • 历史对象(history)历史清单有关

    八、基础数据类型

    JS中常见的基本数据类型

    • 数值型(Number):

      • NaN 不是数字类型
    • 字符串型(String)

    • 布尔型(Boolean)

    • 空类型(Null) : null 通常当一个对象(object类型)不再使用的时候 ,可以赋值为null

      var info = {"name"="aaa","age" = 18}
      info = null

    • 未定义类型(Undefined) : 未定义当一个变量进行了声明,但是没有赋值,这个时候她的值就是undefined

    image.png

    我们编写的代码在硬盘,打开代码后 ,加载到浏览器 , 放在内存中 ,如果是基本数据类型 就是在栈空间申请空间 ,指针指向这段 ,如果是对象类型 ,则是在堆空间申请一块空间

    num++ :先使用 后自增+1

    ++num: 先自增+1,后使用

    九、数据类型的转换

    其他类型转换成数字类型

    9.1 转成数字类型

    • Number(其他类型) 把其他类型转为数字类型

    • parseInt(string,radix) 字符串转化为 Number类型 找到一个数字就解析一个数字 并返回; radix 基数 进制

    • parseFloat(string) 字符串转为 Number类型

    JS数字类型:Number类型

    9.2 转成字符串

    • toString() num 和bool类型可以 . Unll 和undefined不可以

    • Sting() 所有类型

    • 字符串拼接

    9.3 转成布尔类型

    • 使用Boolean()函数把其他类型转成布尔类型

      • 转换成false 的5种 特殊值: “” 空字符串、 0(包括0、-0) 、 undefined 、 unll 、 NaN;

      • 除啦上五种 ,其他为true

    十 、JavaScript操作符

    1. 算数运算符:

      • /

      • %

      • ++

        • 前置和后置 ++a 先自增+1 后使用 , a++ 先使用后自增+1
      • --

        • 前置和后置
    2. 赋值运算符 :

      • =

      • +=

      • -=

      • *=

      • /=

      • %=

    3. 比较运算符:

      • <

      • =

      • <=

      • == 会隐式转换

      • !=

      • === 全等 不会隐式转换

      • !== 全不等

      == != 判断会有隐式转换

       var a = true;
      var b = "true";
      // 隐式转换: 都转换成number再比较
      // a -> 1
      // b -> NaN
      console.log(a == b); //false

      === 全等 类型 相等 ,数据相等 !==不会进行隐式转换

      1. 逻辑运算符

        • && 逻辑与

        • || 逻辑或

        • !非运算(取反)

      2. 运算符的优先级

    十一、 分支语句

    • if

    • if else

    • If else if else

    • switch case break (穿透)

    十二、 循环

    • while

    • do while

    • for

    十三、 DOM 节点

    D(document 文档) O(obgect 对象) M(Model 模型)

    常用的DOM方法:

    • getElementById

    • getElementByTagName

    • getElementsByClassName

    • Get-Attribute 和setAttribute

你可能感兴趣的:(05_JavaScript)