1、数值类型 Number

JS前置知识

2、字符串类型  String

什么是JS语言

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

客户端:即接受服务的一端,与服务端相对应,在前端开发中,通常客户端指的就是浏览器。

脚本语言:也叫解释型语言,特点是执行一行,解释一行,如果发现报错,代码就停止执行

javascript的三个组成部分:ECMAScript、BOM、DOM

ECMAScript:定义了javascript的语法规范。

BOM:一套操作浏览器功能的API。

DOM:一套操作页面元素的API。

     2-1、获取字符串长度:msg.length; 

script标签

书写Javascript代码有两种方式,第一种是直接在script标签中书写,第二种是将代码写在js文件中,通过script进行引入。

直接在script中书写javascript代码:

<script>
    alert("今天天气真好呀");
</script>

通过script标签引入一个JS文件,需要指定src属性

<script src="test.js"></script>

<font
color=”red”>tips:如果script标签指定了src属性,说明是想要引入一个js文件,这个时候不能继续在script标签中写JS代码,即便写了,也不会执行。</font>

script标签的书写位置,建议写在</body>标签的前面。

   
 2-2、如果+两边是数字,那执行数学运算的加;如果+两边是String类型,则拼接字符串;如果+两边一边是字符串一边是数值类型,会先把数值类型自动转换成字符串,然后进行字符串拼接。 

输入输出语句

在实际开发,基本不能使用3、4、5,因为用户体验不好。

  1. console.log 控制台输出日志
  2. document.write 往页面中写入内容
  3. alert 弹框警告
  4. confirm 确认框
  5. prompt 输入框

     2-3、获取数据类型:typeof ;

注释

不被程序执行的代码。用于程序员标记代码,在后期的修改,以及他人的学习时有所帮助,在JS中,分为单行注释和多行注释

// 这是单行注释,只能注释一行,所有的代码均使用单行注释
/*
    这是多行注释,不能嵌套,多行注释只用来写文档说明
*/

注释的作用:

1. 模块划分,方便代码查找和维护
2. 用于解释复杂代码的逻辑,方便维护和后期开发。

     2-4、转义字符:“\”;          

变量

变量,可以变化的量,变量是在计算机中存储数据的一个标识符。可以把变量看成存储数据的容器。

变量与字面量:

字面量:10、20、“abc”、true这种从字面上就能看出来类型和值的量叫做字面量。

变量:可以变化的量。

<script
type=”text/javascript”>
var
temp = ‘这是个\”dai\’引号的\’\”转义字符’;

变量的声明与赋值

1.变量可以同时声明并赋值。
2.先声明后赋值
3.不声明,直接赋值
4.既不声明,也不赋值
5.同时声明多个变量

console.log(temp);

变量的命名规则与规范

命名规则(必须遵守):
1.由字母、数字、下划线、$符号组成,开头不能是数字。
2.不能使用关键字和保留字
3.区分大小写
命名规范(建议遵守):
1. 命名要有意义
2. 遵守驼峰命名法。首字母小写,后面单词的首字母需要大写。

永利开户送38元体验金,</script>

变量练习

//交换两个变量的值(掌握)
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<script>
  var a = 12;
  var b = 13;
  //  var tmp = a;
  //  a = b;
  //  b = tmp;

  //使用加法完成交换
  //  a += b;   // 12 + 13
  //  b = a - b;   // 12 + 13 - 13  --> b = 12
  //  a -= b;   // 12 + 13 - 12  --> 13

  //使用数组完成交换1
  //  a = [a,b];  //[12,13]
  //  b = a[0];   //b = [12,13][0] -->b = 12
  //  a = a[1];   //a = [12,13][1] -->a = 13

  //使用数组完成交换2
   a = [b,b=a][0];

  console.log("a = " + a + ",b = " + b);//a = 13   b = 12
</script>
</body>
</html>

tips:javascript是一种弱类型语言,不管声明什么类型的变量,都是用var,并且变量的类型是可以变化的。

var age = 90;
age = "张三";

3、布尔类型(Boolean):true/false(计算机储存里:true=1;fasle=0);

数据类型

基本数据类型包括了:number、string、boolean、undefined、null

4、undefined表示声明了没有赋值的变量,变量只声明的时候默认为undefined;

如何查看数据类型

使用typeof关键字查看数据类型

typeof name;
typeof(name);

5、null:表示赋值了,值为空;必须手动赋值。

Number类型

6、什么是字面量?源代码中一个固定值的表示方法 
例如:数值字面量:8.9.10;字符串字面量:“哈哈”;布尔字面量:true
false;

进制

1. 十进制,我们平时使用的就是十进制,进行运算时,八进制和十六进制的值最终都会转换成十进制。
2. 八进制,0开头的数值,数值序列:0-7
3. 十六进制,0x开头的数值,数值序列:0-9A-F

进制了解即可,基本都是使用十进制,稍微了解一下进制之间的转换。

浮点数

科学计数法:

var num = 5e+3;
var num1 = 5e-2;
//如何表示0.003和20000?

浮点数的精度问题:

0.1 + 0.2 = ? // 0.30000000000000004
0.07 * 100 = ? //7.000000000000001

浮点数在运算的时候会出现精度丢失的问题,因此在做比较运算的时候,尽量不要用小数进行比较。

数值范围

javascript不能表示世界上所有的数,因此在javascript中,数值大小是有一定限制的。

Number.MIN_VALUE  :5e-324
Number.MAX_VALUE  :1.7976931348623157e+308
Infinity   :正无穷
-Infinity  :负无穷

数值判断

1. NaN:表示一个非数值,当无法运算或者运算错误的时候,会得到一个NaN,NaN是number类型,表示一个非数值。
2. NaN不等于NaN
3. isNaN用来判断是否是一个数字,当返回true的时候,表示不是一个数字,返回false表示是一个数字。

String类型

字面量

字符串的字面量:“abc” 、 ‘abc’
字符串可以是双引号,也可以是单引号引起来。

字符串长度

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

var str = "abckjdlkfjd";
str.length;//字符串的长度

字符串拼接

拼接字符串使用+号

//思考:
console.log(11 + 11);
console.log("hello" + " world");
console.log("100" + "100");
console.log("11" + 11);
  • 两边只要有一个是字符串,那么+就是字符串拼接功能
  • 两边如果都是数字,那么就是算术功能。

boolean类型

boolean类型只有两个字面量,true和false,区分大小写。

所有类型的值都可以转化成true或者false

NaN、""、undefined、null、false、0  这6个值可以转换成false,其余的都是true。

undefined类型与null类型

undefined表示一个声明了没有赋值的变量
null表示一个空的对象。

undefined派生自null。
undefined == null  :true
undefined === null :false

类型转换

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

字符串的颜色是黑色的,数值类型是蓝色的,布尔类型也是蓝色的,undefined和null是灰色的,这个在调试过程中时非常有用的。

转换成字符串类型

  1. toString()
  2. String()
  3. /+ “”

转换成数值类型

  1. Number()
  2. parseInt
  3. parseFloat
  4. +num, -0等运算

转换成布尔类型

  1. Boolean
  2. !!

运算符

一元运算符

思考:
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);    

逻辑运算符

&&:只要有一个值为假,结果就是假。找假值
||:只要有一个值为真,结果就是真。找真值
!:取反

## 运算符的优先级
  1. () 优先级最高
  2. 一元运算符 ++ — !
  3. 算数运算符 先* / % 后 + –
  4. 关系运算符 > >= < <=
  5. 相等运算符 == != === !==
  6. 逻辑运算符 先&& 后||

选择语句

if..else

//语法
if(condition) {
    statement1 
} else if (condition) { 
    statement2 
} else {
    statement3
}

switch..case

//语法
switch (expression) {
    case value: 
        statement
        break; // break 关键字会导致代码执行流跳出 switch 语句

    case value: 
        statement
        break;
    default: 
        statement
}

示例代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<script>
  var day = prompt('请输入一个数字');
  var result = day % 7;

  switch(result){
    case 0:
      alert("今天星期天");
      break;
    case 1:
      alert("今天星期一");
      break;
    case 2:
      alert("今天星期二");
      break;
    case 3:
      alert("今天星期三");
      break;
    case 4:
      alert("今天星期四");
      break;
    case 5:
      alert("今天星期五");
      break;
    case 6:
      alert("今天星期六");
      break;
    default:
      alert("请输入合法的数字");
      break;
  }
</script>
</body>
</html>

三元运算符

表达式1 ? 表达式2 : 表达式3
var sex = sex == 1 ? '男':'女';

实例代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<script>
  var num2 = Math.round(Math.random() * 100);
  console.log(num2);
  var num1 = prompt("请输入一个0~100的数字");
  //  if (num1 >= num2) {
//    alert("你赢了");
//  }else {
//    alert("你输了");
//  }
  //判断条件  ?  条件成立时执行的代码  :  条件不成立时执行的代码
  num1 > num2 ? alert("你赢了") : alert("你输了");
</script>
</body>
</html>

循环语句

while循环

while(expression) {
    statement
}

示例代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<script>
  var i = 0;
  var sum = 0;
//  while(true) {
//    i ++;
//    sum += i;
//    if (i == 100) {
//      break;
//    }
//  }

  //使用while循环计算1~100的和
  while(i <100) {
    i ++;
    sum += i;
  }
  console.log(sum);
</script>
</body>
</html>

相关文章