1、引入JavaScriprt
alert:弹窗
1、内部标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--script标签
<script>
alert("hell word!");
</script>
-->
</head>
<body>
</body>
</html>
2、外部引入
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- 外部引入-->
<script src="Demo02.js"></script>
</head>
<body>
</body>
</html>
外部js文件
alert("hell word!");
二、基本语法
<!--严格区分大小写-->
<script>
// 1 定义变量 变量类型 变量名=变量值;
var score=1;
// 2 条件控制(可以嵌套)
if (score>60 && score<70){
alert("及格");
}else if(score>70 && score<80){
alert("正常")
}else {
alert("other")
}
/*
console.log(score) 在浏览器的控制台打印当前变量值
*/
</script>
三、数据类型
数值、文本、圆形、音频、视频
1、number
js不区分小数整数,Number
整数、浮点数、科学计算法、负数、NAN(not & number)、Infinity(表示无限大)
2、字符串
‘abc’ “abc”
3、布尔值
true false
4、逻辑运算
&& 两个都为正,结果为真
|| 或
!取反
5、比较运算符
== 等于(类型不一样,值一样,也会判断为true)
=== 绝对等于(类型一样,值一样,结果为true)
须知:
NaN===NaN,这个与所有的数值都不相等
尽量避免浮点数进行计算,存在精度丢失
null和undefined
null 空
undefined 未定义
6、数组
<script>
var person = {
name:"jjl",
age:3,
tags:['js','java','web','...']
}
</script>
输出
person.age
3
person.name
‘jjl’
person.tags[2]
‘web’
7、严格检查模式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--
'use strict' 严格检查模式,预防Javascript的随意性导致产生的问题
必须写在JavaScript的第一行
局部变量建议都是用let去定义
-->
<script>
'use strict';
//全局变量
i = 1;
//局部变量
let i=1
</script>
</head>
<body>
</body>
</html>
四、数据类型详细
1、字符串
- 正常字符串使用单引号或者双引号包裹
- 注意转义字符 \
- \’
- \n
- \u4e2d \u#### Unicode字符
- \x41 Ascll字符
- 多行字符串
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
"use strict";
console.log('a')
var msg=
`hello
world
你好ya
你好`
alert(msg)
</script>
</head>
<body>
</body>
</html>
- 模块字符串(字符串拼接)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
"use strict";
let name='jjl'
let age=3
//字符串拼接
let my=`"你好呀"${name}${age}`
</script>
</head>
<body>
</body>
</html>
输出
字符串长度
字符串是不可变的
大小写转换
大写
小写
获取字符串里面指定字符的下标
截取字符(包括前面不包括后面)
2、数组
Array可以包含任意的数据类型
长度
console.log(arr.length)
修改数组元素
修改数组长度
如果长度变小了,元素就会丢失
indexOf
通过元素获取元素下标
arr.indexOf(2)
1
slice() 截取Array的一部分,返回一个新的数组
截取从第三个开始到最后的元素
arr.slice(3)
(7) [4, 5, 6, empty × 4]
截取从第四个开始到最后的元素
arr.slice(4)
(6) [5, 6, empty × 4]
push,pop 尾部
push:在尾部增加元素
pop:弹出尾部的一个元素
unshift(),shift() 头部
unshift:在头部追加元素
shift:删除头部的一个元素
排序
元素反转reverse()
数组拼接
注意:concat数组拼接,并没有修改原数组,只是返回了一个新的数组
连接符join
打印拼接数组,使用特定的字符串连接
多维数组
五、对象
若干个键值对
var 对象名={
属性名:属性值,
属性名:属性值,
属性名:属性值
}
//定义了一个含有四个属性的person对象
var person={
name:"jjl",
age:10,
email:"123@qq.com",
score:0
}
1、对象赋值
person.name=“lx”
2、使用一个不存在的对象属性,不会报错!
3、动态删减属性,通过delete删除对象的属性
delete person.name
4、动态添加
person.haha=“haha”
5、判断属性值是否在这个对象中 xxx in xxx
‘age’ in person
6、判断一个属性是否是这个对象自身拥有的hasOwnProperty()
person.hasOwnProperty(‘toString’)
false
六、流程控制
if判断
if (condition)
{
当条件为 true 时执行的代码
}
else
{
当条件不为 true 时执行的代码
}
if (condition1)
{
当条件 1 为 true 时执行的代码
}
else if (condition2)
{
当条件 2 为 true 时执行的代码
}
else
{
当条件 1 和 条件 2 都不为 true 时执行的代码
}
//实例
//如果时间小于 10:00,则生成问候 "Good morning",如果时间大于 10:00 小于 20:00,则生成问候 "Good day",否则生成问候 "Good evening":
if (time<10)
{
document.write("<b>早上好</b>");
}
else if (time>=10 && time<20)
{
document.write("<b>今天好</b>");
}
else
{
document.write("<b>晚上好!</b>");
}
2、while循环,避免死循环
while (i<5)
{
x=x + "The number is " + i + “
”;
i++;
}
do/while 循环
do/while 循环是 while 循环的变体。该循环会在检查条件是否为真之前执行一次代码块,然后如果条件为真的话,就会重复这个循环。
语法
do
{
需要执行的代码
}
while (条件);
3、for循环
for (语句 1; 语句 2; 语句 3)
{
被执行的代码块
}
for (var i=0; i<5; i++)
{
x=x + "该数字为 " + i + "<br>";
}
//遍历数组元素
var age = [12,3,4,35,1234]
for(var num in age){
console.log(age[num])
}
forEcah函数循环,遍历数组
var age = [12,3,4,35,1234]
age.forEach(function (value){
console.log(value)
})
七、map、set
Map:
<script>
"use strict";
//ES6新功能
//学生的成绩,学生的名字
var map=new Map([['tom',100],['jack',90],['haha',80]])
var name =map.get('tom');//通过key获得value
console.log(name)
map.set('adime',120);//增加键值对
</script>
输出:
Set:无序不重复的集合
var set =new Set([3,1,1,1,1]);//set可以去重
set.add(4);//添加4
set.delete(3);//删除3
set.has(3);//是否包含某个元素
输出:
set
Set(2) {1, 4}
八、iterator
使用for of打印循环具体的值,for in 是打印元素下标
<script>
"use strict";
var arr=[2,3,4,6,342,124]
for (var x of arr){
console.log(x)
}
</script>
//遍历map
var map = new Map([['tom',90],['jack',70],['jjl',79]]);
for (let x of map){
console.log(x)
}
九、函数
1、定义函数
绝对值函数
定义方式一:
function abs(x){
if(x>=0){
return x;
}else{
return -x;
}
}
一旦执行return则代表方法结束
定义方式二:
var abs = function (x){
if(x>=0){
return x;
}else{
return -x;
}
}
2、调用函数
abs(10)
可以传任意个参数,也可以不传参数,都不会报错
所以需要手动抛出异常
var aba = function (x){
//手动定义异常
if(typeof x!=='number'){
throw 'Not a number'
}
if(x>=0){
return x;
}else{
return -x;
}
}
arguments:传递进来的所有的参数,是一个数组
var aba = function (x){
console.log("x=>"+x);
for (var i=0;i<arguments.length;i++){
console.log(arguments[i]);
}
if(x>=0){
return x;
}else{
return -x;
}
}
问题:arguments包含所有的参数,我们需要使用多余参数来进行附加操作,需要排除已有参数~
rest :ES6引入的新特性,获取除了已经定义的参数之外的所有参数
var aaa = function (a,b,...rest){
console.log(a);
console.log(b);
console.log(rest)
}
输出:
注意:rest参数只能写在最后面,必须用…标识
十、变量的作用域
在JavaScript中,var定义变量实际是有作用域的。
假设在函数体中声明,则在函数体外不可以使用~(如果想实现调用函数内的变量,则需要学习“闭包”)
<script>
function zyy(){
var x=1;
x=x+1;
}
x=x+2;//Uncaught ReferenceError: x is not defined
</script>
如果两个函数使用了相同的函数名,只要在函数内部,就不冲突
<script>
function zyy(){
var x=1;
//内部函数可以访问外部函数的成员,反之不行。
function zyy1(){
var y=x+1;
}
}
</script>
假设内部函数的变量和外部函数的变量重名,如果函数查找变量从自身函数开始~,有“内”向“外”查找,假设外部存在这个同名的函数变量,则内部函数会屏蔽外部函数的变量。
提升作用域
function zyy(){
var x="x"+y;
console.log(x);
var y='y';
}
结果:Xundefined
说明,js执行引擎,自动提升了y的声明,但是不会提升变量y的赋值;
注意:所有的变量定义都放在函数的头部,不要乱放,便于代码维护。
全局函数
var x=1;
function f(){
console.log(x);
}
function s(){
console.log(x);
}
全局对象window
<script>
var x = "xxxx";
//下面两行相等
alert(x)
alert(window.x);//默认全局对象,都会绑定在windonw对象下
</script>
JavaScript实际上只有一个全局作用域,任何变量(函数也可以视为变量)假设没有在函数作用范围内找到,就会向外查找,如果在全局作用域都没有找到,报错RefrenceError
规范
由于我们所有的全局变量都会绑定到我们的window上,如果不同的js文件,使用了相同的全局变量,冲突->如何减少冲突?
<script>
//唯一全局变量
var jjl={};
//定义全局变量
jjl.name='jiangfan';
//定义方法
jjl.fangfa=function (a,b){
return a+b;
}
</script>
把自己的代码全部放在自己定义的唯一空间名中,降低全局命名冲突
局部作用域 let
<script>
for (var i = 0; i < 100; i++) {
console.log(i)
}
console.log(i+1);//这个i出了for循环还是可以用
for (let i = 0; i < 100; i++) {
console.log(i)//这个i只作用于当前循环体
}
</script>
常量const
在es6之前,只要用全部大写定义的变量就是常量
在ES6引入常量关键字 const
const PI = '3.14';
console.log(PI)
PI='132';//此处会报错,为只读变量(Uncaught TypeError: Assignment to constant variable.)
十一、方法
定义方法
方法就是把函数放在对象的里面,对象只有两个东西:属性和方法
写法一:
<script>
var jjl={
name:'jjl',
bitrh:1998,
age:function (){
//今年-出生的年
var now=new Date().getFullYear();
return now-this.bitrh;
}
}
</script>
调用属性
jjl.name
//调用方法,一定要()
jjl.age()
写法二:
<script>
function getage(){
var now=new Date().getFullYear();
return now-this.bitrh;
}
var jjl={
name:'jjl',
bitrh:2000,
age:getage
}
</script>
this是无法指向的,是默认指向调用它的那个对象
apply
在js中可以控制this的指向
<script>
function getage(){
var now=new Date().getFullYear();
return now-this.bitrh;
}
var jjl={
name:'jjl',
bitrh:2000,
age:getage
}
getage.apply(jjl,[]);//this,指向了jjl这个对象,参数为空,因为jjl不需要传参
</script>
十二、内部对象
标准对象
1、Date
typeof 123
'number'
typeof '123'
'string'
typeof true
'boolean'
typeof NaN
'number'
typeof []
'object'
typeof {}
'object'
typeof Math.abs
'function'
typeof undefined
'undefined'
<script>
var now = new Date();//'Fri Jun 24 2022 10:58:41 GMT+0800 (中国标准时间)'
now.getFullYear();//年
now.getMonth();//月0-11 代表月
now.getDate();//日
now.getDay();//星期几
now.getHours();//时
now.getMinutes();//分
now.getSeconds();//秒
now.getTime();//时间戳
console.log(new Date().toLocaleString())//2022/6/24 11:04:34
</script>
2、JSON
- JSON(JavaScript Object Notation, JS对象简谱)是一种轻量级的数据交换格式
- 简洁和清晰的层次结构使得 JSON 成为理想的数据交换语言。 易于人阅读和编写,同时也易于机器解析和生成,并有效地提升网络传输效率。
在JavaScript一切皆为对象,renhjs支持的类型都可以用json来表示
格式:
- 对象有用{}
- 数组都用[]
- 所有的键值对都是用key:value
<script>
var user={
name:"jjl",
age:3,
sex:'男'
}
//对象转化为json字符串
var jsonuser=JSON.stringify(user)
//json 字符串转化为对象,参数为json字符串
var obj=JSON.parse(jsonuser)
</script>
输出:
十三、面向对象编程
1、什么是面向对象编程
JavaScript的区别
- 类:模板
- 对象:具体的实例
原型:
<script>
var user={
name:'jjl',
age:3,
run:function (){
console.log(this.name+"run.....")
}
};
var xiaoming={
name:'xiaoming'
}
xiaoming._proto_=user;//将xiaoming的原型指向了user,这样xiaoming就继承了user的所有属性
</script>
class 继承
<script>
class Student{
constructor(name) {
this.name=name;
}
hello(){
alert('hello')
}
}
</script>
<script>
class Student{
constructor(name) {
this.name=name;
}
hello(){
alert('hello')
}
}
class xiaoStudent extends Student{
constructor(name,grade) {
super(name);
this.grade=grade;
}
myGrade(){
alert('woshixiaoxvesheng')
}
}
var xiaoming=new Student("xiaoming")
var xiaohong=new xiaoStudent('xiaohong',1);
</script>
十四、操作BOM对象
JavaScript和浏览器的关系?
JavaScript诞生就是为了能够在浏览器中运行!
BOM:浏览器对象模型
1、window对象 浏览器窗口
window.innerHeight
979
window.innerWidth
1365
window.outerHeight
1050
window.outerWidth
1920
获取屏幕的高宽
2、navigator
Navigator,封装了浏览器信息
window.navigator.appVersion
'5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/100.0.4896.60 Safari/537.36'
window.navigator.appName
'Netscape'
window.navigator.userAgent
'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/100.0.4896.60 Safari/537.36'
window.navigator.platform
'Win32'
navigator内容容易被人为修改
3、screen 获取屏幕宽高
screen.width
1920
screen.height
1080
4、location
location 代表当前页面的URL信息
host: "www.baidu.com"
href: "https://www.baidu.com/"
protocol: "https:"
reload: ƒ reload() //刷新网页
// 设置新的地址
location.assign('https://www.bilibili.com/') //这样每当访问百度时就会跳转到bilibili
5、document
document 代表当前的页面,HTML DOM文档树
document.title
'百度一下,你就知道'
document.title="javascript"
'javascript'
获取具体的文档树节点
<dl id="app">
<dt>java</dt>
<dt>javase</dt>
<dt>javaee</dt>
</dl>
<script>
var dl=document.getElementById('app')
</script>
获取cookie
document.cookie
6、history
代表浏览器的历史记录
history.back()//前仅
history.forward()//后退
十五、操作DOM对象
DOM:文档对象模型
核心
浏览器网页就是一个DOM树结构!
- 更新:更新DOM节点
- 遍历dom节点:得到dom节点
- 删除:删除一个dom节点
- 添加:添加一个新的节点
要操作一个dom节点,就必须要先获得这个dom节点
1、获得dom节点
<div id="father">
<h1>标题一</h1>
<p id="p1">p1</p>
<p class="p2">p2</p>
</div>
<script>
var h1 = document.getElementsByTagName('h1');
var p1 = document.getElementById('p1');
var father = document.getElementById('father');
var p2 = document.getElementsByClassName('p2');
var childrens = father.children;//获取父节点下的所有子节点
father.firstChild;//获取第一个节点
father.lastChild;//获取最后一个节点
</script>
2、更新节点
<script>
var id1=document.getElementById('id1');
//操作文本
id1.innerText='abc';//添加文本
id1.innerHTML='<strong>abc</strong>';//操作html
//操作css
id1.style.color='red';//修改文本颜色
id1.style.fontSize='50px';//修改文本字体大小
id1.style.padding='10px'//修改行间距
</script>
3、删除节点
删除节点的步骤,先获取父节点,在通过父节点删除子节点
<div id="father">
<h1>标题一</h1>
<p id="p1">p1</p>
<p class="p2">p2</p>
</div>
4、插入节点
追加前
<p id="js">JavaScript</p>
<div id="list">
<p id="se">javase</p>
<p id="ee">javaee</p>
<p id="me">javame</p>
</div>
<script>
var js= document.getElementById('js')
var list= document.getElementById('list')
</script>
追加后
十六、操作表单(验证)
1、获得表单信息
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<from>
<p>
<span>用户名:</span>
<input type="text" name="uesrname" id="user">
</p>
<span>性 别:</span>
<input type="radio" name="sex" id="boy" value="man">男
<input type="radio" name="sex" id="girl" value="women">女
</from>
<script>
var input_text = document.getElementById('user');
var boy_radio = document.getElementById('boy');
var girl_radio = document.getElementById('girl');
//得到输入框的值
input_text.value;
//修改输入框的值
input_text.value='123';
//对于单选框,多选框等固定的值,boy_radio.value只能获得当前的值
boy_radio.checked;//查看返回的结果是否为‘true’,如果为‘true’则就是被选中。
</script>
</body>
</html>
2、提交表单,并对密码框进行md5加密
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--md5工具类-->
<script src="https://cdn.bootcss.com/blueimp-md5/2.10.0/js/md5.min.js"></script>
</head>
<body>
<!--表单提交事件
οnsubmit=绑定一个提交检查的函数,获取true,false
将这个结果返回给表单-->
<form action="https://www.baidu.com" method="post" onsubmit="return cheak()">
<p>
<span>用户名:</span>
<input type="text" name="uesrname" id="username">
</p>
<p>
<span>密 码:</span>
<input type="password" name="password" id="input-password">
</p>
<input type="hidden" id="md5-password" name="pessword">
<!-- 绑定事件:οnclick="cheak()"-->
<button type="submit" >提交</button>
</form>
<script>
function cheak(){
var uname = document.getElementById('username');
var upass = document.getElementById('input-password');
var md5pwd = document.getElementById('md5-password');
//MD5算法对密码进行加密
md5pwd.value=md5(upass.value);
return true;
}
</script>
</body>
</html>
十七、JQuery
jQuery库,里面存在大量的JavaScript函数
1、获取jQuery
- 通过在线的cdn jquery引入
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- 引入在线的cdn jQuery-->
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
</head>
<body>
</body>
</html>
- 下载官网jQuery的js文件
https://jquery.com/download/
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- 导入本地jQuery-->
<script src="lib/jquery-3.6.0.js"></script>
</head>
<body>
</body>
</html>
2、初始jQuery
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- 导入本地jQuery-->
<script src="lib/jquery-3.6.0.js"></script>
</head>
<body>
<!--
公式:$(selector).action()
-->
<a href="" id="test-jquery">点我</a>
<script>
//选择器就是css选择器
$('#test-jquery').click(function (){
alert('hello jquery');
})
</script>
</body>
</html>
3、选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
//原生js选择器少,麻烦
// 标签
document.getElementsByTagName();
//id
document.getElementById();
//类
document.getElementsByClassName();
//jQuery 选择器 css选择器它都能用
$('p').click();//标签选择器
$('#id').click();//id选择器
$('.class1').click();//类选择器
</script>
</body>
</html>
文档工具站:https://jquery.cuishifeng.cn/
4、事件
鼠标事件,键盘事件,其他事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="lib/jquery-3.6.0.js"></script>
<style>
#divMove{
width: 500px;
height: 500px;
border: 1px solid silver;
}
</style>
</head>
<body>
<!--获取鼠标的当前坐标-->
mouse : <span id="mouseMove"></span>
<div id="divMove">
<!--在这里移动鼠标-->
</div>
<script>
<!--当网页加载完之后,响应事件-->
// $(document).ready(function () {
// })
//将上面两行简写成
$(function () {
$('#divMove').mousemove(function (e) {
$('#mouseMove').text('x:'+e.pageX + 'y:'+e.pageY)
})
});
</script>
</body>
</html>
5、操作dom
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="lib/jquery-3.6.0.js"></script>
</head>
<body>
<ul id="test-ul">
<li class="js">JavaScript</li>
<li name="python">python</li>
</ul>
<script>
$('#test-ul li[name=python]').text();
$('#test-ul').html();
</script>
</body>
</html>
$('#test-ul li[name=python]').text(); //获取值
$('#test-ul li[name=python]').text('py');//修改值
$('#test-ul').html();//获取值
$('#test-ul').html('<strong>123</strong>');//修改值
//css操作
$('#test-ul li[name=python]').css("color","red");
//元素的显示和隐藏
$('#test-ul li[name=python]').hide();//隐藏
$('#test-ul li[name=python]').show();//显示