使用在HTML页面中插入JavaScript:两个
中的语言就是js。
<body>
<script type="text/javascript">
alert("hello javascript");
script>
body>
或是引用外部JS文件(一般用这种)
<script type="text/javascript" src="js1.js"> script>
第一个JS程序:
<head>
<title>indextitle>
<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()
的代码:
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
字符函数
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
日期函数
一个日期的例子:
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));
控制台:
122
日期格式化:把日期处理为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
数学函数
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]);
}
控制台:
2
2
3
4
5
6
7
表单
表单的主要作用是在客户端接收用户的信息,然后将数据递交给后台的程序来操纵这些数据。
JS做什么:设置或获取各种表单元素的值。
需求:点击按钮后有弹窗。
html:
<body>
<form>
<label>用户名label>
<input type="text" name="userName" id="userName" value="123" />
<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" />
<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;
}
}
事件是什么:
事件是指被程序发现的行为或发生的事情,而且它可能会被程序处理。
特点:js的事件,都是以on开头,如onclick
点击、onchange
改变、onload
刷新…
分类:鼠标事件、键盘事件、表单事件…
鼠标事件:
onclick
ondblclick
onmouseover
onmouseout
onmousedown
键盘事件:
onkeydowm
onkeyup
keypress
表单事件:
onfoucs
onsubmit
onblur
onchange
DOM:Document Object Model——文档 对象 模型
什么是DOM:
将文档(页面)表现为结构化的表示方法,使每一个页面元素都是可操控的,DOM将网页和脚本以及其他的编程语言联系了起来。
特点:利用js控制页面中的所有元素,使页面更加”聪明“。
分类:元素节点、属性节点、文本节点
DOM树
常用DOM操作