JavaScript详细笔记

JavaScript入门篇

一、介绍

  1. 专门在浏览器编译执行的语言

  2. 处理用户与浏览器之间请求问题

  3. 采用弱类型编程风格对面对对象思想进行实现

  • 强类型编程语言风格

    • 对象行为收到修饰类型的严格约束

    • java

  • 弱类型编程语言风格

    • 不受流失类型的约束

    • 可以调属性和方法

    • JavaScript

二、第一例

<!--html文件-->
<head>
<script type="text/javascript" src="script.js"></script>    
</head>
<body>
    <input type="button"value="按下" onclick="fun()">
</body>
​
<!--
    在script.js文件下 写下 代码 
    不用写<script></script>
-->
function fun() {
    window.alert("你瞅瞅啥!!!")
}
​

  • type="text/javascript" 必须声明

    • 通知浏览器解析script标签 需要文本编辑器与javaScript编译器

  • script可以在html文件任意位置存在

  • 可以结尾；也可以省略

三、变量声明格式

//命令格式
//var代替了原来java语法中的数据类型
//命名格式 声明格式与java一样

四、数据类型

4.1 基本数据类型

  • number 数字类型 ：整数和小数

  • string 字符串类型：字符和字符串

  • boolean 布尔类型：true false

4.2 高级引用数据类型

  • Object：通过构造方法生成的对象

  • function：函数方法

4.3 动态类型变化

  • javascript 是弱语言 根据变量的赋值内容来决定数据类型

  • 赋值改变 可以动态改变类型

4.4 特殊值

  1. undefined：默认值 没有被赋值时 返回类型【undefined】但不算一个类型

  2. null：表示对象引用了一个空内存 不能存储 读取【Object类型】

  3. NAN：非法数字 【number类型】

  4. infinity：无穷大数字 【number类型】

4.5 获取类型

typeof 数据

 

五、 流程控制语句与java完全一致

 

六、函数声明调用

6.1 命令格式：

function 函数名(参数名){
    javascript命令行
    return 返回值
}

6.2 注意

  1. 必须function声明

  2. 禁止写返回类型

  3. 禁止写形参类型

  4. 有返回值 用return

6.3 函数调用

  1. 浏览器不会自动调用函数

  2. 可以用命令行调用

  3. 绑定HTML标签上的监听事件【onclick】通知浏览器执行

<input type="button"value="按下" onclick="函数名()">

 

 

JavaScript应用篇

 

一、介绍

1.1 作用

帮助浏览器对用户提出请求进行处理

1.2 DOM对象

  • 文档模型对象

1.3 DOM对象生命周期

  1. 浏览器接收到html文件 将标签加载到浏览器缓存中

    每加载一个标签 生成一个对应的DOM对象

  2. 浏览器关闭会销毁缓存中DOM对象

  3. 请求其他新资源文件会覆盖原有DOM对象

1.4 document对象生命周期

  1. 浏览器在所有标签加载完毕后 在内存中用树状结构存储DOM对象

    树状结构生成完毕 会生成一个document对象进行管理这颗DOM树

  2. 一个浏览器（一个窗口一个）运行只会生成一个document对象

  3. 浏览器关闭会销毁document对象

     

     

1.5 通过document对象定位DOM对象方式

  1. 根据html标签id属性定位DOM对象

    var 属性名 = document.getElementByID("id属性名");

  2. 根据html标签name属性定位DOM对象

    var 属性名 = document.getElementByName("name属性名");

  3. 根据html标签类型定位DOM对象

    var 属性名 = document.getElementByTagName("标签类型名");

1.6 浏览器缓存图

 

 

二、DOM对象对HTML标签属性操作

2.1 value属性

DOM对象.value

2.2 样式属性

DOM对象.style.样式属性

2.3 状态属性

//状态属性都是boolean类型
//disabled 当前标签不可用
//checked 表示标签是否选中 只存在radio标签与checkbox

2.4 双目标签中的文字显示

//innerText 只能写入文本
//innerHtml 能写入HTML标签

三、监听事件

3.1 监听事件

  • 监听用户何时以何种方式对当前标签进行操作

  • 监听到相关行为 通知浏览器调用对应的JavaScript函数处理

3.2 监听分类

  1. 监听何时使用鼠标操作当前标签

  2. 监听何时使用键盘操作当前标签

3.3 鼠标操作当前标签

  1. onclick：【单击】标签鼠标

  2. onmouseover：【悬停】标签上方

  3. onmouseout：【移开】标签上方

  4. onfocus：【获得光标】通过鼠标

  5. onblur：【丢失光标】通过鼠标

3.4 键盘操作当前标签

  1. onkeydown：【按下键盘】

  2. onkeyup：【弹起键盘】

3.5 onload监听事件

  • 浏览器是自上而下解析标签

  • 还没加载完DOM对象 没法得到对象

  1. 作用：监听浏览器何时将标签加载完毕

  2. 意义：onload可以调用函数 对标签进行处理 就不会出现找不到DOM对象的问题

<script type="text/javascript">
    function fun(){
        
    }
</script>
<body onloocd="fun()">
    
</body>

 

3.6 监听事件与HTML标签之间绑定

  1. 前提：同一个监听事件绑定多个HTML标签

  2. 命令格式：DOM对象.监听事件名 = 函数 【不能有括号】

要用onload属性 直接调用

四、项目介绍

 

 

 

 

JavaScript高级篇

 

一、函数属性arguments

1.1 介绍

  1. 每个函数都有一个arguments属性 是一个数组

  2. 函数调用时 把实参传入数组中 在由数组传入形参

  3. 增加函数调用灵活性

  4. 只能在函数内使用

1.2 实参传形参图

 

 

二、function类型对象

2.1 介绍

  1. function类型是JavaScript的高级数据类型

  2. 一个function对象管理一个具体函数

2.2 function类型对象声明方式：

  1. 标准声明方式：

    function 函数对象名(参数,参数){
        命令
    }

     

  2. 匿名声明方式：

    var 函数对象名 = function (参数,参数){命令}

2.3 function类型对象的创建时机

浏览器加载<script>时，加载两次

第一次加载，将script标签所有的标准声明对象进行创建

第二次加载，将script标签所有的命令行按自上而下的

 

三、局部变量与全局变量

3.1 局部变量

  1. 定义：在函数内部 通过var声明的变量

  2. 特征：只能在函数内部使用，不能在函数外使用

3.2 全局变量

  1. 定义：全局变量可以在HTML文件中所有函数中使用

    全局变量被声明时，自动分配给window对象作为属性

  2. 声明全局变量；

    一：在script标签下，通过var声明的变量，就是全局变量

    二：在函数执行体内，没有通过var修饰符修饰的变量也是全局变量

    但函数要被调用才会执行

四、Object类型对象特征

4.1 定义

  • 通过构造函数生成的对象其数据类型都是Object类型

4.2 特性

  • 对象创建完毕，可以任意添加或移除属性与方法

4.3 属性维护

  1. 添加属性：对象.属性名 = 值

    添加函数：对象.函数名 = function （参数名）{命令}

  2. 添加属性：对象["属性名"] = 值

    添加函数：对象["函数名"] = function （参数名）{命令}

  3. 移除属性 函数

    delete 对象.属性名或函数名

五、自定义构造函数

5.1 命令

function 函数对象名(){   }

5.2 调用

var Object对象名 = new 函数对象名()

5.3 普通函数与构造函数区分

  1. 没有调用前无法区分

  2. 普通：var 名 = 函数对象名（）

  3. 构造：var 名 = new 函数对象名（）

  4. 返回值：普通函数运行结束 return运算结果返回

    构造调用 直接返回Object类型对象 return直接失效

六、JavaScript中this指向

  1. 构造函数，this指向当前构造函数生成的Object对象

  2. 在普通函数，this指向调用当前函数的实例对象

fun();
//直接调用 this是指window这个对象

七、JSON

Z省 对象

  1. 前提：javaScript得到Object对象

    构造方法生成

    JSON数据描述格式生成：获取Object类型对象简化版

  2. 标准命令格式：

    var obj =   {"属性名":值,"属性名":值,
    ​
                        "函数名":function (){}}

     

  3. JSON数组

    var obj = [
    ​
        {"属性名":值,"属性名":值,"函数名":function (){}},
    ​
        {"属性名":值,"属性名":值,"函数名":function (){}}
    ​
    ]

八、JSON实现服务端与javaScript之间通信

String 名 = “{\"属性名\":值,\"属性名\":值,\"函数名\":function (){}}”;
//写入请求体作用域 请求转发 使用EL表达式

185-187 笔记等

 

 

posted @ 2021-09-24 14:13  向晚·  阅读(119)  评论(0)    收藏  举报