文章目录
前言
本博文专用于软件创新实验室JS学习
课堂,很基础但很适用的 JS 相关知识,一篇让你对 JS 得心应手,了如指掌!
简介
概述
JavaScript 是目前 web 开发中不可缺少的脚本语言,JS 不需要编译即可运行,运行在客户端,需要通过浏览器来解析执行 JavaScript 代码。
JavaScript 诞生于1995年,当时的主要目的是验证表单的数据是否合法。
JavaScript 本来应该叫 Livescript,但是在发布前夕,想搭上当时超热的 java 顺风车,临时把名字改为了JavaScript。(也就是说 js 跟 java 没有关系,当时只是想借助 java 的名气)。
组成部分
组成部分 | 作用 |
---|---|
ECMA Script | 构成了 js 核心的语法基础 |
BOM | Browser Object Model 浏览器对象模型,用于操作浏览器上的对象 |
DOM | Document Object Model 文档对象模型,用于操作网页中的元素 |
(1)ECMAScript(核心):这一部分主要是 JS 的基本语法。
(2)BOM:Brower Object Model(浏览器对象模型),主要是获取浏览器信息或操作浏览器的,例如:浏览器的前进与后退、浏览器弹出提示框、浏览器地址栏输入网址跳转等操作等。
(3)DOM:Document Object Model(文档对象模型),此处的文档暂且理解为 html,html 加载到浏览器的内存中,可以使用 JS 的 DOM 技术对内存中的 html 节点进行修改,用户从浏览器看到的是 JS 动态修改后的页面。(增删改查)
特点
1. 交互性(它可以做的就是信息的动态交互)
2. 安全性(不允许直接访问本地硬盘)
3. 跨平台性(只要是可以解析 JS 的浏览器都可以执行,和平台无关)
与 Java 的区别:
Java | JavaScript |
---|---|
面向对象的语言 | 脚本语言,是基于对象和事件驱动的语言 |
Java 的源代码在执行之前必须经过编译 | JavaScript 的代码可以由浏览器直接解释执行 |
Java 变量在使用之前必须声明 | JavaScript 不需要 |
Java 是静态类型语言 | JavaScript 是动态类型语言 |
Java 主要在服务端运行 | Javascript 主要在客户端浏览器运行 |
作用
JavaScript 被用来改进设计、验证表单、检测浏览器、创建 cookies,等等。JavaScript 是因特网上最流行的脚本语言,并且可在所有主要的浏览器中运行,比如: Internet Explorer、 Maxthon、Mozilla、Firefox、Netscape、Chrome和 Opera等。
在目前学习阶段只要记住最常用的二个:
(1)运态修改html及css代码
(2)验证表单
基础语法
变量
- 定义变量
var num = 1;
var name = "idiot";
javascript
严格区分大小写,
console.log(变量名)
在浏览器控制台打印数据,
字符串
- 正常字符串我们使用单引号,或者双引号包裹,
- 注意转义字符
\
,
\'
\n
\t
\u4e2d \u##### Unicode字符
\x41 Ascall字符
- 多行字符串编写,使用撇号,
//tab 上面 esc下面
var msg =
`
hello
world
你好呀
nihao
`
- 模板字符串,
let name = 'Tom';
let age = 3;
var msg = `你好,${name}`
- 字符串长度,
str.length
- 字符串的可变性,不可变,
var str = "stUdent"
str[0]=1
console.log(str[0])
console.log(str)
- 大小写转换,
//注意,这里是方法,不是属性了,所以要加括号
str.toUpperCase();
str.toLowerCase();
str.indexOf('t')
substring()
,从0开始
str.substring(1)//从第一个字符串截取到最后一个字符串
str.substring(1,3)//[1,3)
数组
Array
可以包含任意的数据类型,
var arr = [1,2,3,4,5,6];//通过下标取值和赋值
- 长度
arr.length
注意:假如给 arr.length
赋值,数组大小就会发生变化~,如果赋值过小,元素就会丢失,
indexOf
,通过元素获得下标索引
arr.indexOf(2)
1
字符串的"1"和数字 1 是不同的,
-
slice()
截取掉 Array 的一部分,返回的一个新数组,类似于 String 中substring()
-
push()
,pop()
push:压入到尾部
pop:弹出尾部的一个元素
unshift()
,shift()
unshift:压入到头部
shift:弹出头部的一个元素
- 排序
sort()
["B","C","A"]
arr.sort()
["A","B","C"]
- 元素反转
reverse()
["A","B","C"]
arr.reverse()
["C","B","A"]
concat()
var arr = [1,2,3,4,5,6]
console.log(arr.concat(['a','b']))
console.log(arr)
注意:concat()
并没有修改数组,只是会返回一个新的数组,
-
连接符
join()
-
多维数组
数组:存储数据(如何存,如何取,方法都可以自己实现!)
对象
若干个键值对,
var 对象名 = {
属性名:属性值,
属性名:属性值,
属性名:属性值
}
//定义了一个person对象,它有四个属性
var person = {
name:"Tom",
age:3,
email:"123456798@QQ.com",
score:66
}
JS 中,{…}
表示一个对象,键值对描述属性 xxx:xxx,多个属性之间用逗号隔开,最后一个属性不加逗号!
JavaScript中的所有的键都是字符串,值是任意对象!
-
对象赋值,
-
使用一个不存在的对象属性,不会报错!
undefined
,
-
动态的删减属性,通过 delete 删除对象的属性,
-
动态的添加,直接给新的属性添加值即可,
-
判断属性值是否在这个对象中!
xxx in xxx
,
-
判断一个属性是否是这个对象自身拥有的
hasOwnProperty()
,
流程控制
-
if
判断,
-
while
循环,避免程序死循环,
-
for
循环,
-
forEach 循环,ES5.1特性,
-
for…in… 下标,
for(var index in object){}
,
Map 和 Set
ES6的新特性
-
Map,
-
Set,
iterator
ES6的新特性
遍历数组,
遍历 Map,
遍历 Set,
函数
定义函数
定义方式一:
function abs(value){
if(value >= 0){
return value;
}else{
return -value;
}
}
一旦执行到 return
代表函数结束,返回结果;如果没有执行 return
,函数执行完也会返回结果,结果就是 undefined
,
定义方式二:
var abs = function(value){
if(value >= 0){
return value;
}else{
return -value;
}
}
function(value){…}
是一个匿名函数,但是可以把结果赋值给 abs
,通过 abs
就可以调用函数!方式一和方式二等价!
调用函数
abs(10) //10
abs(-10) //10
参数问题:JavaScript 可以传任意个参数,也可以不传递参数,参数进来是否存在问题?假设不存在参数,如何规避?
var abs = function(value){
//手动抛出异常来判断
if(typeof value !== 'number'){
throw 'Not a number';
}
if(value >= 0){
return value;
}else{
return -value;
}
}
Arguments
arguments
代表传递进来的所有参数,是一个数组!
var abs = function(value){
console.log("x=>"+x);
for(var i=0; i<arguments.length; i++){
console.log(arguments.[i]);
}
if(value >= 0){
return value;
}else{
return -value;
}
}
问题:arguments
包含所有的参数,我们有时候想使用多余的参数来进行附加操作,需要排除已有参数,
Rest
ES6之前,
if(arguments.length>2){
for(var i=2; i<arguments.length; i++){
...
}
}
ES6之后,获取除了已定义的参数之外的所有参数,
function a(a,b,...rest){
console.log("a=>"+a);
console.log("b=>"+b);
console.log(rest);
}
rest
参数只能写在最后面,必须用 …
标识。
变量的作用域
在 javascript 中,var
定义变量实际是有作用域的,
假设在函数体重声明,则在函数体外不可以使用(闭包),
function a(){
var x = 1;
x++;
}
x += 2; //Uncaught ReferenceError: x is not defined
如果两个函数使用了相同的变量名,只要在函数内部就不冲突,
function a(){
var x = 1;
x++;
}
function b(){
var x = 'A';
x++;
}
内部函数可以访问外部函数的成员,反之则不行,
function a(){
var x = 1;
//内部函数可以访问外部函数的成员,反之则不行
function b(){
var y = ++x; //2
}
var z = ++y; //Uncaught ReferenceError: y is not defined
}
假设内部函数变量和外部函数变量重名,
function a(){
var x = 1;
function b(){
var x = 'A';
console.log('inner'+x);
}
console.log('outer'+x);
b()
}
a()
在 JavaScript 中,函数查找变量从自身函数开始, 由“内”向“外”查找,假设外部存在这个同名的函数变量,则内部函数会屏蔽外部函数的变量。
提升变量的作用域
function a(){
var x = "x" + y;
console.log(x);
var y = "y";
}
结果:x undefined
,
说明:js 执行引擎,自动提升了 y
的声明,但是不会提升变量 y
的赋值,
这个是在 javascript 建立之初就存在的特性,养成规范:所有的变量定义都放在函数的头部,不要乱放,便于代码维护,
全局变量
//全局变量
x = 1;
function f(){
console.log("in-->"+x)
}
f()
console.log("out-->"+x)
全局对象 window
,默认所有的全局变量都会自动绑定在 window
对象下,
var x = 'test'
alert(x)
alert(window.x)
alert()
这个函数本身也是一个 window
的变量;
var x = 'test'
window.alert(x)
var old_alert = window.alert
window.alert = function(){}
//失效
window.alert(123)
//恢复
window.alert = old_alert
window.alert(456)
失效是因为全局变量 function(){}
将原有的内容给覆盖了,
javascript 实际上只有一个全局作用域,任何变量(函数也可以视为变量),假设没有在函数作用范围内找到,就会向外查找,如果在全局作用域都没有找到,就会报错 Refrence,
规范
由于我们的所有变量都会绑定到 window 上,如果不同的 js 文件,使用了相同的全局变量,就会产生冲突,那如何减少这样的冲突?
//唯一全局变量
var test = {}
//定义全局变量
test.name = 'idiot'
test.add = function(a,b){
return a+b;
}
把自己的代码全部放入自己定义的唯一空间名字中,降低全局命名冲突问题,
jQuery 中就是使用的该方法:jQuery.name,简便写法:$()
,
局部作用域
function f(){
for(var i=0; i<10; i++){
console.log(i)
}
console.log(i++)
}
i 在 for 循环作用域外也依旧可以使用,因此可以使用 let
来代替 var
使之成为局部变量,
常量
在 ES6 之前,定义常量:只有用全部大写字母命名的变量就是常量,建议不要修改这样的值,
在 ES6 引入了常量关键字 const
,
const PI = '3.14'
console.log(PI)
PI = '123' //Uncaught TypeError: Assignment to constant variable.
console.log(PI)
方法
定义方法
方法就是把函数放在对象的里面,对象只有两个东西:属性和方法,
var person = {
name:"idiot",
birth:1999,
age:function(){
return new Date().getFullYear()-this.birth;
}
}
//属性
person.name
//方法,一定要带()
person.age()
面向对象编程
什么是面向对象
javascript,java,c# —> 面向对象,但是 javascript 有些区别!
- 类:模板,
- 对象:具体实例,
面向对象原型继承
原型对象
当创建一个新函数时,系统会根据一组特定的规则为函数创建一个 prototype 属性,该属性会指向一个名为原型对象的对象,在默认情况下,该对象会自动生成一个构造函数(constructor),该构造函数是一个指向函数的指针。而在原型对象中,除了有这个构造函数,我们还可以添加其他的属性和方法。
通俗来讲就是,当我们新建一个函数A时,函数A内部会有一个属性,该属性指向一个对象(名字叫原型对象),而这个对象里面默认有一个构造函数,这个构造函数指向我们最初新建的函数A。然后,我们还可以在原型对象中添加属性和方法。
//①默认情况下,构造函数是空的
function Person(){//构造函数首字母大写
}
//②添加属性和方法
Person.prototype.name="dp";
Person.prototype.doSomething=function(){
alert(this.name);
};
//③定义好构造函数和其他属性方法之后,就可以创建实例了
var person1=new Person();
var person2=new Person();
var Student = {
name: 'idiot',
age: 18,
run: function(){
console.log(this.name+" is running.")
}
}
var girl = {
name: 'girl'
}
//girl 的原型对象是 Student
girl.__proto__ = Student
面向对象class继承
class
关键字是在 ES6 引入的,
- 添加方法
//给student添加一个方法
//1、先定义一个类、属性、方法
class student{
constructor(name){
this.name = name;
}
hello(){
alert('hello');
}
}
//使用方法
var person = new student('小明');
person.hello();
- 继承
class student{
constructor(name){
this.name = name;
}
hello(){
alert('hello');
}
}
class xiaoStudent extends student{
constructor(name,grade){
super(name);
this.grade = grade;
}
mygrade(){
alert('我是一个小学生')
}
}
//使用
var xiaoStudent = new xiaoStudent("xiaohong",1);
本质:查看对象原型,
原型链,
操作BOM对象(重点)
浏览器介绍
JavaScript 和浏览器关系?
JavaScript 诞生就是为了能够让他在浏览器中运行!
BOM:浏览器对象模型,
- IE6~11
- Chrome
- Safari
- Firefox
- Opera
window
window
代表浏览器窗口,
window.alert(1)
undefined
window.innerHeight
258
window.innerwidth
919
window.outerHeight
994
window.outerwidth
919
Navigator
Navigator
封装了浏览器的信息(不建议使用),
navigator . appName
"Netscape"
navigator . appVersion
"5.0 (windows NT 10.0; WOw64) Applewebkit/537.36 (KHTML, like Gecko)
Chrome/63.0.3239.132 Safari/537.36"
navigator . userAgent
"Mozi11a/5.0 (Windows NT 10. 0; WOw64) ApplewebKit/537.36 (KHTML, like :
Gecko) Chrome/63.0. 3239.132 Safari/537.36"
navigator. platform
"Win32"
大多数时候,我们不会使用 navigator
对象,因为会被认为修改!不建议使用这些属性来判断和编写代码,
Screen
代表屏幕尺寸,
screen.width
1920
screen.Height
1080
Location(重要)
代表当前页面的 URL 信息
location
属性:
- 主机:
\host
- 当前指向的位置:
href
- 协议:
protocol
- 重新加载的方法:
f reload() //location.reload()
刷新网页
(设置新的地址:location.assign(‘想要跳转的地址’))
document
document
代表当前的页面,HTML DOM
文档树,
//获取具体的文档树节点:
<d1 id="app">
<dt> Java</dt>
<dd> JavaSE</dd>
<dd> JavaEE</dd>
</d1>
<script>
var d1 = document. getElementById(' app ');
</script>
//获取cookie
document.cookie
//劫持cookie原理:把一段能劫持cookie的js代码放在网站上 一点开就能把你的cookie拿了
<script src='劫持cookie.js'></script>
<!-- 获取你的cookie上传到他的服务器 -->
服务器端可以设置 cookie
为 httpOnly
,
history(不建议使用 )
history
代表浏览器的历史记录,
history.back() //后退
history.forward() //前进
操作DOM对象(重点)
核心
浏览器网页就是一个 Dom 树形结构(与 div 包围的标签差不多),
- 更新 dom 节点
- 遍历 dom 节点
- 删除 dom 节点
- 添加 dom 节点
要操作一个 dom 节点,就必须先获得这个 dom 节点,
获得节点
<div>
<h1>标题一</h1>
<p id='p1'>p1</p>
<p class='p2'>p2</p>
</div>
<script>
//对应css选择器
var h1 = document.getElementByTagName('h1'); //这里就是获取到了这个dom节点
var p1 = document.getElementById('p1');
var p2 = document.getElementByClassName('p2');
var father = document.getElementById('father');
var childrens = father.children;// 获取父节点下的所有子节点
var childrens = father.children[index]; //获取其中一个节点
//father.firstchild 获取父节点的第一个子节点
//father.lostchild 获取父节点的最后一个子节点
</script>
这是原生代码,之后都用 jQuery,
更新节点
<div id="id1">
</div>
<script>
var id1 = document.getElementById('id1')
</script>
//操作文本
id1.innerText = '123' //innerText方法修改文本内容
id1.innerHTML = '<strong>123</strong>' //innerHTML解析HTML超文本的 可以修改id的样式
//操作css
id1.style.color = 'red' //style.什么:style方法修改css样式,即可以在js里操作修改样式
id1.style.padding = '2em' //属性使用字符串包裹
删除节点
删除节点的步骤: 先获取父节点,通过父节点删除自己,
<div id="father">
<h1>标题一</h1>
<p id='p1'>p1</p>
<p class='p2'>p2</p>
</div>
<script>
var self = document.getElementById('p1');
var father = p1.parentElement; //找到p1的父节点
father.removeChild(self) //通过父节点使用removechild删掉自己(只有标记为id选择器的节点才可以删除)
//删除是一个动态的过程:
father.removeChild(father.children[0])
father.removeChild(father.children[1])
father.removeChild(father.children[2])
</script>
注意:删除多个节点的时候,children 是在时刻变化的,删除节点的时候一定要注意。
插入节点
我们获得了某个 dom 节点,假设这个 dom 节点是空的,我们通过 innerHTML 就可以增加一个元素了,但是如果这个 dom 节点已经存在元素,就不能这么干了,因为会发生覆盖,这个时候就使用追加节点的方法:
<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'); //获取想要加入的父节点
list.appendChild(js); //在list节点下追加子节点
</script>
创建一个新的标签
<script>
var js = document.getElementById('js');//已经存在的节点
var list = document.getElementById('list');
//通过JS创建一个新的节点
var newP = document.creatElement('p');//创建一个p标签
newP.id = 'newP';
newP.innerText = 'Hello,idiot';
//创建一个标签节点
var myScript = document.creatElement('script');
myScript.setAttribute('type','text/javascript');
//可以创建一个style标签
var myStyle = document.creatElement('style');//创建了一个空style标签
myStyle.setAttribute('type','text/css');
myStyle.innerHTML = 'body{background-color:chartreuse;}';//设置标签内容
document.getElementByTagName('head')[0].appendChild(myStyle);
</script>
在前面插入节点:insertBefore
var ee = document. getElementById('ee');
var js = document . getElementById('js');
var list = document . getElementById('list');
//要包含的节点. insertBefore(newNode, targetNode)
list.insertBefore(js,ee); //在list节点中(list是父节点),在ee节点前加入目标节点js
操作表单
表单 form
- 文本框
<input type=text>
- 下拉框
<select></select>
- 单选框
<input type=radio>
- 多选框
<input type=checkbox>
- 隐藏框
<input type=hidden>
- 密码框
passwd
获取表单信息
<body>
<form action='#' method="post">
//文本框
<p>
<span>用户名:</span>
<input type="text" id="username">
</p>
//单选框
<p>
<span>性别</span>
<input type="radio" name="sex" value="man" id="boy">男
<input type="radio" name="sex" value="women" id="girl">女
</p>
</form>
</body>
<script>
var input_text = document.getElementById('username';)
//得到文本框的值
input_text.value
//修改文本框的值
input_text.value='123'
var boy_radio = document.getElementById('boy';)
var girl_radio = document.getElementById('girl')
//对于单选框、多选课等固定的value,boy_radio.value只能去到当前的值
boy_radio.checked; //看返回的结果,是否为true,如果为true则被选中
boy_radio.checked=true; //赋值
</script>
提交表单
iframe
通过一个隐藏的 iframe
可实现不刷新页面进行提交表单,form
表单的 target
设置为 iframe
的 name
名称,form
提交表单给当前页面的 iframe
, 则不会刷新页面,
<form action="#" method="post" target="t_i">
<input type="text" name="name"/>
</form>
<iframe name="t_i" style="display:none"></iframe>
submit
一般表单提交通过 type=submit
实现,input type="submit"
,浏览器显示为 button
按钮,通过点击这个按钮提交表单数据跳转到某个页面,
<form action="#" method="post">
<input type="text" name="name"/>
<input type="submit" value="提交">
</form>
submit()
js 事件触发表单提交,通过 button
、链接等触发事件,
<form id="form" action="#" method="post">
<input type="text" name="name"/>
</form>
<script>
<!--js-->
document.getElementById("form").submit();
<!--jQuery-->
$("#form").submit();
</script>
ajax
采用 ajax 异步方式,通过 js 获取 form
中所有 input
、select
等组件的值,将这些值组成 Json 格式,通过异步的方式与服务器端进行交互,
一般将表单数据传送给服务器端,服务器端处理数据并返回结果信息等,
<form id="form" method="post">
<input type="text" name="name" id="name"/>
</form>
<script>
var params = {"name", $("#name").val()}
$.ajax({
type: "POST",
url: "#",
data: params,
dataType : "json",
success: function(msg){
}
});
</script>
一般配合后端的 @ResponseBody
和 @RequestBody
使用,或者是 @RestController
这样该类里面所有的方法都只会返回 json 字符串了,不用再每一个方法上都添加 @ResponseBody
了;
同时这里要注意的是,不能使用 dataType: "json"
,不然会报 parsererror
的错误,因为 dataType: "json"
会试图将 controller 的返回值解析成 JSON ,但当返回值是一个字符串或者其他值时,它并不是一个真正的 JSON,解析器会解析失败的!
ajax 请求中还要一个重要的参数:contentType: "application/json"
,表示传入参数的格式,一般会在后面加一个 charset=utf-8
,减少乱码。
XHR
AJAX 使用的 XMLHttpRequest
的对象与服务器通信。让我们尝试通过下面显示的图像了解 AJAX 的流程或 AJAX 的工作原理。
正如在上面的示例中所看到的,XMLHttpRequest
对象起着重要作用。
- 用户从 UI 发送请求,JavaScript 中调用
XMLHttpRequest
对象。 - HTTP 请求由
XMLHttpRequest
对象发送到服务器。 - 服务器使用 JSP,PHP,Servlet,ASP.net 等与数据库交互。
- 检索数据。
- 服务器将 XML 数据或 JSON 数据发送到 XMLHttpRequest 回调函数。
- HTML 和 CSS 数据显示在浏览器上。
<script>
var money = $("#money").val();
var XHR = new XMLHttpRequest();
var FD = new FormData();
FD.append("money",money);
XHR.open('POST', "#");
XHR.send(FD);
</script>
后记
掌握了这篇博文的内容后,完全能够胜任一般的 JS 开发,要想更进一步,则需要自己继续钻研,加油,骚年!