【从零开始的Java开发】2-9-1 JavaScript入门：语法、JS对表单元进行设置、事件与DOM

2023-11-13

文章目录

页面使用JS的方法

使用<script>在HTML页面中插入JavaScript：两个<script>中的语言就是js。

<body>
    <script type="text/javascript">
        alert("hello javascript");
    </script>
</body>

或是引用外部JS文件（一般用这种）

<script type="text/javascript" src="js1.js"> </script>

第一个JS程序：

<head>
    <title>index</title>
    <script type="text/javascript">
    // 弹对话框
    alert("hello javascript");
    </script>
</head>

显示：
在这里插入图片描述

相关语法

变量

与其他程序设计语言相同，是用来临时存储信息。
变量var区分类型，但没有int之类的关键词。
即：创建的时候不区分数据类型，赋值的时候区分。
即：弱数据类型。

如：

// 声明一个变量 此时没有数据类型
var x;
// 现在有数据类型了
x = 123;
alert(x + 1);

显示：
在这里插入图片描述
若：

x = "123";

显示：1231

调试

alert弹窗调试
console.log控制台输出调试

作用：观察变量值的变化规律，是否符合程序设计的目的。

如：

console.log(x + 1);

显示：在浏览器F12.
在这里插入图片描述

自定义函数

JS中的函数分为：自定义函数和内置函数。

创建方法1：

//这种是函数声明 可以先使用后定义
function fun1(){
	//代码片段
	return ***;
}

创建方法2：

//函数表达式 必须先定义后使用
var fun1=function(x){
	return ***;
};

如：

//创建函数
function add(n1, n2) {
    alert(n1 + n2);
}

//调用函数
add(1, 2);

显示弹窗：3

数据类型及类型转换

数据类型

number：数字类型，整型浮点型都包括
string：字符串类型，必须放在单引号或者双引号中
boolean：布尔类型，只有true和false两种值
undefined：未定义，一般指的是已经声明，但是没有赋值的变量（要尽量避免它的出现）
null：空对象类型
object：对象类型，在js常见的有window，document，array等
NaN：是Number的一种特殊类型，isNaN()，如果是数字返回false，不是数字返回true

类型转换

parseInt()
parseFloat()
Number()
Boolean

parseInt()的代码：

var str = "123";
console.log(str + 1);
console.log(str * 1 + 1); //隐式转换：自动类型转换
console.log(parseInt(str) + 1); //强制转换

在浏览器中按F12：

1231
124
124

若不能转换：

var str="abc";
console.log(parseInt(str));

控制台：NaN

所以加一个isNaN判断是否可以转换：

不能转换：

var str = "abc";
//如果可以转换
if (isNaN(str) == false) {
    console.log(parseInt(str));
} else {
    console.log("is error");
}

控制台：is error

可以转换：

var str = "123";
//如果可以转换
if (isNaN(str) == false) {
    console.log(parseInt(str));
} else {
    console.log("is error");
}

控制台：123

parseInt()、parseFloat()、Number()的代码：

var str = "0123.654";
console.log(Number(str)); //一般让它优先
console.log(parseInt(str));
console.log(parseFloat(str));

控制台：

123.654
123
123.654

剩下的这些可以自己演示：
若str是null，则Number返回0，parseInt和parseFloat返回NaN。
若str是""，则Number返回0，parseInt和parseFloat返回NaN。

Boolean()的转换：
""会转换为false；
null会转换为false；
（字符）有内容会转换为true；
（数字）0会转换为false；
（数字）非0会转换为true；

变量作用域

全局变量：在函数外部创建的变量，称为全局变量，在函数之间可以共享使用。
局部变量：在函数内部创建的变量，称为局部变量，其他函数不能使用。

运算符

比较运算符：

>：大于
>=：大于等于
!=：不等于
<：小于
<=：小于等于

运算符优先级：
在这里插入图片描述
逻辑运算符：

&&：and
||：or
! :非

三目运算符：

条件？值1：值2

满足条件就返回值1，否则值2.

程序控制语句

if else
switch
for、while、do...while

内置函数

字符函数

substring：截取字符串长度，substring(起始位置，结束位置)
substr：截取字符串长度，substr(起始位置，截取长度)
charAt：获取该位置的字符，charAt(idx)
split：按一定的规律将字符串转化为数组
length：求长度，str.length返回str的长度
indexOf：查找某个字符在字符串第一次出现的位置：str.indexOf(1)返回字符’1’在str中第一次出现的位置；str.indexOf(1,2)返回从位置2开始的字符’1’在str中第一次出现的位置；
concat：连接
replace：替换

split代码：

var str = "aa,bb,cc,dd,eee,12345,678";
//以逗号为分隔，将str这个字符串转化为数组存到arr里
var arr = str.split(",");
console.log(arr);

控制台：(7)表示有7个元素。

(7) ['aa', 'bb', 'cc', 'dd', 'eee', '12345', '678']

concat代码：添加一句

console.log(str.concat("55","77","000"));

控制台：

aa,bb,cc,dd,eee,12345,6785577000

replace代码：把第一个aa替换成bb

//把aa替换成bb
console.log(str.replace("aa","bb"));

控制台：

bb,bb,cc,dd,eee,12345,678

日期函数

Date：获取当前系统日期
getDate：获取当前是几号
getDay：获取当前星期几（周日是0，周一是1…以此类推）
getMonth：获取当前月份 （从0开始）
getFullYear：获取当前年份
getYear：获取当前年份（已经不用了）
getHours：获取当前小时
getMinutes：获取当前分钟
getSeconds：获取当前秒

一个日期的例子：

var d1 = new Date();
var d2 = new Date("2022-9-1 10:01:23");
console.log(d2.getDate()); //获取当前是几号
console.log(d2.getMonth()); //获取当前月份
console.log(d2.getFullYear()); //获取当前年份
console.log(d2.getHours()); 
console.log(d2.getMinutes()); 
console.log(d2.getSeconds());

控制台：

1
8//如果想要显示当前的月份，可以+1
2022
10
1
23

计算相差的日期——计算2022-9-1到2023年的天数：

var d1 = new Date("2022-9-1");
var d2 = new Date("2023-1-1");
var n = d2.getTime() - d1.getTime(); //获得的是毫秒
console.log(parseInt(n / (1000) / (3600) / 24));

控制台：

日期格式化：把日期处理为xxxx-xx-xx hh:mm:ss的形式

//自定义一个格式化日期的函数
function fun_FmtDate() {
    var d1 = new Date();
    var year, mon, day, hh, mm, ss;
    var time;
    year = d1.getFullYear();
    mon = d1.getMonth() + 1;
    day = d1.getDate();
    hh = d1.getHours();
    mm = d1.getMinutes();
    ss = d1.getSeconds();
    time = year + "-" + mon + "-" + day + " " + hh + ":" + mm + ":" + ss;
    return time;
}

console.log(fun_FmtDate());

控制台：

2022-8-29 19:42:19

数学函数

Math.round：四舍五入取整
max：返回一组数最大值
min：返回一组数最小值
abs：返回绝对值
toFixed(x)：保留x位小数

数组

声明或创建一个不指定长度的数组，又称实例化创建

var arrayObj = new Array();

声明或创建一个数组并指定长度的数组

var arrayObj = new Array(5);//长度为5

声明或创建一个带有默认值的数组

var arrayObj = new Array(2,1,2,3,4,5);
//参数就是数组的内容，数组长度是参数个数

创建一个数组并赋值的简写，又称为隐式创建数组

var arrayObj = [1,2,3,4,5];

数组赋值，字符下标，数组遍历

var arrayObj = new Array(2, 3, 4, 5, 6, 7);
//输出数组中某个元素
console.log(arrayObj[0]);
//下标出界会输出undefined

//遍历数组
for (var i in arrayObj) {
    console.log(arrayObj[i]);
}

控制台：

JS对表单元进行设置

表单
表单的主要作用是在客户端接收用户的信息，然后将数据递交给后台的程序来操纵这些数据。

JS做什么：设置或获取各种表单元素的值。

单击与刷新

需求：点击按钮后有弹窗。

html：

<body>
    <form>
        <label>用户名</label>
        <input type="text" name="userName" id="userName" value="123" />
        <!-- onclick 单击事件 -->
        <input type="button" id="button" onclick="show1()" value="button" />
    </form>
</body>

js：

//单击事件后的显示
function show1() {
    alert("单击成功！");
}

需求：点击按钮后使文本框内的123变成999：

function show1() {
    // alert("单击成功！");
    document.getElementById("userName").value = "999";
}

点击刷新（onload）后出现在页面里的称为初始化。
需求：初始化后文本框里为123456。

html：

<body onload="show1()">
    <form>
        <label>用户名</label>
        <input type="text" name="userName" id="userName" />
        <!-- onclick 单击事件 -->
        <input type="button" id="button" value="button" />
    </form>
</body>

js：

//单击事件后的显示
function show1() {
    // alert("单击成功！");
    document.getElementById("userName").value = "123456";
}

单选按钮

单选按钮：radio

需求：单选性别男/女，点击按钮后对话框把选中的显示出来。

html：

<body>
    <form>
        <!-- 单选按钮 -->
        <input type="radio" name="xb" value="男" checked="checked">男<br>
        <input type="radio" name="xb" value="女">女<br>
        <input type="button" id="button" value="button" onclick="show1()" />
    </form>
</body>

js：

function show1() {
    var xb = document.getElementsByName("xb");

    //checked表示判断是否被选中
    if (xb[0].checked) {
        alert(xb[0].value);
    } else {
        alert(xb[1].value);
    }
}

在这里插入图片描述

列表框

一般id给js用，name给后台用。

需求：用js自动生成年、月、日的列表框。

年：html：

<body onload="ymd()">
    <form>
        <!-- 列表框 -->
        <select name="yyyy" id="yyyy">
        </select>
    </form>
</body>

js：

function ymd() {
    //获取id=yyyy的控件
    var yyyy = document.getElementById("yyyy");
    for (var i = 1999; i <= 2022; i++) {
        //option是条目
        //i i 第一个参数是显示的名字 第二个参数是value
        yyyy.options.add(new Option(i, i));
    }
}

在这里插入图片描述
年月日：
html：

<body onload="ymd()">
    <form>
        <!-- 列表框 -->
        <select name="yyyy" id="yyyy">
        </select>年
        <select name="mm" id="mm">
        </select>月
        <select name="dd" id="dd">
        </select>日
    </form>
</body>

js：

function ymd() {
    //获取id=yyyy的控件
    var yyyy = document.getElementById("yyyy");
    var mm = document.getElementById("mm");
    var dd = document.getElementById("dd");
    initSelect(yyyy, 1999, 2022);
    initSelect(mm, 1, 12);
    initSelect(dd, 1, 31);
}

//给列表框赋值，传递三个参数：表单元素，开始，结束
function initSelect(Obj, start, end) {
    for (var i = start; i <= end; i++) {
        Obj.options.add(new Option(i, i));
    }
}

在这里插入图片描述

列表框：刷新后默认选中间的值与修改对应月份的日期（联动）

刷新后默认选中间的值的ymd函数修改为：

function ymd() {
    //获取id=yyyy的控件
    var yyyy = document.getElementById("yyyy");
    var mm = document.getElementById("mm");
    var dd = document.getElementById("dd");
    //当前年份
    var date = new Date();
    var year = parseInt(date.getFullYear());
    initSelect(yyyy, 1999, year);
    initSelect(mm, 1, 12);
    initSelect(dd, 1, 31);

    //获取列表框的长度
    var n = yyyy.length;

    //设置被默认选中的:中间
    yyyy.selectedIndex = Math.round(n / 2);

    //删除列表框的条目：天
    // dd.options.length=0;
}

需求：若改变月列表框，则弹窗“123”：
html：

<select name="mm" id="mm" onchange="selectYmd()"></select>月

js：

//列表框的改变事件
function selectYmd() {
    alert("123");
}

改变月列表框同时自动改变日列表框：（如3月时日列表框最多只有31天，4月最多只有30天）

html改成：

<body onload="ymd()">
    <form>
        <!-- 列表框 -->
        <select name="yyyy" id="yyyy" onchange="selectYmd()">
        </select>年
        <select name="mm" id="mm" onchange="selectYmd()">
        </select>月
        <select name="dd" id="dd">
        </select>日
    </form>
</body>

js添加：

//月列表框的改变事件：联动
function selectYmd() {
    //对象
    var yyyy = document.getElementById("yyyy");
    var mm = document.getElementById("mm");
    var dd = document.getElementById("dd");

    //获取选中的值
    var yy = parseInt(yyyy.value);
    var m = parseInt(mm.value);

    //日期的结束的天
    var dayEnd;

    if (m == 4 || m == 6 || m == 9 || m == 11) {
        dayEnd = 30;
    } else if (m == 2) {
        dayEnd = 28;
        if ((yy % 4 == 0 && yy % 100 == 0) || yy % 400 == 0) {
            dayEnd = 29;
        }
    } else {
        dayEnd = 31;
    }

    dd.options.length = 0;
    initSelect(dd, 1, dayEnd);
}

则：
在这里插入图片描述

列表框删除

具体删除某一个条目。

html添加：

<input type="button" name="button" value="删除列表框条目" onclick="deleteSelect()">

js：

//删除列表框的某一个条目：按索引号删除
function deleteSelect() {
    var dd = document.getElementById("dd");
    dd.options.remove(1); //下标从0开始，下标为1就是删除第二个
}

图片相关

选择列表框内不同的数字换图片。

html：

<body onload="initLogo()">
    <form>
        <!-- 图片相关 -->
        <img id="logoImg" src="img/1.jpg"><select id="logo" onchange="selectImg()"></select>
    </form>
</body>

js：

//初始化列表框：有三个选项
function initLogo() {
    //获取列表框
    var logo = document.getElementById("logo");

	//添加
    for (i = 1; i <= 3; i++) {
        logo.options.add(new Option(i, i));
    }
}

//选择不同的数字会对应不同的图片
function selectImg() {
    var logo = document.getElementById("logo");
    var n = logo.value;
    var logoImg = document.getElementById("logoImg");
    logoImg.src = "img/" + n + ".jpg";

}

复选框

关于全选，全不选，反选。

html：

<body>
    <form>
        <input type="checkbox" name="interest" /><label>游泳</label>
        <input type="checkbox" name="interest" /><label>爬山</label>
        <input type="checkbox" name="interest" /><label>看书</label>
        <input type="checkbox" name="interest" /><label>听歌</label>
        <input type="button" value="全选" id="btn1" onclick="checkInterest()">
        <input type="button" value="反选" id="bt2" onclick="checkInterest1()">
    </form>
</body>

js：

//全局变量：在页面加载的时候就进行初始化
var flag = true;

function checkInterest() {
    //是一个数组:注意Elements有s
    var interest = document.getElementsByName("interest");

    //全选
    for (i = 0; i < interest.length; i++) {
        interest[i].checked = flag; //true表示选中
    }

    //如果已经全选了，那按钮上要显示为"全不选"
    if (flag) {
        document.getElementById("btn1").value = "全不选";
    } else {
        document.getElementById("btn1").value = "全选";
    }

    //再点一次就是全不选——开关变量
    flag = !flag;
}

//反选
function checkInterest1() {
    var interest = document.getElementsByName("interest");
    for (i = 0; i < interest.length; i++) {
        interest[i].checked = !interest[i].checked;
    }
}

事件与DOM总结

事件

什么时候发生
达到什么效果、功能

事件是什么：
事件是指被程序发现的行为或发生的事情，而且它可能会被程序处理。

特点：js的事件，都是以on开头，如onclick点击、onchange改变、onload刷新…

分类：鼠标事件、键盘事件、表单事件…

鼠标事件：

onclick
ondblclick
onmouseover
onmouseout
onmousedown

键盘事件：

onkeydowm
onkeyup
keypress

表单事件：

onfoucs
onsubmit
onblur
onchange

DOM

DOM：Document Object Model——文档对象模型

什么是DOM：
将文档（页面）表现为结构化的表示方法，使每一个页面元素都是可操控的，DOM将网页和脚本以及其他的编程语言联系了起来。

特点：利用js控制页面中的所有元素，使页面更加”聪明“。

分类：元素节点、属性节点、文本节点

DOM树
在这里插入图片描述

常用DOM操作
在这里插入图片描述

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)