Java Web学习day20------js入门（基本语法、DOM操作、事件）

最新推荐文章于 2023-04-01 22:19:22 发布

挨踢农民工dsh

最新推荐文章于 2023-04-01 22:19:22 发布

阅读量170

点赞数

分类专栏： Java Web学习文章标签： js

本文链接：https://blog.csdn.net/dsh789/article/details/111214048

版权

Java Web学习专栏收录该内容

27 篇文章 1 订阅

订阅专栏

基本语法、DOM操作、事件

【第一章】快速入门
- 1 Javascript概述和分类
- 2 javascript的引入方式【重要】
【第二章】基本语法
【第三章】DOM操作和事件
- 1 DOM操作
- 2 常用事件

【第一章】快速入门

1 Javascript概述和分类

概述
Javascript是一门客户端脚本语言。
分类
（1）ECMAScript：主要讲述javascript的基础语法。
（2）DOM：document object model 文档对象模型，有一些api用来操作html页面的标签
（3）BOM：browser object model 浏览器对象模型，有一些api用来和浏览器打交道。

2 javascript的引入方式【重要】

（1）方式1：内部js
在html页面将js代码写到一组

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>js的两种引入方式</title>
  </head>
  <body>
    <!--方式1：内部js-->
    <script>
      alert("hello js");
    </script>
  </body>
</html>

（2）方式2:外部文件
【第一步】将js代码写到一个xxx.js文件。

alert("hi js");

【第二步】在html页面的script标签中使用src属性引入xxx.js文件

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>js的两种引入方式</title>
  </head>
  <body>
    <!--方式2：引入js文件-->
    <script src="js/my.js"></script>
  </body>
</html>

注意：如果script标签中使用了src属性引入了外部js文件，那么这组script标签体中就不能再写js代码，不会执行，只能重新在使用一组script标签写js代码。

【第二章】基本语法

1 注释

js中的注释只有两种，和Java中的注释一样
1.1 单行注释：快捷键ctrl+/

//单行注释内容

1.2 多行注释：快捷键ctrl+shift+/

/*
	多行注释内容
*/

2 输入输出语句

2.1 输入语句

var num = prompt("请输入一个整数：");  //var 表示声明变量的关键字
alert(num);

2.2 输出语句

alert(num);  //以弹框的方式输出
console.log("接收到的整数是："+num);// 展示到浏览器的控制台中，需要使用F12或者fn+F12打开浏览器的控制台
document.write("接收到的整数是："+num+"<br>");  //展示到浏览器的页面上，<br>标签表示换行

3 变量和常量【重要】

3.1 IDEA支持ECMAscript6语法
在这里插入图片描述
3.2 变量，使用let关键字
js属于弱类型语言，声明的变量类型随着值可以动态改变，值是什么类型变量就是什么类型。

//定义变量,使用let关键字
let m;
console.log("m="+m);  //默认值是：undefined

m=100;
console.log("m="+m);

m="hello";
console.log("m="+m);
{  //代码块
  let n=100;
  console.log("代码块中输出n="+n);
}
//console.log("n="+n);  //异常：ReferenceError: n is not defined

3.3 常量，使用const关键字

//定义常量，使用const关键字
const PI=3.1415926
console.log("PI="+PI);

PI=10;  //常量不能被修改

4 数据类型和typeof【重要】

4.1 原始数据类型
在这里插入图片描述

//原始数据类型
let l1 = true;
document.write(typeof(l1) + "<br>");    // boolean

let l2 = null;
document.write(typeof(l2) + "<br>");    // object  js原始的一个错误

let l3;
document.write(typeof(l3) + "<br>");    // undefined

let l4 = 10;
document.write(typeof(l4) + "<br>");    // number

let l5 = "hello";
document.write(typeof(l5) + "<br>");    // string

let l6 = 100n;
document.write(typeof(l6) + "<br>");    // bigint

4.2 引用数据类型，就是对象

//引用类型
let date = new Date();
document.write(date);  //Thu Aug 13 2020 11:17:01 GMT+0800 (中国标准时间)
document.write(date.getFullYear()); //2020
document.write(typeof(date) + "<br>"); //object

拓展：强制类型转换和自动类型转换
（1）强制类型转换
a) String()：将参数转成字符串
b) Number()：将参数转成数值
注意:null可以和数值进制转换,而undefined不可以
c) Boolean()：将参数转成boolean类型的值
Boolean()可以将任意类型转成boolean类型，0、null、undefined可以被转成false，非0、非null、非undefined会被转成true
（2）自动类型转换
任意类型的数据加上字符串都会执行字符串的拼接
true，false，null和数值类型进行运算都会转成数值
规律：
如果+两端有一端是字符串，就会执行字符串的拼接
如果+两端没有一个是字符串，就会使用Number()强转，然后进行加法运算

5 运算符

5.1 比较运算符

let m=10;
document.write("m="+m+"<br>");//m=10
document.write(m+10+"<br>");//20
document.write(m+"10"+"<br>");//1010
document.write(m*10+"<br>");//100

let n="10";
document.write("n="+n+"<br>");//n=10
document.write(n+10+"<br>");//1010
document.write(n+"10"+"<br>");//1010
document.write(n*10+"<br>");//100 //string类型是10会自动转成number类型的10，然后做乘法运算
document.write(n-5+"<br>");//5 //string类型是10会自动转成number类型的10，然后做减法运算

document.write((m==n)+"<br>"); //true,只比较值，值一样结果就是true
document.write((m===n)+"<br>"); //false，比较值和类型，值和类型都相同结果才是true。

总结：==仅仅比较值，值相同结果就是true。===比较值和类型，值和类型都相同结果才是true
5.2 三元运算符

let result=m>5?10:20; //result=10
document.write(result+"<br>");

6 流程控制语句

if、switch、for循环、while循环、do…while循环和Java中的相同

7 数组【重要】

特点：数组的长度动态可变，类似于Java中的集合
7.1 数组的定义

let arr1=[];//定义了一个长度为0的数组
let arr2=[10,true,"hello",200]; //数组中的元素可以是任意类型

7.2 数组遍历【重要】

//方式1：fori的方式遍历，快捷键：itar+回车
for (let i = 0; i < arr.length; i++) {
  document.write(arr[i]+"<br>");
}
document.write("==============<br>");
//方式2：for of方式遍历:for(let 变量名 of 数组对象){}，快捷键：iter
for (let el of arr) {
  document.write(el+"<br>");
}

7.3 扩展运算符：…
（1）复制数组

//复制数组（将arr复制给arr2）
let arr2 = [...arr];

（2）合并数组

//合并数组（将arr和arr3合并，结果返回给arr4）
let arr3 = [40,50,60];
let arr4 = [...arr , ...arr3];

（3）将字符串拆成数组

//将字符串转成数组
let arr5 = [..."heima"];

8 函数【重点】

方式1：普通函数
格式：
function 方法名(变量名1,变量名2,…){
方法体;
return 返回值;
}
调用：
let 变量=方法名(参数值1,参数值2,…); //如果有返回值就使用变量接收

//定义无返回值函数
function show(str) {
  alert("hello "+str);
}
//调用函数
show("吴云飞");

//定义有返回值函数
function add(a,b) {
  return a+b;
}
let sum=add(10,20);
document.write("sum="+sum+"<br>")

方式2：匿名函数
格式：
let 变量名=function (变量名1,变量名2,…){
方法体;
return 返回值;
}
调用：
let 返回值变量=变量名(参数值1,参数值2,…); //如果有返回值就使用变量接收

let sub=function (a,b) {
  return a-b;
};
let result=sub(10,20);// -10
document.write("result="+result+"<br>");

【第三章】DOM操作和事件

1 DOM操作

1.1 概述
document object model 文档对象模型，浏览器会将页面的标签、属性、文本等都封装成一个个对象，这些对象都存在于一个叫document的对象身上，然后我们可以操作这些对象。
1.2 DOM操作的基本思路【重要】
【第一步】：通过document获取标签/元素对象。
【第二步】：操作标签的属性、文本、样式、以及添加子元素或者删除子元素
【第一步】：获取标签/元素对象
（1）传统方式（ES5方式）
在这里插入图片描述

//1. getElementById()   根据id属性值获取元素对象
let div1=document.getElementById("div1");
alert(div1);
//2. getElementsByTagName()   根据元素名称获取元素对象们，返回数组
let divs=document.getElementsByTagName("div");
alert(divs.length);//4
//3. getElementsByClassName()  根据class属性值获取元素对象们，返回数组
let cls = document.getElementsByClassName("cls");
alert(cls.length); //2
//4. getElementsByName()   根据name属性值获取元素对象们，返回数组
let usernameEls=document.getElementsByName("username");
alert(usernameEls.length); //1
//5. 子元素对象.parentElement属性   获取当前元素的父元素
alert(div1.parentElement);

（2）新的方式（ES6方式）【掌握】
document.querySelector(“css选择器”); 根据css选择器查询一个元素
document.querySelectorAll(“css选择器”); 根据css选择器查询一组元素

//es6中的新方式
let div1=document.querySelector("#div1"); //根据css选择器查询一个元素
alert(div1);

let input=document.querySelector("input[name='username']");
alert(input);

let divs=document.querySelectorAll("div"); //根据css选择器查询一组元素
alert(divs.length); //4

let cls=document.querySelectorAll(".cls");
alert(cls.length); //2

【第二步】：操作这些对象
操作属性和样式
在这里插入图片描述
（1）操作属性

//添加属性
let el = document.querySelector("a");
//方式1：添加href属性   对象名.属性名=属性值; 推荐****************
//el.href="http://www.itheima.com";
//方式2：添加href属性   对象名.setAttribute(属性名,属性值);
el.setAttribute("href","http://www.itcast.cn");

//获取属性
//方式1：获取href属性   let 变量名=对象名.属性名;
alert(el.href);
//方式2：获取href属性   let 变量名=对象名.getAttribute(属性名);
alert(el.getAttribute("href"));
//移除属性
//el.href="";
el.removeAttribute("href");

（2）操作样式

//让超链接的字体大小为30px，颜色为绿色
el.style.fontSize="30px";
el.style.color="green";

el.className="cls";  //先写好样式
--------------------
<style>
  .cls{
    font-size: 60px;
    color: yellowgreen;
    background-color: yellow;
  }
</style>

操作文本
innerHTML属性【重要】：获取/设置标签内容体html代码的，如果包含标签，浏览器会解析成对应的html元素
innerText属性【了解】：获取/设置标签内容体文本的，如果包含标签，浏览器不会解析，原模原样展示。
value属性【重要】：用来获取/设置输入框中的内容

document.querySelector("#div").innerHTML="<a href='http://www.itheima.com'>黑马程序员</a>"
// document.querySelector("#div").innerText="<a href='http://www.itheima.com'>黑马程序员</a>"

let value=document.querySelector("#username").value; //获取输入框中的内容
document.write(value);//打印

document.querySelector("#username").value="刘曲"; //设置输入框中的内容

添加或者删除子元素【了解】
添加元素：select.innerHTML+="<option>武汉</option>"

//1. createElement()   创建新的元素
let option = document.createElement("option"); //<option></option>
option.innerHTML="武汉";
/* //2. appendChild()     将子元素添加到父元素中
     var select = document.querySelector("#s");
     select.appendChild(option);*/

//通过innerHTML属性添加元素
let select = document.querySelector("#s");
/* select.innerHTML+="<option>武汉</option>";*/

//3. removeChild()     通过父元素删除子s元素
let options = document.querySelectorAll("option");
/*select.removeChild(options[options.length-1])*/

//4. replaceChild()    用新元素替换老元素
select.replaceChild(option,options[3]);

2 常用事件

（1）三个要素
事件源
事件
事件处理程序
（2）三个步骤
写一个事件源
写一个监听器(事件处理程序)
绑定事件源和监听
（3）常见事件
a) onload事件：页面加载完成事件，用来解决由于代码从上往下加载过程中没有找到元素的问题
b) onclick事件：单击事件，很常用。
c) onblur事件：失去焦点事件，用于表单输入框校验。
d)onchange事件：内容改变事件，用于下拉列表选中值，例如：省市区联动
e) onsubmit事件：表单提交事件，当submit按钮被单击之后出发。用于表单校验，可以提交表单或者阻止表单提交。(很特殊)
（4）绑定方式
方式1:行内绑定
直接给html标签添加事件属性，属性值就是要执行的方法
【第一步】：给html标签添加事件属性

<button id="up" onclick="up()">上一张</button> 
<button id="down" onclick="down()">下一张</button>

【第二步】：声明要执行的方法

//显示第一张图片的方法
function up(){
  let img = document.getElementById("img");
  img.setAttribute("src","img/01.png");
}
//显示第二张图片的方法
function down(){
  let img = document.getElementById("img");
  img.setAttribute("src","img/02.png");
}

方式2:动态绑定
给标签对象的事件属性赋一个函数对象值
【第一步】：根据选择器获取标签对象

let el=document.querySelector("css选择器");

【第二步】：给元素对象的事件属性赋函数对象值

//对象名.事件属性名=函数对象(普通或者匿名函数)
el.onclick=up; //写法1：up是之前的函数名称，也是对象名。
el.onclick=function(){ //写法2：匿名方法
  let img = document.getElementById("img");
  img.setAttribute("src","img/01.png");
}

挨踢农民工dsh

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Java Web学习day20------js入门（基本语法、DOM操作、事件）

js【第一章】快速入门1 Javascript概述和分类概述分类2 javascript的引入方式【重要】方式1:内部js方式2:外部文件【第二章】基本语法1 注释1.1 单行注释：快捷键ctrl+/1.2 多行注释：快捷键ctrl+shift+/2 输入输出语句2.1 输入语句2.2 输出语句3 变量和常量【重要】3.1 idea支持ECMAscript6语法3.2 变量，使用let关键字3.3 常量，使用const关键字4 数据类型和typeof【重要】4.1 原始数据类型4.2 引用数据类型，就是对象
复制链接

扫一扫

专栏目录