JS-day01-4.23

什么是网页、网站和运用程序

网页：单独的一个页面
网站：是由一系列相关的页面组合成一起
应用程序：可以和用户产生交互并实现某种功能

1.JavaScript的介绍

JavaScript是什么

HTML （超文本标记语言，提供网页的结构，提供网页的内容，他是非编程语言）
CSS（层叠样式表，是对网页进行美化的，他是非编程语言）
JavaScript（可以用来控制网页内容，给网页增加动态的效果）编程语言流程控制

Netscape(网景公司)在最初将其脚本语言命名为LiveScript，后来Netscape在与Sun合作之后将其改名为JavaScript。JavaScript最初受Java启发而开始设计的，目的之一就是“看上去像Java”，因此语法上有类似之处，一些名称和命名规范也借自Java。JavaScript与Java名称上的近似，是当时Netscape为了营销考虑与Sun微系统达成协议的结果。Java和JavaScript的关系就像张雨和张雨生的关系，只是名字很像。

Java  服务器端的编程语言

JavaScript  运行在客户端(浏览器)的编程语言

JavaScript是一种运行在客户端的脚本语言

JavaScript的解释器被称为JavaScript引擎，为浏览器的一部分，广泛用于客户端的脚本语言，最早是在HTML（标准通用标记语言下的一个应用）网页上使用，用来给HTML网页增加动态功能。

JavaScript最初的目的

是为了处理表单的验证操作，增强用户的体验

JavaScript现在的意义(应用场景)

JavaScript 发展到现在几乎无所不能。

网页特效
服务端开发(Node.js)
命令行工具(Node.js)
桌面程序(Electron)
App(Cordova)
控制硬件-物联网(Ruff)
游戏开发(cocos2d-js)

JavaScript 的组成

ECMAScript
DOM
BOM

ECMAScript - JavaScript的核心

ECMA 欧洲计算机制造联合会

网景研发了一个在浏览器上的语言：JavaScript

微软再自己的浏览器IE上研发了：JScript

定义了JavaScript的语法规范

JavaScript（ECMAScript）的核心，描述了语言的基本语法和数据类型，ECMAScript是一套标准，定义了一种语言的标准与具体实现无关

DOM - 文档对象模型

一套操作页面元素的API

DOM可以把HTML看做是文档树，通过DOM提供的API可以对树上的节点进行操作

BOM - 浏览器对象模型

一套操作浏览器功能的API

通过BOM可以操作浏览器窗口，比如：弹出框、控制浏览器跳转、获取分辨率等

2.JavaScript的三种写入方式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <!-- js中代码是从上到下依次执行的 -->
    <!-- 内部样式 -->
    <script type="text/javascript">
        alert(1);
    </script>
    <!-- 外链式 用src引入外部js-->
    <script type="text/javascript" src="demo.js"></script>
</head>
<body>
    <!-- 行内样式 -->
    <input type="submit" value="hello" onclick="alert(3)"> 
</body>
</html>

3.计算机组成

软件

应用软件：浏览器(Chrome/IE/Firefox)、QQ、Sublime、Word
系统软件：Windows、Linux、mac OSX

硬件

三大件：CPU、内存、硬盘 -- 主板
输入设备：鼠标、键盘、手写板、摄像头等
输出设备：显示器、打印机、投影仪等

ps:应用软件是工作在系统软件上的，系统软件是工作在硬件上的

4.变量

什么是变量

什么是变量
变量是计算机内存中存储数据的标识符，根据变量名称可以获取到内存中存储的数据
为什么要使用变量
使用变量可以方便的获取或者修改内存中的数据

如何使用变量

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script type="text/javascript">
    // js中用var来声明变量 
        var age;//变量声明
        age=18; //变量赋值
        console.log(age); //在控制台打印出18

        var num1=1;  // 此处是声明一个变量，其变量名为num1并且将值1赋予num1
        var num2=2;
        console.log(num1); //1

        //var mgs=hello word; 此处为语法错误，因为hello word 不是数字要用引号包裹
        var mgs='hello word';
        console.log(mgs); //hello word

        //声明多个变量并赋值
        var n1=2, n2=3, n3=4;
        console.log(n1,n2,n3); //2 3 4
    </script>
</head>
<body>
   
</body>
</html>

变量的命名规则和规范

规则

变量名一般由字母、数字、下划线、$符号组成，且不能以数字开头
js中变量名区分大小写
不能使关键字和保留字，如：while、for等

规范

变量名必须要有意义
遵守驼峰命名法，首字母小写，后面单词的首字母大写，如：userName

案例

交换两个变量的值

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script type="text/javascript">
    var a=6, b=7, t; 
    //定义一个临时变量t，首先把a的值赋给t，此时t的值为6；
    //再把b的值赋给a，此时a的值为7；最后把t的值赋给b，此时b的值为6
    t=a;
    a=b;
    b=t;
    console.log(a,b); // 7 6
    </script>
</head>
<body>
   
</body>
</html>

2.交换两个数字的变量的值，并且不使用第三个变量

    <meta charset="UTF-8">
    <title>Document</title>
    <script type="text/javascript">
    var a=4, b=6;
    a=a+b;  //4+6=10
    b=a-b;  //10-6=4
    a=a-b;  //10-4=6
    console.log(a,b); // 6 4
    </script>
</head>
<body>
   
</body>
</html>

5.数据类型

简单数据类型

Number、String、Boolean、Undefined、Null

Number类型

数值字面量：数值的固定值的表示法，如：2018 222
进制（二进制、八进制、十进制、十六进制）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script type="text/javascript">
    //十进制 0-9
     var num=10;
     console.log(num); //10
    //十六进制 0-9 A-F A10 B11 C12 D13 E14 F15
    var  n1=0xAB;
    console.log(n1); //171
    //八进制 0-7
    var n2=010;
    console.log(n2); //8
    </script>
</head>
<body>
   
</body>
</html>

浮点数
- 浮点数的精度问题
  
  浮点数
  var n = 5e-324; // 科学计数法 5乘以10的-324次方
  浮点数值的最高精度是 17 位小数，但在进行算术计算时其精确度远远不如整数
  var result = 0.1 + 0.2; // 结果不是 0.3，而是：0.30000000000000004
  console.log(0.07 * 100);
  不要判断两个浮点数是否相等
数值范围

最小值：Number.MIN_VALUE，这个值为： 5e-324
最大值：Number.MAX_VALUE，这个值为： 1.7976931348623157e+308
无穷大：Infinity
无穷小：-Infinity
数值判断
- NaN：not a number
  - NaN 与任何值都不相等，包括他本身
- isNaN: is not a number 是一个非数字

String类型
（用引号包裹）

'abc' "abc"

字符串字面量
'程序猿'，'程序媛', "黑马程序猿"

思考：如何打印以下字符串。
我很喜欢"黑马'程序猿'"

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script type="text/javascript">
    var mgs='我是\"黑马\'程\\序员\'\"';  // \为转义字符 若想将\表示出来必须用转义字符\将其转义
    console.log(mgs); //我是"黑马'程\序员'"
    </script>
</head>
<body>
   
</body>
</html>

转义符

\n换行
\t制表符
\b空格
\r回车

字符串长度
length属性用来获取字符串的长度

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script type="text/javascript">
    var mgs='我是\"黑马\'程\\序员\'\"';  // \为转义字符 若想将\表示出来必须用转义字符\将其转义
    console.log(mgs); //我是"黑马'程\序员'"
    console.log(mgs.length); //12
    </script>
</head>
<body>
   
</body>
</html>

字符串拼接
字符串拼接使用 + 连接

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script type="text/javascript">
    //如果+两边是number类型的变量，执行的是数学运算的加
      console.log(11 + 11); //22
    //如果+两边是string类型的变量，执行的是拼接字符串
      console.log('hello' + ' world'); // hello word
      console.log('100' + '100'); //100100
      //如果+一边是string类型的变量，一边是number类型的变量，则先将数值型变量转换成字符串变量，再执行字符串拼接
      console.log('abc' + 11); //abc11
      console.log('11' + 11); //1111
      //如果+一边是string类型的变量，一边是true或flase，则先将true或flase转换成字符串，再进行字符串拼接
      console.log('male:' + true); //male:true
    </script>
</head>
<body>
   
</body>
</html>

两边只要有一个是字符串，那么+就是字符串拼接功能
两边如果都是数字，那么就是算术功能。

Boolean类型

Boolean字面量： true和false，区分大小写
计算机内部存储：true为1，false为0

Undefined和Null

undefined表示一个声明了没有赋值的变量，变量只声明的时候值默认是undefined
null表示一个空，变量的值如果想为null，必须手动设置

复杂数据类型

Object

获取变量的类型

typeof

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script type="text/javascript">
   var age=18;
   var name='zhangsan';
   console.log(typeof age); //number
   console.log(typeof name); //string
   // typeof返回的结果是string类型
   var result=typeof name;
   console.log(result); //string
    </script>
</head>
<body>
   
</body>
</html>

字面量

在源代码中一个固定值的表示法。

数值字面量：8, 9, 10

字符串字面量：'黑马程序员', "大前端"

布尔字面量：true，false

6.注释

单行注释（ctrl+/）

用来描述下面一个或多行代码的作用

// 这是一个变量
var name = 'hm';

多行注释（ctrl+shift+/）

用来注释多条代码

/*
var age = 18;
var name = 'zs';
console.log(name, age);
*/

7.数据类型转换

如何使用谷歌浏览器，快速的查看数据类型？

字符串的颜色是黑色的，数值类型是蓝色的，布尔类型也是蓝色的，undefined和null是灰色的

转换成字符串类型

toString() [使用时变量名.toString();]
String() [使用时 String(变量名);]

 String()函数存在的意义：有些值没有toString()，这个时候可以使用String()。比如：undefined和null

拼接字符串方式
num + ""，当 + 两边一个操作符是字符串类型，一个操作符是其它类型的时候，会先把其它类型转换成字符串再进行字符串拼接，返回字符串

案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script type="text/javascript">
     var age=18;
     var name='zhangsan';
     var isLeft=true;
     var a;
     var b=null;
     console.log(age); //18
     console.log(name); //zhangsan
     console.log(isLeft); //true
     console.log(a); //undefined
     console.log(b); //null
     //1.  toString()方法
     console.log(typeof age.toString()); //string
     console.log(typeof isLeft.toString()); //string
     //null和 undefined 没有toString()方法

     //2.  String()方法
     console.log(typeof String(b));//string

     //3.  字符串拼接
      console.log(typeof (age+''));//string
      console.log(typeof (isLeft+''));//string

      console.log(typeof age+'');//number   这是因为typeof先获取age的类型
      console.log(typeof isLeft+'');//boolean 这是因为typeof先获取isLeft的类型
      
      console.log(age+'');//18
      console.log(isLeft+''); //true
    </script>
</head>
<body>
   
</body>
</html>

转换成数值类型

Number()
Number()可以把任意值转换成数值，如果要转换的字符串中有一个不是数值的字符，返回NaN
parseInt()
var num1 = parseInt("12.3abc"); // 返回12，如果第一个字符是数字会解析知道遇到非数字结束
var num2 = parseInt("abc123"); // 返回NaN，如果第一个字符不是数字或者符号就返回NaN
parseFloat()
parseFloat()把字符串转换成浮点数
parseFloat()和parseInt非常相似，不同之处在与
parseFloat会解析第一个. 遇到第二个.或者非数字结束
如果解析的内容里只有整数，解析成整数
+，-0等运算
var str = '500';
console.log(+str); // 取正
console.log(-str); // 取负
console.log(str - 0);

案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script type="text/javascript">
     //1.Number()
     var str='abc';
     var n1=true;

     console.log(Number(str)); //NaN
     console.log(Number(n1)); //1

     console.log(Number('123')); //123
     //也就是说Number()把字符串转换成数值型的时候，如果字符串中有一个字符不是数字，返回NaN
     console.log(Number('123abc')); //NaN

     //2. ParseInt()  
     var str1=parseInt('123');
     var isRight=parseInt(true);
     console.log(str1); //123
    // ParseInt() 无法将布尔类型转换成数值类型，返回NaN
     console.log(isRight); //NaN

     var s1=parseInt('abb');
     console.log(s1); //NaN

//parseInt()转换字符串的时候，如果遇到数字就会转换成数字，如果遇到非数字就会结束
     var num1 = parseInt("12.3abc");  //12
     console.log(num1);
 //如果字符串中第一个字符是非数字，此时就返回NaN    
     var num2 = parseInt("abc123");   //NaN   
     console.log(num2);

     //3.parseFloat()
     var str2='1.1aa';
     var s2=true;
     console.log(parseFloat(str2));  //1.1
     //parseFloat()无法转换布尔类型 返回NaN 
     console.log(parseFloat(s2));  //NaN  

     var s3='12.12.abc';
     //parseFloat()会解析第一个. 遇到第二个.或者非数字结束
     console.log(parseFloat(s3)); //12.12

     //4.取正或取负  +  -
     var n2=+5;
     var n3=-5;
     console.log(n2); //5
     console.log(n3);  //-5

     var n4='123';
     console.log(+n4); //123
     console.log(typeof +n4); //number
//+无法将字母转换成数值型
     var n5='123aa';
     console.log(+n5); //NaN
     console.log(typeof +n5); //number  此处的number是+n5  返回值是NaN 而NaN属于数值型

     var n6=true;
     console.log(+n6); //1

     var n7='12bcd';
     // - 一边是字符串类型，一边是数值型，会先把字符串转换成数值型再进行数值的减法运算，如果字符串无法转换成数值类型，此时返回NaN
     console.log(n7-0);  //NaN
     // +一边是字符串类型，一边是数值型，会先把数值型转换成字符串类型再进行字符串拼接
     console.log(n7+0);  //12bcd0
    </script>
</head>
<body>
   
</body>
</html>

转换成布尔类型

Boolean()

0 ''(空字符串) null undefined NaN 会转换成false 其它都会转换成true

案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script type="text/javascript">
    var str='abc';
    var n1=12;
    var n2=null;
    var b;
    console.log(Boolean(str)); //true
    console.log(Boolean(n1));  //true
    console.log(Boolean(n2));  //false
    console.log(Boolean(b));   //false
    //转换成false有5种情况：null  undefined  ''(空字符串) 0  NaN
    
    console.log(Boolean(''));//false
    console.log(Boolean(0));//false
    console.log(Boolean(NaN));//false
    console.log(Boolean(-1));//true
    </script>
</head>
<body>
   
</body>
</html>

8.操作符

运算符 operator

5 + 6

表达式组成操作数和操作符，会有一个结果

算术运算符

+ - * / %

案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script type="text/javascript">
    var x=6;
    var y=8;
    console.log(x+y); //14
    console.log(x-y); //-2
    console.log(x*y); //48
    console.log(x/y); //0.75
    console.log(x%y); //6

    console.log(x/0); //Infinity
    console.log(x%0); //NaN
    </script>
</head>
<body>
   
</body>
</html>

一元运算符

一元运算符：只有一个操作数的运算符

5 + 6 两个操作数的运算符二元运算符

++ 自身加1

-- 自身减1

前置++
var num1 = 5;
++ num1;

var num2 = 6;
console.log(num1 + ++ num2);

后置++
var num1 = 5;
num1 ++;
var num2 = 6
console.log(num1 + num2 ++);

案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script type="text/javascript">
    //  ++前置   
    var num=5;
    //++前置 先自身加1 然后再运算 
    console.log(++num);//6

    var num1=1;
    console.log(num+ ++num1); //8
    console.log(num1); //2
    console.log(--num1); //1

    //++后置 先运算再自身加1
    var  num2=2;
    console.log(num2++); //2
    console.log(num2); //3

    var num3=8;
    console.log(num2+ num3++);//11
    console.log(num3); //9
    </script>
</head>
<body>
   
</body>
</html>

猜猜看
var a = 1; var b = ++a + ++a; console.log(b);
var a = 1; var b = a++ + ++a; console.log(b);
var a = 1; var b = a++ + a++; console.log(b);
var a = 1; var b = ++a + a++; console.log(b);

逻辑运算符(布尔运算符)

&& (一假即假)
与 两个操作数同时为true，结果为true，否则都是false
|| （一真即真）
或 两个操作数有一个为true，结果为true，否则为false
!  非  取反

关系运算符(比较运算符)

<  >  >=  <= == != === !==

==与===的区别：==只进行值得比较，===类型和值同时相等，则相等

var result = '55' == 55;    // true
var result = '55' === 55;   // false（先判断类型是否相等） 值相等，类型不相等
var result = 55 === 55;     // true

赋值运算符

= += -= *= /= %=

例如：
var num = 0;
num += 5;   //相当于  num = num + 5;

运算符的优先级

优先级从高到底
    1. ()  优先级最高
    2. 一元运算符  ++   --   !
    3. 算数运算符  先*  /  %   后 +   -
    4. 关系运算符  >   >=   <   <=
    5. 相等运算符   ==   !=    ===    !==
    6. 逻辑运算符 先&&   后||
    7. 赋值运算符


// 练习1：
4 >= 6 || '人' != '阿凡达' && !(12 * 2 == 144) && true
// 练习2：
var num = 10;
5 == num / 2 && (2 + 2 * num).toString() === '22'

表达式和语句

人面猴
序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
沈念sama阅读 204,530评论 6赞 478
死咒
序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
沈念sama阅读 86,403评论 2赞 381
救了他两次的神仙让他今天三更去死
文/潘晓璐我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
开封第一讲书人阅读 151,120评论 0赞 337
道士缉凶录：失踪的卖姜人
文/不坏的土叔我叫张陵，是天一观的道长。经常有香客问我，道长，这世上最难降的妖魔是什么？我笑而不...
开封第一讲书人阅读 54,770评论 1赞 277
港岛之恋（遗憾婚礼）
正文为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
茶点故事阅读 63,758评论 5赞 367
恶毒庶女顶嫁案：这布局不是一般人想出来的
文/花漫我一把揭开白布。她就那样静静地躺着，像睡着了一般。火红的嫁衣衬着肌肤如雪。梳的纹丝不乱的头发上，一...
开封第一讲书人阅读 48,649评论 1赞 281
城市分裂传说
那天，我揣着相机与录音，去河边找鬼。笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。我是一名探鬼主播，决...
沈念sama阅读 38,021评论 3赞 398
双鸳鸯连环套：你想象不到人心有多黑
文/苍兰香墨我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
开封第一讲书人阅读 36,675评论 0赞 258
万荣杀人案实录
序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
沈念sama阅读 40,931评论 1赞 299
护林员之死
正文独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋以下内容为张勋视角年9月15日...
茶点故事阅读 35,659评论 2赞 321
白月光启示录
正文我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
茶点故事阅读 37,751评论 1赞 330
活死人
序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
沈念sama阅读 33,410评论 4赞 321
日本核电站爆炸内幕
正文年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
茶点故事阅读 39,004评论 3赞 307
男人毒药：我在死后第九天来索命
文/蒙蒙一、第九天我趴在偏房一处隐蔽的房顶上张望。院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
开封第一讲书人阅读 29,969评论 0赞 19
一桩弑父案，背后竟有这般阴谋
文/苍兰香墨我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。一阵脚步声响...
开封第一讲书人阅读 31,203评论 1赞 260
情欲美人皮
我被黑心中介骗来泰国打工，没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。一个月前我还...
沈念sama阅读 45,042评论 2赞 350
代替公主和亲
正文我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
茶点故事阅读 42,493评论 2赞 343