2、JavaScript快速入门

2.1 引入JavaScript

内部标签

<!-- 在script标签内写JavaScript(简称js)代码，代码块可以放在head中，也可以放在body中-->
<script>// alert:弹窗alert('Hello,world!');  //注意以分号结尾
</script>

外部引入

hello.js

alert('Hello,world!');

hello.html

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><!-- 外部引入 --><!-- 注意：script标签必须成对出现 --><script src="js/qj.js" type="text/javascript"></script>
</head>
<body><h1>我是标题</h1>
</body>
</html>

2.2 基本语法入门

<!--JavaScript中也要严格区分大小写--><script>//定义变量var score="88";//弹窗alert(score);//在浏览器的控制台打印变量 相当于soutconsole.log(score);</script>

2.3 变量和数据类型

变量

//定义变量 变量类型 变量名 = 变量值;
var name = "jiangjiang";
let age = 18;

number JavaScript中不区分整数和小数

1         //整数1
1.1       //浮点数1.1
1.123e3   //科学计数法
-99       //复数
NaN       //not a number
Infinity  //无限大

字符串

正常的字符串我们使用单引号或者双引号包裹 —— ‘a’ “abc”

注意转义字符

\'      字符串
\n      换行
\t      tab
\u4e2d  Unicode字符
\x41    Ascll字符

多行字符串编写

//tab键上面的 `` 飘
var s = `helloworld你好呀`;

模板字符串

let name = "jinagjiang";
let age = 18;
let  s2 = `你好呀，${age}岁的${name}`;
console.log(s2);

字符串长度

var s3 = "student";console.log(s3.length);
> 7

字符串的可变性不可变

//通过字符串中的字符，获取其对应的下标
console.log(s3.indexOf('s'));
//通过字符串的下标，获取其对应的字符
console.log(s3[0]);
> s
s3[0]= 1;
> 1
console.log(s3);
> student

大小写转换

//注意：这里是方法，不是属性了console.log(s3.toUpperCase());console.log(s3.toLowerCase());

字符串截取

//截取字符串
//从下标0对应的字符截取到最后一个字符
console.log(s3.substring(0));
> student
//从下标0对应的字符截取到下标2对应的字符
//[) 左闭右开 包含前面，不包含后面
console.log(s3.substring(0,2));
> st

布尔值

true false

逻辑运算

与(&&) 或(||) 非(！)

比较运算符（重要）

符号	含义	注意
=	赋值
==	等于（类型不一样，值一样，也会判断为true）	这是一个js的缺陷，坚持不要使用 == 比较
===	绝对等于（类型一样，值一样，才会判断为true）	NaN问题： NaN与所有的值都不相等，包括自己本身 - NaN === NaN 结果为false - isNaN(NaN) 结果为true 浮点数问题： console.log((1/3) === (1-2/3)) 结果为false 尽量避免使用浮点数进行运算，存在精度问题

null 和 underfined

null 空
underfined 未定义

数组

Java中的数组必须是一系列相同类型的对象，JavaScript中数组可以包含任意的数据类型

//定义数组：为了代码的可读性，尽量使用 [] 这种形式
var arr = [1,2,3,'hello',null,true];
new Array(1,2,3,'hello',null,true);

数组下标越界，会报 underfined（未定义的）

数组长度

console.log(arr.length);
/**注意：* 假如给 arr.length 赋值，数组大小就会发生变化* 如果赋值过小，数组中的元素就会丢失*/

常用方法数组：存储数据（如何存，如何取，方法都可以自己实现）

方法名	用法
a.indexof()	通过元素获得下标索引
a.slice()	类似于字符串的substring()，截取数组的一部分，并返回一个新的数组 console.log(a.slice(0)); //从下标0对应的字符截取到最后一个字符
a.push()	向原数组的尾部添加元素
a.pop()	弹出原数组尾部的一个元素
a.unshift()	向原数组的头部添加元素
a.shift()	弹出原数组头部的一个元素
a.sort()	给数组排序
a.reverse()	将数组元素反转
a.concat()	将元素与原数组拼接，并返回一个新的数组（并没有修改原数组）
a.join(‘-’)	修改数组元素之间的连接符 var a = [“A”,“B”,“C”] →→→ “A-B-C”

多维数组

对象

对象是大括号 {}，数组是中括号[]

若干个键值对，JavaScript中的所有的键都是字符串，值是任意对象！

var 对象名 = {属性名: 属性值,属性名: 属性值,属性名: 属性值
}
/**Js中对象 {...}表示一个对象，* 键值对描述属性 xxx:xxx，* 多个属性之间使用逗号隔开，最后一个不需要*/
//定义了一个person对象，它有四个属性
var person = {name:"jiangjiang",age:18,lesson:"java"}

对象赋值和取值

person.name = "jiang"
> 'jiang'
person.name
> 'jiang'
person.age
> 18

使用一个不存在的对象属性，不会报错 undefined
```
person.sex
> undefined
```

动态的删减和添加属性

删减 —— 通过 delete 删除对象的属性

delete person.name
> true
person
> {age: 18, lesson: 'java'}

添加 —— 直接给新的属性添加值即可

person.name = "jiangjiang"
> 'jiangjiang'
person
> {age: 18, lesson: 'java', name: 'jiangjiang'}

判断属性值是否在这个对象中 xxx in xxx

'name' in person
> true
'sex' in person
> false
//继承父类的
'toString' in person
> true
//判断一个属性是否是这个对象自身所拥有的 hasOwnProperty
person.hasOwnProperty('toString')
> false

2.4 严格检查模式

<script>'use strict';/** 'use strict'; 严格检查模式* 前提：IDEA需要设置支持ES6语法* 预防JavaScript的随意性导致产生的一些问题* 必须写在JavaScript的第一行才能起作用*///全局变量 若不在严格检查模式下，可以这么定义i = 1;//在严格检查模式下，局部变量建议都使用 let 去定义let j = 2;
</script>

2.5 流程控制

if 判断

if (score>60 && score<70){alert("60~70");
}else if (score>70 && score<80){alert("70~80")
}else if (score>80 && score<90){alert("80~90")
}else {alert("other")
}

while 循环

while(score>85){score = score-1;console.log(score)
}do{score = score-1;console.log(score)
}while(score>85)

for 循环

for (let score = 88; score < 100; score++) {console.log(score);
}

forEach循环 ES5.1

var num = [5,1,2,3,4];
num.forEach(function (value){console.log(value);
})

for…in 循环

/** Java中* for(Type str:el){}*/
var num = [5,1,2,3,4];
/** JavaScript中*  for(var index in object){}*/
for(var n in num){console.log(num[n]);
}

2.6 Map和Set

ES6 的新特性~

Map：

//学生的名字，学生的成绩
//var names = ["tom","jack","jiang"];
//var scores = [100,90,80];
//ES6 Map集合(将以上两个数组变成集合)var map = new Map([["tom",100],["jack",90],["jiang",80]]);var s = map.get("tom"); //通过key获得valueconsole.log(s);
> 100
//新增或修改元素map.set("karry",921);console.log(map);
> Map(4) {'tom' => 100, 'jack' => 90, 'jiang' => 80, 'karry' => 921}
//删除元素map.delete("jiang");console.log(map);
> Map(4) {'tom' => 100, 'jack' => 90, 'karry' => 921}

Set：无序不重复的集合

var set = new Set([3,1,1,1,1]);
console.log(set); //Set可以去重：Set(2) {3, 1}
set.add(2);       //添加：Set(3) {3, 1, 2}
set.delete(1);    //删除：Set(2) {3,2}
console.log(set.has(3));  //是否包含某个元素：true

2.7 iterator

ES6 的新特性~

遍历数组

var arr = [3,4,5];
//通过 for..in实现：打印数组下标for (let x in arr){console.log(x);}
//通过 for..of实现：打印数组中对应的值for (let x of arr){console.log(x);}

遍历Map

var map = new Map([["tom",100],["jack",90],["jiang",80]]);
for (let x of map){console.log(x);
}

遍历Set

var set = new Set([3,1,1,1,1]);
for (let x of set){console.log(x);
}

2、JavaScript快速入门相关推荐

JavaScript快速入门（四）——JavaScript函数
函数声明之前说的三种函数声明中(参见JavaScript快速入门(二)--JavaScript变量),使用Function构造函数的声明方法比较少见,我们暂时不提.function func() { ...
JavaScript快速入门(1)
JavaScript快速入门详情百度百科 1. 什么是javaScript 2.快速入门 2.1.js引入方法 2.2. javaScript 的基本语法入门 2.3.数据类型 2.4.严格检查模式 ...
前端三大技术 HTML、CSS、JavaScript 快速入门手册
听到前端技术,不少朋友一定会感到有些陌生.但其实,前端,你每天都在接触. 你正在使用的APP,你正在浏览的网页,这些你能看到的界面,都属于前端. 而前端最重要的三大技术,HTML,CSS,JavaSc ...
狂神JavaScript快速入门学习笔记
狂神视频地址 1什么是JavaScript JavaScript是一门世界上最流行的脚本语言 2快速入门 2.1 引入JavaScript 1 内部标签 <script>alert('he ...
3.JavaScript快速入门
1.什么是JavaScript 1.概述是一门世界上最流行的脚本语言 Java和 JavaScript 一个合格的后端人员必须精通JavaScript 2.历史 ECMAScript是JavaSc ...
javaScript快速入门(笔记)
该笔记大部分搬运B站遇见狂神说的javaScript,顺便把图文合并记录,便于回顾视频地址:[狂神说Java]JavaWeb入门到实战_哔哩哔哩_bilibili记得三连目录 1 ...
三：JavaScript快速入门(脚本开发方向)
跳转总目录文章目录 1.js简介 2.js入门 2.1 变量介绍变量的声明 2.2 运算符 2.3 数据类型 3.js判断 4.js循环 for循环 While循环 do while循环 5.j ...
JavaScript 快速入门教程
文章目录 1.JavaScript 简介 2.JavaScript 用法 2.1.在 `<head>` 或者 `<body>` 的 JavaScript 2.2.外部的 Jav ...
JavaScript快速入门（六）——DOM
概念扫盲 DOM DOM是 Document Object Model(文档对象模型)的缩写,是W3C(万维网联盟)的标准. DOM 定义了访问 HTML 和 XML 文档的标准: "W3C ...