文章目录
3. 循环语句
6.完成页面加载事件
简介
JS基础概念，JS语句，JS函数，JS对象（Date，Math，String，Global，Array，Even事件）
一、JS概念
作用：JS可以实现表单数据的校验；TAB菜单的切换；背景图的切换；JS小游戏的开发；（HTML+CSS可以有静态的页面）。
概念：是一种直接使用的语言（不需要编译器去转换），动态类型，弱类型、基于原型的语言，内置支持类型。
组成：ECMAScript（变量、类型、语法等），DOM（文档对象模型，HTML和XML的应用程序接口，DOM把整个页面规划成由节点层级构成的文档），BOM（浏览器对象模型，对浏览器窗口进行访问和操作）。
特点：1. 脚本语言，不需要进行事先编译，只要有一个相适应的解释器就行，解释器会把程序代码翻译成可执行的格式。
2.基于对象的语言，具有封装特性，没有继承和多态的概念。
3.事件驱动，在网页执行某种操作，别成为事件（event）。如按下鼠标，移动窗口等，当事件发生后会引起相应的事件响应。
4.简单性，变量时弱类型，var a,b; a=123,b=1,a=b;
5.安全性，不能访问本地硬盘，不能将数据存入服务器上，只能同故宫浏览器实现信息浏览或动态交互。
6.跨平台性，依赖于浏览器本身；
缺点：各种浏览支持的程度不一样，呈现效果会不一样。
JS引入方式：
JS中的变量声明：
var 变量名 = 值；
注意事项：js中的变量名称：数字，字母，下划线组成，数字不能开头；
js中的变量名可以重复，但后者会把前面的变量赋值覆盖；
js中末尾没有；可以，但是不推荐使用。
JS中基本数据类型：
typeof 变量，显示变量的类型。
数字类型：number
字符串类型：string
布尔类型：boolean
对象类型：object
JS中特殊的数据类型：
未定义数据类型：underfind，只声明了变量，没有赋值。
不是一个数字类型：NaN（not a number）；a=‘123’ a=Number(a) 输出是123，但是类型是NaN。
空对象：object；var a = null
JS中运算符：
算数运算符：+、-、*、/、%、++、--
运算符：&、|、！（非）、&&（与）、||（或）、^、<、>、<=、>=、!=
连接符：+ 【两个值的类型一样时是加号，不同类型就是连接符】
特殊运算符：
==（等值符）：先比较类型，类型一致，在比较内容。不一致，会强制转换统一转number类型，在进行内容比较。
===（等同符）：先比较类型，一致，在比较内容。不一致直接返回False。
注意逻辑符的运算方法：
只要“&&”前面是false，无论“&&”后面是true还是false，结果都将返“&&”前面的值；只要“&&”前面是true，无论“&&”后面是true还是false，结果都将返“&&”后面的值；例子：1&&3 为3,1&&0为0。
只要“||”前面为false，不管“||”后面是true还是false，都返回“||”后面的值。只要“||”前面为true，不管“||”后面是true还是false，都返回“||”前面的值。例子：3||1为3，3||0为3，0||3为3
上述图片来源于：表达式与运算符 - JavaScript | MDN
二、语句
1. 条件语句
if（条件）{ 语句体}；
if（条件）{语句体1} else{语句体2}
if（条件）{语句体1} else if（条件2）{语句体2}...else{语句体n}
2. 分支语句（选择语句）
swich（条件）{
case value n：
break；
default：
break
}
3. 循环语句
while（条件）{}；
do{}while（条件）；至少执行以西循环体（Java中一样，python中没有这个语句）
for（变量，条件，语句体）{}【变量必须先初始化】
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JS引入方式</title>
<!-- 在html文件中通过标签的type属性引入 src属性:引入外部js文件 charset='编码格式' -->
<script type="text/javascript">
// alert("Hello World!")
// alert('方式二')
// var a = 10;
// var b = 20.7;
// var c = a + b;
// alert(c);
var d=15;
switch(d){
case 10:alert('d=10');
break;
case 15:alert('d=15');
break;
case 20:alert('d=20');
break;
default:
break
}
// for 循环 九九乘法表
for(var i=1; i<=9;i++){
for(var j=1;j<=i;j++){
document.write(j+'*'+i+'='+i*j+'  ')
}
document.write('<br/>')
}
</script>
<!-- <script type="text/javascript" src="./01.js" charset="utf-8"></script> -->
</head>
<body>
</body>
</html>三、函数
1.定义函数方式(三种)
founction 函数名(){ 函数体}；
var 变量名=function () {函数体}；
var 变量名=new Function("函数体") ；【函数本身也是一个对象】
调用：函数名/变量名 ()
2.js中的函数参数传递：
实参个数可以和形参个数可以不一致。
参数类似位置参数，当函数中有两位参数，
传入的只有一个参数时，另一个会显示undefinde，不会报错，
当传入的超过两位参数时，取前两个。
3.函数的返回值
如果函数没有return 这时候返回undefined;
（）：函数执行符
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>02-函数</title>
<script type="text/javascript">
// 定义函数方式1：
function demo1(){
console.log('函数定义方式一');
}
// 定义函数方式2：
var demo2=function(){
console.log('函数定义方式二');
}
// 定义函数方式3:
var demo3=new Function(console.log("函数定义方式三"));
// 调用函数
demo1();
demo2();
demo3();
// 函数中参数传递
function demo4(a,b,c){
console.log(a,b,c)
}
demo4(11) //11 undefined undefined
demo4(1,2,3) //1 2 3
demo4(1,2,3,4) //1 2 3
//函数返回值
function demo5(a){
console.log('参数值'+a)
return alert(a)
}
var a=10
demo5(a) //参数值10 弹窗为10
var a=function(){
console.log('函数a');
};
demo5(a)
</script>
</head>
<body>
</body>
</html>四、JS中对象
1.Date对象（日期对象）
本月的第几天：.getDate()；
本星期第几天：.getDay()；
返回月份 0-11：.getMonth()；
返回1900年至今的差值：.getYear()；
返回全年：.getFullYear()；
返回本地时间：.toLocaleString()；
2.Math对象（数学对象）
向上、下取整：Math.ceil(变量名)、Math.floor(变量名)；
获得随机数：Math.random() 范围【0-1】；
3.String对象
2种声明方式：var 变量名=‘内容’；var 变量名=new String('内容')；
获得下标位置内容：.charAt(下标位置)；
获得字符串的第一个索引编号：.indexOf('字符串')；
分割字符串/截取方法：.split('-| |,')；【根据字符串选择合适的方法分割】
截取字符串：.substr(开始下标，截取长度)；
截取字符串：.substr(开始下标位置)；【开始位置到结尾】
截取字符串：.substring(开始下标，结束下标)；
4.Global对象
Js中全局可以是使用的函数【自己的理解：类似python中的内置函数】
把字符串转化为可执行的js代码：eval(变量)；
将对象转换为数字类型：Number(变量)；
把对象转换为字符串类型：String(变量)；
判断变量是否是数字类型：isNaN(变量)；【NaN不是一个数字类】
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>03-对象</title>
<script type="text/javascript">
// ---------------日期对象 Date---------------
function testDate(){
var data=new Date();
// 本月的第几天
document.write(data.getDate()+"<br />")
// 本星期的第几天
document.write(data.getDay()+'<br />')
// 返回月份 0-11
document.write(data.getMonth()+'<br />')
// 从1900年至今的差值
document.write(data.getYear()+'<br />')
// 返回全年
document.write(data.getFullYear()+'<br />')
// 返回本地时间
document.write(data.toLocaleTimeString()+'<br />')
}
testDate();
// ---------------数学对象 Math---------------
function testMath(){
// 获取随机数 [0, 1)
var ran = Math.random()
console.log(ran)
// 随机数范围0-1
var ran02 = Math.random()*1000;
console.log(ran02)
// 向上取整
console.log(Math.ceil(ran02))
// 向下取整
console.log(Math.floor(ran02))
// 获得4位随机数 ---用途：验证码
console.log(Math.floor(Math.random()*9000+1000))
}
testMath();
// ---------------Sting对象----------------
function testString(){
// 字符串声明两种方式
var a = 'bu_ding_123';
var b = new String('bu_ding_123');
// 获得下标位置为3的内容
document.write('下标位置为3:'+a.charAt(3)+'<br />');
// 获得字符串下标的索引
document.write('下标索引:'+a.indexOf('ding')+'<br />');
// 字符串截取 开始下标 截取长度
document.write('开始下标2,截取长度5:'+a.substr(2,5)+'<br />');
// 截取开始长度
document.write('开始长度4:'+a.substr(4)+'<br />');
// 字符串截取 开始下标 结束下标
document.write('开始3,结束下标6:'+a.substring(3,10)+'<br />');
// 开始下标
document.write('开始下标:'+a.substr(3)+'<br />');
// 字符串截取的方法
document.write(a.split('_')+'<br />');
}
testString()
// ---------------Global对象----------------
function testGlobal(){
var a=1;
var b='var c=1';
document.write(a+'<br />');
document.write(b+'<br />');
// 把字符串转为可执行的js代码 c=1可执行
eval(b);
document.write(c+'<br />');
var d='123';
var e='123aa';
// 把对象转化为数字类型
d=Number(d);
e=Number(e);
//检查某个值是否是数字 NaN不是一个数字类型
console.log(typeof(d));
document.write(isNaN(d)+'<br />'); //number false
console.log(typeof(e));
document.write(isNaN(e)+'<br />'); //number true
}
testGlobal()
</script>
</head>
<body>
</body>
</html>5.数组对象 Array
数组4种声明方式----数组中可以放不同类型的对象：
方式一：var 变量名=new Array() ；【声明一个空数组】
方式二：var 变量名=new Array(数组长度)；【声明一个有长度的数组】
方式三：var 变量名=new Array('你好'，123，new String()，true)；
方式四：var 变量名=['bu_ding'，123，new Date()，false]；【常用】
数组的使用：
先声明一个空数据，然后根据索引位置（下标）赋值内容；【js数组的下标可以不连续，没有值会默认为空empty】
数组的扩容：
直接使用.length函数，进行赋值，扩大或缩小长度；【扩大的位置没有数据默认为空；缩小的数组从前取值】
数组的遍历：
for(var i=初始值；i<数组名.length；i++){ console.log(arr[i]}；i是从0开始的数字用来作为下标索引。
for(var i in 数组名){ console.log(arr[i]}；i代表数组的下标。
数组常用方法：
数组尾部添加元素（1个或多个）：.push('元素n')；
删除并返回数组最后一个元素：.pop()；
删除并返回数组第一个元素：.shift()；
数组开头添加元素（1个或多个）：.unshift()；
删除，添加的方法：.splice();【作为删除用是两个元素.splice(开始删除下标，删除个数)；作为添加方法用时三个元素.splice(要添加元素的下标(剩下的元素下标向后排列)，删除的个数（0是不删除元素），添加的元素内容)】
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>03-对象</title>
<script type="text/javascript">
// ---------------数组对象 Array----------------
function testArr1(){
// 声明对象四种方式
var arr1=new Array();
var arr2=new Array(5);
var arr3=new Array('bu_ding',123,new String(),true)
var arr4=['bu','ding',123,new Date()]
console.log(arr1)
console.log(arr2)
console.log(arr3)
console.log(arr4)
}
function testArr2(){
// 数组的使用
var arr=[]
arr[0]='bu_ding'
arr[1]=123
arr[2]=new Date().toLocaleTimeString()
arr[5]='结束'
arr[6]='撒花'
console.log(arr) //bu_ding,123,17:12:12,,,结束,撒花
}
function testArr3(){
// 数据扩容，扩大数组或者缩小数组
var arr=['buding',123,new String(),false]
console.log(arr.length); //4
// 扩大数组 扩充的部分没有值默认填为空
arr.length=10;
console.log(arr) //(10) ['buding', 123, String, false, 空 ×6]
// 缩小数组，去前两个
arr.length=2
console.log(arr) //(2) ['buding', 123]
}
function testArr4(){
// 数组的遍历 两种方式
arr=['bu',123,'你好',false]
for(var i=0;i<arr.length;i++){ //i是从0开始的数字用来作为下标索引
console.log(arr[i])
}
for(var j in arr){ //j代表数组的下标
console.log(j)
console.log(arr[j]) //数组内容
}
// #######################################################################
// # python 对于数组循环做的比较：可以直接遍历数组，使用数组的长度作为下标
// # a = [45,56,7,'3a',98]
// # for j in a:
// # print(j)
// # for i in range(len(a)):
// # print(a[i])
// ########################################################################
}
function testArr5(){
// 数组常用的方法
var arr=[1,'bu',123,new Date()];
console.log(arr);
// 在尾部添加元素
arr.push('ding','12')
console.log(arr)
//删除并返回最后一个数组元素
var lastElement = arr.pop()
console.log(lastElement)
// 删除并返回第一个元素
var firstElement = arr.shift()
console.log(firstElement)
// 数组开头添加元素
arr.unshift('jia','you')
console.log(arr)
// splice()方法可以添加也可以删除 作为删除使用（有两个参数）：开始删除的下标，删除的个数；
arr.splice(4,1)
console.log(arr)
// 作为添加使用（有三个参数）：要添加元素的下标(剩下的元素下标向后排列)，删除的个数（0是不删除元素），添加的元素内容
arr.splice(1,1,11)
console.log(arr)
}
testArr1();
testArr2();
testArr3();
testArr4();
testArr5();
</script>
</head>
<body>
</body>
</html>6.Even对象（事件）
a、什么是事件？
事件是可以被 JavaScript 监测到的行为。
网页中的每个元素都可以产生某些事件。例如：用户按某个按钮时产生onclick事件触发某个函数；生活案例：烟雾报警器。 事件通常与JS函数配合使用，通过事件来驱动函数执行。
b、常用的事件
1.单击事件
οnclick=‘函数名’【body 内的 标签中的属性】
2.双击事件
οndblclick=‘函数名’
3.鼠标事件
οnmοuseοver='函数名' ：鼠标放上事件；
οnmοuseοut='函数名'：鼠标离开事件；
οnmοusemοve='函数名'：鼠标移动事件；
οnmοusedοwn='函数名'：鼠标点击事件；
4.键盘事件
οnkeyup=‘函数名’：键盘弹起事件；
οnkeydοwn='函数名'：键盘按下事件；
5.焦点事件
οnfοcus='函数名'：获得焦点事件；
οnblur=‘函数名’：失去焦点事件；
οnchange=‘函数名’：内容改变事件；【必须失去焦点才会触发，内容没有改变失去焦点也不会触发】。
6.完成页面加载事件
οnlοad=‘函数名’【是body标签属性，加载完最后</html>标签会触发这个事件】
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>04-常用even事件</title>
<script >
function demo1(){
alert('单击事件')
}
function demo2(){
alert('双击事件')
}
function demo3(){
alert('鼠标放上事件')
}
function demo4(){
alert('鼠标点击事件')
}
function demo5(){
alert('鼠标离开事件')
}
function demo6(){
console.log('鼠标移动事件')
}
function demo7(){
alert('键盘弹起事件')
}
function demo8(){
alert('键盘按下事件')
}
function demo9(){
alert('获得焦点事件')
}
function demo10(){
alert('失去焦点事件')
}
function demo11(){
alert('内容改变事件')
}
function demo12(){
alert('页面完成加载')
}
</script>
</head>
<body onload="demo12()">
<input type="button" value="单机操作" onclick="demo1()"><br />
<input type="button" value="双击操作" ondblclick="demo2()"><br />
<div style="width:50px; height:50px; background-color:blue;" onmouseover="demo3()" onmousedown='demo4()' onmouseout="demo5()" > </div>
<div style="width:50px; height:50px; background-color:green;" onmousemove="demo6()"> </div>
<input type="text" name="" id="" onkeyup="demo7()"><br />
<!-- <input type="text" onkeydown="demo8()" onfocus="demo9()" onblur="demo10()"><br /> -->
<input type="text" value="123" onchange="demo11()"><br />
</body>
</html>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
