欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页

前端学习 03 js

程序员文章站 2022-05-10 23:07:01
...

01.JavaScript

JS能否赋予页面交互能力

Java VS JavaScript

  • Java是面向对象的、JS仅仅是基于对象
  • Java（Sun）甲骨文、JS 网景（Net Space）
  • Java是一种强类型的编程语言,JS是弱类型的语言

JS写在html的任意地方，JavaScript 代码必须位于 标签之间

1.数据类型

字符串（无论是字符还是字符串统一称为字符串） 在js中单引号与双引号是一样的

数字类型 包括小数以及整数

布尔类型 true false 1/0

数组类型（集合）

对象（JS内置对象，String、Date… 自定义对象）

通过{}描述一个对象，属性名与属性值通过键值对来描述 name:张三 多个属性之间使用,分割

{name:“张三”,age:20}

null

一般用于变量使用完毕之后，清除变量的值

undefined 只声明不赋值时类型

JS是弱类型的语言，只有在赋值的时候才能确定变量的数据类型

typeof 查看变量的数据类型

2.变量的作用域

变量的声明，统一通过var进行声明

函数外部的变量，都属于全局变量，在当前文件中都能访问到

隐式变量，无论定义在函数内部还是函数外部，都属于全局变量，属于window的变量

3.注释的写法

单行注释:

//

多行注释:

/* 注释内容 */

4.运算符

4.1 算术运算符

+ - * / % ++ --

4.2 比较运算符(得到一个布尔类型)

> < == >= <= ...

4.3 逻辑运算符(得到一个布尔类型)

&& || !

4.4 赋值运算符

5.流程控制

顺序结构

分支结构（选择结构）

if(){}else{} switch(任意类型)

循环结构

while do…while… for foreach

6.数组

数组的定义方式：

var arr = [“A”,“B”,“C”];

var arr = new Array(3);//创建数组时指定数组的长度

var arr = new Array(“A”,“B”,“C”);

注意点：

1.数组下标默认从0开始

2.JS中数组访问下标越界了，则会打印默认值undefined

3.在创建数组时指定的长度是最小长度，长度会自动扩充的

4.数组元素的默认值是undefined

5.数组的下标可以为任意数据类型

6.数组元素可以是不规则的

遍历

while do…while… for foreach

7.函数

对公用的代码进行抽取，实现代码的复用

定义函数的格式：

/* 第一种 */
function 函数名(参数列表){
    方法体;
}


/* 第二种 */
var 函数名 = function(参数列表){
    函数体
}

注意点:

1.函数参数列表（形参列表）不需要使用修饰符 var

2.函数调用格式 函数名(实参列表) 并且实际调用的时候传入的参数 可以不传 或者 少传 或者多传，但是不保证执行结果的正确性

3.返回值 函数在定义时不需要添加返回值类型，只需要在函数内容如有返回值直接return即可

没有强制去接收一个没有返回值方法的返回值，那么默认值就是undefined

4.函数可以当做一个变量进行赋值，也可以当初一个参数进行传值

8.JS常用对象以及常用方法

String

charAt() 返回某个位置的字符
			 concat()	连接字符串
			 indexOf() 返回字符串首次出现的位置，如果不存在则返回-1
			 lastIndexOf() 返回字符串首次出现的位置，如果不存在则返回-1
			 slice(start,end)	提取字符串的片断，并在新的字符串中返回被提取的部分。 前闭后开
			 substr(start,length)	从起始索引号提取字符串中指定数目的字符。
			substring()	提取字符串中两个指定的索引号之间的字符。 前闭后开
			 split()	把字符串分割为字符串数组。
			 toLowerCase()	把字符串转换为小写。
			toUpperCase()	把字符串转换为大写。
			 
			 
			 调用方法的时候 需要注意的事项：
			 1.根据需求选择合适的方法
			 2.判断方法有无参数
			 3.判断有无返回值（因为有些操作是基于字符串本身进行操作，有些是直接返回新的字符串）

Boolean

Number

isNaN 作用：判断当前变量是否是数字 is not a number

Date

1.DOM操作

当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model） 对象树

DOM作用：JavaScript 能够访问和改变 HTML 文档的所有元素

  • 如何改变 HTML 元素的内容
  • 如何改变 HTML 元素的样式（CSS）
  • 如何对 HTML DOM 事件作出反应
  • 如何添加和删除 HTML 元素

1.0 前提

如果需要操作元素，那么首先需要获取到元素

/* 1.根据id获取元素 （返回的元素只有一个,所以id必须唯一） */
		console.log("=========根据id获取元素===========")
		var mydiv = document.getElementById("mydiv");
		console.log(mydiv);
		
		console.log("=========根据class获取元素===========");
		//2.根据class进行获取 返回的是集合
		var eles = document.getElementsByClassName("c1");
		//console.log(eles);
		//参考数组进行遍历元素
		for (var i = 0; i < eles.length; i++) {
			console.log(eles[i]);
		}
		
		console.log("=======根据标签名获取元素===========");
		//3.根据标签名获取元素 返回的是集合
		var eles = document.getElementsByTagName("div");
		console.log(eles);
		
		console.log("=======根据name属性获取元素===========");
		//4.根据name属性获取元素
		var eles = document.getElementsByName("myname");
		console.log(eles);

1.1 操作HTML元素内容以及属性

 /* 1.JS操作元素内容*/
			//修改元素的文本内容
			var ele = document.getElementById("mydiv");
			//ele.innerText = "柳岩在极客营学Java";
			
			//修改元素的HTML代码
			//ele.innerHTML = "<p style='color: red;'>柳岩在极客营学Java</p>";
			
			/* 2.JS操作元素的属性
			 格式：
			 元素（document.getElementById("")）.属性名 = 属性值
			 */
			function changeImage(){
				document.getElementById("icon").src = "img/logo.png";
			}
			
			function changeSize(){
				var ele = document.getElementById("icon");
				ele.width = "600";
				ele.height = "400";
			}

1.2 操作HTML样式

/* JS操作元素样式的格式
			 document.getElementById("").style.样式属性名 = 样式属性值
			 */
				
			function changeDivSize(){
				//eles 集合
				var eles = document.getElementsByClassName("mydiv");
				console.log(eles);
				eles[0].style.width = "200px";
				eles[0].style.height = "200px";
			}
			
			function changeDivBgColor(){
				/* 
				 background-color 在css中多个单词是使用- 分割 但是在JS操作样式的时候，
				 如果是一个单词，那么保持原样
				 如果是多个单词，那么需要去除- 遵循驼峰命名规则
				 */
				var eles = document.getElementsByClassName("mydiv"); 
				eles[0].style.backgroundColor = 'yellow';
			}

1.3 事件操作

onchange 域的内容被改变。
ondblclick 当用户双击某个对象时调用的事件句柄。
onclick 当用户点击某个对象时调用的事件句柄。
onblur 元素失去焦点。
onfocus 元素获得焦点。
onload 一张页面或一幅图像完成
onsubmit 确认按钮被点击。

1.4 操作元素

function addEle(){
				//document.getElementById("mydiv").innerHTML += "<p>Hello World</p>";
				
				//创建p标签节点
				var pNode = document.createElement("p");//参数是标签名称<p></p>
				//创建内容文本
				var text = document.createTextNode("Hello World");
				//将文本内容节点作为p标签节点的子节点
				pNode.appendChild(text);//<p>Hello World</p>
				
				var mydiv = document.getElementById("mydiv");
				mydiv.appendChild(pNode);
				
			}
			
			function removeEle(){
				var subEle = document.getElementById("myp");
				
				var parentEle = document.getElementById("mydiv2");
				
				parentEle.removeChild(subEle);
			}

2.BOM模型

浏览器对象模型（Browser Object Model (BOM)）允许 JavaScript 与浏览器对话

2.1 window对象

它代表浏览器的窗口。

所有全局 JavaScript 对象，函数和变量自动成为 window 对象的成员。

全局变量是 window 对象的属性。

全局函数是 window 对象的方法。

2.2 window.location

window.location 对象可用于获取当前页面地址（URL）并把浏览器重定向到新页面。

http://127.0.0.1:8848/day04/07.BOM-window.html

协议（超文本传输协议）????/主机名（IP地址）：端口号/项目路径/资源路径

  • **window.location.href **返回当前页面的 href (URL)
  • window.location.hostname 返回 web 主机的域名
  • window.location.pathname 返回当前页面的路径或文件名
  • window.location.protocol 返回使用的 web 协议（http: 或 https:）
  • window.location.assign 加载新文档

2.3 Timing

JavaScript 可以在时间间隔内执行。

window 对象允许以指定的时间间隔执行代码。

这些时间间隔称为定时事件。

通过 JavaScript 使用的有两个关键的方法：

  • setTimeout(function, milliseconds)

    在等待指定的毫秒数后执行函数。[在固定毫秒之后执行一次，只会执行性一次]

  • setInterval(function, milliseconds)

    等同于 setTimeout()，但持续重复执行该函数。【每隔固定的毫秒执行一次，执行多次】

setTimeout() 和 setInterval() 都属于 HTML DOM Window 对象的方法。

  • clearTimeout(t) 停止定时器
  • clearInterval(t)

上一篇： 前端html学习笔记03

下一篇： PHP的cURL库简介及使用示例，phpcurl库示例

推荐阅读