JavaScript(1)__Js基础<数据类型，基本语法，运算符>

首先在学习之前，我们要了解web前端三层架构：（重点）

1：HTML：结构层：从语义的角度，去描述页面的结构

2：CSS：样式层：从审美的角度，去美化页面

3：JS：行为层：从交互的角度，去提升用户体验

注意：Java和JavaScript没有关系

1：JS代码写在哪里？

1：所有的Js代码写在Script标签中

 2：可以放在HTML中的任意位置，一般放在Head或者Body中

 3：可以将js代码单独存在 .js文件中，然后通过<script src = “”> </script>引入

 4：对于空格，换行不敏感

 5：每一条语句后最好加一个分号

2：注释

 a：作用

1：对代码解释

2：调试代码

 b：分类

1：单行注释   ctrl+/

2：多行注释   ctrl+shift+/

3：字面量（直接量）

 1：数值，可以不加引号，直接输出

 2：字符串：必须加引号

4：控制台输出

console.log(“xxxx”);


浏览器可以按下F12 显示控制台界面

5：变量

   a：定义   var  a = 100;

   b：变量名的定义

     组成：字母，数字，下划线，$

     注意点：数字不能开头，不能有空格，不能和关键字重名

     大写字母是可以使用的，并且大小写敏感

 

6：数据类型

  数值（number）：包含整数和小数  3， 3.14

  字符串（string）：Helloworld，需要引号

  布尔类型（boolean）：只有true和false两种取值

  undefined：未定义或者是不存在

  null：该处有一个值，但是目前为空

  对象：各种值的集合

  通常我们把数值，字符串，布尔类型称为基本类型

  复杂类型：对象，数组，函数

7：数值型（number）

测试类型：typeof()

JS中，只要是一个数，不管是整浮，大小，正负，都是number类型

var a = 100;               //定义了一个变量a，并且赋值100

console.log(typeof a);      //输出a变量的类型

typeof表示 “某某的类型”   用法  typeof  变量

13：字符串（string）

var str = "快要放假了";
console.log(typeof (str));

 

 

8：+运算符

1） 连字符

2） 加

console.log("么" + "么" + "哒");    

console.log("么+么+哒");                         

console.log(1+2+3);

如果加号两边都是数值，此时是加。否则，就是连字符。

9：强制类型转换（Number（））

  1：通过Number(内容)可以将内容变成对应的数值

 2：parseInt可以进行转换

10：强制类型转换（String（内容））

console.log(typeof (String(345)));
toString()  转换为字符串    var  a=10;  alert(typeof(age.toString()));

11：强制类型转换 （Boolean（内容））

它的转换规则相对简单：除了以下六个值的转换结果为false，其他的值全部为true。

ndefined

null

-0

0或+0

NaN

''（空字符串）

NaN： Not a Number 的缩写，JavaScript 的一种特殊数值，其类型是 Number

可以通过 isNaN(param) 来判断一个值是否是 NaN：

console.log(isNaN(NaN));//true

console.log(isNaN(23));//false  

123

12：隐式转换

字符串与数字结合是会变成字符串

 

 

 

除了加法其他运算符会把字符串转换为数值进行运算

 

 

  1：JS的基本知识  

  2：变量   var

  3：数据类型  number  string boolean  undefined  null 对象...

  4：类型转换

强制类型转换  Number()  String()  Boolean()

隐式转换

13：运算符和表达式

小练习：

世界上表示气温有两种方法：摄氏度和华氏度。两者的关系是：

编写程序，让用户输入摄氏度，向用户提示出对应的华氏温度。

思路：1：获取用户的输入

     2：需要类型转换（可以隐式转换）

     3：弹出提示框

//得到用户输入的摄氏温度，用c变量来接收

//接收的东西是“字符串”，通过parseFloat进行转换

var c = parseFloat(prompt("请输入摄氏温度啊"));

//计算华氏温度，我们用变量f来表示

var f = 9 / 5 * c + 32;

//显示结果    

alert("我帮你算出了华氏温度" + f);

小练习：

用户输入一个三位数，用程序计算每一位的和

如

         输入155，就显示11

         输入316，就显示10

思路：1：获取用户输入 

     2：计算每一位上的值 

     3：每一位相加求和显示

 //第一步，用户输入数字

              var num = parseInt(prompt("请输入数字"));

              //第二步，得到每一位。是我们自己研究的算法

              var baiwei = parseInt(num / 100);

              var shiwei = parseInt(num % 100 / 10);

              var gewei = parseInt(num % 10);

              //第三步，计算和并显示

              var sum = baiwei + shiwei + gewei;

              //显示

              alert(sum);

14：关系运算符

1：关系运算符的结果只能是true或者false

   2：>= 中间不能有空格

   3：要注意== 和  ===的区别  

   4：关系运算符可以比较其他类型的值

==  等等，用来比较两个数甚至字符串是否相同，但是不严谨，会将不同类型的东西，转换为相同类型进行比较，隐式转换

console.log("非常好" == "非常好");
console.log("5" == 5); //true
console.log(56 == "56"); //true


==== 全等于，表示全等于，会有类型判断
console.log("56" === 56); //false
console.log(56 === "56"); //false
console.log("56" === "56"); //true
console.log(56 === 56); //true
NaN和任何值都不相等，包括自己   +0和-0相等

15：自增自减运算符

++x  ，x++，都会使x进行+1的操作

++在前，先运算，再赋值

++在后，先赋值，后运算

var a=10, b=20 , c=30;

       ++a; 

       a++;      e=++a+(++b)+(c++)+a++; 

       alert(e);  //77

16：逻辑运算符（重点）

逻辑运算符有三个   

         &&  与（且）       2 < x < 15

         ||  或

         ！  非

x>2 && x<15;

  1：&& 与

且运算符的运算规则是：如果第一个运算子的布尔值为true，则返回第二个运算子的值（注意是值，不是布尔值）；如果第一个运算子的布尔值为false，则直接返回第一个运算子的值，且不再对第二个运算子求值。

上面代码的最后一部分表示，由于且运算符的第一个运算子的布尔值为false，则直接返回它的值0，而不再对第二个运算子求值，所以变量x的值没变。

这种跳过第二个运算子的机制，被称为“短路”。

 

 2：|| 或运算符

或运算符（||）的运算规则是：如果第一个运算子的布尔值为true，则返回第一个运算子的值，且不再对第二个运算子求值；如果第一个运算子的布尔值为false，则返回第二个运算子的值。

小练习：

console.log("0 || 1 = "+(0 ||1));

console.log("1 || 2 = "+(1 ||2));

console.log("0 && 1 ="+(0 && 1));

console.log("1 && 2 ="+(1 && 2));

17：三目运算符

元条件运算符用问号（?）和冒号（:），分隔三个表达式。如果第一个表达式的布尔值为true，则返回第二个表达式的值，否则返回第三个表达式的值。

var age=16; age>18?alert("成年"):alert("未成年");

用三目运算符判断两个数，三个数中的最大值

var num1 = 23, num2 = 78, num3 = 32;

    var max =0;

    var temp= num1>num2?num1:num2;

    var max =num1 > num2 ? num1 > num3 ? num1 : num3 : num2 > num3 ? num2 : num3;