一个学习Java同学 的 JavaScript 笔记
1、什么是JavaScript?
1.1、概述
- JavaScript是一门流行的脚本语言
1.2、历史
ECMAScript可以理解为JavaScript的一个标准
最新版本是ES6，但大部分浏览器只支持ES5代码
这就导致，js开发环境和线上环境版本不一致。
1.3、ES6
ES6 = ECMAScript 这门标准的第 6 代版本（2015）。
- ECMAScript 是语言的标准
- 6 是版本号
ECMA：欧洲计算机制造商协会
具体内容：语法 + API
历史版本：ES1——>3、ES5——>6（ES4 被废弃了）
我们目前使用 JS 的大部分内容都是 ES3 的部分。
ES 与 JS 的关系：JavaScript(浏览器端) = ESMAScript(语法+API) + DOM + BOM
ES6 的兼容性：
- 主流浏览器的最新版本几乎都全部支持 ES6
- IE 老版本等不支持的浏览器，可以使用 Babel 转码
2、快速入门
2.1、引入JavaScript
1、内部标签
<script>
alert("hello world");
script>
2、外部引入
HelloJs.js
alert('hello world');
HelloJs.html
<script src="js/HelloJs.js">script>
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<script>
alert('hello word');
script>
<script src="js/HelloJs.js">script>
head>
<body>
body>
html>
2.2、基本语法
<script>
//1.定义变量
var num = 1;
alert(num);
//2.条件控制
if(2>1){
alert("true");
}
//console.log(num) 在浏览器的控制台打印变量 ===> System.out.print();
script>
2.3、数据类型
var
var就类似于Java中的Object，用于定义所有变量
number:
123 //整数123
123.4 //浮点数123.4
1.23e4 //科学计数法
-1234 //负数
NaN //not a number
Infinity //无穷大
//都属于 number 类型
字符串：
‘abc’ ， “abcd”
布尔：
true ， false
逻辑运算符：
&& ， || ， !
比较运算符
=
== (类型不一样，值一样也会判断为true)
=== 绝对等于(类型一样，值一样)
NaN只能通过isNaN()函数来判断这个数是否是NaN
数组
var array = [1,2,3,4,5,6,7,8]
undefined
未定义
比如数组下标越界，就会报 undefined
对象
//创建对象
var Object = {
name: "zzzzz",
gender:"男",
}
//浏览器控制台输出对象中的属性
console.log(Object.name);
console.log(Object.gender);
2.4、严格检查模式
'use strict';
3、数据类型
3.1、字符串
正常字符串使用单引号或双引号
转译字符
\'
\n
\t
\u#### unicode字符
\x41 ASCII字符
字符串操作
var str = "asdf";
str.length; //字符串长度
str.toUpperCase() //转为大写
str.toLowerCase() //转为小写
str.indexOf('s') //获取字符对应的下标
str.substring(1,3) //截取字符串
3.2、数组
数组定义
var arr = [1,2,3,4];
var arrM = [[1,2],[3,4]]; //二维数组
数组操作
var arr = [1,2,3,4,5,6]
arr.length //数组长度
arr.indexOf(2) //获取索引下标
arr.slice(1,3) //截取素组类似于substring
arr.push(1,3); //添加1和3，添加到尾部
arr.pop() //弹出尾部数据
arr.unshift(1,3) //添加数据到头部
arr.shift() //弹出头部的数据
arr.sort() //排序
arr.reverse() //元素反转
arr.join('--') //打印效果 ”1--2--3--4····
3.3、对象
对象声明
var 对象名 = {
属性名1 : 属性值1,
属性名2 : 属性值2,
属性名3 : 属性值3
}
对象操作
var Object = {
name: "zzzzz",
gender:"男",
}
delete Object.name; //动态删除属性
Object.age = 1 ; //动态添加属性
'age' in Object; //判断属性是否存在(继承的也返回true)
Object.hasOwnProperty('age') //判断该属性是否为该对象自身拥有的。
3.4、流程控制
if判断
var flag = 30;
if (flag>10){
console.log("hhhh");
}else if (flag>5){
console.log("sdsd");
}else {
console.log("saaaa");
}
while循环
var age = 1;
while(age<100){
console.log(age);
age = age+1;
}
for循环
for (let i = 0; i < 100; i++) {
console.log(i);
}
forEach循环遍历数组
var arr = [1,2,3,4,5];
arr.forEach(function (value) {
console.log(value);
})
for in 遍历数组
var arr = [1,2,3,4,5,6];
for (var num in arr){
console.log(arr[num]);
}
for of 遍历数组
var arr = [3,4,5]
for (var x of arr){
console.log(x);
}
3.5、Map和Set集合
ES6新特性
Map
var map = new Map([['key1',1],['key2',2],['key3',3]]);
var value = map.get('key1'); //通过key获取value
console.log(value);
map.set('key4',4); //添加键值对
map.delete('key1') //删除键值对
Set
无序不重复集合
var set = new Set([1,1,1,1,2,3]); // set = [1,2,3] Set集合会自动去重
set.add(4); //添加数据
set.delete(1) //删除元素
set.has(1) //判断是否存在1
3.6、Iterator
迭代器遍历数组，集合
遍历Map
var map = new Map([['key1',1],['key2',2],['key3',3]]);
for(let x of map){
console.log(x);
}
遍历Set
var set = new Set([1,1,1,1,2,3]);
for(let x of set){
console.log(x);
}
4、函数
4.1、定义函数
function hanshu(x){
return x;
}
//方式二 ，效果与方式一等效 类似于java中的匿名类
var hanshu = function (x) {
return x;
}
如果函数没有return，也会返回结果 :undefined
参数问题
js函数可以传多个参数 用 arguments 获取。
不传参数不会报错，会显示结果 NaN。所以往往需要程序员手动规避不传参的问题。
function hanshu(x){
if (typeof x !== 'number'){
throw 'Not a Number';
}
return x;
}
获取除已定义参数外的其他传入的参数
ES6新特性
function hanshu(x,...rest){
console.log(x);
console.log(rest);
}
4.2、变量的作用域
var定义的变量有作用域:在函数体内定义的，只在函数内起作用
全局对象
相当于浏览器，全局变量都属于这个对象
var x = 'x';
console.log(x);
console.log(window.x); // x==>window.x; alert()==>window.alert();
在开发中，如果将全部的变量都绑定在window下会非常乱，如果不同的js文件，使用了相同的全局变量，会产生冲突
减少冲突
//定义唯一全局变量
var Mzj = {};
//向Mzj中添加变量
Mzj.name = 'hhh';
Mzj.fun = function (x) {
return x
}
局部变量let
ES6新特性
常量const
ES6新特性
const PI = '3.1415926'; //只读变量不可修改
4.3、方法
定义方法
类中的函数叫做方法
var mmm = {
//方法
age : function (birth) {
var now = new Date().getFullYear();
return now-birth;
}
}
方式二
function getAge(){
var now = new Date().getFullYear();
return now-this.birth;
}
var mmm = {
birth : 2002,
//方法
age : getAge
}
/**
* 调用 mmm.age();
* getAge() NaN
* this代表当前对象.
*/
在Java中，this是无法指向的，表示当前执行的对象
在JavaScript中，可以控制this指向
getAge.apply(mmm,[]); //this指向了mmm函数，参数为空
5、内部对象
标准对象
typeof 1
'number'
typeof '1'
'string'
typeof true
'boolean'
typeof NaN
'number'
typeof []
'object'
typeof {}
'object'
typeof Math.abs
'function'
typeof undefined
'undefined'
5.1、Date
基本方法
var now = new Date(); //获取当前时间
now.getFullYear(); //年
now.getMonth(); //月 0~11
now.getDate(); //日
now.getDay(); //星期几
now.getHours(); //时
now.getMinutes();//分
now.getSeconds(); //秒
now.getTime(); //时间戳 从1970 .1.1 0:00:00 ~ now的毫秒数
//通过时间戳获取时间
console.log(new Date(now.getTime()));
5.2、JSON
json是一种轻量级的数据交换格式
var user = {
name : 'zzzzz',
age : 18,
gender : '男'
}
//对象转化为json字符串
var jsonUser = JSON.stringify(user);
//json字符串转化为对象
var object = JSON.parse(jsonUser);
5.3、Ajax
- 原生js写法，xhr异步请求
- jQuery 封装好的方法
- axios 请求
6、面向对象编程
定义一个类
class User{
constructor(name){
this.name = name;
}
hello(){
alert("你好");
}
}
var mmm = new User('zzzzz');
继承
class webUser extends User{
constructor(name,password){
super(name)
this.password = password;
}
display(){
alert('我是 web用户');
}
}
7、操作BOM对象
BOM:浏览器对象模型
navigator
navigator 中封装了浏览器的信息
screen
screen 封装了屏幕信息
screen.height
800
screen.width
1280
location
location 代表当前页面的URL信息
host: "www.baidu.com"
hostname: "www.baidu.com"
href: "https://www.baidu.com/?tn=15007414_8_dg"
origin: "https://www.baidu.com"
pathname: "/"
port: ""
protocol: "https:"
location.reload() //重新加载页面
location.assign("url")//设置新的地址
document
document 代表当前页面
document.title
'百度一下，你就知道'
获取具体的文档树节点
var dl = document.getElementById("id");
获取cookie
document.cookie
history
代表浏览器的历史记录
history.back();//后退
history.forward();//前进
8、操作DOM对象
DOM:文档树模型
获取DOM节点
<div id="parent">
<h1>标题h1>
<p id="p1">p1p>
<p class="p2">p2p>
div>
<script>
//获取节点
var h1 = document.getElementsByTagName("h1");
var p2 = document.getElementsByClassName('p2');
var p1 = document.getElementById('p1');
//通过父节点获取所有的子节点
var div = document.getElementById('parent');
var divChlidren = div.children;
script>
更新节点
var p1 = document.getElementById('p1');
p1.innerText = 'new p1' //修改文本值
p1.innerHTML = " p1
"; //修改html超文本
//操作js
p1.style.color = 'yellow'; //修改颜色
p1.style.fontSize = '20px' //修改字体大小
删除节点
步骤：
- 获取父节点
- 通过父节点删除子节点
var p1 = document.getElementById('p1');
var parent = p1.parentElement; //获取父节点
parent.removeChild(p1);
插入节点
<p id="js">JavaScriptp>
<div id="list">
<p id="se">JavaSEp>
<p id="ee">JavaEEp>
<p id="me">JavaMEp>
div>
<script>
var list = document.getElementById('list');
var js = document.getElementById('js');
var ee = document.getElementById('ee');
list.appendChild('js'); //将js追加到div中
//js创建新的节点
var newP = document.createElement('p');
newP.setAttribute('id','newP'); //设置id为newP
newP.innerText = '我就学python';
list.appendChild(newP);
list.insertBefore(newP,ee); //将newP插入到ee前
script>
9、操作表单
- 文本框 text
- 下拉框 select
- 单选框 radio
- 多选框 checkbox
- 隐藏框 hidden
- 密码框 password
获取表单数据
<from action="post">
<p>
<span>用户名span><input type="text" id="username">
p>
<p>
<span>性 别span>
<input type="radio" id="boy" name="sex" value="man">男
<input type="radio" id="girl" name="sex" value="women">女
p>
from>
<script>
var input_text = document.getElementById('username');
var boy_radio = document.getElementById('boy');
var girl_radio = document.getElementById('girl');
//获取文本框的值
input_text.value;
//修改文本框的值
input_text.value = '111';
//单选框——查看返回结果如果选中 true
boy_radio.checked = true;
script>
提交表单
<from action="#" method="post" onsubmit="f()">
<p>
<span>用户名span><input type="text" id="username" name="username">
p>
<p>
<span>密 码span><input type="password" id="password" name="password">
p>
<button type="submit" >提交button>
from>
<script>
function f() {
var username = document.getElementById('username');
var password = document.getElementById('password');
console.log(username.value);
console.log(password.value);
return true;
}
script>
10、jQuery
jQuery 封装了大量JavaScript的函数
导入jQuery
<script src="js_01/lib/jquery-3.6.1.js">script>
选择器
$('p').click() //标签选择器
$('#id').click() //id选择器
$('.class').click() //class选择器
事件
鼠标事件
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<script src="lib/jquery-3.6.1.js">script>
<style>
#divMove{
width:500px;
height: 500px;
border: 1px solid red;
}
style>
head>
<body>
mouse:<span id="mouseMove">span>
<div id="divMove">
移动鼠标
div>
<script>
$(function () {
$('#divMove').mousemove(function (e) {
$('#mouseMove').text('x:'+e.pageX+'y:'+e.pageY)
})
});
script>
body>
html>