Javascript入门
Javascript
弱类型动态语言
1、js入门
1、内部标签
<script>
alert("helloworld")
</script>
2、外部引入
<script type="text/javascript" src="js/script.js"></script>
2、数据类型
NaN
-
not a number
-
NaN===NaN(false) NaN与任何数都不相同
-
isNaN(NaN)才能为true
Infinity
- 无限大
比较运算符
== 类型不一样，数值一样，会判断true
=== 数值和类型相同，才为true
注：在比较运算中尽量不要使用浮点数，数据有偏差，相同浮点数比较可能为false
undefined：
- 未定义
数组
var array=[1,2,3,4,5,'teds',null,undefined];
对象
js中的对象中的元素以键值对的形式存储，最后一个属性不加逗号
var person={
name:"js",
age:18,
arr: [1,2,3,4,5,null,true],
allName : function (){
for(let i=0;i<this.arr.length;i++){
console.log(this.arr[i]);
}
}
};
添加
person.birthdy //添加属性，得到一个undefined值
判断某属性是否在对象中
'age' in person
3、严格检查模式
'use strict' //默认放在最前面，才能有效
i = 1;//为申明变量默认为window的全局变量
let i=1;//局部变量推荐有let去声明
4、字符串
新特性：
var name='javascript';
var msg='你好'+${name};
5、循环
foreach：
var array=[1,2,3,4,5,'teds',null,undefined];
array.forEach(function(value){
console.log(value);
});
for in:
var array=[1,2,3,4,5,'teds',null,undefined];
for(let i in array){//得到的是数组的下标
console.log(array[i]);
}
for of:迭代器
var array=[1,2,3,4,5,'teds',null,undefined];
for(let num of array){ //得到的是数组的元素
console.log(num);
}
6、Map和Set
Map：
var map =new Map([['tom',100],['jack',99],['alice',18]]);
var name=map.get('tom');
map.set('js',9898);//mao添加
console.log(name);
Set：
var set=new Set([1,2,1,3,4,1,2]);
set.add(1);
set.delete(4);
console.log(set);
7、函数
函数名可以重新赋值
var func=function(x){
console.log(x);
}
当传入多个参数是，可以采用arguments关键字，但是它会将原来的参数也添加到arguments中
var func=function(x){
console.log(x);
for(let i=0;i<arguments.length;i++){
console.log(arguments[i]);
}
}
rest关键字：获取除了原来参数外的所有参数
function restTest(a,b,...rest){
console.log(a);
console.log(b);
console.log(rest);
}
8、变量的作用域
function test(){
var x='x'+y;//y变量在声明前被使用
console.log(x);
var y='y';//y变量的声明
}
结果：xundefined
js的执行引擎，自动的提升了y变量的声明
注：建议将所有的变量都声明在最前面
全局变量
所有的全局变量和函数都是绑定在window上面
window.alert()
let变量
for(var i=0;i<10;i++){
console.log(i);
}
console.log(i) //输出10
var i不是一个局部变量，var声明变量会提升变量的作用域
for(let i=0;i<10;i++){
console.log(i);
}
console.log(i)//i is not defined
注：局部变量用let声明，防止作用域的提升
apply
apply可以控制函数的指向的对象函数
var person={
name:"js",
age:18,
arr: [1,2,3,4,5,null,true],
allName : getName
};
function getName(){
for(let i=0;i<this.arr.length;i++){
console.log(this.arr[i]);
}
}
getName.apply(person,[]);
9、Date对象
var now=new Date();
now.getFullYear();//年
now.getMonth();//月
now.getDate();//日
now.getDay();//星期
now.getHours();//小时
now.getMinutes();//
now.getSeconds();
now.getMilliseconds();
now.getTime();//用number表示的时间戳
console.log(new Date(1601115102786));
10、JSON对象
JSON是JavaScript Object Notation的缩写，它是一种数据交换格式。JSON是JavaScript Object Notation的缩写，它是一种数据交换格式。
格式：
-
对象用{}
-
数组用[]
-
所有的键值对都是用key：value
var user={
name:"javascript",
age:50,
nums:123142
}
//将对象转化为json字符串
var jsonUser=JSON.stringify(user);
console.log(jsonUser);//{"name":"javascript","age":50,"nums":123142}
//将json字符串转化为对象
var obj=JSON.parse('{"name":"java","age":"123","sex":"boy"}');
console.log(obj);//{name: "java", age: "123", sex: "boy"}
11、面向对象编程
原型继承：
var user={
name:'小红',
age:15,
sex:'girl',
run:function(){
console.log(this.name+" is a "+this.age+" "+this.sex);
}
}
var xiaoming={
name:'xiaoming',
age:17,
sex:'boy'
}
//原型继承
xiaoming.__proto__=user;
class关键字
class User{
constructor(name,age,sex){
this.name=name;
this.age=age;
this.sex=sex;
}
run(){
console.log(this.name+" is a "+this.age+" "+this.sex);
}
}
class xiaoqiang extends User{
constructor(name,age,sex){
super(name,age,sex);
}
}
var xq1=new xiaoqiang("xiaoqiang",18,'boy');
原型链：
object.__ proto __=object
12、BOM
浏览器对象模型
window
window.alert(1)
undefined
window.innerHeight
318
window.outerHeight
824
screen
screen.height
864
screen.width
1536
loaction 当前网页的URL信息
location
Location {href: "file:///D:/Web/javascript/4.BOM%E5%AF%B9%E8%B1%A1/1.BOM.html", ancestorOrigins: DOMStringList, origin: "file://", protocol: "file:", host: "", …}
reload: ƒ reload()//重新加载
document 当前页面的文档
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
alert("js弹窗");
console.log("控制层输出");
//向文档中写入实例
document.write("<h1>This is a heading</h1>");
document.write("<p>This is a paragraph</p>");
function myFunction()
{
document.getElementById("demo").innerHTML="My First JavaScript Function";
}
</script>
</head>
<body>
<button type="button" onclick="alert('welcome')">点击这里</button>
<h1>My Web Page</h1>
<p id="demo">A Paragraph</p>
<button type="button" onclick="myFunction()">Try it</button>
<button onclick="myFunction()">点击这里</button>
<script>
function myFunction()
{
//重新写入会导致整个文档被覆盖
document.write("糟糕！文档消失了。");
}
</script>
</body>
</html>
document.cookie
- 能够获得你的cookie
- 通过点击钓鱼网站，用一些恶意的js脚本，来获取你的信息
history
history.forward()//前进
history.back()//后退
13、DOM
文本对象模型
- 浏览器网页就是一个Dom树形结构
获得DOM结点
var h1=document.getElementsByTagName('h1');
var p1=document.getElementsByClassName('p1');
var p2=document.getElementById('p2');
var father=document.getElementById('father');
var childrens=father.children;
//father.lastchildren
操作DOM结点：
更新结点：
div1.innerText=123
123
div1.innerHTML='<strong>12312414</strong>'
"<strong>12312414</strong>"
div1.style.color='red'
"red"
div1.style.fontSize='5em'
"5em"
遍历：
删除：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="father">
<h1>h1</h1>
<p id="p1">p标签</p>
<p class="p2">p2</p>
</div>
<script>
var self=document.getElementById('p1');
var father=self.parentElement;
father.removeChild(self);
</script>
</body>
</html>
删除结点时，结点个数时动态变化的
插入：
<p id="add">添加标签</p>
<div id="father">
<h1>h1</h1>
<p id="p1">p标签</p>
<p class="p2">p2</p>
</div>
<script>
var add=document.getElementById('add');
var father=document.getElementById('father');
father.append(add);
</script>
效果：
新建标签：
<p id="add">添加标签</p>
<div id="father">
<h1>h1</h1>
<p id="p1">p标签</p>
<p class="p2">p2</p>
</div>
<script>
var father=document.getElementById('father');
//新建标签
var p=document.createElement('p');
p.id='newP';
p.innerText='我新建p标签';
father.append(p);
//创建标签
var newScript=document.createElement('script');
m=newScript.setAttribute('type','text/javascript');
//设置背景属性
var body=document.getElementsByTagName('body');
body[0].style.background='red';
</script>
注：document.getElementbyXX通过类名和标签名获得的标签是数组，只有通过id名的才是唯一的
insert:
<p id="add">添加标签</p>
<div id="father">
<h1>h1</h1>
<p id="p1">p标签</p>
<p class="p2">p2</p>
</div>
<script>
var add=document.getElementById('add');
var father=document.getElementById('father');
var p1=document.getElementById('p1');
//insert
father.insertBefore(add,p1)
</script>
14、操作表单
<form action="post">
<p>
<span>用户名：</span><input type="text" id="username">
</p>
<p>
<span>性别:</span>
<span>男</span><input type="radio" name="sex" id="boy">
<span>女</span><input type="radio" name="sex" id="girl">
</p>
</form>
<script>
var username=document.getElementById('username');
var boy=document.getElementById('boy');
var girl=document.getElementById('girl');
username.value='asdasd';
//对于单选框和多选框，不能通过boy.value去获得当前的选择
//只能通过boy.check来判断选择
boy.check=true;
</script>
提交表单：
md5加密
- 单向加密，无法解密，表单提交后的密码只能通过数据库中的密码md5加密后进行比较
- md5(pwd+'特定字符串')等方式，保证密码的安全性
<script src="https://cdn.bootcss.com/blueimp-md5/2.10.0/js/md5.min.js"></script>
粗略加密（不推荐）：
- 在提交的瞬间，密码框内文本被加长，可以看出被加密了
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
//导入md5加密
<script src="https://cdn.bootcss.com/blueimp-md5/2.10.0/js/md5.min.js"></script>
</head>
<body>
<form action="https://www.baidu.com/" action="post">
<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" onclick="aaa()">提交</button>
</form>
<script>
function aaa(){
var username=document.getElementById('username');
var password=document.getElementById('password');
console.log(username.value);
//md5加密，密码框加长
password.value=md5(password);
console.log(password.value);
}
</script>
</body>
</html>
隐藏域加密（推荐）：
- 隐藏域提交表单，可以看不出加密痕迹
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://cdn.bootcss.com/blueimp-md5/2.10.0/js/md5.min.js"></script>
</head>
<body>
<!-- 验证表单 onsubmit return的是false不提交表单 为true提交表单 -->
<form action="https://www.baidu.com/" action="post" onsubmit="return aaa()">
<p>
<span>用户名：</span><input type="text" id="username" name="username">
</p>
<p>
<span>密码：</span><input type="password" id="input-password" >
</p>
<input type="hidden" id="md5-password" name="password">
<button type="submit" >提交</button>
</form>
<script>
function aaa(){
var username=document.getElementById('username');
var input_pwd=document.getElementById('input-password');
var md5_pwd=document.getElementById('md5-password');
console.log(username.value);
md5_pwd.value=md5(input_pwd);
console.log(md5_pwd.value);
//可以进行验证表单的准确性，来确保是否要提交，跳转页面
return false;
}
</script>
</body>
</html>
15、jQuery
工具库，封装js函数，是以前操作DOM对象的方式变得简便
<!-- 在线cdn -->
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.10.0/jquery.js"></script>
语法
$(selector).action()
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 在线cdn
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.10.0/jquery.js"></script> -->
<script src="lib/jquery-3.5.1.min.js"></script>
</head>
<body>
<a href="#" id="text-jQuery">点我</a>
<script>
$('#text-jQuery').click(function(){
alert('12313');
})
</script>
</body>
</html>
选择器
<div>div1</div>
<div class="div2">div2</div>
<div id="div3">div3</div>
<script>
$('div').click();//标签选择器
$('.div2').click();//类选择器
$('#di3').click();//id选择器
</script>
事件
- 鼠标移动，键盘输入，等事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="lib/jquery-3.5.1.min.js"></script>
<style>
#divMove{
width: 500px;
height: 500px;
border: red solid 1px;
}
</style>
</head>
<body>
mouse:<span id="mouseMove"></span>
<div id="divMove">
在这里移动鼠标
</div>
<script>
//$(document.ready(){}) 网页元素加载完毕后，响应事件
$(function(){
$('#divMove').mousemove(function(e){
$('#mouseMove').text('x:'+e.pageX+'y:'+e.pageY);
})
})
</script>
</body>
</html>
操作DOM结点
<ul id="text-ul">
<li class="js">javascript</li>
<li name="python">python</li>
</ul>
<script>
$('#text-ul li[name=python]').text('python1')
$('#text-ul li[class=js]').html('<strong>js</strong>')
</script>
CSS
$('#text-ul li[name=python]').css({'color':'red',"background": "blue"});
元素的隐藏和显示
-
本质：display：none
-
hide和show
$('#text-ul li[class=js]').hide();
$('#text-ul li[class=js]').hide();
16、with(不推荐使用)
为逐级的对象访问提供命名空间式的速写方式. 也就是在指定的代码区域, 直接通过节点名称调用对象。
var obj={
a:1,
b:2,
c:3
}
with(obj){
a=3;
b=4;
c=5;
}
使用了 with 语句关联了 obj 对象，这就以为着在 with 代码块内部，每个变量首先被认为是一个局部变量，如果局部变量与 obj 对象的某个属性同名，则这个局部变量会指向 obj 对象属性。
缺点：
- 当with中变量在其他对象中无法找到时，相应变量会提升作用域，变成全局变量
- 使用with语句会大幅度的降低性能，增加网页的加载时间
浙公网安备 33010602011771号