一.简介

1.1 和Java的关系

本质上来说没有关系

js是1995年由网景公司推出的

1.2 目前的版本

js的标准是ECMAScript

目前我们学习的都是ES6

1.3 定义

是一种具有函数优先级,轻量级,解释型的编程语言

脚本语言

支持面向对象,声明式,函数式的编程

1.4 小知识

js也可以做服务器端的开发,比如node.js

javascript他是甲骨文公司的注册商标

ECMA国际组织他是Javascript的基础指定的

二.JS能干嘛

1.嵌入到动态的HTML页面

2.可以针对浏览器的时间做出响应

3.读写HTML

4.做验证

5.检测访问者的浏览器信息,控制cookies,包含创建修改

6.基于node.js做服务器端的编程

三.How如何学习

1.ECMAScript:

包含语言的基础语法和基本的对象

2.BOM浏览器对象模型:浏览器的交互(定时器,刷新,后退,弹出框)

3.DOM文档对象模型:描述网页的的内容方法和接口(操作浏览器里面的内容)

四.ECMAScript

4.1 语法结构

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 嵌入js脚本 -->
<script>
//警告框
//alert("123456");
//选择框
//confirm("123456");
//输入框
//prompt("123456");
//控制台日志
console.log("123456");
</script>
<!-- 如果脚本有很多行 -->
<script src="./js/1.js"></script>
<!-- 直接嵌入到某个标签中，此种写法少用 -->
<input type="button" value="点我一下试试"
onclick="javascript:;alert('123456')">
</head>
<body>
</body>
</html>

4.2 变量

//1.声明赋值
//可以通过typeof函数去检测数据类型
myname="武汉佟大为";
console.log(typeof(myname));
myname=123;
console.log(typeof(myname));
//也可以通过类型var来命名
var age;
console.log(age);//undefined 定义了没有赋值
//2.变量的命名
//驼峰造型.见名识意,尽量不要使用关键字或者js内置的变量
//3.在ES6中新增了let命令
{
//全局
var i=1;
}
console.log(i);
{
//局部
let j=1;
}
console.log(j);

4.3 数据类型

4.3.1 undefined

43.2 number

4.3.3 string

4.3.4 Array

4.3.5 boolean

4.3.6 函数

分类

1.系统的函数

alert();

confirm();

console.log();

2.用户自定义

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
//var str="window.alert(1)";
//eval(str);//计算str字符串
//自定义函数
//1.js的函数定义可以不用声明返回类型(数据的类型和数据的值有关)
//2.如果js的不写return关键值,返回值就是undefined
function f1(){
//执行函数的业务
//需要返回值可以使用return显示的声明
}
//a和b就是变量名
function f2(a,b){
console.log(a);
console.log(b);
return 1;
}
4.3.7 Date
f2(1,true);
f2("哈哈");//声明了b,而没有给他初始化--->undefined
let myname=f2(1,2);
console.log("返回值:"+myname);//没有定义返回值,返回undefined
//定义2
let myage=function(age){
console.log(age);
}
myage(20);
</script>
</head>
<body>
</body>
</html>

4.3.7 Date

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
//Date
//1.获得当前时间
var now=new Date();
console.log("当前时间:"+now);
var date1=new Date("2021-10-10 22:00:00");
console.log("时间1:"+date1);
//2.获得时间毫秒数
console.log("毫秒数:"+now.getTime());//!
//请求名+当前时间毫秒数
//请求明+当前时间毫秒数
//年
console.log("年:"+now.getFullYear());//设置用set
//月
console.log("月:"+now.getMonth());//0-11 set
//日
console.log("日:"+now.getDate()); //set
//周几
console.log("周几:"+now.getDay());//0-6 set
//时分秒
//getHours() getMinutes() getSeconds()
//打印一个标准格式: 年-月-日 时:分:秒 周几
</script>
</head>
<body>
</body>
</html>

4.3.8 正则表达式RegExp---很重要

正则表达式对象是js的内置对象

//构造器的方式
//var reg1=new RegExp('正则表达式',匹配模式);
var reg1=new RegExp('world','ig');
//i 表示不区分大小写, g表示全局匹配
//字面量
var reg2=/world/ig;

2.使用: test()

var reg2=/world/;
console.log(reg2.test("hellowordl"));//true或者false

var reg1=/\d{6}/; var reg2=/[\u4e00-\u9fa5]{2,8}/; console.log(reg2.test('123'));

4.3.9 Math类的使用

4.4 面向对象

一切皆对象

4.4.1 创建对象的方式一

语法:

var 对象名称=new Object();

//添加属性

对象名.属性名=属性值

//添加方法

对象名.方法名=function(){}

4.4.2 方式二

function 对象名(参数){

//有参数赋值

this.函数1=...

this.函数2=...

}

4.4.3 方式三:类似json语法

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
//{k1:v1,k2:v2,
// {k3:v3,k4:v4} }
//"k1=v1,k2=v2"--->split(",")--->split("=")
//JSON的数据格式
var gf={
name:"香菜",
age:30,
say:function(){
console.log("我叫"+this.name);
}
};
function f3(){
gf.say();
}
</script>
</head>
<body>
<input type="button" value="点击" onclick="f3()">
</body>
</html>

五.BOM

浏览器对象模型(Brower Object Model)

操作网页的一些行为与窗口交互的行为,提供了很多的对象和属性

浏览器的顶级对象是window

window.alert()

5.1 定时器

5.1.1 常见的方法

//window可以省略,因为window是顶级对象
var st1=window.setTimeout(调用的函数,延迟的毫秒数);//st1标识了这个定时器
window.clearTimeout(st1);//清除延迟的定时器
var st2=window.setInterval(调用的函数,间隔的毫秒数);
window.clearInterval(st2);//清除间隔的定时器

5.1.2 演示

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
var st1;
function f1(){
st1=setTimeout(function(){
console.log("5秒已到,该写代码了...");
//跳转网页
window.location.href="https://www.baidu.com";
},5000);
}
function f2(){
clearTimeout(st1);
}
var st2;
function f3(){
st2=setInterval(() => {
//获得当前的时间
let now=new Date();
let hours=now.getHours();//时
let min=now.getMinutes();//分
let seconds=now.getSeconds();//秒
let str=hours+":"+min+":"+seconds;
//打印
console.log(str);
}, 1000);
}
function f4(){
alert(st2);
clearInterval(st2);
}
function f5(){
f3();
}
</script>
</head>
<body>
<input type="button" value="启动延时定时器" onclick="f1()">
<input type="button" value="清除延时定时器" onclick="f2()">
<input type="button" value="启动间隔定时器" onclick="f3()">
属性或者函数 返回值
window.location.href 获得或者设置一个url
window.location.port 端口
window.location.host 主机
window.location.pathname 返回请求路径
window.location.reload() 刷新页面

5.2 窗口加载事件load
窗口加载事件:当文档内容加载完毕以后,执行触发这个事件---(包含一个执行的业务js)
window.onload

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
window.onload=function(){
alert(1);
}
</script>
</head>
<body>
<img src="./img/4.jpg" width="100px" height="100px" alt="">
</body>
</html>

5.3 window.location对象

5.4 window.history对象

1. history.back() 网页回退

2. history.forword() 网页前进

3. history.go(index) 前进或者后退 index是正数前进index页 ,index是负数后退index页

5.5 一些函数

1.alert() 警告

2.confirm(""); 确认弹出框,返回一个boolean

3.prompt(""); 输入框,返回输入的内容

4.open("跳转的网页url","窗口的名称","窗口的特征")

6.JSON对象

他是js里面的内置对象,主要用于和其他语言进行数据交互,他的本质是一个字符串

6.1 js对象---->JSON字符串

var obj={name:'金喜善',gender:'女'};
var str=JSON.Stringify(obj);//将次数据传递给后台的服务器语言去解析,比如Java

6.2 JSON字符串--->js对象

var str='{name:'金喜善',gender:'女'}';
var obj=JSON.parse(str);//js对象

7.cookie

1.可以存储信息的

2.保存在客户端的状态信息,记录了用户的访问状态

K-V键值保存的

username-张三

pwd=123456

//获取

cookie document.cookie;

//设置

cookie document.cookie="username=张三;pwd=123456"

8.DOM对象

Document Object Model文档对象模型

将网页里面的元素当成对象一样使用,每个对象(标签)都有属性,也有属性值,当我们把他当做一个对象去处理的时候,这样方便我们操作网页

点击测试

对象: input

属性1: type 属性1值: button

属性2: value 属性2值:点击测试

====

1.网页标签和js

2.网页样式和js 3

.对于整个网页会形成一个对象: document

8.1 如何获取网页标签对象---(选择器)

8.1.1 通过id来获取网页元素对象

var 变量名=document.getElementById("id值");
//1.假设有id重复,找到的是页面里面第一个id对象
//2.id有可能正确,也有可能写错,返回null

8.1.2 通过class来获取网页元素对象

var 变量名=document.getElementsByClassName("class值");
//1.返回的是一个HTMLCollection(类似数组),具备数组的特征,并且有length属性
//2.没有返回[]

假设我想获取某个id里面的子元素

//访问c4元素的方法,拓展:想得到div的值,可以通过div对象.innerText
//1.直接访问c4
var obj2=document.getElementsByClassName("c4")[0];
console.log("---"+obj2.innerText);
//2.由于c4在c3里面,再去找c4
var obj3=document.getElementsByClassName("c3")[0];
var obj4=obj3.getElementsByClassName("c4")[0];
console.log("---"+obj4.innerText);
//3.由于c4在d1里面
var obj5=document.getElementById("d1").getElementsByClassName("c4")[0];
console.log("---"+obj5.innerText);

8.1.3 通过标签名来获取网页元素对象

var 变量名=document.getElementsByTagName("标签名");
//返回的也是一个HTMLCollection

8.1.4 通过name属性获取网页元素对象

var 变量名=document.getElementsByName("name值");
//返回的也是一个NodeList 类数组,下标,,,

8.1.5 通用选择器

//单个
var 变量名=document.querySelector("#id值");//id
var 变量名=document.querySelector(".class值");//class
//以上都是返回单个元素或者null
var 返回多个=document.querySelectorAll("#id值");
var 返回多个=document.querySelectorAll("#id值1 > .class值");
//返回也是一个NodeList集合

通过以上的选择器,我们已经可以在页面获取任意的元素对象

8.2 DOM结构

1.在网页里面的元素,所有的标签都是一个元素(Element),同时他也是一个Node

2.不是所有的Node都是Element,比如注释,回车,文字node都可以读取,但是Element不一定能读取

8.3 Element的常用属性

8.3.1 children:获得当前元素下面的子元素

<div class="d1">
<p class="p1">老夫聊发少年狂,左牵黄,右擎苍</p>
</div>
//获得p元素
//方式一:
document.getElementsByTagName("p")[0];
//方式二:
document.getElementsByClassName("d1")[0].getElementsByTagName("p")[0];
//方式三:
document.querySelector("p");
//通过children属性获取,由于p标签使div的子标签中一个,可以使用属性children
//children返回的是一个集合HTMLCollection
//children属性是文档对象的属性,不是集合的属性
// document.getElementsByTagName("div").children ×
document.getElementsByTagName("div")[0].children[0];

8.3.2 parentElement:获取当前元素的父级元素

8.3.3 nextElementSibling:获取当前元素的下一个兄弟元素

8.3.4 previousElementSibilng:获取当前元素的前一个兄弟元素

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
function f1(){
var obj1=document.getElementById("d1");
console.log("前一个:"+obj1.previousElementSibling.innerHTML);
console.log("后一个:"+obj1.nextElementSibling.innerText);
console.log("父元素:"+obj1.parentElement.innerHTML);
var obj2=document.getElementById("d2");
console.log(obj2.onclick);
}
function f4(){
var obj3=document.getElementsByClassName("d3")[0];
console.log(obj3.children[0]);
}
</script>
</head>
<body>
<h3>夜宵套餐</h3>
<input type="text" placeholder="请输入您想吃的夜宵名" id="d2" value="啤酒"
onclick="f2()">
<ul>
<li>烤羊排</li>
<li>烤五花肉</li>
<li id="d1">烤茄子</li>
<li>烤猪尾巴</li>
<li>全身按摩</li>
</ul>
<div class="d3">
<p class="p1">老夫聊发少年狂,左牵黄,右擎苍</p>
</div>
<input type="button" value="烤茄子前一个-后一个-父元素" onclick="f1()">
<input type="button" value="子元素" onclick="f4()">
</body>
</html>

8.3.5 获得元素的内容

obj.innerText;//比如一些p,div,span

obj.value;//input

obj.innerHTML;//不仅可以获取文本,还可以获取包含标签

8.3.6 标签具有的属性:要保证当前元素具备此属性

<a href="#">百度一下,你就知道</a> //obj1
<div><div> //obj2
<input type="text" value="123456"> //obj3
//语法: 对象.属性名=属性值
obj1.href="设置值";
obj2.style="#34edaf"
obj3.value="修改新的值"

1.className:一次性修改多个属性,通过自定义一个样式

function f1(msg){
var obj1=document.getElementById("d1");
obj1.className=obj1.className+" "+msg+"";
}
function f2(){
var obj1=document.getElementById("d1");
obj1.className=obj1.className.replace("c1 c2","");
}

2.[了解]如果有多个样式,可以使用classList属性,返回当前元素的class名称的集合,包含了所有的样式名称

1.classList是一个类集合

2.add():添加样式

3.remove():移除样式

4.contains():判定是否包含样式

3.attribute

<input type="button" value="helloworld" id="d1">
1.获得属性
obj1.getAttribute("type");//对象.属性
2.设置属性值
obj2.setAttribute("属性名","属性值");//
3.移除属性
obj3.removeAttribute("属性名")

4.checked和readonly,disabled

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
function f1(){
let obj=document.getElementById("d1");
//obj.type="button";
console.log("获得属性值:"+obj.getAttribute("type"));
obj.setAttribute("type","button");
console.log("获得属性值:"+obj.getAttribute("type"));
obj.removeAttribute("name");
//复选框
let obj2=document.getElementById("d2");
console.log(obj2.checked);
//状态
let obj3=document.getElementById("d3");
obj3.disabled="disabled";
}
</script>
</head>
<body>
<input type="text" value="helloworld" id="d1" name="haha"><br>
<input type="button" value="测试" onclick="f1()">
<input type="checkbox" name="" id="d2"> 记住密码
<input type="button" value="5" id="d3">
</body>
</html

JavaScript总结笔记相关推荐

JavaScript基础笔记集合（转）
JavaScript基础笔记集合 JavaScript基础笔记集合 js简介 js是脚本语言.浏览器是逐行的读取代码,而传统编程会在执行前进行编译 js存放的位置 html脚本必须放在< ...
Java程序猿的JavaScript学习笔记（12——jQuery-扩展选择器）
计划按例如以下顺序完毕这篇笔记: Java程序猿的JavaScript学习笔记(1--理念) Java程序猿的JavaScript学习笔记(2--属性复制和继承) Java程序猿的JavaScript ...
Java程序猿的JavaScript学习笔记（汇总文件夹）
最终完结了,历时半个月. 内容包含: JavaScript面向对象特性分析,JavaScript高手必经之路. jQuery源代码级解析. jQuery EasyUI源代码级解析. Java程序猿的J ...
JavaScript学习笔记（五）
JavaScript学习笔记(五) ①Array类本地对象 ②Date类 ①Global对象对象的类型内置对象 ②Math对象宿主对象今天继续学习JS中的对象,昨天内置对象Global对 ...
JavaScript学习笔记（备忘录）
JavaScript学习笔记(备忘录) ===运算符判断数值和类型是否相等.如: console.log('s'==='s') //输出trueconsole.log('1'===1) //输出fa ...
Java程序猿的JavaScript学习笔记（10—— jQuery-在“类”层面扩展）
计划按例如以下顺序完毕这篇笔记: Java程序猿的JavaScript学习笔记(1--理念) Java程序猿的JavaScript学习笔记(2--属性复制和继承) Java程序猿的JavaScript ...
JavaScript学习笔记（十）——学习心得与经验小结
JavaScript学习笔记(十)--学习心得与经验小结目前我先列好提纲,利用每晚和周末的闲暇时间,将逐步写完 ^_^ 转载于:https://www.cnblogs.com/mixer/archi ...
JavaScript 学习笔记（1）
1. 何为 Jscript JScript 是一种解释型的.基于对象的脚本语言. 局限性: 1) 不能使用该语言来编写独立运行的应用程序 2) 没有对读写文件的内置 ...
前端获取div里面的标签_web前端教程JavaScript学习笔记DOM
web前端教程JavaScript学习笔记 DOM一DOM(Document Object Model): 文档对象模型其实就是操作 html 中的标签的一些能力我们可以操作哪些内容获取一个元素 ...
JavaScript学习笔记之数组（二）
JavaScript学习笔记之数组(二) 1.['1','2','3'].map(parseInt) 输出什么,为什么? ['1','2','3'].map(parseInt)//[1,NaN,NaN ...

JavaScript总结笔记