JS基础-21.JS提供的浏览器弹框1.1alert1.2confirm1.3promt2.控制台输出3.javascr

1.JS提供的浏览器弹框

1.1 alert

// alert:在浏览器中弹出一个提示框(提供确定按钮,点击确定弹框消失)
// 使用ALERT弹框提示信息，提示的内容最后都会转换为字符串输出(调用了toString这个方法)
alert({name:'zhufeng'}) => "[object Object]"
alert([12,23]);//=>"12,23"
alert(1+1);//->"2"

1.2 confirm

//在alert基础上增加了让用户选择的操作(提供两个按钮:确定和取消)
var flag = confirm('are you sure delete this?');
// 当用户点击确定按钮的时候，我们接收到的结果是TRUE，点击的是取消按钮我们接收到的结果是FLASE，此后我们可以根据接收的结果做不同的处理即可

1.3 promt

//在confirm的基础上增加让用户输入的效果
var flag = promt('are you sure delete this?')
// 当用户点击取消按钮，我们获取到的结果是null,如果用户点击的是确定按钮，我们将会获取到用户输入的内容(如果用户没有输入任何内容,获取的结果是空字符串)

2.控制台输出

//控制台输出:方便开发人员进行调试    FN+F12 
console.log:在控制台输出，优势不会转换数据类型，输出什么格式的数据都可以
console.dir:比LOG输出的更加详细一些
console.table:把JSON数据展示为一个表格
var obj = [{name:A,age:15},{name:B,age:18}]  //用console.table输出 会在控制台输出一个表格
document.write()//向页面输出内容
document.write('A good');
//将灵魂和代码融合在一起

3.javascript

1、ECMAScript:规定了Js的一些基础核心的知识(变量、数据类型、语法规范、操作语句等) 3/5 ===6/7
2、DOM:document  object model 文档对象模型，里面提供了一些属性和方法，可以让我们操作页面中的元素
3、BOM:browser object model 浏览器对象模型，里面提供了一些属性和方法，可以让我们操作浏览器

4.变量和常量

变量:值是可以变的
常量:值是不变的
Js中定义变量的方式  var 变量名 = 值；（ES6中定义变量使用let）
var num = 12; var str = 'zhufeng'
console.log(num) ==>12 变量其实只是一个无意义的名字，它所代表的意义都是其存储的那个值
num = 13;//让原有的num变量存储的值修改为13（变量只能代表一个值）

任何一个具体的数据值都是常量，例如：12就是一个常量
和变量类似，我们设置一个常量（也是一个名字），给其存储一个值，但是这个存储的值不能修改
const num = 12; 定义一个常量num 给存储值为12
num = 13;// Uncaught TypeError: Assignment to constant variable. 不能给一个常量重新分配值
常量存储的值是不能修改的

JAVA等后台语言定义变量比较严谨，JS比较松散
int num  =12; float  num = 13.5  double num =  3.1415161789

5.变量命名规范

五、变量命名规范
1、JS中严格区分大小写 //test 和Test是两个不同的变量
2、遵守国际命名规则 驼峰命名法
第一个单词首字母小写 其余每一个有意义单词 首字母大写
var studentInfo  命名使用英文单词  不要使用拼音
不是所有单词都能简写，我们需要保证大家看到名字后知道所代表的意思

info ===>: infomation  信息
init ===>: initialization  初始化
add / insert / create  增加创建插入
remove /rm /clear/del/delete 删除
update/修改
get/query/select  查询获取
3、命名的时候可以使用 `$ _ 、数字 字母` 但是数字不能作为名字的第一位
var student_info;
var $xxxx  //一般都是引用JQ 获取到的值
var _xxxx // 一般这样的情况 代表变量是一个全局或者公用的变量
4、JS中很多的词都是有特殊含义的 我们把这些词叫做'关键字'  现在没有特殊含义的，以后可能作为关键词的，叫做'保留字' 而 '关键字' 和'保留字' 都不可以随便用来命名

6.基本数据类型

1、number:数字  // 12 -1 0 12.5  3.14243
2、string:字符串  // 'zhufeng' "zhufeng"(单双引号没有区别 都是字符串)
3、boolean:布尔  //  布尔类型只有两个值  只有true 和 false
4、null:空对象指针
5、undefined:未定义 //undefined

7.引用数据类型

1、object对象数据类型   {}:普通对象  []:数组  /^$/ 正则
2、function 函数数据类型

8.检测数据类型

1、typeof:检测数据类型的运算符
使用typeof检测，返回的结果是一个字符串，字符串中包含的内容证明了值是属于什么类型的
typeof 12  "number"
typeof "zhufeng"  "string" 
typeof true "boolean"
typeof null "object"
[局限性]
A) typeof null 不是 'null' 而是'object': 因为null虽然是给单独的数据类型，但是它原本意思是空对象指针，浏览器使用typeof检测的时候会把它按照对象来检测
B)使用typeof无法具体细分出到底是数组还是正则，因为返回的结果都是'object'
typeof typeof [] ===> "string"
2、instanceof ===>  检测某个实例是否属于这个类
3、constructor ===> 获取当前实例的构造器
4、Object.prototype.toString.call ===> 获取当前实例的所属类信息

9.布尔类型转换

Boolean() 把其他数据类型的值转化为布尔类型
只有 0 NaN 空字符串 undefined  null 这5个数据值转换为布尔类型的false,其余的都会变为true
!= "不等于" ！叹号在JS中还有一个作用:`取反`，先把值转换为布尔类型，然后再去取反
!! 在一个叹号取反的基础上再取反，取两次反相当于没有做操作，但是却已经把其他类型值转换为布尔类型了，和Boolean是相同的效果

10.字符串

字符串 ===> 在JS中单引号和双引号包起来的都是字符串
常用方法 ===>
1、charAt
用来获取指定位置的字符串，index为字符串索引值，从0开始到string.leng – 1，若不在这个范围将返回一个空字符串。如：
var str = 'abcde';
console.log(str.charAt(2));     //返回c
console.log(str.charAt(8));     //返回空字符串
2、charCodeAt
可返回指定位置的字符的Unicode编码。charCodeAt()方法与charAt()方法类似，都需要传入一个索引值作为参数，区别是前者返回指定位置的字符的编码，而后者返回的是字符子串。
var str = 'abcde';
console.log(str.charCodeAt(0));  //返回97
3、substr
stringObject.substr(start,length)
substr()方法可在字符串中抽取从start下标开始的指定数目的字符。其返回值为一个字符串，包含从 stringObject的start（包括start所指的字符）处开始的length个字符。如果没有指定 length，那么返回的字符串包含从start到stringObject的结尾的字符。另外如果start为负数，则表示从字符串尾部开始算起。
var str = 'abcdefg';
console.log(str.substr(1, 3))   //返回bcd
console.log(str.substr(2))  //返回cdefg
console.log(str.substr(-2, 4))  //返回fg，目标长度较大的话，以实际截取的长度为准 
4、substring
stringObject.substring(start,end)
substring()是最常用到的字符串截取方法，它可以接收两个参数(参数不能为负值)，分别是要截取的开始位置和结束位置，它将返回一个新的字符串，其内容是从start处到end-1处的所有字符。若结束参数(end)省略，则表示从start位置一直截取到最后。
var str = 'abcdefg';
console.log(str.substring(1, 4));   //返回bcd
console.log(str.substring(1));  //返回bcdefg
console.log(str.substring(-1)); //返回abcdefg，传入负值时会视为0
5、slice
stringObject.slice(start,end)
slice()方法与substring()方法非常类似，它传入的两个参数也分别对应着开始位置和结束位置。而区别在于，slice()中的参数可以为负值，如果参数是负数，则该参数规定的是从字符串的尾部开始算起的位置。也就是说，-1 指字符串的最后一个字符。
var str = 'abcdefg';
console.log(str.slice(1, 4));   //返回bcd
console.log(str.slice(-3, -1)); //返回ef
console.log(str.slice(1, -1));  //返回bcdef
console.log(str.slice(-1, -3)); //返回空字符串，若传入的参数有问题，则返回空 
6、toUpperCase 转为大写   7、toLowerCase 转为小写 
8、indexOf
stringObject.indexOf(searchvalue,fromindex)
indexOf()用来检索指定的字符串值在字符串中首次出现的位置。它可以接收两个参数，searchvalue表示要查找的子字符串，fromindex表示查找的开始位置，省略的话则从开始位置进行检索。
var str = 'abcdeabcde';
console.log(str.indexOf('a'));  // 返回0
console.log(str.indexOf('a', 3));   // 返回5
console.log(str.indexOf('bc')); // 返回1 
9、lastIndexOf
stringObject.lastIndexOf(searchvalue,fromindex) 
lastIndexOf()语法与indexOf()类似，它返回的是一个指定的子字符串值最后出现的位置，其检索顺序是从后向前。
var str = 'abcdeabcde';
console.log(str.lastIndexOf('a'));  // 返回5
console.log(str.lastIndexOf('a', 3));   // 返回0 从第索引3的位置往前检索
console.log(str.lastIndexOf('bc')); // 返回6 
10、split
stringObject.split(separator,howmany)
split()方法用于把一个字符串分割成字符串数组。第一个参数separator表示分割位置(参考符)，第二个参数howmany表示返回数组的允许最大长度(一般情况下不设置)。
var str = 'a|b|c|d|e';
console.log(str.split('|'));    //返回["a", "b", "c", "d", "e"]
console.log(str.split('|', 3)); //返回["a", "b", "c"]
console.log(str.split('')); //返回["a", "|", "b", "|", "c", "|", "d", "|", "e"] 
11、replace
stringObject.replace(regexp/substr,replacement)
replace()方法用来进行字符串替换操作，它可以接收两个参数，前者为被替换的子字符串（可以是正则），后者为用来替换的文本。
如果第一个参数传入的是子字符串或是没有进行全局匹配的正则表达式，那么replace()方法将只进行一次替换（即替换最前面的），返回经过一次替换后的结果字符串。
var str = 'abcdeabcde';
console.log(str.replace('a', 'A'));
console.log(str.replace(/a/, 'A'));
如果第一个参数传入的全局匹配的正则表达式，那么replace()将会对符合条件的子字符串进行多次替换，最后返回经过多次替换的结果字符串。
var str = 'abcdeabcdeABCDE';
console.log(str.replace(/a/g, 'A'));    //返回AbcdeAbcdeABCDE
console.log(str.replace(/a/gi, '$'));   //返回$bcde$bcde$BCDE 
12、match
stringObject.match(substr) 
stringObject.match(regexp)
match()方法可在字符串内检索指定的值，或找到一个或多个正则表达式的匹配。
如果参数中传入的是子字符串或是没有进行全局匹配的正则表达式，那么match()方法会从开始位置执行一次匹配，如果没有匹配到结果，则返回null。否则则会返回一个数组，该数组的第0个元素存放的是匹配文本，除此之外，返回的数组还含有两个对象属性index和input，分别表示匹配文本的起始字符索引和stringObject 的引用(即原字符串)。
var str = '1a2b3c4d5e';
console.log(str.match('h'));    //返回null
console.log(str.match('b'));    //返回["b", index: 3, input: "1a2b3c4d5e"]
console.log(str.match(/b/));    //返回["b", index: 3, input: "1a2b3c4d5e"]
如果参数传入的是具有全局匹配的正则表达式，那么match()从开始位置进行多次匹配，直到最后。如果没有匹配到结果，则返回null。否则则会返回一个数组，数组中存放所有符合要求的子字符串，并且没有index和input属性。
var str = '1a2b3c4d5e';
console.log(str.match(/h/g));   //返回null
console.log(str.match(/\d/g));  //返回["1", "2", "3", "4", "5"]
13、search()方法
stringObject.search(substr) 
stringObject.search(regexp)
search()方法用于检索字符串中指定的子字符串，或检索与正则表达式相匹配的子字符串。它会返回第一个匹配的子字符串的起始位置，如果没有匹配的，则返回-1。
var str = 'abcDEF';
console.log(str.search('c'));   //返回2
console.log(str.search('d'));   //返回-1
console.log(str.search(/d/i));  //返回3

11.number类型

JS中多增加了一个number类型的数据: NaN
typeof NaN --> "number"
"NaN" not  a number 不是一个数，但是属于number类型
NaN == NaN  false NaN和其他任何值都不相等
"isNaN()" 用来检测当前这个值是否是非有效数字，如果不是有效数字检测的结果是true，反之有效数字则是false
isNaN(a) --- false   isNaN(NaN) ---> true  
isNaN('12') ----> false  当我们使用isNaN检测值的时候 检测的值不是number类型的，浏览器会默认地先把值转换为number

"Number()" --->把其他数据类型值转化为number类型的值

Number('12') -->12 
Number('12px')   在使用Number转换的时候只要字符串中出现任何一个非有效数字字符，最后的结果都是NaN
Number(true)  --> 1
Number(false) --> 0
Number(null) --->0
Number(undefined) ---> NaN

Number([])--->把引用数据类型转换为number,首先需要把引用数据类型转为字符串(toString),再把字符串转化为number即可，例如
[] ---''  '' --->0    ===> 数组类型的还有可能转为数字
Number([12]) => [12] -> '12' '12'--> 12
Number([12,23]) =>[12,23] --> "12,23" ''12,23" ---> NaN
Number({name:"hou"}) ==> NaN
Number({}) ===> NaN    ({}).toString()  ===> "[object Object]"

parseInt() ---> 也是把其他数据类型的值转化为number ,和Number方法在处理字符串的时候有所区别
Number('12px') //----> NaN
parseInt('12px') //-----> 12
parseInt('12px13') // ----> 12 
提取规则:从左到右依次查找有效数字字符，直到遇见非有效数字字符为止，(不管后面是否还有，都不找了)，把找到的转换为数字
parseInt('px12')//  ---->NaN

parseFloat() // ---->在parseInt的基础上可以识别小数点
parseInt('12.5px') //12 ----> parseInt()//支持好几个参数
parseFloat('12.5px') //12.5

12.null 和 undefined

null: 空  没有
undefined : 未定义 没有
"" 空字符串 没有
0 ：也可以理解为没有

空字符串和null的区别
都是去种树 
空字符串属于挖了个坑，但是没有种任何东西 null是连坑都没挖
空字符串相对于null来说开辟了内存，消耗了那么一丢丢的性能

null和undefined的区别
null一般都是暂时没有，在预期中以后会有的（可能以后也没有达到预期） 在JS中null一般都是手动先赋值为null,后期我们在给其赋具体值
undefined :完全没在预料之内的
A是个帅气的男孩子 他现在的女朋友是null 他的男朋友是undefined

13.对象数据类型

var obj = { name:'A',age:8 };
每一个对象都是由零到多组'属性名(key 键)':属性值（value值）组成的，或者说有多组键值对组成的，每一组键值对中间用逗号分隔
属性：描述这个对象特点特征的
对象的属性名是字符串或者数字格式的，存储的属性值可以是任何的数据类型
获取某个属性名对应的属性值
对象名.属性名:忽略了属性名的单双引号
对象名[属性名]：不能忽略单双引号
obj.name
obj['name']
//如果属性名是数字如何操作
obj.0 语法不支持
obj[0] / obj['0']    两种都可以支持
//如果操作的属性名在对象中不存在，获取的结果是undefined
obj.sex --> undefined
设置/修改
一个对象的属性名是不能重复的(唯一性)，如果之前存在就是修改属性值的操作，反之不存在就是新设置属性的操作
obj.sex = '男'
obj['age'] = 9;
删除 
假删除：让其属性值赋为null,但是属性还在对象中，obj.sex = null;
真删除：把整个属性都在对象中暴力移除  delete obj.sex

var obj = {}
var age = 'zhang' 
obj[age] = 'hou'  则obj 是{'zhang' :'hou'}
如果age没有定义 obj['age'] = 'hou' 则obj 是{age:'hou'}

14.基本数据类型和引用数据类型的区别

JS是运行在浏览器中的(内核引擎)，浏览器会为JS提供赖以生存的环境（提供给JS代码执行的环境） =>全局作用域 （window/global）
基本数据类型是按值操作的:基本数据类型在赋值的时候，是直接把值赋值给变量即可
引用数据类型是按照空间地址（引用地址）来操作的
var n = {name:"A"}
1、先创建一个变量n
2、浏览器会首先开辟一个新的存储空间（内存空间）目的是把对象中需要存储的内容（键对值）分别的存储在这个空间中，为了方便后期找到这个空间，浏览器给空间设定一个地址（16进制的）
3、把空间的地址赋值给变量 （地址没有什么意义 地址指向的空间才有意义）
var n = xxxfff000;
var m = n  = xxxfff000;
m.name = 'B'

15.函数数据类型

函数数据类型也是按照引用地址来操作的
函数:具备一定功能的方法
创造函数：相当于生成了一台洗衣机
function 函数名（） {
//函数体：实现某一个功能的具体JS代码
}
执行函数：使用洗衣机来洗衣服（如果函数只创建了 但是没有去执行，函数没有任何意义）
函数名（）
funciton  fn() {
console.log(1+1);
}
fn//输出函数本身
fn()//把函数执行（把函数执行体中实现功能的代码执行）
var fn = function() {console.log("1+1")}  函数 也是引用数据类型的  因此需要开辟空间 xxxfff111 用来存储函数体
xxxfff111 .  ====> "console.log(1+1)" .  空间中存储的是函数体中的代码，但是此时的代码都是字符串中的字符而已
函数只创建不执行没有意义：因为空间中存储的都是毫无意义的字符串
声明的这个函数名和我们之前声明的变量名没有任何的区别
函数执行：把函数体中的代码执行
浏览器创建一个供函数中代码执行的私有环境 ===>"私有作用域"
把创建时候空间中存储的字符串拿过来，然后变为真正的JS表达式代码，然后再执行 console.log(1+1) ==> 2

函数就是洗衣机  洗衣机可以洗很多次  函数也可以执行很多次   洗衣机 知道 你洗什么衣服 用什么洗衣液  用什么水？
洗衣机提供一些入口  注水、加衣服
函数设置入口 叫做形参 ---> 形式参数（变量）
当我们创建一个函数想要实现某个功能的时候，发现有一些材料并不清楚，只有当函数运行的时候，别人传递给我 我才知道，此时我们就需要设定入口，让用户执行的时候通过入口把值给我们
实参： 函数执行传递给函数的具体值就是实参

16.条件判断

编程来自于生活
if(){} else {}
//如果好几个条件成立了，只把第一个成立的条件执行，后面成立的条件忽略不管
if(A) {}//先把A转换为布尔类型，判断真假以此来决定条件是否成立
&&  两个条件都成立 整体条件才为真
|| 只要其中一个小条件成立 整体条件为真
var num = parseFloat('width:12.5px');
if(num == 12.5) {
    alert(12.5)
}else if(num == NaN) {// NaN 和它本身是不相等的
    alert(NaN)
}else if(typeof num =='number') {
    alert(0) //最终输出的是字符'0'
}else {
    alert('啥也不是')
}
三元运算符
条件？条件成立执行：条件不成立执行
三元云算法就是这种简单 if 、else的另外一种写法
SyntaxError:语法错误 Unexpected token ； 不能识别的符号
null、undefined 、void 0(就是undefined)  占位即可
num > 5 && num <= 10 ?num++ : null（没有null 会出现语法错误） 相当于只有if 操作
改写成三元运算符：某一种情况执行多条操作，使用小括号包起来，中间用逗号分隔
num> 5 && num < = 10? (num++,console.log(num)):null
在三元运算符的操作中不能出现break、continue、return这些关键词

swith case
swith case 应用于if、else中一个变量在不同值情况下的不同操作
swith (num)  switch 后面小括号中存放的一个值（一般我们都写变量：把变量存储的值拿来用，有时候也可能是一个计算）
case 1: //case后面放入的都是值，目的是验证switch后面的值和哪一种case后面的值相等，相等的进行对应的处理
.......
break;//每一种case结束后都要加break 结束当前的判断
case 5:
.......
break;
default://switch 后面的值和每一种case情况对应的值都不相等，执行最后的default,类似于最后一个else
.....
switch(num%2) //先把取余操作进行运算，拿运算结果和case比较
num % 2 让num存储的值除以2取余数（0或者1）
case 2-1: //case后面也应该是值 此处先把2-1计算，把计算的结果和switch值比较
最后一项可以不加break,不加也能跳出判断

不加break,不管后面的条件是否成立，都会继续向下执行，直到遇到break为止
小应用:把符合某几项值都去做同一件事情，使用不加break实现
switch(case) switch case 中比较使用的是：===
case 0:
case 1:
num--; //余数是0或者1 都执行减减的操作
break;

动力: 这是我的学习笔记(来源于视频或者查阅文档),您能从中得到收获和进步,是我分享的动力,帮助别人,自己也会更快乐
期望: 不喜勿喷,谢谢合作！如果涉及版权请及时联系我,马上删除!