总结知识点
一、认识 JavaScript****
1. 什么是JavaScript?
JavaScript是世界上最流行的语言之一,是一种运行在客户端的脚本语言
(Script是脚本的意思)。
脚本语言∶不需要编译,运行过程中由js解释器(js 引擎)逐行来进行解释并执行
现在也可以基于Node.js技术进行服务器端编程
2. JavaScript的作用
表单动态校验(密码强度检测)( JS产生最初的目的)
网页特效
服务端开发(Node.js)
桌面程序(Electron)
控制硬件-物联网(Ruff)
游戏开发(cocos2d-js)
3. JavaScript的组成
4. JavaScript的三种书写位置
5. JavaScript的输入输出语句
二、变量****
1. 什么是变量?
白话:变量就是一个装东西的盒子。
通俗︰变量是用于存放数据的容器。我们通过变量名获取数据,甚至数据可以修改。
2. 变量的使用
3. 变量的命名规范
三、数据类型****
1. 基本的数据类型
2. 获取数据类型
typeof可用来获取检测变量的数据类型
- 数据类型的转换
数字型转换为字符串型
写法:
转换为数字型 (重点)
(1)ParseInt整数
console.log(parseInt(num2) + parseInt(num3));
(2)ParseFloat小数
console.log(parseFloat('2.999'));
toFixed():设置浮点型数据保留几位小数
(3)利用Number(变量)
(4)利用算数的运算
转换为布尔型
四、运算符****
1. 算术运算符
2. 表达式和返回值
3. 递增和递减运算符
(前置)
(后置)
4. 比较运算符
5. 逻辑运算符
与&&有假即假,或||有真即真,非!一定为假
6. 赋值运算符
7.运算符的优先级
五、流程控制****
1. 什么是流程控制?
在一个程序执行的过程中,各条代码的执行顺序对程序的结果是有直接影响的。很多时候我们要通过控制代码的执行顺序来实现我们要完成的功能。
简单理解∶流程控制就是来控制我们的代码按照什么结构顺序来执行
流程控制主要有三种结构,分别是顺序结构、分支结构和循环结构,这三种结构代表三种代码执行的顺序。
2. 分支语句
(if分支语句)
写法:
(if elese双分支语句)
写法:
(if elese if多分支语句)
写法:
3. 三元表达式
执行思路―如果条件表达式结果为真则返回表达式1的值如果条件表达式结果为假则返回表达式2的值。
写法:
4. switch语句
执行思路―利用我们的表达式的值和 case后面的选项值相匹配如果匹配上,就执行该case里面的语句如果都没有匹配上,那么执行default里面的语句。
写法:
(if elese if和switch的区别)
六、 循环****
1. 循环目的?
在实际问题中,有许多具有规律性的重复操作,因此在程序中要完成这类操作就需要重复执行某些语句。
2. for循环
写法:
3. 双重for循环
4. while循环
写法:
5. do while循环
先执行一次再判断
6. continue 关键字(继续下个循环)
7. break 关键字(终止循环)
七、数组****
1. 什么是数组?
答∶数组是指一组数据的集合,其中的每个数据被称作元素,在数组中可以存放任意类型的元素。数组是一种将一组数据存储在单个变量名下的优雅方式。
2. 数组的创建方式
(索引方式)
(遍历数组)
写法:
八、DOM****
1. 什么是DOM?
文档对象模型(Document Object Model,简称DOM),是W3C组织推荐的处理可扩展标记语言(HTML或者XML )的标准编程接口。
W3C已经定义了一系列的DOM接口,通过这些DOM接口可以改变网页的内容、结构和样式。
DOM树****
2. 获取元素
| 方法 | 说明 |
|---|---|
| document.getElementById() | 返回一个匹配特定ID的元素 |
| document.getElementsByName() | 返回带有指定名称的对象集合 |
| document.getElementsByTagName() | 返回带有指定标签名的对象集合(用数组存放) |
| document.getElementsByClassName() | 返回带有指定类名的对象集合(不支持IE6~8) |
获取body
获取html
获取form和img
querySelector 获取指定元素
querySelectorAll 获取所有指定元素
children 获取指定元素下的子级
innerHTML 获取指定元素的html内容
innerText 获取元素的文本内容
textContent 获取元素文本内容 并保留文本格式
3. 修改元素属性
Style
attributes 获取标签上的全部属性
setAttribute 设置标签上的指定属性
getAttribute 获取标签上的指定属性
removeAttribute移除标签上的全部属性
dataset 获取自定义属性
dir 查看元素的属性
4. 修改元素样式
classList 修改元素操作样式名
+ add 添加样式名
+remove 移除指定样式名
+toggle 切换样式名
索引对应样式名 item
判断是否含有对应样式名 contains
5. 节点操作
返回第一个或最后一个子节点和子元素写法:
返回所有节点写法:
创建新增元素写法:
替换指定子元素写法:
6.DOM窗口和位置
var str = '字符串';
console.log(str);
console.log(window.str);
直接使用未声明的变量会报js语法错误
但是若使用window去调用为声明的变量,不会报语法错误,只会返回一个undefined
console.log(newStr);
console.log(window.newStr);
判断窗口是否关闭,返回布尔值
console.log(closed);
console.log(window.closed);
消息确认框
confirm('是否删除?');
弹窗输入
prompt('请输入内容');
prompt('请输入内容', '默认值');
打开新窗口
open();
open('../1117/元素样式修改2.html')
window.open();
关闭窗口
close();
window.close();
screenLeft,screenX:相对于屏幕X轴(左侧)的距离
screenX与screenLeft是同一个意思
console.log('X', window.screenLeft, screenX);
screenTop,screenY:相对于屏幕Y轴(头部)的距离
console.log('Y', window.screenTop, screenY);
innerHeight:文档区域高度
outerHeight:文档区域及外部工具栏高度
console.log('高度', innerHeight);
console.log('外部高度', outerHeight);
innerWidth:文档区域宽度
outerWidth:文档区域及外部工具栏宽度
console.log('宽度', innerWidth);
console.log('外部宽度', outerWidth);
- 计时器
(单次定时器)
(循环定时器)
一、8、Location对象
3s后加载新的页面
setTimeout(function(){
// assign():加载新的页面,参数是新页面的路径
location.assign('./16-17作业.html');
}, 3000);
页面重新加载刷新
location.reload();
替换原本的页面
location.replace('./16-17作业.html');
console.log(location.href)
// 路径名
console.log(location.pathname);
// 协议
console.log(location.protocol);
// 端口号
console.log(location.port)
// 返回URL的主机名和端口号
console.log(location.host);
// 返回URL的主机名
console.log(location.hostname);