JavaScript 学习笔记

JavaScript的概述

什么是javascript: JavaScript是一种直译式脚本语言

什么是脚本语言?

​    java源代码 ----> 编译成.class文件 -----> java虚拟机中才能执行

​    脚本语言:   源码  -------- > 解释执行

​    js由浏览器来解释执行

HTML: 决定了页面的框架  

CSS: 用来美化我们的页面

JS:    提供用户的交互的

JS的组成：
ECMAScript : 核心部分 ,定义js的语法规范

DOM: document Object Model 文档对象模型 , 主要是用来管理页面的

BOM : Browser Object Model  浏览器对象模型, 前进,后退,页面刷新, 地址栏, 历史记录, 屏幕宽高

JS的语法:

变量弱类型: var i = true

区分大小写

语句结束之后的分号 ,可以有,也可以没有

写在script标签


S的数据类型:

- 基本类型
  - string
  - number
  - boolean 
  - undefine
  - null
- 引用类型
  - 对象, 内置对象
- 类型转换
  - js内部自动转换 

JS的运算符和语句:

- 运算符和java 一样
  - "===" 全等号: 值和类型都必须相等
  - == 值相等就可以了
- 语句和java 一样


JS的输出

- alert()  直接弹框
- document.write()  向页面输出
- console.log() 向控制台输出
- innerHTML:  向页面输出



- 获取页面元素: document.getElementById("id的名称");



JS声明变量:

​    var 变量的名称 = 变量的值

JS声明函数:

​    var 函数的名称 = function(){    

​    }

​    

​    function 函数的名称(){

​    }

 

 定时器:
​    setInterval("test()",3000)   每隔多少毫秒执行一次函数

​    setTimeout("test()",3000)  多少毫秒之后执行一次函数

​    timerID 上面定时器调用之后

​    clearInterval()

​    clearTimeout()

切换图片

​    img.src = "图片路径"



事件: 文档加载完成的事件 onload事件

显示广告  :   img.style.display = "block"

隐藏广告:    img.style.display ="none"



引入一个外部js文件  


<script src="js文件的路径"  type="text/javascript"/>


表单校验中常用的事件:

​    获得焦点事件: onfocus

​    失去焦点事件  onblur

​    按键抬起事件:  onkeyup

 

 

一些常用的 HTML DOM 方法：
getElementById(id) - 获取带有指定 id 的节点（元素）
appendChild(node) - 插入新的子节点（元素）
removeChild(node) - 删除子节点（元素）

一些常用的 HTML DOM 属性：
innerHTML - 节点（元素）的文本值
parentNode - 节点（元素）的父节点
childNodes - 节点（元素）的子节点
attributes - 节点（元素）的属性节点

查找节点：
getElementById() 返回带有指定 ID 的元素。
getElementsByTagName() 返回包含带有指定标签名称的所有元素的节点列表（集合/节点数组）。
getElementsByClassName() 返回包含带有指定类名的所有元素的节点列表。

增加节点：
createAttribute() 创建属性节点。
createElement() 创建元素节点。
createTextNode() 创建文本节点。
insertBefore() 在指定的子节点前面插入新的子节点。
appendChild() 把新的子节点添加到指定节点。

删除节点：
removeChild() 删除子节点。
replaceChild() 替换子节点。

修改节点：
setAttribute() 修改属性
setAttributeNode() 修改属性节点