1.了解js
1.在一个网页里面
html表示结构
css表示样式
js表示行为
2.js的三大核心
ECMAScript,js的语法标准
BOM,一套操作浏览器的方法
DOM ,一套操作文档流的方法
3.js的本质
1.就是通过js的语法,让浏览器发生变换
2.让文档发生变换
2.js的书写(三种方式)
1.行内式(强烈不推荐)
<a href="javascript:console.log('行内式')">点我一下</a>
<a onclick="javascript:console.log('内嵌式'); " >点我一下</a>
2.内嵌式(不推荐)(<hind>末尾,<body>末尾)
<javaScript>
console.log('内嵌式')
<javaScript>
3.外链式(推荐)(写在内部的代码就没用了)
<script src="demo01.js"></script>
3.数据类型之间的转换
1. js强制转换字符串String的方法
方法一,调用方法( toString() )
该方法不适用null和undefined(推荐使用方法2)
var a = 123;
a = a.toString();
console.log( a );
console.log( typeof a );
方法二,调用函数->String( )
null和undefined均试用,所有数据类型都可以用
var a = null;
a = String(a);
console.log( a );
console.log( typeof a );
方法三,字符串+数字
var a = 123;
a = '123'+a;
console.log( a );
console.log( typeof a );
2. js强制转换Number的方法
方法一、使用Number函数
非数字 | NaN |
空格、全空 | 0 |
true | 1 |
false | 0 |
null | 0 |
undefined | NaN |
方法二、
parseInt()把一个字符串转换为一个整数(有效整数提取出来)
并且还可以指定数值的进制
parseFloat()把一个字符串转换为一个浮点数
//获得有效的整数
var a = '123px';
a = parseInt(a);
console.log( a );
console.log( typeof a );
//8进制转换10进制
var a = 070;
a = parseInt(a,10);
console.log( a );
console.log( typeof a );
方法三、可以通过对字符串(-0, *1 , /1)将其转换为数字
3.js数据类型转换为Boolean
调用 Boolean()函数(除了0和nan、空串、null、undefined,其余的都是true)
可以将两个任意值,加两个 !! 改变为布尔值。
4. 其他数据类型的逻辑运算符
true&&true -----> 返回最后一个
true&&false -----> 返回false
总结:第一个值是true,直接返回第二个。
true||true------->第一个
false||true ------> 第二个
总结:第一个值是true,直接返回一个,第一个值为false,返回第二个值。
//true && true
var a = 1 && 3;
console.log(a);
//false && true
a = 0 && 2;
console.log(a);
//true || true
a = 1||0;
console.log(a);
//false || true
a = 0||2;
console.log(a);
5.运算符简写
a = a + 5; | 等于 | a += 5; |
a = a - 5; | 等于 | a -= 5; |
a = a * 5; | 等于 | a *= 5; |
a = a - 5; | 等于 | a /= 5; |
a = a % 5; | 等于 | a %= 5; |
6.使用js输出uniCode字编码
console.log("\u2620");
7.三元运算符
语法:
条件判断语句?语句一:语句二
(如果为true,则返回语句一、如果条件为false,则返回语句二)
var a = 12;
var b = 11 ;
a<b ? console.log("语句一") :console.log('语句二')
8.代码块(分组作用)
{
alert('你好');
console.log("大家好");
document.write('string')
}
9.For循环
for (let index = 0; index < 5; index++) {
if (index == 1) {
//break//停止循环
continue;//跳过当前循环
}
console.log(index);
}
数组的基本操作
123
函数的基本操作
//创建一个函数(第一种方法,赋值语句)
var fun = function (p1, p2) {
console.log('第一个函数创建成功');
console.log('参数1为' + p1);
console.log('参数2为' + p2);
}
//创建一个函数(第二种方法,声明语句)
function fun2(p1, p2) {
console.log('第二个函数创建成功');
var p = p1 + p2;
return p;
}
//传参调用函数
fun(1, 2);
//赋值
console.log(fun2(5,9));
//立即执行函数
(function (paams) {
console.log('立即执行函数');
})()
全局作用区域
var 和 function 会在整个网页打开之前,由windows提前创建。
(固 函数体也可以写在调用后)
函数作用区域
函数作用域可以访问到全局作用域
全局作用域不可以访问函数作用域
函数中找VRA会就近原则,逐级查找--->window ---->报错
对象的基本操作
//创建一个对象
var obj = {}
console.log(obj);
//给对象添加值
obj.name = '郭英杰'
console.log(obj.name);
//更改对象的值
obj.name = 'JieGuo'
console.log(obj.name);
//删除对象的某个属性
delete obj.name;
console.log(obj);
//检查对象里面是否有某个属性
var obj2 = {name:'YingjieGuo',age:18}
console.log('name' in obj2);
对象属性的名称一般调用 obj.name
特殊调用 obj['123']
对象的属性值可以为任意值
Date()对象的使用
获取当前时间
var a = new Date();
console.log(a);
设置指定的时间
var a = new Date('10/1/2025 12:00:20');
console.log(a);
获取号数(这个月的哪一天)
var a = new Date();
a = a.getDate(a)
console.log(a);
获取一周中的哪一天
var a = new Date();
a = a.getDay(a)
console.log(a);
获得月份
var a = new Date();
a = a.getMonth(a)
console.log(a);
//获取的月数从0开始,故此需要+1
console.log(a*1+1);
获取年份
var a = new Date();
a = a.getFullYear(a)
console.log(a);
获取小时 | getHours() |
获取分钟 | getMinutes() |
获取秒数 | getSeconds() |
获取毫秒 | getMilliseconds() |
获取时间戳 | getTime() |
获取时间戳 | date.Now() |
Mate()的使用
String()对象的使用方法
//字符串的本质,就是将单个元素放到数组里
var a = "王军燕"
console.log(a.length);
console.log(a[0]);
console.log(a[1]);
console.log(a[2]);
var b = a.charAt(2)
console.log(b);
语法:a.indexof()
作用:检索一个字符串中是否有该元素,并返回该元素的索引
注意:如果没有找到该元素、则返回-1
可以指定第二个参数,指定开始查找的位置
var a = "王军燕"
var b = a.indexOf("军")
console.log(b);
var a = "王军燕王军燕王军燕"
var b = a.indexOf("军",2)
console.log(b);
语法:a.lastIndexof()
作用:从后往前查找,检索一个字符串中是否有该元素,并返回该元素的索引
var a = "王军燕王军燕王军燕"
var b = a.lastIndexOf("军")
console.log(b);
语法:a.slice()
作用:根据索引截取字符串
var a = "123王军燕456"
var b = a.slice(3,6)
var c = a.slice(3,-3)
console.log(b);
console.log(c);
语法:a.subSting()
作用:根据索引截取字符串
注意:不能选取负值,会自动交换位置。(0,5)和(5,0)一样。
语法:a.substr()
作用:根据索引截取字符串(索引,长度)
参数:截取开始索引,截取开始之后的长度
var a = "123王军燕456"
var b = a.substr(3,3)
console.log(b);
方法:a.split()
作用:根据指定元素,将字符串进行拆分为若干个数组
(url中可用)
注意:如果传一个“空串”,则会把每个元素进行拆分。
var a = "123,456,789"
var b = a.split(",")
console.log(b[0]);
console.log(b[1]);
console.log(b[2]);
可以用正则表达式,来拆分字符串
//可以用正则表达式,来拆分字符串
var rec = '1a2b3c4d5e6f';
console.log(rec.split(/[a-z]/));
正则表达式
语法:var reg = /正则表达式/匹配模式
var reg = RegExp('正则表达式','匹配模式')
作用:用于验证表单,等字符串的格式
var reg = /a/i;
console.log(reg.test('abc'));
| 表示 或 ,即有a或b,都可以!
var reg = /a|b/i;
console.log(reg.test('bc'));
[] 表示 或 ,即有a或b,都可以!
//检查里面是否有大小写
var reg = /[a-z]/i;
console.log(reg.test('bc'));
[^ab] 表示除了 a b 剩下的都可以!