【 js基础 Day1】js的介绍及基本语法变量,运算符

01 JavaScript (简称:js)

js分三个部分:

1. ECMAScript 标准----js的基本的语法
2. DOM------Document Object Model 文档对象模型
3. BOM------Browser Object Model 浏览器对象模

JavaScript是什么？
是一门脚本语言
是一门解释性语言
是一门动态类型的语言
是一门基于对象的语言

编译语言:需要把代码翻译成计算机所认知的二进制语言,才能够执行
脚本语言:不需要编译,直接执行
常见的脚本语言:t-sql,cmd

电脑的硬件---->系统—>客户端的程序—>代码
电脑的硬件---->系统—>浏览器—>js代码

js原名不是JavaScript,而是LiveScript
js的作用?解决用户和浏览器之间的交互的问题

js现在可以做什么
HTML:是标记语言,展示数据的
CSS:美化页面
JavaScript:用户和浏览器交

页面中有什么代码?html–展示内容,css—美化页面的,js—控制页面

js的代码可以分三个地方写:

1.在html的文件中,script的标签中写js代码
2.js代码可以在html的标签中写—
3.在js文件中可以写js代码,但是需要在html的页面中引入 script的标签中的src="js的路径"

 <script>
    //js代码
    alert("锄禾日当午,地雷埋下土,小苏走过去,炸成二百五");//在页面中弹出对话框
  </script>

  <input type="button" value="按钮" onclick="alert('被点了');"/>

变量作用:用来操作数据的(可以存储,可以读取)
变量的声明:没有赋值
var 变量名;
变量的初始化:有赋值
var 变量名=值;

02 注意的基本的代码的规范

js中声明变量用var
js中的每一行代码结束都应该有分号;(写代码有分号的习惯)
js中的大小写是区分的: var N=10; n
js中的字符串可以使用单引号,也可以使用双引号,目前我们暂时使用双引号

变量名的注意问题—变量名的命名规范,要遵循驼峰命名法

• 1.变量的名字要有意义,
• 2.变量名有一定的规范:一般以字母, $符号,下划线开头,中间或者后面可以有$符号,字母,数字
• 3.变量名一般都是小写的
• 4.变量名如果是多个单词,第一个单词的首字母是小写的,后面的所有的单词的首字母都是大写的,这种命名方式称为:驼峰命名法
• 5.不能使用关键字(系统自带的一些单词,不能使用)
• 6.不会单词用拼音,拼音也要遵循驼峰命名法

声明变量并初始化—变量的初始化----声明变量赋值
声明了一个num的变量存储了一个数字100

 var num=100;

输出这个变量的值

 alert(num);//弹框

浏览器的控制台在浏览器中的开发人员工具中(快捷键:F12)的console的选项中

console.log(num);//把内容输出在浏览器的控制台中

声明多个变量然后一个一个的赋值

var num1,num2,num3;//声明
//依次的赋值
num1=10;
num2=20;
num3=30;

声明多个变量并且赋值

  var num1=10,num2=20,num3=30;

  var num=10;
  var $break=10;
  var shuZi=10;

```

03 变量:========>

操作的数据都是在内存中操作

js中存储数据使用变量的方式(名字,值—>数据)
js中声明变量都用var---->存储数据,数据应该有对应的数据类型
js中的字符串类型的值都用双引号或者单引号

存储一个数字10
变量的声明及赋值

 var num=10;

存储一个名字

 var name='小黑';

04 变量—作用,存储数据的或者是操作数据

变量声明(有var 有变量名字,没有值)

变量初始化(有var 有变量名字,有值)

变量声明的方式:
var 变量名字;

 var number;//变量的声明,此时是没有赋值的,
    //一次性声明多个变量
    var x,y,z,k,j;//都是声明,没有赋值

    //变量的初始化(变量声明的同时并且赋值了)
    //   = 的意义:赋值的含义
    //存储一个数字10
    var number = 10;
    //存储一个5
    var number2 = 5;
    //存储一个人的名字
    var name = "小黑";
    //存储真(true)
    var flag = true;
    //存储一个null--->相当于是空
    var nll = null;
    //存储一个对象
    var obj = new Object();

05 变量作用:用来操作数据的(可以存储,可以读取)

变量的声明:没有赋值
var 变量名;
变量的初始化:有赋值
var 变量名=值;

注意的基本的代码的规范

• js中声明变量用var
• js中的每一行代码结束都应该有分号;(写代码有分号的习惯)
• js中的大小写是区分的: var N=10; n
• js中的字符串可以使用单引号,也可以使用双引号,目前我们暂时使用双引号

06 变量的交换的第一个思路:使用第三方的变量进行交换

```handlebars
   var num1=10;
   var num2=20;
  把num1这个变量的值取出来放在temp变量中
   var temp=num1;
  把num2这个变量的值取出来放在num1变量中
   num1=num2;
  把temp变量的值取出来放在num2变量中
   num2=temp;
   console.log(num1);//20
   console.log(num2);//10

第二种方式交换:一般适用于数字的交换

        var num1 = 10;
        var num2 = 20;
   把num1的变量中的值和num2变量中的值,取出来相加,重新赋值给num1这个变量
        num1 = num1 + num2;//30
    num1变量的值和num2变量的值取出来,相减的结果重新赋值给num2
        num2 = num1 - num2;//10
    num1变量的值和num2变量的值取出来,相减的结果重新赋值给num1
        num1 = num1 - num2;//20
     console.log(num1, num2);

Ctrl+Alt+L----->格式化代码的(设置代码有很好的格式,代码是错误的,这个快捷键是没有效果)

注意；变量的名字是不能重名

    var num1=10;
    var num1=20;
    console.log(num1);

扩展的变量的交换:只需要看代码,不需要理解—位运算

var num1 = 10;
var num2 = 20;
num1 = num1 ^ num2;
num2 = num1 ^ num2;
num1 = num1 ^ num2;
console.log(num1, num2);

07 注释:是解释代码的含义,给其他的程序员看的

注释的方式:
1.单行注释 //
2.多行注释 /★★/

//单行注释:一般用在一行代码的上面
/多行注释:一般是用在函数或者是一段代码的上面/

//注释后的代码不执行了

//console.log("哈哈,我又变帅了");
//console.log("第二行");

//声明变量并初始化
//    var num=10;

08 js中的数据类型有哪些?

js中的原始数据类型:number,string,boolean,null,undefined,object

number:数字类型(整数和小数)
string:字符串类型(的值一般都是用单引号或者是双引号括起来) “34”
boolean:布尔类型(值只有两个,true(真1),false(假0))
null:空类型,值只有一个:null,一个对象指向为空了,此时可以赋值为null
undefined:未定义,值只有一个:undefined
什么情况下的结果是undefined
变量声明了,没有赋值,结果是undefined
函数没有明确返回值,如果接收了,结果也是undefined
如果一个变量的结果是undefined和一个数字进行计算,结果:NaN不是一个数字,也没有意义
object:对象---->

var num;
console.log(num+10);//NaN-----not an number---->不是一个数字
var num;
console.log(num);
如何获取这个变量的数据类型是什么? 使用typeof 来获取
    //typeof 的使用的语法

     * 都可以获取这个变量的数据类型是什么!
     * typeof 变量名
     * typeof(变量名)
     * 
    var num = 10;
    var str = "小白";
    var flag = true;
    var nll = null;
    var undef;
    var obj = new Object();
    //是使用typeof 获取变量的类型
    console.log(typeof num);//number
    console.log(typeof str);//string
    console.log(typeof flag);//boolean
    console.log(String(nll));//是null
    console.log(typeof nll);//不是null
    console.log(typeof undef);//undefined
    console.log(typeof obj);//object
    console.log(typeof(num));

09 数字类型:整数和小数

  var num = 12;
数字类型:整数和小数

num=20;整数
num=98.76;小数(其他的语言中,浮点型---单精度,双精度浮点)
所有的数字都是属于number类型

其他的语言:
整数类型:int
单精度浮点型:float
双精度浮点型:double

数字:
二进制:遇到2进一
00000001-----1
00000010-----2
00000011-----3
00000100-----4
00000101----5
00000110----6
00000111-----7
00001000-----8
00001001----9
八进制:遇到8进一
00000001
00000002
00000003
00000004
00000005
00000006
00000007
00000010-----8
00000011-----9
00000012-----10
十进制:遇到10进一
0
1
2
3
4
5
6
7
8
9
10
十六进制:遇到f进一
00000001
00000002
00000003
00000004
00000005
00000006
00000007
00000008
00000009
0000000a----10
0000000b—11
0000000c----12
0000000d—13
0000000e—14
0000000f—15
00000010—16
00000011—17
00000012—18
0f12
js中可以表示哪些进制
var num=10;//十进制
var num2=012;//八进制
var num3=0x123;//十六进制

   var num=12;//十进制
   console.log(num);
   var num2=012;//八进制
   console.log(num2);
   var num3=0x1a;//十六进制
   console.log(num3);
   var num=0x1f;
   console.log(num);
  </script>

不要用NaN验证是不是NaN

    var num;
    console.log(num+10==NaN);
    console.log("您好"=="我好");

如何验证这个结果是不是NaN,应该使用isNaN()

 var num;//-----变量声明了,没有赋值,结果是:undefined
 是不是不是一个数字----->不是一个数字吗？ NaN--->不是一个数字
 console.log(isNaN(10));

//判断结果不是一个数字可以使用isNaN(变量名)

    var str="您好";
    var num;
    var sum=num+10;//NaN
    console.log(sum);
    console.log(isNaN(sum));//不是数字为true,是数字结果为false
  </script>

总结:
数字类型:number类型
无论是整数还是小数都是数字类型
不要用小数验证小数
不要使用NaN判断是不是NaN，应该使用isNaN(值或者是变量)
想要表示十进制:就是正常的数字
想要表示八进制:以0开头
想要表示十六进制:0x开头

10 字符串类型

var str="10";//字符串
var str2='20';//字符串

字符串可以使用单引号,也可以使用双引号
字符串的长度如何获取? 变量名.length

   var str="what are you no sha lei";
   //字符串的个数有多少个?这个字符串的长度是多少
   console.log(str.length);
   
   var str1="fdshfjworwoijpfskj;akjfpojfiwnmoiwajdoiwajiwaewowj";
   console.log(str1.length);

html中的转义符: < &lt; > &gt; 空格: &nbsp;
js中的字符串里也有转义符

//tab键----水平制表符

console.log("哈哈\\嘎嘎");
console.log("哈哈\t嘎嘎");
console.log("哈哈\"嘎嘎");

字符串的拼接: 使用+可以把多个字符串放在一起形成一个字符串拼接。
只要有一个是字符串,其他的是数字,那么结果也是拼接,不是相加。

   var str1="您好";
    var str2="我好";
    console.log(str1+str
console.log("哈哈"+"嘎嘎"+"嘿嘿");
    var str1="10";
    var str2="20";
    console.log(str1+str
    var str1="10";
    var str2=20;
    console.log(str1+str
var str1 = "10";
var str2 = 5;

//浏览器帮助我们自动的把字符串类型转成了数字类型,这种方式叫:隐式转换

console.log(str1-str
var str1="10";
var str2=5;
console.log(str1*str2);

11 布尔类型

布尔类型:的值有两个,一个是true(真),一个是false(假)

   var flag=1;
   console.log(flag）
   var fdf=null;
   var num=0;

12 类型转换

其他类型转数字类型:三种方式:
1.parseInt();//转整数

console.log(parseInt("10"));//10
console.log(parseInt("10afrswfdsf"));//10
console.log(parseInt("g10"));//NaN
console.log(parseInt("1fds0"));//1
console.log(parseInt("10.98"));//10
console.log(parseInt("10.98fdsfd"));//10

2.parseFloat()//转小数

 console.log(parseFloat("10"));//10
 console.log(parseFloat("10afrswfdsf"));//10
 console.log(parseFloat("g10"));//NaN
 console.log(parseFloat("1fds0"));//1
 console.log(parseFloat("10.98"));//10.98
 console.log(parseFloat("10.98fdsfd"));//10.98

3.Number();//转数字

  console.log(Number("10"));//10
  console.log(Number("10afrswfdsf"));//NaN
  console.log(Number("g10"));//NaN
  console.log(Number("1fds0"));//NaN
  console.log(Number("10.98"));//10.98
  console.log(Number("10.98fdsfd"));//NaN

总结:想要转整数用parseInt(),想要转小数用parseFloat()
想要转数字:Number();要比上面的两种方式严格

其他类型转字符串类型
1 .toString()

//    var num=10;
//    console.log(num.toString());//字符串类型
//    //2  String();
//
//    var num1=20;
//    console.log(String(num1));

如果变量有意义调用.toString()使用转换
如果变量没有意义使用String()转换

    var num2;
    console.log(num2.toString());
    var num3=null;
    console.log(num3.toString());

    //这个可以
    var num2;
    console.log(String(num2));
    var num3=null;
    console.log(String(num3));

其他类型转布尔类型
1 Boolean(值);

    console.log(Boolean(1));//true
    console.log(Boolean(0));//false
    console.log(Boolean(11));//true
    console.log(Boolean(-10));//true
    console.log(Boolean("哈哈"));//true
    console.log(Boolean(""));//false
    console.log(Boolean(null));//false
    console.log(Boolean(undefined));//false

    var str=10;
    console.log(+str);

13 操作符:一些符号-----用来计算

操作符:一些符号-----用来计算

算数运算符: + - * / %
算数运算表达式:由算数运算符连接起来的表达式
一元运算符: 这个操作符只需要一个操作数就可以运算的符号 ++ –
二元运算符: 这个操作符需要两个操作数就可以运算,
三元运算符: -----不讲,明天讲
复合运算符: += -= *= /= %=
复合运算表达式:由复合运算符连接起来的表达式

 var num=10;
 num+=10;------>就是:num=num+10;
 console.log(num);20

关系运算符: > < >= <= ==不严格的 ===严格的 !=不严格的不等 !==严格的不等
关系运算表达式:由关系运算符连接起来的表达式
关系运算表达式的结果是布尔类型
逻辑运算符:
&&—逻辑与–并且
||—逻辑或—或者
!—逻辑非—取反–取非
逻辑运算表达式:由逻辑运算符连接起来的表达式
表达式1&&表达式2
如果有一个为false,整个的结果就是false
表达式1||表达式2
如果有一个为true,整个的结果为true
!表达式1
表达式1的结果是true,整个结果为false
表达式1的结果是false,整个结果为true

赋值运算符: =

 var num1=10;
     var num2=20;
  
      console.log(num1==num2&&5>6
      var num=20;
      console.log(num>10||5<0
      var flag=false;
      console.log(!flag
      var num=10;
      var sum=(num+10)*5;
      console.log(sum
      var result = (4 >= 6 || '人' != '狗' && !(12 * 2 == 144) && true);
      console.log(result);

  
      var num = 10;
  
      var result2 =( 5 == num / 2 && (2 + 2 * num).toString() === '22');
      console.log(result2);


       var num=20;
       var result=num/3;//num变量与3取余--->10/3的余数
       console.log(parseInt(result)
       var num=20;
       var result=num%3;//num变量与3取余--->10/3的余数
       console.log(result
       var num=10;
       var sum=(num+10)+1
       var num = 20;
       num %= 5;
       //    num=num-5;
       console.log(num
       var str="5";
       var num=5;
       console.log(str===num
       console.log(5>10);//false
       console.log(5>=5);//true
       console.log(5>3);//true
       console.log(5==10);//false

字面量: 把一个值直接赋值给一个变量

声明变量并初始化

    var num=10;
//
    var flag=true;
//
    var str="哈哈哈";
//
    var y=10;
    var n=y;

其他参考链接

【 js基础 Day1】js的介绍及基本语法变量,运算符

【 js基础 Day2】js的流程控制:分支语句,循环.顺序结构

【 js基础 Day3】关键字的使用，数组（重点）和函数（重点）

【 js基础 Day4】面向过程，面向对象，自定义对象，内置对象

【 js基础 Day5】函数(重点)，作用域，预解析，arguments，对象

【 js基础 Day6】内置对象和基本包装类型等知识

【如果你不是新手】推荐如下链接：

【js高级 Day1】深入理解原型及作用,构造函数和实例对象和原型对象之间的关系

【js高级 Day2】深入理解原型添加方法,私有函数,面向对象的编程思想（案例小贪吃蛇）

【js高级 Day3】深入理解原型的方式继承，借用构造函数继承，组合继承，拷贝继承

【js高级 Day4】深入理解apply和call方法，作用域，闭包，递归

【js高级 Day5】深入理解浅拷贝，深拷贝，遍历DOM树，正则表达式