目录
一.Javascript概念:
1.1 Javascript简介:
Javascript是一门轻量级的脚本语言,是一种运行在客户端的脚本语言 (Script 是脚本的意思,脚本语言:不需要编译,运行过程中由 js 解释器( js 引擎)逐行来进行解释并执行)。不同于Java程序运行在JVM中,Javascript运行是直接运行在浏览器中,主要使用来实现页面功能和业务逻辑。
1.2 Javascript的组成:
Javascript主要由三部分组成:
- ECMAscript
- DOM
- BOM
ECMAScript :规定了 JS 的编程语法和基础核心知识,是所有浏览器厂商共同遵守的一套 JS 语法工业标准。DOM: 文档对象模型 ( DocumentObject Model ,简称 DOM ),是 W3C 组织推荐的处理可扩展标记语言的标 准编程接口。通过 DOM 提供的接口可以对页面上的各种元素进行操作(大小、位置、颜色等)。BOM: 浏览器对象模型 (Browser Object Model ,简称 BOM) 是指浏览器对象模型,它提供了独立于内容的、可 以与浏览器窗口进行互动的对象结构。通过 BOM 可以操作浏览器窗口,比如弹出框、控制浏览器跳转、 获取分辨率。
Javascript一共有三种引入方式:
- 行内式:将单行或少量 JS 代码写在HTML标签的事件属性中(以 on 开头的属性)。
<input type="button" value="点我试试" onclick="alert('Hello World')" />
- 内嵌式:可以将多行JS代码写到 script 标签中。内嵌 JS 是学习时常用的方式
<!-- 内嵌式 --> <script> // 输出方式 alert("弹窗式"); console.log("控制台"); let str=prompt("请输入数据:"); console.log(str); </script>
- 外部引入:利于HTML页面代码结构化,把大段 JS代码独立到 HTML 页面之外,既美观,也方便文件级别的复用
<!-- 外联式 --> <!-- <script src="js/test.js"></script> -->
二.Javascript基本语法:
2.1 常用的输入输出语句:
为了方便测试和查看我们可以使用输入输出语句:
// 输出方式 alert("弹窗式"); console.log("控制台"); let str=prompt("请输入数据:"); console.log(str);
2.2 变量:
Java中变量的声明:数据类型 变量名;而Javascript中的变量是通过 let, 它类型是什么,取决于等号右边传入的什么数据类型,如果传入的是number那么是number,如果是字符串,那么是字符串。综上:变量是存储数据的内存空间,而变量是什么类型取决于等号的右边数据。并且这个变量可以被赋值不同的数据类型,给它什么类型,他就接着,十分灵活。
2.3 数据类型:
JavaScript的数据类型分为:
- 简单数据类型 (Number,String,Boolean,Undefined,Null)
- 复杂数据类型 (object)
简单数据类型分为:
注意点:
1.字符串型可以是引号中的任意文本,其语法为 双引号 "" 和 单引号''
2.一个声明后没有被赋值的变量会有一个默认值undefined ( 如果进行相连或者相加时,注意结果)
var variable;
console.log('你好' + variable); // 你好undefined
console.log(11 + variable); // NaN
console.log(true + variable); // NaN
3.一个声明变量给 null 值,里面存的值为空
var vari = null;
console.log('你好' + vari); // 你好null
console.log(11 + vari); // 11
console.log(true + vari); // 1
2.3.1 数据类型之间的转换:
一种数据类型的变量转换成另一种数据类型,通常会实现 3 种方式的转换:
- 转为字符串
- 转为数字型
- 转为布尔型
2.3.1.1 转为字符型:
// 字符转换
console.log(num);
console.log("num:"+num.toString);
2..3.1.2 转为数字型:
2.3.1.3 转为布尔型:
注意点:
三.Javascript数组:
Javascript创建数组有两种方式:
- 利用 new 创建数组
var 数组名 = new Array() ; var arr = new Array(); // 创建一个新的空数组 12
利用数组字面量创建数组//1. 使用数组字面量方式创建空的数组 var 数组名 = []; //2. 使用数组字面量方式创建带初始值的数组 var 数组名 = ['小白','小黑','大黄','瑞奇'];
四:Javascript函数:
4.1 arguments的使用
当不确定有多少个参数传递的时候,可以用 arguments 来获取。 JavaScript 中, arguments 实际上它是当前函数的一个内置对象。所有函数都内置了一个 arguments 对象, arguments 对象中存储了传递的所有实参。arguments 展示形式是一个伪数组,因此可以进行遍历。伪数组具有以下特点:
- 具有 length 属性
- 按索引方式储存数据
- 不具有数组的 push , pop 方法
注意点:
1.在函数内部使用该对象,用此对象获取函数调用时传的实参
4.2 变量作用域:
通常来说,一段程序代码中所用到的名字并不总是有效和可用的,而限定这个名字的可用性的代码范围就 是这个名字的作用域。作用域的使用提高了程序逻辑的局部性,增强了程序的可靠性,减少了名字冲突。 JavaScript( es6 前)中的作用域有两种:
- 全局变量
- 局部变量
全局变量在代码的任何位置都可以使用 在全局作用域下 var 声明的变量 是全局变量 特殊情况下,在函数内不使用 var 声明的变量也是全局变量(不建议使用)局部变量是 在局部作用域下声明的变量叫做局部变量(在函数内部定义的变量) 局部变量只能在该函数内部使用 在函数内部 var 声明的变量是局部变量 函数的形参实际上就是局部变量
注意点:
全局变量:在任何一个地方都可以使用,只有在浏览器关闭时才会被销毁,因此比较占内存局部变量:只在函数内部使用,当其所在的代码块被执行时,会被初始化;当代码块运行结束后,就会被销毁,因此更节省内存空间
五.JavaScriptDOM及其应用:
5.1 DOM简介:
文档对象模型( Document Object Model ,简称 DOM ),是 W3C 组织推荐的处理 可扩展标记语言 (html 或者 xhtml )的标准 编程接口 。 W3C 已经定义了一系列的 DOM 接口,通过这些 DOM 接口可以改变网页的内容、结构和样式。DOM 树 又称为文档树模型,把文档映射成树形结构,通过节点对象对其处理,处理的结果可以加入到 当前的页面。
- 文档:一个页面就是一个文档,DOM中使用document表示
- 节点:网页中的所有内容,在文档树中都是节点(标签、属性、文本、注释等),使用node表示
- 标签节点:网页中的所有标签,通常称为元素节点,又简称为“元素”,使用element表示
5.2 获取元素:
为什么要获取页面元素?例如:我们想要操作页面上的某部分 ( 显示 / 隐藏,动画 ) ,需要先获取到该部分对应的元素,再对其进行 操作。
获取元素的方式:
<!--四种选择器:
1.id选择器
2.class选择器
3.标签选择器
4.css选择器
-->
<script>
window.onload=function(){
}
// id选择器
let btn1=document.getElementById("btn1");
console.log(btn1);
// class选择器
let btn2=document.getElementsByClassName("btn2");
console.log(btn2);
// 标签选择器
let btn3=document.getElementsByTagName("button");
console.log(btn3);
// css选择器
let btn4=document.querySelector("button");
let btn5=document.querySelectorAll("button")
六.Javascript事件:
6.1 事件概述:
JavaScript 使我们有能力创建动态页面,而事件是可以被 JavaScript 侦测到的行为。 简单理解: 触发 --- 响应机制 。 网页中的每个元素都可以产生某些可以触发 JavaScript 的事件,例如,我们可以在用户点击某按钮时 产生一个 事件,然后去执行某些操作。三要素:
- 事件源(谁):触发事件的元素
- 事件类型(什么事件): 例如 click 点击事件
- 事件处理程序(做啥):事件触发后要执行的代码(函数形式),事件处理函数
代码演示:
常见的鼠标事件:
七.JavaScript常用的操作元素方法:
7.1 改变元素内容:
<button>显示当前系统时间</button>
<div>某个时间</div>
<p>1123</p>
<script>
// 当我们点击了按钮, div里面的文字会发生变化
// 1. 获取元素
var btn = document.querySelector('button');
var div = document.querySelector('div');
// 2.注册事件
btn.onclick = function() {
// div.innerText = '2019-6-6';
div.innerHTML = getDate(); }
注意点: