JavaScript快速入门

  • 详情百度百科
  • 1. 什么是javaScript
  • 2.快速入门
    • 2.1.js引入方法
    • 2.2. javaScript 的基本语法入门
    • 2.3.数据类型
    • 2.4.严格检查模式
  • 3.数据类型
    • 3.1 字符串
    • 数组
    • 3.2.对象
    • 3.3.流程控制
    • 3.4 Map和Set
    • 3.5 iterator（迭代器）
  • 4. 函数
    • 4.1 定义函数
    • 4.2变量的作用域
    • 4.3 定义方法
  • 5.内部对象
    • 5.1Date
    • 5.2JSON
  • 6.面向对象编程
    • 6.1 什么是面向对象？
  • 7. 操作BOM对象（重点）
  • 8.操作DOM对象（重点）

详情百度百科

注意：简介背景历史百度可查
百度科.

1. 什么是javaScript

  1. javascript 简称 js
  2. javascript是一门世界上最流行的脚本语言
  3. 一个合格的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 numberInfinity //表示无线大

字符串

‘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 字符串

  1. 正常字符串我们用单引号和双引号包括
  2. 注意转义字符\
\'
\n
\t
\u4e3d \u#### Unicode 字符x
\x41    Ascll字符
  1. 多行字符串编写
 var msg=`hellodfnoafao的那·
  1. 模板字符串
let name="fnoda";let age=3;let msg='你大姐${name}'；
  1. 字符串长度
console.log(str.length)
  1. 字符串的可变性，不可变


7. 大小写转换

//注意这是方法，不是属性
student.toUppercase()
student.toLowercase()
  1. 获取自指定的下标 student.indexOF(‘t’)
  2. 截取substring很重要

数组

Array可以包含任意的数据类型

var arr=[2,4,4,2]
  1. 长度
  arr.length

和字符串不同，数组可以赋值。
注意：加入给arr.length赋值，数组过小就会·发生，数据丢失

  1. indexOf ，通过元素获得下标索引
arr.indexof(2)
  1. slice() 截取Array的一部分，返回一个新数组，类似于subString

4.插入数据

push   压入到数组尾部一个数据
pop   从数组尾部弹出一个值
unshift  压入到数组头部一个数据
shift    从数组头部弹出一个值
  1. 排序sort
(3) ["B", "C", "A"]
nn.sort()
(3) ["A", "B", "C"]
  1. 元素反转
(3) ["A", "B", "C"]
nn.reverse()
(3) ["C", "B", "A"]
  1. concat()
nn.concat([1,4,5])
(6) ["C", "B", "A", 1, 4, 5]
nn
(3) ["C", "B", "A"]

注意：这一并没有修改数据，而是返回一个新数组。

  1. 连接符join
nn.join('-')
"C-B-A"
  1. 多维数组·
 var mm=[[1,4],[2,4]];
undefined
mm[1][1]
4

3.2.对象

js中的对象以{…},键值队的属性

var 对象名 = {属性名: 属性值,属性名: 属性值,属性名: 属性值
}
var 对象名 = {键: 值,键: 值,键: 值
}var 对象名 = {name: "fdnao",age: 23,:dd 34
}

javaScript 中的键都是字符串，值是任意对象。

  1. 对象赋值
var mk={name:"faodf",age:23};
mk.name="小大";
"小大"
mk
{name: "小大", age: 23}
  1. 使用一个不存在的属性，不会报错
mk.daj
undefined
  1. 动态的删减属性，通过delete删除对象的属性。
delete mk.age
true

4.动态的添加，直接给新的属性添加值即可。

mk.age="age"
"age"
mk
{name: "小大", age: "age"}
  1. 判断属性是否在对象中
'age' in mk
true'toString' in mk
true

mk中没有toString为什么也输出true？
因为继承了他父类的方法。

  1. 判断一个属性是否这个对象自身拥有的。
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)

参数问题

  1. JavaScript可以传递任意个参数。
  2. 传参进来是否存在的问题？
  3. 假设不存在参数，如何规避？
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(节点，被插入的节点)；

JavaScript快速入门(1)相关推荐

  1. JavaScript快速入门（四）——JavaScript函数

    函数声明 之前说的三种函数声明中(参见JavaScript快速入门(二)--JavaScript变量),使用Function构造函数的声明方法比较少见,我们暂时不提.function func() { ...

  2. 前端三大技术 HTML、CSS、JavaScript 快速入门手册

    听到前端技术,不少朋友一定会感到有些陌生.但其实,前端,你每天都在接触. 你正在使用的APP,你正在浏览的网页,这些你能看到的界面,都属于前端. 而前端最重要的三大技术,HTML,CSS,JavaSc ...

  3. 狂神JavaScript快速入门学习笔记

    狂神视频地址 1什么是JavaScript JavaScript是一门世界上最流行的脚本语言 2快速入门 2.1 引入JavaScript 1 内部标签 <script>alert('he ...

  4. 3.JavaScript快速入门

    1.什么是JavaScript 1.概述 是一门世界上最流行的脚本语言 Java和 JavaScript 一个合格的后端人员 必须精通JavaScript 2.历史 ECMAScript是JavaSc ...

  5. javaScript快速入门(笔记)

    该笔记大部分搬运B站遇见狂神说的javaScript,顺便把图文合并记录,便于回顾 视频地址:[狂神说Java]JavaWeb入门到实战_哔哩哔哩_bilibili记得三连          目录 1 ...

  6. 2、JavaScript快速入门

    2.1 引入JavaScript 内部标签 <!-- 在script标签内写JavaScript(简称js)代码,代码块可以放在head中,也可以放在body中--> <script ...

  7. 三：JavaScript快速入门(脚本开发方向)

    跳转总目录 文章目录 1.js简介 2.js入门 2.1 变量 介绍 变量的声明 2.2 运算符 2.3 数据类型 3.js判断 4.js循环 for循环 While循环 do while循环 5.j ...

  8. JavaScript 快速入门教程

    文章目录 1.JavaScript 简介 2.JavaScript 用法 2.1.在 `<head>` 或者 `<body>` 的 JavaScript 2.2.外部的 Jav ...

  9. JavaScript快速入门（六）——DOM

    概念扫盲 DOM DOM是 Document Object Model(文档对象模型)的缩写,是W3C(万维网联盟)的标准. DOM 定义了访问 HTML 和 XML 文档的标准: "W3C ...

最新文章

  1. 转: IO设计模式：Reactor和Proactor对比
  2. jsp connection DB
  3. 架构解密：从分布式到微服务
  4. android 触摸屏 不支持 配置,Android触摸屏配置调试
  5. 中文命名之Hibernate 5演示 - 使用注解(annotation)而非xml定义映射
  6. 线段树区间合并--询问某段区间内最长连续上升子序列即最长上升子串
  7. 帮助浏览器、help函数和doc函数 符号表述的数集
  8. Java ActiveMQ 讲解（二）Spring ActiveMQ整合+注解消息监听
  9. 使用reportlab生成条码
  10. Matlab 实现低通/高通/带通滤波器
  11. 三角网导线平差实例_导线平差实例（一）：简易平差
  12. Java游戏编程不完全详解-2（1万2千字吐血推荐）
  13. matlab 植被指数,基于matlab的MOD13A2-NDVI的植被指数重建-SG滤波与质量控制文件
  14. s3cmd配置bucket生命周期
  15. Office Tool Plus 下载使用 365 2021/2019等版本
  16. ubuntu18关不了机
  17. uniapp 图片上传与展示
  18. 如何让novnc/websockify支持tls1.2 (by quqi99)
  19. 使用STM32CubeMX 快速生成 USB HID 工程 - STM32F107VCT6
  20. [PHP响应式营销型万能H5建站系统源码] 免费开源建站利器+可视化自由布局页面

热门文章

  1. 深度学习之 10 卷积神经网络2
  2. 深度学习中的卷积操作
  3. chatgpt对程序员会造成什么影响
  4. Collections.sort()方法给集合排序
  5. 空姐在飞机上碰到的好多好笑的事
  6. 如何进入单用户模式(centos 6.5)
  7. sql dateadd函数_DATEADD SQL函数简介和概述
  8. Python MySQL 回滚 操作
  9. ORA-22858: 数据类型的变更无效
  10. 学会preload和prefetch