js入门

69 阅读5分钟

总结知识点

一、认识 JavaScript****

1. 什么是JavaScript?

JavaScript是世界上最流行的语言之一,是一种运行在客户端的脚本语言

(Script是脚本的意思)。

脚本语言∶不需要编译,运行过程中由js解释器(js 引擎)逐行来进行解释并执行

现在也可以基于Node.js技术进行服务器端编程

 

2. JavaScript的作用

表单动态校验(密码强度检测)( JS产生最初的目的)

网页特效

服务端开发(Node.js)

桌面程序(Electron)

控制硬件-物联网(Ruff)

游戏开发(cocos2d-js)

 

3. JavaScript的组成

 

image.png  

4. JavaScript的三种书写位置

 

image.png

image.png

image.png

 

5. JavaScript的输入输出语句

image.png  

二、变量****


1. 什么是变量?

白话:变量就是一个装东西的盒子。

通俗︰变量是用于存放数据的容器。我们通过变量名获取数据,甚至数据可以修改。

 

image.png

2. 变量的使用

image.png

  image.png

image.png 3. 变量的命名规范

image.png  

 

 

 

 

 

三、数据类型****


1.  基本的数据类型

image.png  

2.  获取数据类型

typeof可用来获取检测变量的数据类型

 

image.png

 

 

  1.  数据类型的转换

数字型转换为字符串型

image.png  

写法:

image.png

 

 

 

 

 

转换为数字型 (重点)

image.png

 

(1)ParseInt整数

     console.log(parseInt(num2) + parseInt(num3));

 

(2)ParseFloat小数

    console.log(parseFloat('2.999'));

 toFixed():设置浮点型数据保留几位小数

(3)利用Number(变量)

image.png

 

(4)利用算数的运算

image.png

 

转换为布尔型

image.png

image.png

四、运算符****


1.  算术运算符

image.png

 

2. 表达式和返回值

image.png  

3. 递增和递减运算符

image.png

(前置)

image.png  

image.png (后置)

image.png

image.png

 

4. 比较运算符

image.png  

5. 逻辑运算符

image.png

与&&有假即假,或||有真即真,非!一定为假

 

 

6. 赋值运算符

image.png

 

 

 

7.运算符的优先级

image.png

 

 

五、流程控制****


1. 什么是流程控制?

在一个程序执行的过程中,各条代码的执行顺序对程序的结果是有直接影响的。很多时候我们要通过控制代码的执行顺序来实现我们要完成的功能。

简单理解∶流程控制就是来控制我们的代码按照什么结构顺序来执行
流程控制主要有三种结构,分别是顺序结构、分支结构和循环结构,这三种结构代表三种代码执行的顺序。

 

image.png  

 

 

 

 

 

 

 

2. 分支语句

 image.png

(if分支语句)

image.png

写法:

image.png  

 

(if elese双分支语句)

image.png

写法:

image.png

 

image.png

 

(if elese if多分支语句)

image.png

image.png

写法:

image.png

 

 

 

3. 三元表达式

执行思路―如果条件表达式结果为真则返回表达式1的值如果条件表达式结果为假则返回表达式2的值。

写法:

image.png  

4. switch语句

执行思路―利用我们的表达式的值和 case后面的选项值相匹配如果匹配上,就执行该case里面的语句如果都没有匹配上,那么执行default里面的语句。

写法:

image.png  

 

 

 

(if elese if和switch的区别)

 

image.png  

六、 循环****

 

1. 循环目的?

在实际问题中,有许多具有规律性的重复操作,因此在程序中要完成这类操作就需要重复执行某些语句。

 

2. for循环

image.png

写法:

image.png  

3. 双重for循环

 

4. while循环

image.png

写法:

image.png

 

5. do while循环

先执行一次再判断

image.png

 

6. continue 关键字(继续下个循环)

image.png

7. break 关键字(终止循环)

image.png

 

七、数组****

 

1. 什么是数组?

答∶数组是指一组数据的集合,其中的每个数据被称作元素,在数组中可以存放任意类型的元素。数组是一种将一组数据存储在单个变量名下的优雅方式。

image.png  

 

2. 数组的创建方式

image.png

image.png

 

 

 

 

 

 

 

(索引方式)

image.png

 

(遍历数组)

写法:

image.png  

 

 

 

 

 

八、DOM****


1. 什么是DOM?

文档对象模型(Document Object Model,简称DOM),是W3C组织推荐的处理可扩展标记语言(HTML或者XML )的标准编程接口。

W3C已经定义了一系列的DOM接口,通过这些DOM接口可以改变网页的内容、结构和样式。







DOM树****

image.png

image.png  

2. 获取元素  

 

方法说明
document.getElementById()返回一个匹配特定ID的元素
document.getElementsByName()返回带有指定名称的对象集合
document.getElementsByTagName()返回带有指定标签名的对象集合(用数组存放)
document.getElementsByClassName()返回带有指定类名的对象集合(不支持IE6~8)

 

获取body

 

image.png  

 

 

获取html

 

image.png

获取form和img

 

image.png

 

querySelector 获取指定元素

querySelectorAll 获取所有指定元素

image.png

 

children 获取指定元素下的子级

image.png  

innerHTML 获取指定元素的html内容

image.png

 

innerText 获取元素的文本内容

image.png  

textContent 获取元素文本内容 并保留文本格式

 

image.png  

3. 修改元素属性

Style

image.png

image.png  

attributes 获取标签上的全部属性

 

setAttribute 设置标签上的指定属性

 

getAttribute 获取标签上的指定属性

 

removeAttribute移除标签上的全部属性

dataset 获取自定义属性

 

dir 查看元素的属性

 

4. 修改元素样式

 

classList 修改元素操作样式名

+ add 添加样式名

+remove 移除指定样式名

+toggle 切换样式名

 

索引对应样式名 item

 

判断是否含有对应样式名 contains

 

5.  节点操作

image.png

image.png

 

 

返回第一个或最后一个子节点和子元素写法:

 

image.png  

 

返回所有节点写法:

image.png

创建新增元素写法:

image.png

替换指定子元素写法:

image.png

6.DOM窗口和位置

image.png

    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);

 

 

  1.  计时器

image.png

(单次定时器)

(循环定时器)

一、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);