JavaScript基础.入门（一）

标签：console 入门 age JavaScript 基础数字字符串变量 log

JavaScript组成

前端分为三层

HTML（结构层）	利用语义化标签搭建网页
CSS（样式层）	利用样式进行美化网页、进行网页布局
JavaScript（行为层）	可以给网页添加动态效果

JavaScript是由三部分组成：ECMAScript、DOM、BOM。

JavaScript书写规范

通过双闭合标签script，将JS语法嵌套在网页中运行。

script标签可以放在网页的任意地方，而且，可以同时有多个script标签。

script标签内部，只能放JS语法。标签、样式别在script标签内部书写。

script标签有一个type属性，属性值为text/javascript。代表的是书写JS语法。

内置函数

alert-警告框

作用：在浏览器正上方弹出一个警告框。

<script type="text/javascript">
       //内置函数-alert警告框使用
      alert("我是alert警告框1");
      alert('今天的日期是12.22');
</script>

小括号里面传递的参数，即为警告框显示内容。
传递参数一般情况下需要加上双引号或者单引号。
在每一行程序结束末尾，加上一个分号。这个分号代表的是，这行语句结束了。

prompt-提示框

作用：在浏览器的正上方，弹出一个提示框。

<script type="text/javascript">
     //内置函数---prompt提示框
     prompt("你是大学生吗？");
     prompt('快考试了吧哈哈');
</script>

控制台使用

通过console对象的log方法在控制台中输出一些内容。

控制台的快捷键：ctr + shift + i或者F12

语法格式：

console.log(参数)；

<script type="text/javascript">
     //控制台的使用
     console.log("我是控制台中打印的数据");
     console.log("Whoisshutiao","我是薯条");
</script>

同时打印多个数据，多个数据之间，用逗号隔开。

字面量

JS的数据类型一共有六种：五个基本数据类型、一个引用类型。

五个基本数据类型：

数据类型	数值
String（字符串类型）	“我是薯条” “我是牛牛”
Number(数字类型)	5、789、3.14、-99
Boolean（布尔类型）	true、false
Undefined(未定义类型)	undefined
Null（空对象类型）	null

一个引用类型：

数据类型	数值
Object(引用类型)	函数、数组、正则、DOM、BOM等等

注意：以后我们在编程的时候。书写的数据务必是这六中数据类型当中的数值。

如果不是，程序就会报错。

字面量：字面量，说白了就是某一个类型数据的一个固定数值。

当你看到这个固定的数值的时候，我们就知道他是属于那种类型的数据。

数字类型字面量

概述：在JS当中，数字类型的字面量使用频率相对挺高的。其实，常用的数字类型的字面量，无非就是两个。

整数和小数（浮点数）

整数字面量

概述：在JS当中整数字面量，即为十进制的数字。逢10进一。整数的数字区分正负之分。

<script type="text/javascript">
   //十进制的数字（整数）
   console.log(100);
   console.log(-99);
   console.log(12306);
</script>

在JS当中，十进制的数字，使用非常多。
整数是有正负之分的。

浮点数字面量

概述：浮点数，即为小数。数字当中带有小数点的。浮点数也有正负之分。

0~1之间的小数可以省略零

<script type="text/javascript">
   console.log(4.8);
   //如果小数是在0~1之间的小数，可以使用
   console.log(.123);
   console.log(0.1 + 0.2);
   console.log(0.3 + 0.3);
</script>

小数在进行计算的时候：比如0.1 + 0.2这个比较特殊。
由于0.1和0.2在进行计算的时候，计算机底层转换为二进制数据进行计算。没办法整除（后面保留17位小数）

科学计数法

概述：科学计数法，也是表示数字一种形式。代表的是某一个数字与10的N次幂的乘积。

console.log(3.14e2);

相当于3.14 * 10^2

科学计数法中的英文单词e可以是大写的，当然也可以是小写的。

特殊值

Infinity

在JS当中，数字其实是有范围的。-2^53~2^53,如果开发中书写数字超出这个范围，

如果超出数字范围，可以利用特殊值Infinity进行表示。Infinity这个数字类型的特殊值，也有正负之分。

Infinity（无穷大）的首个英文字母，是大写的。

<script type="text/javascript">
   //数字类型特殊值---Infinity
   console.log(Infinity);
   console.log(-Infinity);
   console.log(6e123456789);//Infinity
</script>

NaN

这个数值，一般是在数学计算不出结果的时候回出现的。

比如：在数学当中，数字零不能作为分母的。如果出现这种现象，别的语言可能崩坏。

但是在JS当中，不会出现崩坏现象，而是给你返回一个数字类型特殊值NaN。

   console.log(0/0);//NaN
   console.log(12/0);//Infinity

第一行：如果分子、分母同时为零。认为分母零（零），但是计算不出结果，只能返回一个数字类型特殊值NaN
第二行：如果分子（不为零），分母为零。认为分母零（趋近于零的这样的一个数字），只能返回一个数字类型特殊值Infinity。

字符串类型的字面量

字符串中的字符，可以是汉字、英文字母、数字、任意特殊符号都可以。

变量基本使用

变量在使用的时候,分为三步：声明、赋值、使用。

<script type="text/javascript">
  //变量基本使用
  //第一步:声明,在使用变量之前，务必、一定、切记需要通过关键字var进行声明一次。
  var age;
  //第二步:赋值
  age = 123;
  //第三步：使用
  console.log(age);
  console.log(age);
</script>

变量使用注意事项

1.一个变量，仅仅是声明了，但是没有赋值。默认初始值为未定义类型的特殊值undefined。

var hobby;

   console.log(hobby);

2.一个变量在声明一次以后，可以进行多次赋值。后者赋值的数据会层叠前者赋值的数据。

<script type="text/javascript">
   //变量使用：分为三部分，声明、赋值、使用
   //第一步：需要通过关键字var进行声明一次变量；
   var hobby;
   //赋值：第一次赋值
   hobby = "欢迎来到名侦探柯南";
   //使用
   console.log(hobby);
   //赋值：第二次赋值
   hobby = 321;
   //使用
   console.log(hobby);
   //赋值：第三次赋值
   hobby = "真相只有一个";
   //使用
   console.log(hobby);
</script>

3.下面写法是错误的，因为使用变量之前，务必需要通过关键字var进行声明。

<script type="text/javascript">
  console.log(age);
</script>

4.变量名字外层不需要加上双引号。如果访问变量的时候，变量外层有双引号。它就不是变量（获取不到变量存储结果）。因为他是字符串了，不是变量了。

<script type="text/javascript">
   //注意事项
   var age;
   age = 100;
   console.log(age);
   console.log("age");
</script>

其他声明方式

<script type="text/javascript">
   //常用方式1
   var hobby = "江户川柯南";
       hobby = 1;
   console.log(hobby);
   //常用方式2
   var name = "工藤新一",age = 18, sex = "男";
   console.log(name,age,sex);
</script>

我们可以将第一步（声明）和第二步进行合并。
一个关键字var可以同时声明多个变量，多个变量之间，需要用逗号隔开。

命名标识符规范

可以是数字、英文字母、下划线、美元符号
不能以数字开头
不能是关键字、保留字

变量声明提升

概述:各大浏览器的厂商都有属于自己的解析器。在翻译代码的时候，会将变量的声明部分，提升到当前的作用域的最上方。

解析器：各大浏览器厂商都有属于自己的解析器。说白了，就是将你的代码翻译给浏览器，让浏览器知道你写的是什么。

作用域：书写代码的范围。

<script type="text/javascript">
  console.log(age);
 //声明部分：需要用关键字var进行声明变量一次
  var age ;
  //赋值：将右侧任意类型的字面量、或者是数学计算完的结果。赋值给左侧变量
  age = 17;
  //使用变量：通过访问变量名字、获取到变量存储的数据
  console.log(age);
/*************************相当于下面写法*********************/
  var age;
  console.log(age);//undefined
  age = 17;
  console.log(age);//17
</script>

一个变量，如果只是声明了。没有赋值，默认初始值为undefined
当程序中出现变量，解析器做的第一件事情。将变量的声明部分，提升到当前作用域最上方。（赋值部分不会提升）

数据类型的判断

概述：在JS当中，我们可以利用关键字typeof，它主要的作用是可以检测任意类型的字面量或者变量存储的数据为什么类型的数值。

typeof关键字可以检测数据的类型。
使用的时候，关键字typeof + 空格+检测数据即可。

<script type="text/javascript">
  <script type="text/javascript">
   //typeof:用来检测数据的类型用的
   //检测字面量的数据类型
   console.log(typeof "怪盗基德");
   console.log(typeof 123);
   console.log(typeof 3.14);
   console.log(typeof Infinity);
   console.log(typeof NaN);
   console.log(typeof true);
   console.log(typeof undefined);
   //null属于Null类型的，不是object（虽然打印出来的结果是object）
   console.log(typeof null);
   //检测变量存储的数据的类型
   var age = 666;
       age = "我是工藤新一";
   console.log(typeof age);
</script>

数据类型的转换

数字转换为字符串

概述：在JS当中，我们可以通过连字符（+），将数字类型的数据转换为字符串。

切记：在JS当中这个+比较特殊。

如果语句当中没有出现字符串，这个加号（+），就是数学的加法。（可以进行数学的加法运算）
如果语句当中出现了字符串，这个加号（+），就不是数学的加法了。是所谓连字符。可以将数据从左到右变为字符串。

<script type="text/javascript">
   //语句当中没有出现字符串，加号即为数学的加法（进行数学的加法运算）
   console.log(123 + 06);
   console.log(3.14 + 2.99);
   //语句当出现字符串，加号，所谓连字符，可以将数据从左到右拼接为一个字符串
   console.log("波本" + "黑麦");
   console.log("琴酒" + 190);
   console.log("123" + 06);
</script>

语句当中没有出现字符串，这个加号即为加法，可以进行数学运算。

语句当中出现了字符串，这个加号（连字符）。将数据从左到右拼接为一个整体字符串。

<script type="text/javascript">
   var num = 123;
   var num1 = "06";
   console.log(num + num1);  
</script>

因为num1是字符串类型数据，当前这个加号连字符（将数据从左到右转换为字符串）

<script type="text/javascript">
  //在控制台中打印一句话，我是工藤新一我今年17岁了
   var age = 17;
   console.log("我是工藤新一我今年age岁了");
   console.log("我是工藤新一我今年"+age+"岁了");
</script>

第一种写法：age不是变量，它只是字符串中的三个字符。不能变量存储的数据。

第二种写法：age是变量，而且加号也是连字符，可以将数据从左到右转换为字符串。

字符串转换为数字

概述：在JS当中，我们可以通过内置函数parseInt和parseFloat将字符串转换为数字。

内置函数parseInt，可以将字符串中的数字形式字符串转换为数字。（整数部分）
内置函数parseFloat，可以将字符串中的数字形式的字符转换为数字。（精确到小数部分）。

<script type="text/javascript">
  //将字符串转换为数字
  //parseInt:可以将字符串中的数字形式的字符转换为数字（整数部分）
  console.log(parseInt("12306"));
  console.log(parseInt("3.14"));
  console.log(parseInt("666我很喜欢你_$ABC么么哒123"));
  console.log(parseInt("工藤新一17岁"));
</script>

parseFloat的使用方式和parseInt是一模一样的。只不过精确度，精确到小数部分。

提示框

概述：提示框prompt，可以在浏览器正上方弹出一个提示框。用户是可以输入数据。

我们可以获取到用户输入进来的数据，利用这些用户输入进来的数据，进行编程。

<script type="text/javascript">
  //提示框
  var age = prompt("帅哥,你今年多大了呀");
  console.log(age);
  console.log(typeof age);
</script>

用户在提示框中输入的进来的数据，我们可以用变量进行存储。

用户输入进来的数据都是字符串类型的数据。

数学运算符

概述：在JS语言当中，也有数学运算符（数学操作符）。

其实数学运算符即为：加（+）、减（-）、乘（*）、除（/）、取余数（%）

口诀：先算乘除、后算加减。如果有小括号先算小括号里面的。

<script type="text/javascript">
   //数学运算符
   console.log(6 + 6 + 3);
   console.log(100 - 20 + 10);
   console.log(66 * 11);
   console.log(24/12);
   //取余数
   console.log(6 % 3);
   console.log(3 % 4);
</script>

数学对象

概述：在JS语言当中，给我们提供了一个内置的数学对象（Math），这个对象拥有很多的属性和方法提供给我们使用。

对象：在JS当中，我们经常将引用类型的数据称之为对象。

<script type="text/javascript">
   //Math对象的基本使用
   console.log(typeof Math);
   console.log(Math);
   //数学对象的属性的使用
   console.log(Math.PI);
   //数学对象方法使用
   //获取数字绝对值
   console.log(Math.abs(-99999));
   //获取某一个数字N次幂
   console.log(Math.pow(2,3))
   //随机一个0~2之间的小数
   console.log(Math.random());
</script>

Math数学对象，提供很多数学方法。
Math对象的属性后面不需要加上小括号。
Math对象的方法后面紧随小括号。
Math数学对象的方法中，如果传递多个参数，需要用句号隔开。

标签：console,入门,age,JavaScript,基础,数字,字符串,变量,log
From： https://blog.csdn.net/lemo_qi/article/details/144646214