JavaScript

JavaScript

一.JavaScript简介

1.JavaScript是一种基于对象和事件驱动的，并具有安全性能的脚本语言

2.JavaScript的特点：

  • 向HTML页面中添加交互行为
  • 脚本语言，语法和Java类似
  • 解释性语言，边执行边解释

3.JavaScript组成：

  • ECMAScript：描述了JS的语法和基本对象
  • DOM：处理网页内容的方法和接口
  • BOM：与浏览器交互的方法和接口

4.可以包含在文档中的任何地方，只要保证这些代码在被使用前已读取并加载到内存即可

5.引用外部JS文件：

<script src="index.js" type="text/javascript"></script>

6.直接在HTML标签中;

<input type="button" name="but" value="弹出消息框" onclick="javascript:alert('你好啊');"/>

二.核心语法

1.数据类型：

  • undefined：变量没有初始值，将被赋予值undefined
  • null：表示一个空值
  • number：整数，浮点数
  • boolean：true和false
  • string：字符串（一组被引号括起来的文本）

2.数组：

var 数组名称 = new Array(size);
var number = new Array(1,2,3,4);

3.运算符号：

  • == ：相等运算符在进行类型判断时可能会进行一些类型转换
    - 如果俩个值类型相同，在进行===比较；如果俩个值类型不同，则进行类型转换在比较
    - 如果俩个值都是null,undefined或者一个为null,一个为undefined，其比较结果都相等
  • === ：严格相等运算符是先进行类型比较，如果类型不相同直接就不相等

4.控制语句

5.注释

6.输入/输出：

  • alert( "提示信息" )
  • prompt( "提示信息"，"输入框的默认信息" )

7.语法约定

8.变量：var，let

三.函数

1.函数简介：

  • 函数的含义：类似于Java中的方法，是完成特定任务的代码语句块
  • 使用更简单：不用定义属于某个类，直接使用
  • 函数的分类：系统函数和自定义函数

2.系统函数：

  • isNaN()：用于检查其参数是否是非数字

3.自定义函数：

  • function 函数名 （参数1，参数2...）{
    //JavaScript语句
    return；//返回值
}

4.函数调用：

  • 函数调用一般和表单元素的事件一起使用，调用格式

  • 事件名 = "函数名（）"

四.事件

1.onload：一个页面或一辐图像完成加载

2.onclick：鼠标单击某个对象

3.onmouseover：鼠标经过时自身触发事件，经过其子元素时也触发该事件

4.onmouseenter：鼠标经过时自身触发事件，经过其子元素时不触发该事件
5. onkeydown：某个键盘被按下
6. onchange：域的内容被改变

五.BOM

  1. BOM：浏览器对象模型（Browser Object Model）

  2. BOM提供独立于内容的，可以与浏览器窗口进行互动的对象结构

  4. BOM可实现的功能

    • 弹出新的浏览器窗口
    • 移动，关闭浏览器窗口以及调整窗口的大小
    • 页面的前进和后退

六. window对象

  1. 常用属性：

    • history：有关客户访问过的URL信息
    • location：有关当前URL的信息
    • 语法：属性名="属性值"

  2. 常用方法：

    • prompt()：显示可提示用户输入的对话框

    • alert()：显示带有一个提示信息和一个确认按钮的警示框

    • confirm()：显示一个带有提示信息，确认和取消按钮的对话框

    • close()：关闭浏览器窗口

    • open()：打开一个新的浏览器窗口，加载给定URL所指定的文档

      open("弹出窗口的url")

    • setTimeout()：在指定的毫秒数后调用一次函数或计算表达式

      setTimeout("调用的函数",等待的毫秒数)

    • setInterval：按照指定的周期（以毫秒计）来调用函数或表达式

  3. history对象：

    • back()：加载history对象列表中的前一个URL

    • forward()：加载history对象列表中的下一个URL

    • go()：加载history对象列表中的某个具体URL

      history.back()   ==  history.go(-1)  //等价，后退
history.forward()  ==  history.go(1)   //等价 ，前进

  4. location对象：

    • host：设置或返回主机名和当前URL的端口号
    • hostname：设置或返回当前URL的主机名
    • href：设置或返回完整的URL
    • reload()：重新加载当前文档
    • replace()：用新的文档替换当前文档

  5. Document对象：

    • referrer：返回载入当前文档的URL

    • URL：返回当前文档的URL

      //语法
document.referrer
document.URL

  6. Document对象的常用方法：

    • getElementById()：返回对拥有指定id的第一个对象的引用（对象的id唯一）
    • getElementsByName()：返回带有指定名称的对象的集合（相同name属性）
    • getElementsByTagName()：返回带有指定标签名的对象的集合（相同的元素）
    • write()：向文档写文本，HTML表达式或JavaScript代码

七.JavaScript内置对象

  1. Date:用于操作日期和时间

    //1.首先需要创建一个Date对象
var date = new Date
//2.Date对象的常用方法
date.getDate()  //返回Date对象的一个月中的每一天，其值介于1~31之间
date.getDay()   //返回Date对象的星期中的每一天，其值介于0~6之间
date.getHours()   //返回Date对象的小时数，其值介于0~23之间
date.getMinutes()  //返回Date对象的分钟数，其值介于0~59之间
date.getSeconds()  //返回Date对象的秒数，其值介于0~59之间
date.getMonth()   //返回Date对象的月份，其值介于0~11之间
date.getFullYear()  //返回Date对象的年份，其值为四位数
date.getTime()   //返回自1970年1月1日00：00：00到该日期对象表示的时间之间的毫秒数

  2. Math对象

    //使用方法：Math.方法
ceil()   //对数进行上舍入
floor()  //对数进行下舍入
round()  //把数四舍五入为最接近的数
random()  //返回0~1之间的随机数

    toFixed() ：取小数点后俩位

  3. Array对象

    //使用时需要用new关键字来创建
push(参数...)  //向末尾添加一个或多个元素，并返回新的长度，此时修改了原数组，
pop()    //删除数组最后一个元素，把数组长度减1，返回它删除元素的值，修改了原数组
unshift(参数...)   //向数组开头添加一个或多个元素，并返回新的长度，修改了原数组
shift()   //删除数组的第一个元素，数组长度减1，返回它删除元素的值，修改了原数组
reverse()   //颠倒数组中元素的顺序，该方法改变了原来的数组，返回新数组
sort()    //对数组的元素进行排序，该方法改变了原来的数组，返回新数组

  4. String对象

    //直接进行使用
indexOf("要查找的字符"，开始的位置)  //返回指定内容在原字符串中的位置，如果找不到就返回-1，开始的位置时index的索引号
lastIndexOf()   //从后往前找，只找第一个匹配的

八.操作DOM

  1. DOM：Document Object Model（文档对象模型）

  2. 节点：DOM将所有的文档中的内容都定义为节点

  3. 节点与节点的关系：

  4. 访问节点：

    //使用getElement系列方法访问指定节点
getElementById()
getElementsByName()
getElementsByTagName()
//根据层次关系访问节点（节点属性）
parentNode  //返回节点的父节点
childNodes  //返回子节点集合，childNode[i]
firstChild  //返回节点的第一个子节点，最普通的用法是访问该元素的文本节点
lastChild   //返回节点的最后一个子节点
nextSibling   //下一个节点
previousSibling   //上一个节点
//根据层次关系访问节点（element属性）
firstElementChild   //返回节点的第一个元素节点
lastElementChild    //返回节点的最后一个子元素节点
nextElementSibling   //下一个元素节点
previousElementSibling   //上一个元素节点

  5. 节点属性：一般来说节点至少拥有 nodeType(节点类型)，nodeName(节点名称)，nodeValue(节点值)

  6. 节点类型：

  7. 操作节点的属性：

    getAttribute("属性名")
setAttribute("属性名","属性值")

  8. 创建和插入节点：

    //创建一个标签名为"div"的新元素节点
document.createElement("div")
//追加元素对象到父元素的内部末尾
父节点.appendChild(元素对象)
//将一个节点添加到父节点的指定子节点之前，把参数1节点对象插入到参数2节点对象之前
父节点.insertBefore(参数1,参数2)
//复制某个指定的节点
指定的节点.cloneNode()

  9. 删除和替换节点：

    //删除指定的节点
父节点.removeChild(node)
//用其他节点替换指定的节点
父节点.replaceChild(newNode,oldNode)

  10. 操作节点的样式：

    需改变样式的节点.style.color="#ffffff"

  11. className是类别选择器的名字，使用这个className可以进行动态更改某个标签的类的属性值

    类名需要改变的元素.className="样式名称"

  12. 获取元素的样式：

    //这个方法只能获取写在html标签中的写在style属性中的值，而无法获取定义在<style  type="text/css"></>里面的属性值
obj.style
//getComputedStyle()是window的方法，它有俩个参数，参数1为要获取元素的样式，参数2可以传递一个伪元素，一般都传null，该方法会返回一个对象，对象中封装了当前元素对应的样式，可以通过对象样式名来读取样式，如果获取的样式没有设置，则会获取到真实的值，而不是默认值
document.defaultView.getComputedSytle(元素，null).属性

九.对象

  1. 对象是包含相关属性和方法的集合

  2. 什么是面向对象：

    • 面向对象仅仅是一个概念或者编程思想
    • 通过一种叫做原型的方式来实现面向对象编程

  3. 对象分为自定义对象和内置对象

  4. 自定义对象

    //基于Object对象的方式创建对象
var 对象名 = new Object();
//使用字面量赋值方式创建对象
var 对象名 = {    }
posted @ 2023-04-06 21:15  xiaoyaoya  阅读(77)  评论(0)    收藏  举报