JavaScript快速入门
详情百度百科
注意：简介背景历史百度可查
百度科.
1. 什么是javaScript
- javascript 简称 js
- javascript是一门世界上最流行的脚本语言
- 一个合格的java程序员必须精通javaScript
2.快速入门
2.1.js引入方法
遵循就近原则
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--外部引入-->
<script src="../resouress/jss/js01.js"></script>
<!--内部引入-->
<script>
alert(234434)
</script>
</head>
<body>
</body>
</html>
2.2. javaScript 的基本语法入门
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
/*数据类型
* 不用管其他类型var代表所有的类型.
* 格式： var 变量名=字面值；
* */
var i=23;
var name="小系";
/*
* if判断
* */
if(3>4){
alert("你好");
}else{
alert(123)
console.log(name);
}
</script>
</head>
<body>
</body>
</html>
几个浏览器用法
2.3.数据类型
数值，文本，图形，音频。视频。。。。。
变量
变量名不能用数字开头，和#，中文其他都可以
number
js不分大小和整数，Number
123 //整数
12.32 //浮点数
1.234の //科学计数法
-99 //负数
NaN // not a number
Infinity //表示无线大
字符串
‘abc’ “abc”
布尔值
逻辑运算
&& 两个都为真，则都为真
||| 一个为真 ，结果为真
！ 真即假，假既真。
比较运算符！！！重要
=
== 等于（类型不一样，值不一样，也会判断为true）
=== 绝对等于 （类型，值一样，结果为true）
这时js的一个缺陷。
浮点型问题
console.log((1/3)===(1-2/3))
结果为：false
尽量使用浮点型进行运算，可以精度缺失
一般用这样判断
console.log(Math.abs(1/3-(1-2/3))<0.000000001);
null和undefined
- null空
- undefined 未定义
数组
java中必须是同类型的对象，而js不需要这样
var dd=[1,2,4,5,null,"faiff",fda1];
new Array(1,2,"faiff")
如果下标越界，报错
undefined
对象
对象用大括号，数组用中括号
每个属性用逗号隔开，最后一个不用
var person={
name: "带哦",
age: 3,
tags:['hs','java','wenb']
}
获取值的方式
person.name
"带哦"
person.age
3
person.tags
(3) ["hs", "java", "wenb"]
2.4.严格检查模式
将idea设置es6模式。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--
使用检查格式前提是：将idea设置es6模式
'use strict' 必须写在第一行，严格检查模式，预防JavaScript的随意性导致产生的一些问题
局部变量建议使用let 去定义
var一般定义全局变量。
-->
<script>
'use strict'
let i=4
</script>
</head>
<body>
</body>
</html>
3.数据类型
3.1 字符串
- 正常字符串我们用单引号和双引号包括
- 注意转义字符\
\'
\n
\t
\u4e3d \u#### Unicode 字符x
\x41 Ascll字符
- 多行字符串编写
var msg=
`hello
dfnoa
fao
的那·
- 模板字符串
let name="fnoda";
let age=3;
let msg='你大姐${name}'；
- 字符串长度
console.log(str.length)
- 字符串的可变性，不可变
7. 大小写转换
//注意这是方法，不是属性
student.toUppercase()
student.toLowercase()
- 获取自指定的下标 student.indexOF(‘t’)
- 截取substring很重要
数组
Array可以包含任意的数据类型
var arr=[2,4,4,2]
- 长度
arr.length
和字符串不同，数组可以赋值。
注意：加入给arr.length赋值，数组过小就会·发生，数据丢失
- indexOf ，通过元素获得下标索引
arr.indexof(2)
- slice() 截取Array的一部分，返回一个新数组，类似于subString
4.插入数据
push 压入到数组尾部一个数据
pop 从数组尾部弹出一个值
unshift 压入到数组头部一个数据
shift 从数组头部弹出一个值
- 排序sort
(3) ["B", "C", "A"]
nn.sort()
(3) ["A", "B", "C"]
- 元素反转
(3) ["A", "B", "C"]
nn.reverse()
(3) ["C", "B", "A"]
- concat()
nn.concat([1,4,5])
(6) ["C", "B", "A", 1, 4, 5]
nn
(3) ["C", "B", "A"]
注意：这一并没有修改数据，而是返回一个新数组。
- 连接符join
nn.join('-')
"C-B-A"
- 多维数组·
var mm=[[1,4],[2,4]];
undefined
mm[1][1]
4
3.2.对象
js中的对象以{…},键值队的属性
var 对象名 = {
属性名: 属性值,
属性名: 属性值,
属性名: 属性值
}
var 对象名 = {
键: 值,
键: 值,
键: 值
}
var 对象名 = {
name: "fdnao",
age: 23,
:dd 34
}
javaScript 中的键都是字符串，值是任意对象。
- 对象赋值
var mk={name:"faodf",age:23};
mk.name="小大";
"小大"
mk
{name: "小大", age: 23}
- 使用一个不存在的属性，不会报错
mk.daj
undefined
- 动态的删减属性，通过delete删除对象的属性。
delete mk.age
true
4.动态的添加，直接给新的属性添加值即可。
mk.age="age"
"age"
mk
{name: "小大", age: "age"}
- 判断属性是否在对象中
'age' in mk
true
'toString' in mk
true
mk中没有toString为什么也输出true？
因为继承了他父类的方法。
- 判断一个属性是否这个对象自身拥有的。
mk.hasOwnProperty('age')
true
mk.hasOwnProperty('toString')
false
3.3.流程控制
if判断
var age=4;
if(age>3){
aler("你好")
}else if（age<5）{
alert("我不好")；
}else{
alert（“放大”）
}
while循环，避免程序死循环
while(age<100){
age=age+1;
console.log(age);
}
for循环
if(let i=0;i<100; i++){
console.log(i);
}
do{
age= age+1;
console.log(age)
}while(age<100)
forEach循环
5.1的特性
var age=[12,3,4,56,64,2,3];
age.forEach(function(value){
console.log(value);
})
for …in
age.name="3234"//早期的漏洞，下标变成name
for(var num in age){
if(age.hasOwnProperty(num)){
//其中num是下标
console.log(age[num]);
}
}
3.4 Map和Set
这时Es6的新特性
Map
Es6 中有一个Map
用于解决例如：
//学生
var name=["daif","fd","dfa",];
var scires=[100,23,43,13];
这种连表查询，非常麻烦。所以Es6出了一个map集合。
var map=new Map([['tef',100],['kn',59]]);
var name=map.get('tef');//根据key获取value
map.set('kkd',1234); //传值
map.delete("kkd");
Set是一个无序不重复的集合
var set=new Set([4,5,7,2,]);
set.delet(1);//删除
set.add(5);//增加
set.has(3);//是否包含某个元素
3.5 iterator（迭代器）
Es6的新特性
用迭代器，遍历数组
遍历数组
var arr=[3,4,5];
for(let x of arr ){
console.log(x);
}
注意：这里的迭代器和in不同。in的x数下标，而of的x是值。
遍历map集合
var map =new Map([['kjd',23],['jk',34],['jfd',54]]);
for(let x of map){
consoie.log(x);
}
遍历Set集合
var set=new Set([2,4,5,6]);
for(let x of set){
console.log(x);
}
4. 函数
4.1 定义函数
函数和java中的方法差不多
定义方式一
function abs(x){
if(x>=0){
return x;
}else{
retrun -x;
}
}
一旦执行到retrun代表函数结束，返回结果！
如果没有执行retrun，函数执行完也会返回结果，结果就是undefined。
定义方式二
var abs=function(x){
if(x>=0){
return x;
}else{
retrun -x;
}
}
function(x){…}是一个匿名函数，但可以把结果赋值给abs，通过abs就可以调用函数。
调用函数
abs(10)
参数问题
- JavaScript可以传递任意个参数。
- 传参进来是否存在的问题？
- 假设不存在参数，如何规避？
var abs=function(x){
//手动抛出异常来判断问题
if(typeof x!=='number'){
throw 'not a Number';
}
if(x>=0){
return x;
}else{
retrun -x;
}
}
arguments是一个js免费赠送的关键字。
可以获取所有的参数。
function aa(x){
arguments.length//获取所有参数的长度
if(var i=0; i<arguments.length;i++){
console.log(arguments[i]);//获取所有参数的值。
}
}
rest
获取除了以定义的参数之外的所有值
以前
function(arguments.length>2){
for(var i=2; i<arguments.length; i++){
//。。
}
}
Es6引入了新特性，rest
function aaa(a,b,...rest){
console.log("a="+a);
console.log("b="+b);
console.log(rest);
}
4.2变量的作用域
在javascript中，var的定义是有作用域的。
假设在函数中定义，函数外不能使用。
function aa(){
var k=1;
}
x=x+2; //会报Umcaught ReferenceError：x is not defined
如果两个函数使用相同的变量名，只要在函数内部，就不冲突。
function aa(){
var k=1;
}
function da(){
var k=1;
}
内部函数可以访问外部函数的成员，反之则不行
function aa(){
var k=1;
function da(){
var d=k+1;
}
var z=d+1; //Uncaught
}
如果javascript的函数中有变量重名，则会从内到外查找。最后用函数自身的。
var x=x+y;
console.log(x);
var y=1;
结果：xundefined
说明: js执行引擎，自动提升了y的声明，却不赋值。
所以所有的变量定义最好写在函数顶部。
规范
function dd(){
var x=1,
y=x+1;
m,d,a;
}
全局函数
定义在外部的，和java一样。这就不说了·。
全局对象window
window.alert(nfdf);
var kk=window.alert();
window.alert(dfaju);
javascript中实际上只有一个全局作用域，任何变量（函数也可是为变量）。假设如果没有在函数范围内找到，就会从外向内。如果全局作用域没找到。就会报RefrenceError。
问题：由于我们所有的全局变量度绑定在window上，如果不同js文件，使用相同的全局变量，会发生冲突？
如何解决=
//唯一一个全局变量
var yinbang={}；
//定义全局变量
yinbang.name="fdaoi";
yinbang.add=function(a,b){
return a+b;
}
把自己的代码全部放入自己定义的唯一空间名字中，降低全局命名冲突的问题？
局部变量 let
function aaa(){
for(var i=0; i<100; i++){
console.log(i);
}
console.log(i+1)
}
结果最后一个输出101，则i跳出for循环。
为了解决这个问题改var为let，就不会跳出。
常量
在Es6之前，这么定义常量，只有全部大写字母命名就是常量，建议不要修改这样的值
var PI='3.43';
console.log(PI);
PI='232'; //可改变这个值
console.log(PI);
在Es6中引入const
const PI='232.4';//只读变量
console.log(PI);
PI='4335'; //TypeError:Assignment to constant variable.
console.log(PI);
4.3 定义方法
方法就是，将函数放到对象里；对象里只有：属性和方法·。
var do={
//属性
name:'动画'，
bitrh：2000，
//方法
age：function(){
//今年-出生
var noe =new Date().getFullYear();
retrun noe-this.bitrh;
}
//调用
do.name
do.age()
}
this.代表什么？ 拆开上面的代码看看。
function getAge(){
//今年-出生
var noe =new Date().getFullYear();
retrun noe-this.bitrh;
}
var do={
//属性
name:'动画'，
bitrh：2000，
//方法
age：getAge
//调用
do.name
do.age()
}
this.指向谁使用他，do.使用·能成功，是因为do中有bitrh属性。而单独调用getAge(),是window在使用，而window中没有bitrh这个属性。
在java中this是无法指向的，是以默认指向调用它的那个对象，
而在js中有一个apply可以控制this指向。
getAge.apply(do,[]);//this指向do，参数为空
5.内部对象
5.1Date
标准对象
typeof可以判断类型
typeof 123
"number"
typeof '123'
"string"
typeof true
"boolean"
typeof NaN
"number"
typeof []
"object"
typeof {}
"object"
typeof Math.abs
"function"
typeof undefined
"undefined"
Date时间
var nod=new Date();
nod.getFullYear();
nod.getMonth();
nod.getDate();
nod.getDay();
nod.getHours();
nod.getMinutes();
nod.getSeconds()
nod.getTime(); //时间戳
console.log(new Date(nod.getTime())); //时间搓转换时间
转换
now =new Date(1578106175991);
sat Jan 04 2020 10:49:35 GMT+0800（中国标准时间）
now.toLocaleString//这是一个方式，不是一个属性！
f toLocaleString()
"2020/1/4 上午10：39：39"
now.toGMTStting()
"Sat. 04 Jan 2020 02:49:35 GMT"
5.2JSON
JSON是什么？
链接: 百度百科.
- JSON(JavaScript Object Notation, JS 对象简谱) 是一种轻量级的数据交换格式。
- 简洁和清晰的层次结构使得 JSON 成为理想的数据交换语言。
- 易于人阅读和编写，同时也易于机器解析和生成，并有效地提升网络传输效率。
Stringify 对象转换JSON
var user={
name:"qinbnd",
age:3,
sex:'‘男’
}
var jsonUser= JSON.setringify(user);
parse JOSN转换对象
var obj=JSON.parse('JSON字符串');
json和对象的区别：一个是对象，一个是字符串
var user={name:"qinbnd",age:3,sex:'‘男’}
var user='{"name:":"qinbnd","age":"3","sex":'‘男’}'
6.面向对象编程
6.1 什么是面向对象？
Javascript，java，c# 。。。面向对象？
- 类：模板 原型对象
- 对象：具体的实例
原型
javaScript中的原型和java中的继承父类差不多
var Student ={
name: "的那",
age：4，
run：function(){
console.log(this.name+"run....");
}
};
var xid={
name:"dfao"
};
xid._proto_=Student;
Class继承
class关键字实在Es6引入的。
定义一个类，属性，方法。
//定义一个学生的类
class Student{
//相对于java中的构造器
constructor(name){
this.name=name;
}
hello(){
alert("hello");
}
}
var xiao=new Student("xiaomo");
继承
//定义一个学生的类
class Student{
//相对于java中的构造器
constructor(name){
this.name=name;
}
hello(){
alert("hello");
}
}
class ddjj extends Student{
constructor(name,age) {
super(name);
this.age=age;
}
jdd(){
alert("fdoa");
}
}
var xiao=new Student("xiaomo");
var ddjj=new ddjj("xiaomo",2);
原型链
_proto _;
7. 操作BOM对象（重点）
浏览器介绍
BOM：Browser Object Model 是浏览器对象模型，浏览器对象模型提供了独立与内容的、可以与浏览器窗口进行互动的对象结构，BOM由多个对象构成，其中代表浏览器窗口的window对象是BOM的顶层对象，其他对象都是该对象的子对象。
avascript和浏览器关系?J
avaScript诞生就是为了能够让他在浏览器中运行
BOM :浏览器对象模型.
- IE 6-11.
- Chrome
- Safari
- FireFox
window
window代表浏览器窗口
调试浏览器高度和宽度
navigator
navigator ，封装了浏览器的信息
navigator.appName
"Netscape"
navigator.appVersion
"5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/86.0.4240.193 Safari/537.36"
navigator.userActivation
UserActivation {hasBeenActive: true, isActive: true}
location(重要)
location代表当前页面的URL信息
host: "www.baidu.com" //主机
href: "https://www.baidu.com/?tn=40020637_oem_dg" //网址
protocol: "https:" //协议
reload: ƒ reload() //刷新网页
//设置新的地址
location.assign('网址');
document
document代表当前的页面, HTML DOM文档树
ocument.title
"百度一下，你就知道"
document.title='都方法'
"都方法"
获取具体的文档树节点
<dl id="app">
<dt>java</dt>
<dd>javaSE</dd>
<dd>javaEE</dd>
</dl>
<script>
var dl=document.getElementById('app');
</script>
获取cookie
document.cookie
劫持cookie
恶意人员获取你的cookie，隐私就没了。
cookie包含你的个人信息，举个例：
登录淘宝，天猫也会登录。因为天猫获取cokkie信息。
history
history代表浏览器的历史纪录
history.back();//后退
history。forward() //前进
window 对象，是 JS 的最顶层对象，其他的 BOM 对象都是 window 对象的属性；
document 对象，文档对象；
location 对象，浏览器当前URL信息；
navigator 对象，浏览器本身信息；
screen 对象，客户端屏幕信息；
history 对象，浏览器访问历史信息；
8.操作DOM对象（重点）
DOM :文档对象模型
核心
整个浏览器就是一个Dom树型结构
head body p a div都是Dom的节点
- 更新： 更新Dom节点。例如：给节点加个属性。
- 遍历dom节点：得到Dom节点 例如：Bom中有，往上看。
- 删除：删除一个Dom节点
- 添加：添加一个Dom节点
要操作一个dom节点，就必须先获得这个Dom节点
获取节点的几种方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="mmd">
<h1>小</h1>
<p id="kk">p1</p>
<p class="mm">p2</p>
</div>
<script>
var d1=document.getElementsByName('h1');//标签获取
var h2=document.getElementById('kk');//id获取
var h3=document.getElementsByClassName('mm');//class获取
var h4=document.getElementById('mmd');
var h5= h4.children;//获取父节点下的字节点
//h4.firstChildz
//h4.lastChild
</script>
</body>
</html>
更新节点
操作文本
mmd.innerText='1234'
"1234"
mmd.innerHTML='<h1>345</h1>'
"<h1>345</h1>"
操作css
//可以设置个种样式
mmd.style.color='red'
删除节点
删除节点的操作：先找到父节点，在通过父节点删除自己。
<div id="mmd">
<h1>小</h1>
<p id="kk">p1</p>
<p class="mm">p2</p>
</div>
<script>
var h4=document.getElementById('kk');
var hd=h4.parentElement;
hd.removeChild(h4)
hd.removeChild(hd.children[0]);
</script>
注意：删除多个节点的时候，Childrem是在时刻变化的，删除节点的时候一定要注意
插入节点
我们获得了某个Dom节点,假设这个dom节点是空的,我们通过innerHTML就可以增加一个元素,了,但是这个DOM节点已经存在元素了,我们就不能这么干了!
会产生覆盖。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<p id="kd">mdj</p>
<div id="mmd">
<a>fkdo</a>
</div>
<script>
var mmd=document.getElementById('mmd');
var kd=document.getElementById('kd');
mmd.append(kd);
</script>
</body>
</html>
创建一个标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<p id="kd">mdj</p>
<div id="mmd">
<a>fkdo</a>
</div>
<script>
var mmd=document.getElementById('mmd');
var kd=document.getElementById('kd');
mmd.append(kd);
//创建一个标签
var p= document.createElement('p');
p.innerText='校门';
mmd.append(p);
//创建一个style标签
var mstyle= document.createElement('style');
mstyle.setAttribute('type','text/css');
mstyle.innerHTML='body{background:radial-gradient(black, transparent)}';
document.getElementsByTagName('head')[0].appendChild(mstyle);
</script>
</body>
</html>
insert
insertBefore(节点，被插入的节点)；
扫一扫
1966
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
