JavaScript基础知识

计算机基础

计算机组成

在这里插入图片描述

数据存储

在这里插入图片描述

数据存储单位

在这里插入图片描述

程序运行

在这里插入图片描述

解释型语言和编译型语言

在这里插入图片描述
在这里插入图片描述

标识符、关键字、保留字

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

初识JavaScript

JavaScript是什么

在这里插入图片描述

浏览器中的 JavaScript 能做什么?

现代的 JavaScript 是一种“安全的”编程语言。它不提供对内存或 CPU 的底层访问,因为它最初是为浏览器创建的,不需要这些功能。

JavaScript 的能力很大程度上取决于它运行的环境。例如,Node.js 支持允许 JavaScript 读取/写入任意文件,执行网络请求等的函数。

浏览器中的 JavaScript 可以做与网页操作、用户交互和 Web 服务器相关的所有事情。

例如,浏览器中的 JavaScript 可以做下面这些事:

  • 在网页中添加新的 HTML,修改网页已有内容和网页的样式。
  • 响应用户的行为,响应鼠标的点击,指针的移动,按键的按动。
  • 向远程服务器发送网络请求,下载和上传文件(所谓的 AJAX 和 COMET 技术)。
  • 获取或设置 cookie,向访问者提出问题或发送消息。
  • 记住客户端的数据(“本地存储”)。

浏览器中的 JavaScript 不能做什么?

为了用户的(信息)安全,在浏览器中的 JavaScript 的能力是受限的。目的是防止恶意网页获取用户私人信息或损害用户数据。

此类限制的例子包括:

  • 网页中的 JavaScript 不能读、写、复制和执行硬盘上的任意文件。它没有直接访问操作系统的功能。

    现代浏览器允许 JavaScript 做一些文件相关的操作,但是这个操作是受到限制的。仅当用户做出特定的行为,JavaScript才能操作这个文件。例如,用户把文件“拖放”到浏览器中,或者通过 标签选择了文件。

    有很多与相机/麦克风和其它设备进行交互的方式,但是这些都需要获得用户的明确许可。因此,启用了 JavaScript的网页应该不会偷偷地启动网络摄像头观察你,并把你的信息发送到 美国国家安全局。

  • 不同的标签页/窗口之间通常互不了解。有时候,也会有一些联系,例如一个标签页通过 JavaScript打开的另外一个标签页。但即使在这种情况下,如果两个标签页打开的不是同一个网站(域名、协议或者端口任一不相同的网站),它们都不能相互通信。

    这就是所谓的“同源策略”。为了解决“同源策略”问题,两个标签页必须都包含一些处理这个问题的特定的 JavaScript代码,并均允许数据交换。

    这个限制也是为了用户的信息安全。例如,用户打开的 http://anysite.com 网页必须不能访问http://gmail.com(另外一个标签页打开的网页)也不能从那里窃取信息。

  • JavaScript可以轻松地通过互联网与当前页面所在的服务器进行通信。但是从其他网站/域的服务器中接收数据的能力被削弱了。尽管可以,但是需要来自远程服务器的明确协议(在HTTP header 中)。这也是为了用户的信息安全。
    在这里插入图片描述

如果在浏览器环境外(例如在服务器上)使用 JavaScript,则不存在此类限制。现代浏览器还允许安装可能会要求扩展权限的插件/扩展。

浏览器执行js

在这里插入图片描述

js的组成

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

js输入输出语句

在这里插入图片描述

变量声明特殊情况

在这里插入图片描述

代码风格

在这里插入图片描述

变量命名规范

在这里插入图片描述

变量的数据类型

在这里插入图片描述
在这里插入图片描述

简单数据类型(基本数据类型)

在这里插入图片描述

数字型Number

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
是数字
是数字返回false,不是返回true

字符串型String

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

获取数据变量类型

在这里插入图片描述
在这里插入图片描述

数据类型转换

转换为字符串类型

在这里插入图片描述

转换为数字型

在这里插入图片描述

布尔型

在这里插入图片描述

运算符

前置递增和后置递增

在这里插入图片描述

运算符优先级

在这里插入图片描述

作用域

在这里插入图片描述
在这里插入图片描述

断点调试

在这里插入图片描述

关键字break和continue

在这里插入图片描述
在这里插入图片描述

预解析

在这里插入图片描述
注意:
在这里插入图片描述

对象

三大对象
在JavaScript中提供三种自带的对象,分别是"本地对象" “内置对象” “宿主对象”

  • 宿主:就是指JavaScript运行环境,js可以在浏览器中运行,也可以在服务器上运行(nodejs)
  • 本地对象:与宿主无关,无论在浏览器还是服务器中都有的对象,就是ECMAScript标准中定义的类(构造函数),在使用过程中需要我们手动new创建.例如:Boolean、Number、String、Array、Function、Object、Date、RegExp等。
  • 内置对象:与宿主无关,无论在浏览器还是服务器中都有的对象,ECMAScript已经帮我们创建好的对象.
    在使用过程中无需我们手动new创建.例如:Global、Math、JSON
  • 宿主对象:对于嵌入到网页中的JS来说,宿主对象就是浏览器,所以宿主对象就是浏览器提供的对象,包含:Window和Document等.所有的DOM和BOM对象都属于宿主对象
    自定义对象:我们自己编写的类创建的对象

创建对象的三种方式

利用字面量创建对象

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

利用new Object创建对象

在这里插入图片描述

利用构造函数创建对象

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
构造函数与对象:
在这里插入图片描述

new关键字

在这里插入图片描述

for…in…遍历对象

在这里插入图片描述

内置对象

JS中常用的内置对象:Array对象、Date对象、正则表达式对象、string对象、Global对象等。
在这里插入图片描述

查文档

MDN

在这里插入图片描述

如何学习对象中的方法

在这里插入图片描述

数组对象

创建数组的两种方式

在这里插入图片描述

Array 对象方法

检测是否为数组的两种方式

在这里插入图片描述

字符串对象

基本包装类型

在这里插入图片描述

字符串的不可变

在这里插入图片描述

简单类型和复杂类型

在这里插入图片描述
在这里插入图片描述

数据类型内存分配

在这里插入图片描述
在这里插入图片描述

简单数据类型传参

在这里插入图片描述

复杂数据类型传参

在这里插入图片描述
在这里插入图片描述

Web APIs和js基础关联性

在这里插入图片描述

API和Web API

在这里插入图片描述
在这里插入图片描述
MDN详细API

DOM

在这里插入图片描述
Dom继承关系图:
在这里插入图片描述

DOM树

在这里插入图片描述

如何获取页面元素

在这里插入图片描述

根据ID获取:

在这里插入图片描述
注意:

因为文档页面从上往下加载,所以先有标签,然后才能getElementById
参数是字符串,所以需要加引号
返回的是一个 element 对象
console.dir 可以打印返回的元素对象,更好的查看里面的属性和方法

根据标签名获取

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

通过HTML5新增的方法获取

支持HTML5的各主流浏览器的最低版本:

  • IE9
  • Firefox 3.5 Chrome 3.0
  • Safari 3.0
  • Opera 10.5
    在这里插入图片描述

在这里插入图片描述

获取特殊元素(body,html)

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值