JavaScript笔记
1. 前端知识体系(学习路线)
2.前端三要素
HTML（结构）：超文本标记语言（Hyper Text Markup Language），决定网页的结构和内容。
CSS（表现）：层叠样式表（Cascading Style Sheets），设定网页的表现样式。
JavaScript（行为）：是一种弱类型脚本语言，其源码不需经过编译，而是由浏览器解释运行，用于控制网页的行为
3.行为层 JavaScript
JavaScript一门弱类型脚本语言，其源代码在发往客户端运行之前不需要经过编译，而是将文本格式的字符代码发送给浏览器，由浏览器解释运行。
JavaScript框架：
- JQuery：大家熟知的JavaScript库，优点就是简化了DOM操作，缺点就是DOM操作太频繁，影响前端性能；在前端眼里使用它仅仅是为了兼容IE6，7，8；
- Angular：Google收购的前端框架，由一群Java程序员开发，其特点是将后台的MVC模式搬到了前端并增加了模块化开发的理念，与微软合作，采用了TypeScript语法开发；对后台程序员友好，对前端程序员不太友好；最大的缺点是版本迭代不合理（如1代–>2 代，除了名字，基本就是两个东西；截止发表博客时已推出了Angular6）；
- React：Facebook 出品，一款高性能的JS前端框架；特点是提出了新概念 【虚拟DOM】用于减少真实 DOM 操作，在内存中模拟 DOM操作，有效的提升了前端渲染效率；缺点是使用复杂，因为需要额外学习一门【JSX】语言；
- Vue：一款渐进式 JavaScript 框架，所谓渐进式就是逐步实现新特性的意思，如实现模块化开发、路由、状态管理等新特性。其特点是综合了 Angular（模块化）和React(虚拟 DOM) 的优点；
- Axios：前端通信框架；因为 Vue 的边界很明确，就是为了处理 DOM，所以并不具备通信能力，此时就需要额外使用一个通信框架与服务器交互；当然也可以直接选择使用jQuery 提供的AJAX 通信功能。
4.UI框架
UI框架：
- Ant-Design：阿里巴巴出品，基于React的UI框架；
- ElementUI、iview、ice：饿了么出品，基于Vue的UI框架；
- BootStrap：Teitter推出的一个用于前端开发的开源工具包；
- AmazeUI：又叫“妹子UI”，一款HTML5跨屏前端框架。
5.JavaScript构建工具
- Babel：JS编译工具，主要用于浏览器不支持的ES新特性，比如用于编译TypeScript。
- WebPack：模块打包器，主要作用就是打包、压缩、合并及按序加载。
6. JavaScript引入方式
- 内联: 在标签的事件属性中添加js代码,当事件触发时执行js代码
<input type="button" value="按钮" onclick="alert('按钮点击了!')">
- 内部: 在html页面的任意位置添加script标签,在标签内部写js代码,推荐写在
</body>的上面
<script type="text/javascript"> alert("内部引入成功!"); </script>
- 外部: 把代码写在单独的js文件中,通过script标签的src属性引入js文件
<script type="text/javascript" src="first.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!-- 在按钮的点击事件中添加js代码 -->
<input type="button" value="按钮" onclick="alert('按钮点击了')">
<!-- 内部引入javascript -->
<script type="text/javascript"> alert("内部引入成功") </script>
<!-- 引入js文件 -->
<script type="text/javascript" src="first.js"></script>
</body>
</html>
alert("没想到吧")
7. JavaScript语法
- 数据类型 变量 运算符 语句 方法声明 面向对象
7.1数据类型:
js中只有对象类型
1.数值类型 ：number var x = 10
2.字符串类型：string var s = “abc”/‘abc’;
3.布尔类型：boolean var b = true/false;
4.未定义类型：undefined var u; 只声明不赋值就是未定义类型
5.自定义类型object
7.2 变量声明和赋值
- js语言属于弱类型的语言
- java:
int x = 10; x= "abc" 报错 - js
var x = 10; x="abc" 允许因为JS弱化了类型的概念
7.3运算符
+ - * / % > < >= <= = == !=
==和===, ==是先统一类型再比较值,===是先比较类型再比较值
"666"==666 true "666"===666 false
除法运算,会自动转换整数和小数
java: int x = 5; int y = 2; x/y=? 2
js: var x = 5; var y = 2; x/y=2.5
- 语句 if else while do while for switch case
- 和Java大体相同
- for循环中的 int i 改成 var i
for(var i=0;i<10;i++){
console.log(i);
}
7.4 方法声明
- java: public void 方法名(参数列表){方法体}
- js: function 方法名(参数列表){方法体}
- 声明常见的四种方法:
- 无参无返回值
- 无参有返回值
- 有参无返回值
- 有参有返回值
- JS中方法声明有三种方式:
- function 方法名(参数列表){方法体}
- var 方法名 = function(参数列表){方法体}
- var 方法名 = new Function(“参数1”,“参数2”,“方法体”);
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<input type="button" value="按钮"
onclick="fn1()">
<script type="text/javascript">
//无参无返回值
function fn1(){
//每行结束的; 可以省略
alert("fn1执行!");
}
//调用 和java一样调用
// fn1();
//有参无返回值
function fn2(name,age){
alert(name+":"+age);
}
//调用
// fn2("孙尚香",60);
//无参有返回值
function fn3(){
return "ABC";
}
//调用
//var s = fn3();
//alert(s);
//有参有返回值
function fn4(x,y){
return x*y;
}
//调用
//var result = fn4(3,8);
//alert(result);
//第二种声明方法的方式:
var fn5 = function(name,age){
alert(name+":"+age);
}
//调用
// fn5("刘备",20);
//第三种声明方法的方式:
var fn6 = new Function("name","age"
,"alert(name+':'+age)");
// fn6("吕布",18);
</script>
</body>
</html>
7.5 和页面相关的方法
- 通过id查找页面中的元素
<div id="abc">div1</div>
var d = document.getElementById("abc");
- 获取和修改元素的文本内容
d.innerText 获取
d.innerText = "xxx"; 修改
<!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>
</head>
<body>
<div id = "d1">一个div</div>
<script>
var d = document.getElementById("d1");
alert(d.innerText);
d.innerText="haha";
alert(d.innerText);
</script>
</body>
</html>
<!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>
</head>
<body>
<!-- 通过id查找页面中的元素 -->
<div id="d1">div1</div>
<script type="text/javascript" >
function fn1(){
var d = document.getElementById("d1");
alert(d.textContent)
d.innerText = "xxx";
alert(d.textContent)
}
</script>
<input type="button" value="按钮" onclick="fn1()">
</body>
</html>
- 获取和修改文本框的文本内容
<input type="text" id="i1">
var i1 = document.getElementById("i1");
i1.value 获取
i1.value="xxx"; 修改
<!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>
</head>
<body>
<input type="text" id="i1">
<script>
var i1 = document.getElementById("i1");
alert(i1.value);
i1.value="xxx";
alert(i1.value)
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Insert title here</title>
</head>
<body>
<input type="text" id="i1" />
<div id="d1">这是一个div</div>
<input type="button" value="获取" onclick="fn1()" />
<input type="button" value="修改" onclick="fn2()" />
<input type="button" value="按钮" onclick="fn3()" />
<script type="text/javascript">
function fn3() {
//取出文本框的内容 给到 div显示
d1.innerText = i1.value;
}
function fn1() {
var d = document.getElementById("d1");
alert(d.innerText);
}
function fn2() {
//获取id为d1的元素
//var d1 = document.getElementById("d1");
//修改
d1.innerText = "xxx";
}
</script>
</body>
</html>
- Not a Number: 不是一个数.
isNaN(x) 判断x是否是NaN 返回值true代表是NaN(不是数) 返回值false代表不是NaN(是数)
7.6 JavaScript对象分类
- 内置对象: 包括number、string、boolean等
- 浏览器相关对象: BOM Browser Object Model(浏览器对象模型)
- 页面相关对象: DOM Document Object Model(文档对象模型)
7.6.1 BOM相关对象
window: window里面的属性称为全局属性,方法称为全局方法,调用window里面的属性或方法的时候可以将window省略掉
- window中常见属性
- location位置
location.href 获取和修改浏览器当前的请求地址
location.hash 返回URL中的hash（#号后跟零或多个字符）
location.host 返回服务器名称和端口号
location.port 返回服务器端口号
location.pathname 返回URL中的目录和文件名
location.hostname 返回不带端口号的服务器名称
location.protocol 返回页面使用的协议（http://或https://)
location.search 返回URL的查询字符串，字符串以问号开头 - history历史 当前窗口的历史记录
history.length() 获取历史页面的数量
history.back() 返回上一页面
history.forward() 前往下一页面 - navigator 导航/帮助
navigator.userAgent 获取浏览器的版本信息
window.navigator.platform：通过platform可以判断浏览器所在的系统平台类型
window.navigator.online：判断是否联网
- location位置
- window中常见的方法
-
alert() 弹出提示框
-
confirm() 弹出确认框
-
prompt() 弹出文本输入框
-
parseInt()/parseFloat()
parseInt(2.38) 2
parseInt(“20”) 20
parseInt(“20asdf”) 20
parseInt(“a20”) NaN
parseFloat(“3.8”) 3.8
window.open() ：打开一个新的浏览器窗口，接受四个参数（URL/打开方式/窗口参数/是否取代当前页面历史记录的布尔值）。
window.close() ：关闭新打开的窗口（仅限open（）打开的窗口）。
window.moveTo()：移动当前窗口。
window.resizeTo()：调整当前窗口的尺寸。
-
isNaN() 判断一个变量是否是数
-
定时器
开启:var timer = setInterval(方法,时间间隔);
停止: clearInterval(timer);
-
7.6.2操作DOM对象（重要）
DOM Document Object Model(文档对象模型)
- 更新：更新Dom节点
- 遍历Dom节点：得到Dom节点
- 删除：删除一个Dom节点
- 添加：添加一个新的节点
JavaScript 能够改变页面中的所有 HTML 元素
JavaScript 能够改变页面中的所有 HTML 属性
JavaScript 能够改变页面中的所有 CSS 样式
JavaScript 能够对页面中的所有事件做出反应
查找HTML元素
通常，通过 JavaScript，您需要操作 HTML 元素。
为了做到这件事情，您必须首先找到该元素。有三种方法来做这件事：
- 通过 id 找到 HTML 元素
var x = document.getElementById("intro"); - 通过标签名找到 HTML 元素
var x=document.getElementById("main");
var y=x.getElementsByTagName("p");
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
<p>你好世界!</p>
<div id="main">
<p> DOM 是非常有用的。</p>
<p>该实例展示了 <b>getElementsByTagName</b> 方法</p>
</div>
<script>
var x=document.getElementById("main");
var y=x.getElementsByTagName("p");
document.write('id="main"元素中的第一个段落为：' + y[0].innerHTML);
</script>
</body>
</html>
- 通过类名找到 HTML 元素
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
<p class="intro">你好世界!</p>
<p>该实例展示了 <b>getElementsByClassName</b> 方法!</p>
<script>
x=document.getElementsByClassName("intro");
document.write("<p>文本来自 class 为 intro 段落: " + x[0].innerHTML + "</p>");
</script>
<p><b>注意：</b>Internet Explorer 8 及更早 IE 版本不支持 getElementsByClassName() 方法。</p>
</body>
</html>
JavaScript HTML DOM - 改变 HTML
- 改变HTML输出流
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
<script>
document.write(Date());
</script>
</body>
</html>
- 改变HTML内容
document.getElementById(id).innerHTML=新的 HTML
<html>
<body>
<p id="p1">Hello World!</p>
<script>
document.getElementById("p1").innerHTML="新文本!";
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<h1 id="header">Old Header</h1>
<script>
var element=document.getElementById("header");
element.innerHTML="新标题";
</script>
</body>
</html>
- 改变HTML属性
document.getElementById(id).attribute=新属性值
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
<img id="image" src="smiley.gif" width="160" height="120">
<script>
document.getElementById("image").src="landscape.jpg";
</script>
<p>原图片为 smiley.gif,脚本将图片修改为 landscape.jpg</p>
</body>
</html>
JavaScript HTML DOM - 改变CSS
- 改变HTML样式
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
<p id="p1">Hello World!</p>
<p id="p2">Hello World!</p>
<script>
document.getElementById("p2").style.color="blue";
document.getElementById("p2").style.fontFamily="Arial";
document.getElementById("p2").style.fontSize="larger";
</script>
<p>以上段落通过脚本修改。</p>
</body>
</html>
- 使用事件
HTML DOM 允许我们通过触发事件来执行代码。
比如以下事件：
元素被点击。
页面加载完成。
输入框被修改。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
<h1 id="id1">我的标题 1</h1>
<button type="button" onclick="document.getElementById('id1').style.color='red'">
点我!</button>
</body>
</html>
JavaScript HTML DOM 事件
HTML DOM 使 JavaScript 有能力对 HTML 事件做出反应。
对事件做出反应
- 当用户点击鼠标时
- 当网页已加载时
- 当图像已加载时
- 当鼠标移动到元素上时
- 当输入字段被改变时
- 当提交 HTML 表单时
- 当用户触发按键时
例子1：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
<h1 onclick="this.innerHTML='Ooops!'">点击文本!</h1>
</body>
</html>
// TODO 时间有限后续会继续补充
808
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
