HTML基础学习03_JavaScript

发酵的面粉团子
177 阅读6分钟

一、认识JavaScript

1.JavaScript是由Netscape公司 (网景

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

  • 响应事件：页面加载完成或者点击某天元素时，调用指定的js程序
  • 读写HTML元素：JS可以读取及改变当前页面内的某个元素的内容
  • 验证用户输入的数据
  • 检测访问者的浏览器：根据所检测到的浏览器，为这个浏览器载入相应的页面
  • 创建cookies:存储和取回位于访问者的计算机中的信息
  1. JS的作用是给浏览器指令（命令），负责和浏览器进行沟通的
  1. 计算机语言的发展史：
  • 阶段一 ： 计算机语言 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. 常量变量

  • 常量 ：不可改变

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

  • 变量的使用

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
    <script>
        // (1)交换方式一 使用临时变量
        // var a = 1;
        // var b = 2;
        // var temp = 0;
    
        // temp = a;
        // a = b;
        // b = temp;
        // console.log(a,b,temp)
        
        // （2）交换方式2 只针对数字
​
        var a = 1;
        var b = 2;
        
        // a = 3
        a = a + b; 
        // b = 3-2 = 1
        b = a - b; 
        // a = a - b  = 3 - 1 = 2
        a = a  - b;
        console.log("a="+a,"b="+b)
​
        
​
    </script>
</body>
</html>

  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. 逻辑运算符

      • && 逻辑与
      • || 逻辑或
      • ！非运算（取反）
    1. 运算符的优先级

十一、 分支语句

  • 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
avatar
文章
阅读
粉丝