Java学习笔记-全栈-web开发-03-JavaScript基础

2021-08-18 15:26:06 浏览数 (1)

文章说明：

  • 涵盖绝大部分js重点基础，而不是罗列全面的知识点（对于初学者，知识点全面反而不好，太细的知识点用不上反而拖累学习进度，掌握重点后遇到新的东西就能触类旁通）
  • 适合拥有语言基础的同学快速上手
  • 本章前后端人员都应当熟练掌握

觉得前面太简单的同学，请直接跳到第7节。

​

1. JS简介

  • JS是KavaScript的缩写，是一种脚本语言，专注于web。
  • 是一种解释型语言，由解释器来运行，用来控制软件应用程序。

语言类型：

  • 编译型： 以C语言为例，需要经过“编码”，“编译”，“执行”。编译将生成可执行的目标代码。
  • 解释型： 不通过编译生成可执行目标代码，而是一句一句解释，然后直接执行该句子。
  • JavaScript 是可插入 HTML 页面的编程代码。
  • JavaScript 插入 HTML 页面后，可由所有的现代浏览器执行。
  • JavaScript 与 Java 是两种完全不同的语言
  • 通过javascript可以改变html内容,改变html样式,进行验证输入，实现动态页面。

2 JS组成

  • 一个完整的javaScript实现是由下面三个不同部分组成的。

初学者牢记这个框架，在总体上有个模糊的认知。 现在不必知道是什么意思。学完回过头来看即可明白。

3. JS的导入使用

JS有三种导入方式（也可以理解为两种）

  • 在任意位置插入（对比css的内联样式）
  • 在head标签内插入（对比css的内部样式）
  • 引入外部js（对比css的外部样式）

3.1 html任意位置插入js

这种办法通常只用于测试，正式代码一般不出现。

代码语言：javascript复制
<script>
	alert("alert用于弹窗");
</script>

3.2 js写在head中

这种办法通常用于对特定页面写的特定js

代码语言：javascript复制
<head>
	<script>
		alert("alert用于弹窗");
	</script>
</head>

3.3 引入外部js

这种办法用于引用通用js

代码语言：javascript复制
<head>
	<script src="xxx.js"></script>
</head>

之所以提供以上三种方法来导入js，跟css的三种导入方式有着一样的原因。（可查看css必备基础的4.3节）

4. js的基础语法

4.1 变量声明

变量是用于存储信息的容器

javascript中的变量与ava中的变量不一样。

在javascript中使用 var 运算符（variable 的缩写）加变量名定义的。

JavaScript 变量名称的规则：

  • 变量对大小写敏感（y 和 Y 是两个不同的变量）
  • 变量必须以字母或下划线开始
  • 注意：由于 JavaScript 对大小写敏感，变量名也对大小写敏感。

一般情况下，变量使用var声明即可，而不需要int、doublt、float等类型声明。

代码语言：javascript复制
var i = 10;

4.2 数据类型

在ECMAScript中，变量可以存在两种数据类型，即原始类型与引用类型。

原始类型 相当于 Java基本数据类型

4.2.1 原始类型

  • 原始类型，可以理解成是一个值类型。简单说，就是一个字面值，它是不可变的，例如: 10 “abc”

ECMAScript有五种原始类型

  • String 在javascript中字符串字符串字面值，可以使用单引号或双引号声明。
  • Number 在javascript中任何数字都看成是Number类型，它即可以表示32位整数，也可以表示64位浮点数。八进制首数字必须是0,十六进制使用0x开始。
  • Boolean 它有两个值true和false.
  • Undefined:该类型只有一个值undefined.表示的是未初始化的变量
  • Null 该类型只有一个值null,表示尚未存在的对象。值undefined实际上是从值null派生出来的。因此null==undefined得到的结果是true.

通过typeof方法可以获取一个变量的类型 为什么 typeof 运算符对于 null 值会返回 “Object”。这实际上是 JavaScript 最初实现中的一个错误，然后被 ECMAScript 沿用了。现在，null 被认为是对象的占位符，从而解释了这一矛盾，但从技术上来说，它仍然是原始值。

4.2.2 引用类型

引用类型通常叫做类(class),也就是说，遇到引用值，所处理的就是对象。

从传统意义上来说，ECMAScript 并不真正具有类。

ECMAScript 定义了“对象定义”，逻辑上等价于其他程序设计语言中的类。

对象是由 new 运算符加上要实例化的对象的名字创建的

代码语言：javascript复制
var obj=new Object();

Object对象自身用处不大，但是 ECMAScript 中的 Object 对象与 Java 中的 java.lang.Object 相似，ECMAScript 中的所有对象都由这个对象继承而来，Object 对象中的所有属性和方法都会出现在其他对象中

常用的javascript对象有

  • Boolean,Number,Array,String,Date,Math,RegExp.
  • 可以使用instanceof运算符来判断对象的类型。

4.3 类型转换

ECMAScript为开发者提供了大量的类型转换方法。

大部分类型具有进行简单转换的方法，还有几个全局方法可以用于更复杂的转换。

Boolean 值、数字和字符串的原始值它们是伪对象，这意味着它们实际上具有属性和方法。

4.3.1 转成字符串

toString()方法.把number转成string,boolean转string

4.3.2 转成数字

parseInt() 和 parseFloat()。前者把值转换成整数，后者把值转换成浮点数。

parse是解析的意思，翻译过来就是“将括号内的参数解析为intfloat类型。一般情况下，函数都不需要死记

只有对 String 类型调用这些方法，它们才能正确运行；对其他类型返回的都是 NaN(not a number)。

4.3.3 强制类型转换

ECMAScript 中提供了三种强制类型转换：

  • 1.把给定的值转换成Boolean类型
  • 2.把给定的值转换成数字
  • 3.把给定的值转换成字符串

​

4.4 运算符和表达式

与java（甚至其他大部分语言）基本一致，不再赘述，实在不会可查阅官方参考手册。

4.5 逻辑语句

与java（甚至其他大部分语言）基本一致，不再赘述，实在不会可查阅官方参考手册。

5. js常用对象

与java基本一致，不再赘述，实在不会可查阅官方参考手册。

包含 Array Boolean Date Math Number String RegExp（正则表达式，初学者可先跳过，遇到再进行学习） 重点掌握Array，String，其他的遇到查文档即可。

6. js函数

6.1 创建函数

第一种

代码语言：javascript复制
function 函数名称(参数列表){
	函数体;
	return 返回值
}

第二种

代码语言：javascript复制
var 函数名称=function(参数列表){
	函数体;
}

第三种：【了解】 var 函数名称 = new function(参数列表,函数体);

代码语言：javascript复制
var add = new function('a','b','return a   b');
console.log(add(10,10);

6.2 注意事项

js对形参个数没有进行限制，简单的说，也就是函数调用时传递的参数不一定要与函数声明时的参数个数一致。

在javascript中有一个特殊的对象arguments,我们可以通过它来获取所有函数中的参数。

6.3 全局函数

全局函数，只需要理解为：在js中可以直接使用的函数

7. 事件（核心重点）

7.1 常见事件

事件通常与函数配合使用，这样我们可以通过发生的事件来驱动函数执行.

常见事件:

7.2 事件绑定

在javascript中事件经常与函数一起使用。

以下将介绍怎样将一个事件与函数绑定到一起。

简单说，就是某个事件被触发后，函数将被调用。

事件的三要素：事件、事件源、响应行为

通用代换代码

代码语言：javascript复制
<script>
	function 函数名(){
		进行操作
	}
</script>

<被监听的标签 事件属性="函数名()"></被监听的标签>

事件属性及7.1表中的事件属性

举例：

代码语言：javascript复制
<script>
	function clickMe(){
		alert("button被点击了");
	}
</script>

<button onclick="clickMe()"></button>

效果：当button被点击时，函数调用，弹窗显示“button被点击了” 说明： 事件绑定是js的核心部分，通过事件，可以对html页面进行各种动态改写。 本章不做详细的例子，请各位举一反三，发挥想象力，自行尝试

7.3 特殊的事件 onload()

onload():

等到页面加载完毕在执行onload事件所指向的函数.

7.4 this

8. JavaScript BOM

8.1 Javascript中bom介绍

浏览器对象模型，可以对浏览器窗口进行访问和操作。

  • 使用 BOM，开发者可以移动窗口、改变状态栏中的文本以及执行其他与页面内容不直接相关的动作。
  • BOM 主要处理浏览器窗口和框架，不过通常浏览器特定的 JavaScript 扩展都被看做 BOM 的一部分。这些扩展包括：
    • 弹出新的浏览器窗口
    • 移动、关闭浏览器窗口以及调整窗口大小
    • 提供 Web 浏览器详细信息的定位对象
    • 提供用户屏幕分辨率详细信息的屏幕对象
    • 对 cookie 的支持
    • IE 扩展了 BOM，加入了 ActiveXObject 类，可以通过 JavaScript 实例化 ActiveX 对象

由于没有相关的 BOM 标准，每种浏览器都有自己的 BOM 实现。但有一些事实上的标准。如具有一个窗口对象和一个导航对象，不过每种浏览器可以为这些对象或其他对象定义自己的属性和方法。

8.2 Window对象

  • Window 对象表示浏览器中打开的窗口
  • 如果文档包含框架（frame 或 iframe 标签），浏览器会为 HTML 文档创建一个 window 对象，并为每个框架创建一个额外的 window 对象

8.2.1 Window对象集合

8.2.2 Window对象属性

8.2.3 Window对象方法

window对弹框的三个方法,alert,confirm,prompt

代码语言：javascript复制
<script type="text/javascript">
	function click1() {
		//alert是window对象的方法,平时开如可以省略window
		window.alert("党的十九大招开了");//提示框
	}
	
	function click2() {
		//显示带有一段消息以及确认按钮和取消按钮的对话框。
		//用户选择后，会返回true或者false
		var rsl = window.confirm("你确定要分手吗？");
		alert(rsl);
	}
	
	function click3(){
		//显示可提示用户输入的对话框,点确定后，返回用户输入的密码，点取消，返回null
		var rsl = prompt("请输入你的银行卡密码");
		alert("你输入的密码是:"   rsl)
	}
</script>
<button onclick="click1();">点击1</button>
<button onclick="click2();">点击2</button>
<button onclick="click3();">点击3</button>

8.2.4 计时任务

指定时间执行

间隔时间执行

注册后5秒跳转首页

历史跳转

9. javascript DOM

9.1 DOM介绍

DOM（文档对象模型）是 HTML 和 XML 的应用程序接口（API）。

DOM 将把整个页面规划成由节点层级构成的文档。HTML 或 XML 页面的每个部分都是一个节点的衍生物。

DOM就是将html页面生成为一棵树。

请看下面的 HTML 页面

这段代码可以用 DOM 绘制成一个节点层次图：

DOM 通过创建树来表示文档，从而使开发者对文档的内容和结构具有空前的控制力。

W3C DOM 标准被分为 3 个不同的部分：

  • 核心 DOM - 针对任何结构化文档的标准模型
  • XML DOM - 针对 XML 文档的标准模型
  • HTML DOM - 针对 HTML 文档的标准模型
  • XML DOM 定义了所有 XML 元素的对象和属性，以及访问它们的方法。
  • HTML DOM 是：
代码语言：txt复制
- HTML 的标准对象模型
- HTML 的标准编程接口
- W3C 标准HTML DOM 定义了所有 HTML 元素的对象和属性，以及访问它们的方法。

9.2 XML DOM与HTML DOM的关系

XML DOM 定义了访问和处理 XML 文档的标准方法

HTML文档格式 符合XML语法标准，所以可以使用XML DOM API。

在XML DOM每个元素都会被解析为一个节点Node，而常用的节点类型又分为

  • 元素节点 Element
  • 属性节点 Attr
  • 文本节点 Text
  • 文档节点 Document

HTML DOM 定义了针对 HTML文档的对象，可以说是一套 更加适用于 JavaScript 技术开发 的API。

HTML DOM是对XML DOM的扩展。

进行 JavaScript DOM开发 可以同时使用 XML DOM和 HTML DOM。

9.3 常用方法（重点）

以下方法，顾名思义即可掌握，难在熟练灵活的使用。

9.3.1 getElementById() 方法

9.3.2 getElementsByTagName方法

9.3.3 getElementsByName() 方法

9.3.4 hasChildNodes()

9.3.5 firstChild/lastChild

注意：子标签之间不要换行或空格，

9.3.6 replaceChild

9.3.7 getAttribute/setAttribute

9.3.8 节点的增删改查

  • document.createElement
  • document.createTextNode
  • appendChild
  • insertBefore
  • removeChild

  • insertAfter 方法（js没有这个方法，jquery才有）
代码语言：javascript复制
喜欢的城市:<br>
<ul id="city">
	<li id="bj">北京</li>
	<li id="sh">上海</li>
	<li id="gz">广州</li>
</ul>


<button id="btn" onclick="myClick()">点击</button>

<script type="text/javascript">
	function myClick(){
		//创建节点
		var li = document.createElement("li");
		li.setAttribute("id","sz");
		
		//创建一个文本
		var txt = document.createTextNode("深圳");
		li.appendChild(txt);
		
		//获取ul
		var ul = document.getElementById("city");
		//ul.appendChild(li);//尾部添加
		
		var sh = document.getElementById("sh");
		//ul.insertBefore(li,sh);//插入到上海前面
		//ul.insertAfter(li,sh);//插入到上海后面
		//ul.removeChild(sh);//删除上海
	}
</script>

9.3.9 innerHTML

设置标签内的"值"

代码语言：javascript复制
div.innerHTML = "<h1>今天</h1>"
java xml javascript ecmascript html

0 人点赞