这篇博客详细介绍了JavaScript的基础知识，包括JavaScript的作用、引用方式、基本用法、核心语法，深入讲解了变量、输入输出、数据类型、运算符、选择结构等内容，并探讨了DOM操作、事件处理和BOM操作。同时，还涵盖了数据校验，特别是正则表达式在数据验证中的应用。是初学者掌握JavaScript的宝贵资源。
如需原文件，文章下方百度网盘链接自取
JavaScript课程笔记
一、JavaScript简介
1. 什么是JavaScript？
JavaScript简称JS，由网景公司开发的客户端脚本语言，不需要编译，可以直接执行
补充：
机器语言(0,1代码)—>汇编语言(助记符)—>高级语言(①解释，②编译)
高级语言—>编译.obj目标程序文件—>连接link.exe可执行性文件
解释
WEB前端三层：
- 结构层HTML，定义页面的结构
- 样式层CSS，定义页面的样式
- 行为层JavaScript，用来实现交互，提升用户体验
2. JavaScript作用
- 在客户端动态的操作页面
- 在客户端可以做数据的校验
- 在客户端发送异步要求
二、引用方式
1. 内联方式
在页面中使用script标签，在script标签的标签体重编写JS代码
<script>
alert("hello JavaScript");
</script>
2. 行内方式
在普通标签中编写JS代码，一般需要结合事件属性，如onclick、onmouseover等
对象：客观存在的，并且可以相互区别的事物---->如：各种标签
eg：对象：
- 外观—>宽度、高度、背景色—>CSS
- 事件—>
多态性同一个事件发生的对象不同，所引发的反应也不相同
<a href="" onclick="alert('我的魔法开始了！')">我会神奇的魔法，带你周游世界</a>
<!--使用超链接的href属性执行JS脚本时，必须添加javascript前缀-->
<a href="javascript:alert('我一定会回来的!')">我又出来了</a>
3. 外部方式
使用单独的.js文件定义，然后在页面中使用script标签引入外部脚本文件
<script type="text/javascript" src="/js/hello.js"></script>
注意：如果某个script标签用于引入外部的.js文件，则该script标签的标签体中不能再写js代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--1.内联方式-->
<script>
// alert("hello JavaScript");
</script>
<!--3.引用外部的.js脚本文件-->
<script type="text/javascript" src="js/hello.js"></script>
</head>
<body>
第一个JavaScript程序
<hr>
<!--2. 行内方式-->
<input type="button" value="点我" onclick="alert('我被点了')">
<!--<div onmouseover="alert('你起开')">把鼠标移上来好吗，宝贝！</div>-->
<a href="" onclick="alert('我的魔法开始了！')">我会神奇的魔法，带你周游世界</a>
<!--使用超链接的href属性执行JS脚本时，必须添加javascript前缀-->
<a href="javascript:alert('我一定会回来的!')">我又出来了</a>
</body>
</html>
三、基本用法
1. 变量
js是一门弱类型的语言，声明变量时使用var关键字，不需要指定变量的类型
语法：var 变量名=常量或表达式;
注意：变量名的命名规则
- 由字母，数字，汉字，下划线组成
- 由字母，汉字，下划线开头
- 不能和保留字同名
- 大小写敏感
回忆：
数据类型：常量和变量
常量：具体的量，不变的量—>常数项
变量：变化的量，存放常量的量—>容器
int a,b,c;//变量在使用前必须强制进行定义获声明
a = 10;//讲整形常量10放到整形变量a中
b = 20;
c = a + b;//将a+b的和去赋值个整形变量c
print("c-%d",c);
在ECMAScript 6 规范中新增let关键字，也用于声明变量
使用let声明的变量支持模块级作用域，而是用var声明的变量不支持模块级作用域
住：在IDEA中配置EX版本settings—>Language&FrameWorks—>JavaScropt—> JavaScropt Version
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
//变量
var name;
name = '张无忌';
name = '123456';
// alert(name);
var 姓名;
姓名="赵敏"
// alert(姓名) //姓名是变量名
var age=18;
var a=5,b=2,c=7;
var age=18;
var Age=19;
// alert(Age);
sex = "male"//不建议使用
// alert(sex);
{
// var x = 6;
// alert(x);
let y = 10;
// alert(y);
}
alert(y);
</script>
</head>
<body>
</body>
</html>
2. 输入和输出
输出：
- alert()弹出警告框
- console.log()输出到浏览器的控制台
- document.write()输出到页面
输入：
-
prompt()弹出输入框，获取用户输入的数据
使用
typeof 变量名判断变量的类型使用
Number(变量名)将字符串转换为数值
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
//输出
//alert('你好啊');
//console.log('欢迎光临');
//document.write('你在干嘛呢');
//输入
// var name=prompt('你叫什么名字');
// console.log(name);
// var age=prompt('你几岁啦');
// console.log(age,typeof age);
// console.log(age+2);
// age = Number(age);
// console.log(age+2);
//转义字符
console.log('he\'llo\n boy');
console.log('welcome to\t JS');
//单行注释
/*
多行注释
*/
</script>
</head>
<body>
</body>
</html>
3. 转义字符
常用转义字符：
\n换行\t制表位，缩进\"双引号\'单引号\a响铃，警告
4. 注释
单行注释：//
多行注释：/* */
5. 编码规范
代码区分大小写
每条语句以分号结尾
代码缩进
四、核心语法
1. 数据类型
常量：具体的值 eg:‘abc’ ‘abc’ 3.14 100
变量：存放常量的量—>容器
基本数据类型：
- string 字符串
- number 数值(NaN表示非数字NOT a Number，其自身是number类型，表示数值是不正常状态)
- boolean 布尔
- null 空类型
- undefined 未定义类型
数据类型转换：
-
转换为number
使用Numner(); ParsInt(); parseFloat();
-
转换为string
拼接空字符串
-
转换为布尔
使用Boolean()；
注意：0、空字符串、undefined、null 、NaN会被转换为逻辑假false，其他类型在转化为布尔时，转换为true
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
/*
数据类型
*/
// var name = 'tom';
// var age = 18;
// var height = 180.5;
//
// var flag = true;
//
// var hobby = null;
//
// var date = new Date();
//
// var arr = new Array();
//
// var sex;//只定义了变量，但是未赋值；
// console.log(typeof name);
// console.log(typeof age);
// console.log(typeof height);
// console.log('hello' -5);//显示NaN
// console.log(typeof flag);
// console.log(typeof hobby);//如果数据是null、date、array、等返回值是object
// console.log(typeof date);
// console.log(typeof arr);
// console.log(typeof sex);//返回undefined
/*
类型转换
*/
//1.转换数值
// var a = '12';
// console.log(a,typeof a);
//方式1：使用Number();
//a = Number(a);//=号左边的A代表的是容器本身 右边的A代表容器中的值
// a = Number('12.5');
// a = Number('12abc');//不同类型
// a = Number('ab12');
// console.log(a,typeof a);
//方式2：使用ParsInt();
// a = parseInt(a);
// a = parseInt('12.5');
// a = parseInt('12abc');//按照字符顺序解析
// a = parseInt('abc12');//因为开头不是数字
//方式3：使用parseFloat();
// a = parseFloat(a);
// a = parseFloat('12.5');
// a = parseFloat('12abc');
// a = parseFloat('abc12');//因为开头不是数字
//将布尔值转换为数值
// a = Number(true);//JS中true用1或者非0表示
// a = Number(false);//false用0表示
// console.log(a,typeof a,typeof true);
//将数值转换为字符串
// var a = 12;
// console.log(a,typeof a);
// a = a + '';// 后接一个空字符串 左边a是变量本身 右边a是值
// console.log(a,typeof a);
//将数值、字符串转换为布尔
// var a = Boolean(0);
// var a = Boolean('');
// var a = Boolean(null);
// var a = Boolean(undefined);
// var a = Boolean(NaN);
// var a = Boolean(4);
// var a = Boolean('abc');
// console.log(a,typeof a);
var name='tom';
if(name)
{
console.log(name);
}
</script>
</head>
<body>
</body>
</html>
2. 运算符
算数运算符：+、-、*、/、%、**、++、–
比较运算符：>、>=、<、<=、、=、!=
赋值运算符：=、+=、.=、*=、/=、%=、**=、
逻辑运算符：&&并且、||或、|与
条件运算符：条件？表达式1:表达式2
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
// 算数运算符：+、-、*、/、%、**、++、--
// var a = 5;
// var b = 3;
// var c = '2';//var c = ‘aaa’ 不行
// var d = true;
// console.log(a+b);
// console.log(a-b);
// console.log(a*b);
// console.log(a/b);
// console.log(a%b);
// console.log(a**b);//a的b次方
// console.log(a-c);//会将数字字符c转换为数值，再进行算术运算
// var a = 1;
// var b = 2;
// console.log(a++);//表达式会返回变化前a的值 表达式执行完之后a自加 a = a + 1;
// console.log(a);
// console.log(++a);//表达式会返回变化后a的值 表达式执行完之后a也是变化后的值
// console.log(a);
// console.log(b--);//先引用，后自加减
// console.log(--b);//先加减，后引用
// 比较运算符：>、>=、<、<=、==、= = =、!=
// var a = 5;
// var b = '5';
// var d = true;//js中true表示为1，false表示为0
// console.log(a>b);
// console.log(a<b);
// console.log(a>=b);
// console.log(a<=b);
// console.log(a==b);//判断内容是否相等
// console.log(a===b);//：全等于，既要判断内容，也要判断类型
// console.log(a+d);
// console.log(a-b);
// console.log(a+b);//将数值a转换为字符串，然后和b进行字符串的首尾相联
// 赋值运算符：=、+=、-=、*=、/=、%=、**=、
// var a = 2;
// console.log(a);
// a = 9;//将整数9赋值给a；
// console.log(a);
// var a = 1;
// a += 2;//a = a + 2
// a**=2;//a = a ** 2
// console.log(a);
// 逻辑运算符：&&并且、||或、|与
var x = true;
var y = false;
// console.log(x&&y);//两边为真就是真，一边为假就是假
// console.log(x||y);//一边为真就是真，两边为假就是假
// console.log(!x);
//逻辑运算短路问题
// var a = 2;
// var b = 5;
// console.log(a && b);
// console.log(a || b);
//条件运算符：条件？表达式1：表达式2
var a = 3;
var b = 2;
console.log(a>b?a+b:a-b);
</script>
</body>
</html>
使用Math对象进行数学运算，用法：Math.方法名(参数)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
//使用Math对象进行数学运算，用法：Math.方法名(参数)
//1.求绝对值
console.log(Math.abs(-5));
//2.计算次方
console.log(Math.pow(2,3));
//3.四舍五入
console.log(Math.round(123.456));
//4.向上取整，向下取整
console.log(Math.ceil(3,5));//返回大于等于3.5的最小整数
console.log(Math.floor(3,4));//返回小于等于3.5的最大整数
//5.生成一个[0,0,1)之间的随机小数
console.log(Math.random());
//6.最大值，最小值
console.log(Math.max(23,1,54,2,-6));
console.log(Math.min(23,1,54,2,-6));
//7.圆周率
console.log(Math.PI);
</script>
</head>
<body>
</body>
</html>
3. 选择结构
if…else、swich
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
var age = 25;
if(age>=60)
console.log('老年');
else if(age>=30)
console.log('中年');
else if(age>=16)
console.log('少年');
else
console.log('童年');
var day = '星期五';
switch(day)
{
case'星期一':
console.log('吃包子');
break;
case'星期二':
console.log('吃油条');
break;
case'星期三':
console.log('吃面条');
break;
case'星期四':
console.log('吃面条');
break;
case'星期五':
console.log('吃油饼');
break;
default:
console.log('不吃了');
break;
}
</script>
</head>
<body>
</body>
</html>
4. 循环结构
white、do…white、for、for…in
break、continue
break：退出整个循环
continue：结束本次循环。返回到条件判断数继续进行下一次是否执行循环的条件判断
var str = 'welcome to js'
for(var s in str)
console.log(str[s]);
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
// var i = 1;
// var sum = 0;
// var cnt = 0;
// while(i<=100)
// {
// sum += i;
// i++;
// }
// console.log(sum);
// var i = 1;
// var sum = 0;
// for(i=1;i<=100;i++)
// {
// if(i%7==0)
// sum++;
// }
// console.log(sum);
var i = 1;
var sum = 0;
var cnt = 0;
do{
if(i%7==0){
sum+=i;
cnt++;
}
i++;
}while(i<=100)
console.log(sum,cnt);
var sum = 0;
var cnt = 0;
for(var i=1;i<=100;i++)
if(i%7==0){
sum += i;
cnt++;
}
console.log(sum,cnt);
var str = 'welcome to js';
for(var s in str)
console.log(str[s]);
</script>
</head>
<body>
</body>
</html>
5. 数组
5.1 定义方式
语法：
var arr = new Array();
var arr = new Arrar(值1，值2，.....);
var arr = [值1，值2，.....];
注意：
- 数组长度会自动扩展
- 数组中元素的默认值为undefined
- 使用数字的lenght属性可以获得数字的长度(数组中有多少个元素)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
// var arr = new Array();
// arr[0]=12;
// arr[1]=9;
// console.log(arr.length);
// console.log(arr[0]);
// console.log(arr[1]);
// console.log([arr.length]);
// var arr = new Array('tom','jack','alice');
// console.log(arr[0]);
// console.log(arr[arr.length-1]);
// console.log(arr);
// var arr = new Array('tom','jack','alice','mike');
// console.log(arr[0]);
// console.log(arr.length-1);
// console.log(arr);
// var cnt = 0;
// var nums = new Array();
// for(var i=1;i<=100;i++){
// if(i%3==0){
// nums[cnt]=i;
// cnt++;
// }
// }
// console.log (nums);
var nums = new Array();
for(var i=1;i<=100;i++)
if(i%3==0)
nums[nums.length]=i;
console.log(nums);
</script>
</head>
<body>
</body>
</html>
五、复合数据
1.string
1.1 定义方式
语法：
var str = 'welcome';//基本数据类型string
var str = new String('welcome')//引用数据类型String
使用length属性获取字符串的长度
1.2 常用方法
| 方法 | 描述 |
|---|---|
| charAt() | 返回在指定索引位置的字符，也可以使用[索引]的方式 |
| indexOf() | 返回某个指定的字符串在原字符串中首次出现的位置 |
| lastindexOf() | 返回某个指定的字符串在原字符串中后出现的位置 |
| toLowerCase() | 将字符串转换为小写字母 |
| toUpperCase() | 将字符串转换为大写字母 |
| subString() | 提取字符串两个指定的索引号之间的字符 |
| replace() | 将指定的字符串替换为新的字符串 |
| split() | 将字符串分隔为字符串数组 |
| trim() | 去除字符串前后两端的空格 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
var str = ' hello world! welcome yo JS! ';
// var str = new String('hello world');
// console.log(typeof str);
// console.log(str);
// console.log(str.length);
console.log(str.charAt(0),str.charAt(3),str[0],str[str.length-1]);
console.log(str.indexOf('o'));
console.log(str.lastIndexOf('o'));
console.log(str.toLowerCase());
console.log(str.toUpperCase());
console.log(str.substring(1,4));//左闭右开 包含左边 不包含右边
console.log(str.substring(
最低0.47元/天 解锁文章
229
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
