WEB06JavaScript&Ajax

07-14 1258阅读

基础语法

引入方式

内部脚本：将JS代码定义在HTML页面中

JavaScript代码必须位于标签之间
在HTML文档中，可以在任意地方，放置任意数量的
一般会把脚本置于元素的底部，可改善显示速度
外部脚本：将 JS代码定义在外部 JS文件中，然后引入到 HTML页面中
- 外部JS文件中，只包含JS代码，不包含标签
- 标签不能自闭合
- 输出语句
  
  输出语句
  - 使用 window.alert() 写入警告框
  - 使用 document.write() 写入 HTML 输出
  - 使用 console.log() 写入浏览器控制台
  - 变量声明
    
    变量
    - JavaScript 中用 let 关键字来声明变量
    - JavaScript 中用 const 关键字来声明常量
    - JavaScript 是一门弱类型语言，变量可以存放不同类型的值
    - 变量名需要遵循如下规则：
      1. 组成字符可以是任何字母、数字、下划线（_）或美元符号（$）
      2. 数字不能开头
      3. 建议使用驼峰命名
      数据类型
      
      数据类型
      
      JavaScript中也有数据类型的概念,主要有下面几种
      
      原始类型
      - string：字符串，单双引皆可
      - number：数字（整数、小数、NaN(Not a Number)）
      - boolean：布尔。true，false
      - object：对象和null
      - undefined：当声明的变量未初始化时，该变量的默认值是 undefined
      - 使用 typeof 运算符可以获取数据类型
        
        运算符
        
        运算符
        
        
        == 与 ===
        
        特殊用法
        
        字符串字面值参与运算的时候会自动转为数字(加法除外)
        
        除法运算会按照人类运算执行,根java中的除法有所区别
        
        流程控制
        
        流程控制语句
        
        流程控制
        
        
        类型转换
        
        在js中,任何类型都可以转为boolean：
        
        Number：0 和 NaN为false，其他均转true
        
        String：空字符串为false，其他均为true
        
        对象: Null 和 undefined为false, 其它均为true
        
        函数和事件
        
        函数
        
        定义方式一：
        
        介绍：函数（方法）是被设计为执行特定任务的代码块。
        
        定义：JavaScript 函数通过 function 关键字进行定义，语法为：
        
        注意：
        
        形式参数不需要类型，因为Js是弱类型语言
        
        返回值也不需要定义类型，可以在函数内部直接使用return返回即可
        
        js中如果出现同名的方法，后面的会覆盖前面的
        
        调用：函数名称(实际参数列表)
        
        定义方式二：
        
        JS中，函数调用可以传递任意个数的参数
        
        事件
        
        事件
        
        事件：HTML事件是发生在HTML元素上的 “事情”。比如：
        
        按钮被点击
        
        鼠标移动到元素上
        
        按下键盘按键
        
        事件监听：JavaScript可以在事件被侦测到时执行代码。
        
        事件绑定
        
        方式一：通过 HTML标签中的事件属性进行绑定
        
        function on(){ alert('我被点击了!'); }
        
        方式二：通过 DOM 元素属性绑定
        
        document.getElementById('btn').οnclick=function(){ alert('我被点击了!'); }
        
        对象
        
        数组对象
        
        数组对象
        
        JavaScript 中 Array对象用于定义数组
        
        定义
        
        let 变量名 = new Array(元素列表); //方式一 let 变量名 = [ 元素列表 ]; //方式二
        
        访问
        
        arr[ 索引 ] = 值;
        
        注意事项
        
        JavaScript 中的数组相当于 Java 中集合，数组的长度是可变的，而 JavaScript 是弱类型，所以可以存储任意的类型的数据。
        
        属性
        
        
        方法
        
        
        
        箭头函数(ES6)：是用来简化函数定义语法的。具体形式为: (…) => { … } ，如果需要给箭头函数起名字： let xxx = (…) => { … }
        
        字符串对象
        
        字符串对象
        
        String字符串对象创建方式有两种：
        
        let 变量名 = new String("…") ; //方式一 let 变量名 = "…" ; //方式二
        
        属性
        
        
        方法
        
        
        自定义对象
        
        自定义对象
        
        定义格式：
        
        let 对象名 = { 属性名1: 属性值1, 属性名2: 属性值2, 属性名3: 属性值3, 方法名: function(参数){ 方法体 } };
        
        调用格式
        
        对象名.属性名; 对象名.函数名();
        
        JSON对象
        
        JSON-介绍
        
        概念：JavaScript Object Notation，JavaScript对象标记法。
        
        JSON 是通过 JavaScript 对象标记法书写的文本，跟js对象的主要区别就在于，JSON中的键必须是字符串类型
        
        JSON-基础语法
        
        定义
        
        let 变量名 = '{"key1": value1, "key2": value2}';
        
        JSON字符串转为JS对象
        
        let jsObject = JSON.parse(userStr);
        
        JS对象转为JSON字符串
        
        let jsonStr = JSON.stringify(jsObject);
        
        BOM对象
        
        BOM
        
        概念：Browser Object Model 浏览器对象模型，允许JavaScript与浏览器对话， JavaScript 将浏览器的各个组成部分封装为对象。
        
        Window
        
        介绍：浏览器窗口对象。
        
        获取：直接使用window，其中 window. 可以省略。
        
        属性
        
        history：对 History 对象的只读引用。请参阅 History 对象。
        
        location：用于窗口或框架的 Location 对象。请参阅 Location 对象。
        
        navigator：对 Navigator 对象的只读引用。请参阅 Navigator 对象。
        
        方法
        
        alert()：显示带有一段消息和一个确认按钮的警告框。
        
        confirm()：显示带有一段消息以及确认按钮和取消按钮的对话框。
        
        setInterval()：按照指定的周期（以毫秒计）来调用函数或计算表达式。
        
        setTimeout()：在指定的毫秒数后调用函数或计算表达式。
        
        Location
        
        介绍：地址栏对象。
        
        获取：使用 window.location 获取，其中 window. 可以省略。
        
        属性： href：设置或返回完整的URL。
        
        DOM对象
        
        DOM
        
        概念：Document Object Model ，文档对象模型。
        
        将标记语言的各个组成部分封装为对应的对象：
        
        Document：整个文档对象
        
        Element：元素对象
        
        Attribute：属性对象
        
        Text：文本对象
        
        Comment：注释对象
        
        HTML中的Element对象可以通过Document对象获取，而Document对象是通过window对象获取的。
        
        Document对象中提供了以下获取Element元素对象的函数：
        
        ajax
        
        ajax
        
        Ajax
        
        概念：Asynchronous JavaScript And XML，异步的JavaScript和XML。
        
        作用：
        
        数据交换：通过Ajax可以给服务器发送请求，并获取服务器响应的数据。
        
        异步交互：可以在不重新加载整个页面的情况下，与服务器交换数据并更新部分网页的技术，如：搜索联想、用户名是否可用的校验等等。
        
        同步与异步
        
        
        
        原生Ajax
        
        准备数据地址：http://yapi.smart-xwork.cn/mock/169327/emp/list
        
        创建XMLHttpRequest对象：用于和服务器交换数据
        
        向服务器发送请求
        
        获取服务器响应数据
        
        axios
        
        Axios
        
        介绍：Axios 对原生的Ajax进行了封装，简化书写，快速开发。
        
        官网： Axios中文文档 | Axios中文网
        
        请求方式别名