小白学习Java第二十五天

最新推荐文章于 2024-07-08 16:22:29 发布

sjxxxx_

最新推荐文章于 2024-07-08 16:22:29 发布

阅读量103

点赞数

分类专栏： Java小白文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/sjxxxx_/article/details/126769918

版权

Java小白专栏收录该内容

60 篇文章 4 订阅

订阅专栏

今日内容：

js概述
引入方式
组成（3个部分）
ECMAScript
DOM模型

一、JavaScript简介

（一）JavaScript的概念

JavaScript（简称“JS”）是一种具有函数优先的轻量级，解释型或即时编译型的高级编程语言。虽然它是作为开发Web页面的脚本语言而出名的，但是它也被用到了很多非浏览器环境中，JavaScript 基于原型编程、多范式的动态脚本语言，并且支持面向对象、命令式和声明式（如函数式编程）风格。

（二）JavaScript的特点

1、几乎每个浏览器都有JavaScript的解析引擎。
2、不需要编译，直接由浏览器解析运行。

（三）JavaScript的作用

JavaScript可以通过事件操作HTML元素、读写元素内容、验证提交数据、检验浏览器信息等，同时JavaScript可以在HTML中添加动画效果，增强用户体验。

JavaScript的组成

1、ECMAScript:客户端脚本语言的标准，统一了其编码方式如：基本语法、语句、事件、对象等。
2、DOM(Document Object Model):文档对象模型.控制HTML文档的内容(对html元素的增删改查)
3、BOM(Broswer Object Model):浏览器对象模型.将浏览器各个组成部分封装成对象

三、JS的组成之ECMAScript

（一）ECMAScript简介

1、ECMAScript实际上是一种脚本在语法和语义上的标准。
2、包含了JS的基本语法和基本对象。

（二）基本语法

1.与html结合方式

1、内部JS:在HTML网页中通过script标签直接嵌入JavaScript脚本代码。可以出现在页面的任何位置，且可以写多个。

2、外部JS:外链式是单独定义脚本文件（*.js），再将这个脚本文件通过script标签的src属性引入到HTML页面中。一个页面中可以引用多个外部js文件。
注意事项:引用外部js文件的script标签里不能再写自定义的javaScript代码。
第一步：创建一个外部js文件

第二步：在html页面中引用外部js文件

2.注释

1、单行注释：//注释的内容
2、多行注释：/* 注释的内容 */

3.数据类型

JS中也存在很多的数据类型，总体上可分为基本数据类型和引用数据类型。
1、基本数据类型：
（1）Undefined:Undefined类型只有一个值即undefined。当声明的变量未初始化时，该变量的默认值就是undefined。
（2）Null:只有一个值即null表示空，一个占位符。值undefined实际是从值null派生来的，因此ECMAScript把他们列为等值。
    例如：alert(null == undefined); //true
    虽然两个值相等但是表示的意义不同，null为空值，undefined是未定义。
（3）Boolean:表示真假，只有两个值true和false。
（4）Number:表示任意数字，在JS中所有值类型统称为数字类型。
（5）String:字符串类型用单引号或者双引号赋值。

2、引用类型：
引用类型通常叫做类（class），JavaScript将引用类型转化为对象进行处理。
JavaScript是基于对象而非面向对象。对象的默认值是null。
我们可以通过typeof(变量名)来查看一个变量所属的数据类型。
    例如：alert(typeof(123));得到的数据类型是Number。

4.变量

java声明变量：

数据类型变量名 = 值；int a = 1;

js是弱类型语言。

定义语法：var 变量名 = 初始值;

var a = 1;

a = “abc”;

案例代码：

<!DOCTYPE html>

<head>

<title>数据类型和变量</title>

</head>

<body>

//数字类型

var age = 10.5;

// 在控制台输出内容

console.log(age);

console.log(typeof(age));//number

age = "abc";

console.log(typeof(age));//string

//字符串类型

var name = "王二小";

console.log(name);

console.log(typeof(name));

//undefined类型

var count;

console.log(count);

//布尔类型

var bl = true;

console.log(bl);

console.log(typeof(bl));

//null类型

var stu = null;

console.log(stu);

//对象类型

var stu = {"name":"张三","age":23};

console.log(stu);

console.log(stu.name+"-"+stu.age);

</script>

</body>

</html>

5.运算符

1、一元运算符：++ 、--：符号在前，先自增(自减)，再运算；符号在后，先运算，再自增(自减)
2、算术运算符:+ - * / % ++ -- 等。
3、赋值运算符:= += -= *= /= %= 等。
4、比较运算符:> 、< 、>= 、<=、==、!=、===(全等)、!==：类型相同直接比较，类型不同先转换再比较。
5、逻辑运算符:&&(短路与)、||(短路或)、!(非)
6、条件（三元）运算符:表达式 ? 值1 : 值2 (表达式为true取值1，表达式为false取值2)
以上所有运算符的使用与java类似。

6.流程控制

1、分支结构

if结构：

单分支：if(){}

双分支：if(){}else{}

多分支：if(){}else if(){}....else{}

案例:闰年判断

switch分支结构：

switch(变量){

case 常量1:

语句1;

break;

case 常量2:

语句2;

break;

......

default:

语句n;

break;

}

案例：switch穿透判断每个月的天数

循环结构
while(循环条件){

循环体；

}

do{

循环体；

}while(循环条件);

for(循环变量的初始化；循环条件；循环变量更新){

循环体；

}

案例：求1-100之间的偶数之和。

（三）基本对象

1、Array数组对象

1、创建数组：
（1）var arr = new Array();   空数组
（2）var arr = new Array(默认长度)    默认长度的数组
（3）var arr = [元素列表];    具有初值的数组
2、js数组的特点：
（1）在JS中，数组元素的类型可变
（2）在JS中数组的长度可变
3、js数组的属性：length    获取数组长度、元素个数
4、js数组中的常用方法：
（1）join(参数); 将数组元素通过指定的字符拼接成字符串
（2）push(); 向数组的末尾添加一个或更多元素，并返回新的长度

案例：

<!DOCTYPE html>

<head>

<title>Array数组</title>

</head>

<body>

//空数组

var arr1 = new Array();

arr1[0]=10;

console.log(arr1.length);

console.log(arr1[0]);

//初始长度的数组

var arr2 = new Array(3);

//定义并赋初值

var arr3 = [1,2,3,'abc',"张三",true];

console.log(arr3);

console.log("=============================================");

//循环遍历数组

for(var i =0; i<arr3.length;i++){

console.log(arr3[i]);

}

console.log("=============================================");

//向数组的末尾追加一个新元素

arr3.push(100);

console.log(arr3);

var arr4 = ['how','are','you',1,2];

console.log(arr4);

//将数组中的三个元素使用#拼接成一个完好的字符串

var str = arr4.join('#');

console.log(str);

</script>

</body>

</html>

2、Date 日期对象

1、创建日期对象：var now = new Date() 获取当前时间。
2、日期对象的常用方法：
（1）toLocaleString()：根据本地时间格式，把 Date 对象转换为字符串。
（2）getTime()：返回 1970 年 1 月 1 日至今的毫秒数
（3）getHours()：返回小时数。
（4）getMinutes()：返回分钟数。
（5）getSeconds()：返回秒数。

3、Math数学对象

1、创建：Math对象不用创建直接使用。使用时直接调用方法，如：Math.方法名();
2、常用方法：
（1）random()：返回 0 ~ 1 之间的随机数

产生指定区间范围随机数公式:

不包含最大值:Math.random()*(max-min)+min [min,max)

包含最大值:Math.random()*(max-min+1)+min [min,max]
（2）max(x,y)：返回 x 和 y 中的最大值
（3）min(x,y)：返回 x 和 y 中的最低值
（4）ceil(x)：对数进行向上取整
（5）floor(x)：对数进行向下取整
（6）round(x)：把数四舍五入为最接近的整数
（7）abs(x)：返回数的绝对值
3、属性：PI，圆周率
案例代码:

<!DOCTYPE html>

<head>

<title>Math对象</title>

</head>

<body>

//产生随机数[0,1)

var num = Math.random();

console.log(num);

//产生1-10之间的随机数[0-10)

var num1 = Math.floor(Math.random()*10+1);

console.log(num1);

//产生一个3-19之间的随机数

var num2 = Math.floor(Math.random*(19-3)+3);//[3,19)

var num3 = Math.floor(Math.random*(19-3+1)+3);//[3,19]

//最大值

var max = Math.max(10,50);

console.log(max);

//最小值

var min = Math.min(10,50);

console.log(min);

//向上和向下取整

console.log(Math.ceil(-4.5));

console.log(Math.floor(-4.9));

//四舍五入运算

console.log(Math.round(-1.4));

//取绝对值

console.log(Math.abs(-10));

console.log(Math.PI);

//保留小数点后2位

var a = 3.4523;

console.log(a.toFixed(2));

</script>

</body>

</html>

4、String字符串对象

1、创建：
（1）var str1 = "abc"; // string
（2）var str2 = new String("abc"); // object

2、常用方法：
（1）获取字符串的长度 str1.length
（2）是否以某个字符开头 startsWith()
（3）是否以某个字符结尾 endsWith()
（4）截取字符串
a、substring(起始下标,结束下标)
b、substr(起始下标,截取长度)
（5）根据某个字符拆分字符串返回数组 split()

案例：

<!DOCTYPE html>

<head>

<title>String对象</title>

</head>

<body>

//创建String

var str1= "hello";

console.log(str1);

console.log(typeof(str1));

var str2 = new String("你好");

console.log(str2);

console.log(typeof(str2));

//字符串长度

console.log(str2.length);

//方法：

var bl = str1.startsWith("2");

console.log(bl);

var bl2 = str1.endsWith("o");

console.log(bl2);

//截取字符串

var substr = str1.substring(1,3);//3-1=2 el

console.log(substr);

var substr2 = str1.substr(1,3);

console.log(substr2);

var newstr="how are you";

//字符串拆分

var arr = newstr.split(' ');

console.log(arr);

</script>

</body>

</html>

5、Function函数对象

java：

public void methodname(形参列表){

方法体；

}

js:

创建函数的语法格式：
（1）function 方法名(形式参数列表){方法体}(推荐使用);
（2）var 方法名 = function(形式参数列表){方法体};
2、函数调用的语法格式：
函数名称(实际参数列表);
3、js函数的特点：
（1）函数定义时，形式参数类型不用写，返回值类型也不写
（2）方法是一个对象，定义相同方法名会被覆盖
4、js方法的属性：length，用于获取实际参数的个数

案例：

<!DOCTYPE html>

<head>

<title>Function对象</title>

</head>

<body>

var a = 10;

//第一种定义方法

function sum(){

var a = 10;

var b = 20;

var r = a + b;

console.log(r);

}

//调用

sum();

//带参带返回值

function sum2(a,b){

var c=10;

return a + b;

}

//调用

var result = sum2(5,6);

console.log(result);

console.log("len:"+sum2.length);

//第二种定义方法

var fun =function(){

alert("我是js函数");

}

var fun =function(){

console.log("fun");

}

//调用

fun();

</script>

</body>

</html>

四、DOM：可以操作html文档对象

（一）DOM简介

1、文档对象模型（Document Object Model，简称DOM），是W3C组织推荐的处理可扩展置标语言的标准编程接口。通过 HTML DOM，JavaScript 能够访问和改变 HTML 文档的所有元素。
2、当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）。
3、HTML DOM 模型被结构化为对象树：

树节点类型：

元素节点（标签节点）
属性节点
文本节点

节点之间关系：

父子关系

兄弟关系

文档对象：document

（二）获取页面元素对象

1、查找页面元素的方法：
（1）document.getElementById(id)：通过id号来查找元素。
（2）document.getElementsByTagName(name)：通过标签名来查找元素。
（3）document.getElementsByClassName(name)：通过类名来查找元素。
（4）document.getElementsByName(name)：通过name属性名来查找元素。
2、以上四种方法中，由于页面中元素的id号是唯一的，所以通过id获取的元素个数也是唯一的；而其他三种方式获取的元素个数不唯一，所以使用时需要像数组一样去获取指定的元素。

案例：

<!DOCTYPE html>

<head>

<title>获取页面元素</title>

</head>

<body>

<div id="d1">我是div标签</div>

<p>我是p标签1</p>

<p class="c1">我是p标签2</p>

//1.document.getElementById(id)

var div = document.getElementById("d1");

console.log(div.innerText);

//2.document.getElementsByTagName(name)

var parr = document.getElementsByTagName("p");

console.log(parr.length);

console.log(parr[0].innerText);

//3.document.getElementsByClassName(name)

var c1 = document.getElementsByClassName("c1");

console.log(c1[0].innerText);

//4.document.getElementsByName(name)

var username = document.getElementsByName("username");

console.log(username[0].value);

</script>

</body>

</html>

课堂案例：全选全不选效果

<!DOCTYPE html>

<head>

<title>全选全不选效果</title>

</head>

<body>

//定义实现全选全不选功能

function checkAll(){

//获取全选按钮

var chkAll = document.getElementById("chkAll");

//console.log(chkAll.checked);

//获取下面所有爱好复选框

var chks = document.getElementsByName("hobby");

//遍历所有爱好复选框，让每一个复选框的状态与全选按钮的状态保持一致

for(var i=0;i<chks.length;i++){

chks[i].checked = chkAll.checked;

}

</script>

</body>

</html>

（三）操作页面元素对象

1、创建dom对象
    document.createElement("标签名");
2、添加dom对象
    （1）A.appendChild(B) 将B添加到A内部的最后面
    （2）A.insertBefore(B, C) 将B添加到A内部C的前面
3、删除dom对象
    （1）A.remove()   将A删除
    （2）A.removeChild(B) 将A内部的B删除
4、替换dom对象
    A.replaceChild(B, C)    用B替换A内部的C

案例：

<!DOCTYPE html>

<head>

<title>操作页面元素</title>

</head>

<body>

<ul>

</ul>

//获取到ul标签

var ul = document.getElementsByTagName("ul")[0];

//获取第二个节点

var twoLi = document.getElementById("two");

//创建一个新的列表项

var newLi = document.createElement("li");

//给中间文本赋值

newLi.innerText = "列表5";

//将newLi标签添加到ul的最后

//ul.appendChild(newLi);

//将新创建的节点newLi加到第二个节前面

//ul.insertBefore(newLi,twoLi);

//用newLi节点替换twoLi

//ul.replaceChild(newLi,twoLi);

//删除自身节点

//twoLi.remove();

//通过父节点删除孩子节点

ul.removeChild(twoLi);

</script>

</body>

</html>

（四）操作元素属性

1、页面元素.属性名 = “值”
2、设置：标签对象.setAttribute("属性名","属性值");
3、获取：标签对象.getAttribute("属性名");
4、删除：标签对象.removeAttribute("属性名");

案例：

<!DOCTYPE html>

<head>

<title>操作元素的属性</title>

</head>

<body>

//改变图片

function changeImg(){

//获取图片标签

var img = document.getElementsByTagName("img")[0];

//console.log(img.src);

//修改src属性值

//img.src = "img/face5.jpg";

console.log(img.getAttribute("src"));

//img.setAttribute("src","img/face5.jpg");

img.removeAttribute("src");

console.log(img.getAttribute("src"));

}

</script>

</body>

</html>

（五）操作元素的样式

1、直接操作
    页面元素.style.css样式名称 = “值”
2、间接操作:通过类名进行操作
    页面元素.setAttribute(“class”, “类名1 类名2”)
    先将css样式定义在类中，通过行间属性class，为其设置类

<!DOCTYPE html>

<head>

<style>

#d1{

width: 200px;

height: 200px;

background-color: red;

}

#bg{

width: 200px;

height: 200px;

background-color: royalblue;

border: 5px solid yellow;

}

</style>

</head>

<body>

//改变背景颜色

function changeBgColor(){

//找到div

var div = document.getElementById("d1");

//var arr = ["red","bule"];

//直接操作

//div.style.backgroundColor = "blue";

//间接通过改变元素的属性来改变样式

div.setAttribute("id","bg");

}

</script>

</body>

</html>

（六）操作元素的内容

1、标签对象.innerHTML 获取或者设置内容可以包含标签
2、标签对象.innerText 获取或者设置内容只包含文本
3、input标签对象.value 获取或者设置input框中的内容
4、innerText和innerHTML语法:
获取:标签对象.innerHTML
修改:标签对象.innerHTML=要修改的值

innerText与innerHTML区别：

innerText纯文本操作，不会对html标签进行解析。

innerHTML操作包含html标签在内文本信息，会对html标签进行解析操作。

（七）事件

1、元素被执行某种操作，触发某些代码
2、如何为页面元素对象绑定事件
    （1）在标签中指定事件的属性：<button id="btn" οnclick="func01()">点我啊</button>
    需要在脚本中，先行定义好func01这个方法~
    （2）获取标签元素绑定事件：document.getElementById("btn").onclick = function(){}
    第二种绑定事件用到的是匿名函数，直接书写方法体代码即可
3、常见事件