文章目录

JavaScript简介
- 什么是JavaScript？
- JavaScript的构成
- JavaScript特点
JavaScript基础知识
- JavaScript的引入方式
- - 1. 将JS代码嵌入在元素"事件"中
  - 2. 内嵌式
  - 3. 外链式
- JavaScript数据类型
- JavaScript变量
- JavaScript函数
- JavaScript对象
- JavaScript事件处理
JavaScript HTML DOM
- DOM简介
- DOM应用
- - *1. 按id属性，精确查找一个元素对象
  - *2. 按标签名找
  - *3. 通过name属性查找
  - *4. 通过class查找
- getBoundingClientRect()方法
BOM
- 什么是BOM
- 浏览器对象模型
- 获取当前窗口大小

JavaScript简介

什么是JavaScript？

JavaScript 是一种运行于JavaScript解释器/引擎中的解释型脚本语言

运行环境：
1、独立安装的JS解释器(NodeJS)
2、嵌入在[浏览器]内核中JS解释器

解释性脚本语言：
运行之前是不需要编译的，运行之前不会
检查错误，直到碰到错误为止

JavaScript的构成

完整的JS是由三部分组成

核心(ECMAScript)
文档对象模型(DOM,Document Object Model) 让JS有能力与网页进行对话
浏览器对象模型(BOM,Browser Object Model) 让JS有能力与浏览器进行对话

JavaScript特点

1、开发工具简单，记事本即可
2、无需编译，直接由JS引擎负责执行
3、弱类型语言由数据来决定数据类型
4、面向对象

JavaScript基础知识

JavaScript的引入方式

在HTML文档中引入JavaScript文件与引入CSS文件的方法类似，分为三种方式：

1. 将JS代码嵌入在元素"事件"中

onclick : 当单击元素时所做的操作
<div id="" onclick="JS代码">xxx</div>

举例：

<html><body><button onclick=" console.log( 'Hello  World' ); ">打印消息</button></body>
</html>

2. 内嵌式

<head>
<script type="text/javascript">// 此处为JavaScript代码
</script>
</head>

3. 外链式

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

JavaScript数据类型

JavaScript中有5种基本数据类型。

1、Number：数值：1、0、0.35、-0.35
2、String：字符串类型：“abc”、”小花”
3、Boolean：布尔类型：true、false
4、Null：空类型：null
5、Undefined：未定义类型：undefined

JavaScript变量

在JavaScript中使用var进行局部变量的声明。

var str="变量名";
var num=1.5;age=23;   <!--对于弱类型语言JavaScript来说声明变量可以不加var，这时将会被识别为全局变量。-->
var str=new String;  <!--JavaScript中，“new”关键字用于声明变量，所有的变量均为对象，声明了一个变量时，就创建了一个新的对象。-->
var cars=new Array("A","B","C");//数组

JavaScript函数

函数（function）也可以叫做方法，是将一些代码组织在一起，形成一个用于完成某个具体功能的代码块，在需要时可以进行重复调用。

分为以下四种写法：

//标准写法
funciton sayHello (){
alert("hello world") ；
}

//变量形式的写法
var sayHello =function(){alert("hello world")；
}

// 带参数的函数（参数弱类型）
var sayHello =function(msg){
alert(msg);
}

// 函数的调用
sayHello("hello world");

JavaScript对象

在 JavaScript 中，对象是拥有属性和方法的数据。属性是对象相关的值，方法是对象可以执行的动作。

可以有以下两种写法：

var person=new Object();//创建对象person.name="lucy";//设置name属性值为lucyperson.eat=function(){alert(person.name+"吃饭");}person.eat();//调用对象方法

var person = function(name) {this.name = name;this.eat=function(){alert(name+"吃饭");}}var p=new person("lucy");p.eat();

JavaScript事件处理

采用事件驱动是JavaScript语言的一个最基本特征，所谓的事件是指用户在访问页面时执行的操作，常用的事件类型如右表所示。

另外事件有很多属性，常用的事件属性如右表所示。

例如某个按钮应用了onlick事件，效果如下所示。

JavaScript HTML DOM

DOM简介

DOM的全称为文档对象模型（Document Object Model）。当网页被加载时，浏览器会将HTML DOM 模型被构造为对象的树。

通过JavaScript来创建动态的 HTML。主要表现在4个方面。

要想操作HTML元素及其属性，首先应该获得这个元素对象，document对象的常用获取HTML元素对象的方法如右表所示。

DOM操作可以获取HTML元素的属性和属性值，接下来通过案例来演示上述三个方法的具体应用。

DOM应用

*1. 按id属性，精确查找一个元素对象

var elem=document.getElementById("id")
效率非常高！

强调: getElementById只能用在document上

*2. 按标签名找

var elems=parent.getElementsByTagName("tag");
查找指定parent节点下的所有标签为tag的子代节点

强调：

可用在任意父元素上
不仅查直接子节点，而且查所有子代节点
返回一个动态集合即使只找到一个元素，也返回集合必须用[0],取出唯一元素

*3. 通过name属性查找

document.getElementsByName(‘name属性值’)

可以返回DOM树中具有指定name属性值的所有子元素集合。

*4. 通过class查找

查找父元素下指定class属性的元素
var elems=parent.getElemnetsByClassName("class");
有兼容性问题，必须为IE9+

getBoundingClientRect()方法

getBoundingClientRect()方法用于获得页面中某个元素的左，上，右和下分别相对浏览器视窗的位置，或者说一个Element元素的坐标，现在已经是一个W3C标准。

该方法返回一个Object对象，该对象有6个属性：top、left、right、bottom、width、height，具体应用如下所示。

BOM

什么是BOM

Browser Object Model，即专门操作浏览器窗口的API——没
有标准, 有兼容性问题

浏览器对象模型

获取当前窗口大小

完整窗口大小: window.outerWidth/outerHeight
文档显示区大小: window.innerWidth/innerHeight

入门JavaScript？看懂这篇文章就够了！——Web前端系列学习笔记相关推荐

入门响应式Web？看懂这篇文章就够了！——Web前端系列学习笔记
文章目录视口基础知识视口概念视口基本属性 meta 标签视口应用实例媒体查询基础知识媒体查询概念 demo1-媒体查询 demo1效果百分比布局百分比布局概述 demo2-百分比布局 ...
看懂这篇文章,你就懂了信息安全的密码学
看懂这篇文章-你就懂了信息安全的密码学一.前言一个信息系统缺少不了信息安全模块,今天就带着大家全面了解并学习一下信息安全中的密码学知识,本文将会通过案例展示让你了解抽象的密码学知识,阅读本文你 ...
C++面试常见问答题看这三篇文章就够了（上）
目录 1. 标识符的组成结构 2. 动态关联和静态关联的区别 3. 重载(overload)和重写(overried)的区别 4. class和struct的区别 5. 构造方法的特点 6. 面向对 ...
Dart语言基础，看完这篇文章就够了（二）
文章内容是我在学习Flutter过程中对知识点的梳理和总结.如有不对的地方,欢迎指出. 本文承接Dart语言基础,看完这篇文章就够了(一),进一步了解Dart语法知识. 文章目录 1 流程控制语句 2 ...
前端跨域请求get_（单点登录）跨域SSO看这篇文章就够了：前端篇
前言前俩篇文章,我们从概念,聊到了服务器中设计的内容.不知道大家是否觉得通俗易懂呢? 接下来的内容则有些偏向前端部分. 正文三.Cookie传递 3.1.通过URL参数实现跨域信息传递我们要在A ...
如何开发React Native 原生模块(Native Modules)？看完这篇文章就够了(Android)
期待已久的新课上线啦!解锁React Native开发新姿势,一网打尽React Native最新与最热技术,点我Get!!! 前言一直想写一下我在React Native原生模块封装方面的一些经验 ...
Python正则表达式，看完这篇文章就够了...#华为云·寻找黑马程序员#
正则表达式简介正则表达式,是一个特殊的字符序列,又称规则表达式(英语:Regular Expression,在代码中常简写为regex.regexp 或RE),本质而言是一种小型的,高度专业化的编程 ...
Python入门：看了这篇文章如果1个小时没法入门Python，那么还是换个语言吧
文章目录 1 环境配置与基本运算 2 调用各种包 3 判断.循环 4 函数 5 数据结构 6 字符串 7 回到本地 8 命令行版2048小游戏此之谓入门,其标准是,在不计效率的情况下,可以使用这门语 ...
二叉排序树的中序遍历规律_看懂这篇文章，玩转二叉查找树
所谓二叉查找树,就是按照二分进行查找,每次查询只需要选择其中一个子树就进行查找,从而减少查找次数,提升查询效率! 一.介绍在前面的文章中,我们对树这种数据结构做了一些基本介绍,今天我们继续来聊聊一种 ...

入门JavaScript？看懂这篇文章就够了！——Web前端系列学习笔记