初识JavaScript，体验JS的美好

前言

此次打卡的是一种新的语言，名为 JavaScript，简称 js，是-种运行在客户端的脚本语言，

脚本语言意思是不需要编译,运行过程中由js解释器(js引擎)逐行来进行解释并执行。是不是感到一些好奇呢？现在就带着好奇来感受这个新语言的魅力吧！

一、JavaScript 的组成

ECMAScript               DOM                  BOM

1、Javascript语法  

页面文档对象模型 浏览器对象模型

ECMAScript : ECMAScript规定了JS的编程语法和基础核心知识，是所有浏览器厂商共同遵守的一套JS语法 工业标准。

2、  DOM-文档对象模型

文档对象模型( 简称DOM) , 是W3C组织推荐的处理可扩展标记语言的标准编程接口。
通过DOM提供的接口可以对页面上的各种元素进行操作(大小、位置、颜色等)。

 3、 BOM一浏览器对象模型

BOM ( 简称BOM)是指浏览器对象模型,它提供了独立于内容的、可以与浏览器窗口进行互动的对象结构。通过BOM可以操作浏览器窗口,比如弹出框、控制浏览器跳转、获取分辨率等。
 

二、 JS初体验

JS有3种书写位置,分别为行内、内嵌和外部。

1.行内式JS

<input type="button" value="点我试试”οnclick="alert ('Hello World')" />

注意：

•  可以将单行或少量JS代码写在HTML标签的事件属性中(以on开头的属性) , 如: onclick
•  注意单双引号的使用:在HTML中我们推荐使用双引号, JS中我们推荐使用单引号
•  可读性差，在html中编写JS大量代码时,不方便阅读;
•  引号易错,引号多层嵌套匹配时，非常容易弄混;
•  

2.内嵌JS.

<script>
alert( 'Hello World~!') ;
</script>
 可以将多行JS代码写到<script> 标签中
 内嵌JS是学习时常用的方式

3.外部JS文件

<script src= "my. js"></script>
利于HTML页面代码结构化,把大段JS代码独立到HTML页面之外,既美观，也方便文件级别的复用
引用外部JS文件的script标签中间不可以写代码
适合于JS代码量比较大的情况

4、 JavaScript输入输出语句

了方便信息的输入输出, JS中提供了一些输入输出语句,其常用的语句如下:
方法                                  说明                                                  归属
alert(msg )                       浏览器弹出警示框                           浏览器
console.log(msg)        浏览器控制台打印输出信息                 浏览器
prompt(info)           浏览器弹出输入框，用户可以输入            浏览器

5、声明变量

变量在使用时分为两步: 1.声明变量2. 赋值
 声明变量
 var age; // 声明一个名称为age的变量
 var 是一个JS关键字,用来声明变量( variable变量的意思)。  
 age是程序员定义的变量名,我们要通过变量名来访问内存中分配的空间
 

三、JavaScript数据类型

1、数字型Number

JavaScript数字类型既可以用来保存整数值,也可以保存小数(浮点数)。

1.数字型进制
最常见的进制有二进制、八进制、十进制、十六进制。
// 1.八进制数字序列范围: 0~7
var numl = 07; 
// 2:十六进制数字序列范围: 0~9以及A~F
var num = 0xA;
 在JS中八进制前面加0，十六进制前面加0x

2.数字型范围
JavaScript中数值的最大和最小值
alert (Number .MAX VALUE) ;
alert (Number .MIN VALUE) ;

3.数字型三个特殊值
alert (Number .MAX VALUE*2); /
alert(-Infinity); 
alert (NaN) ;
●Infinity ,代表无穷大,大于任何数值
●-Infinity ,代表无穷小,小于任何数值
●NaN,Notanumber,代表-个非数值

4. isNaN0
用来判断-一个变量是否为非数字的类型,返回true或者false
isNaN(x)
x是数字，返回false、x不是数字，返回true
x是一个非数字类型
 

2、字符串型String

1.字符串引号嵌套
JS可以用单引号嵌套双引号, 或者用双引号嵌套单引号(外双内单,外单内双

2.字符串转义符
转义符都是\开头的,常用的转义符及其说明如下:
转义符      解释说明
\n            换行符，n是newline的意思
\\               斜杠\ 
\*               ”双引号
\t             tab缩进
\b         空格,b是blank的意思

3.字符串长度
字符串是由若干字符组成的,这些字符的数量就是字符串的长度。通过字符串的length属性可以获取整个字符串的长度。
var strMsg = "我是帅气多金的程序猿! ";
alert (strMsg. length); 1/显示11
 
4.字符串拼接
 多个字符串之间可以使用 +进行拼接,其拼接方式为字符串+任何类型=拼接之后的新字符串， 
 拼接前会把与字符串相加的任何类型转成字符串 ,再拼接成一一个新的字符串
//1.1字符串“相加
+号总结口诀:数值相加,字符相连；只要字符串后面加任何类型都是字符串

3、布尔型Boolean

布尔类型有两个值: true和false , 其中true表示真(对) , 而false表示假(错)。
布尔型和数字型相加的时候，true的值为1 , false的值为0。
console. log(true + 1); // 2
console. log(false + 1);，
 
  Undefined 和Null
一个声明后没有被赋值的变量会有一个默认值undefined (如果进行相连或者相加时,注意结果)
NaN
一个声明变量给null值,里面存的值为空(学习对象时,我们继续研究ull)
 

4、 获取检测变量的数据类型
typeof可用来获取检测变量的数据类型
 

四、JavaScript数组

1、数组的概念

 数组是指一种组数据的集合,其中的每个数据被称作元素,在数组中可以存放任意类型的元素。  

2.数组的创建方式

JS中创建数组有两种方式:
利用new创建数组
 利用数组字面量创建数组

2.2利用new创建数组
var 数组名= new Array() ;
var arr = new Array(); // 创建一个新的空数组

2.3利用数组字面量创建数组
//1.使用数组字面量方式创建空的数组
var 数组名=[ ];
var 数组名= ['小白， '小黑，'大黄'，'瑞奇'];

 3.获取数组元素

3.1数组的索引
索引(下标) :用来访问数组元素的序号(数组下标从0开始)。
var arr = ['小白', '小黑', '大黄', '瑞奇'];
索引号:       0          1       2       3
数组可以通过索引来访问、设置、修改对应的数组元素。我们可以通过“数組名[索引"的形式来获取数组中的元素。
 

4.新增数组元素

使用“数组名Jength" 可以仿问数组元素的数量(数组长度)。

可以通过修改length长度以及索引号增加数组元素
 a、通过修改length长度新增数组元素
 可以通过修改length长度来实现数组扩容的目的
 length属性是可读写的
 

var arr = ['red', 'green', 'blue', 'pink'1;
arr.length=7;
console. log(arr);
console. log (arr[4]);
console. log (arr[5]);
console. log(arr[6]);

其中索引号是4，5 , 6的空间没有给值，就是声明变量未给值，默认值就是undefined.

 b、.新增数组元素修改索引号追加数组元素
 

var arr1 = ['red','green', 'blue'];
arr1[3] =‘pink';
console .10g(arr1);
 

5、冒泡排序:

是一种算法,把一系列的数据按照-定的顺序进行排列显示从小到大或从大到小)。

 <title>冒泡排序</title>
    <script>
        var a = [3, 4, 2, 5, 1];
        var step = [];
        for (var i = 0; i <= a.length - 1; i++) { //外面的躺数
            for (var j = 0; j <= a.length - i - 1; j++) { //里面的次数
                if (a[j] > a[j + 1]) {
                    step = a[j];
                    a[j] = a[j + 1];
                    a[j + 1] = step;

                }
            }

        }
        console.log(a);
    </script>

结果是： a[1,2,3,4,5];         注意<script>标签写在head里面

6、关于数组的例子

数组去重：

  <title>数组去重</title>
    <script>
        // 将数组[2, 日, 6, 1, 77,日, 52,日, 25，7]中的 8去掉后， 形成一个不包含 e的新 数组。
        // 1、需要一个新数组用于存放筛选之后的数据。
        // 2、遍历原来的数组， 把不是日的数据添加到新数组里面(此时要注意采用数组名+索引的格式接收数据)。
        // 3、新数组里面的个数， 用length 不断累加。
        var arr = [2, 0, 6, 1, 77, 0, 52, 0, 25, 7];
        var newArr = [];
        for (var i = 0; i < arr.length; i++) {
            if (arr[i] != 0) {
                newArr[newArr.length] = arr[i];
            }
        }
        console.log(newArr);
    </script>

翻转数组：

  <title>翻转数组</title>
    <script>
        //将数组['red', ' green', 'blue', 'pink", " purple']的内容反过来存放
        // 1.声明一个新数组 newArr

        // 2、把旧数组索引号第4个取过来(arr . length - 1)，给新数组索引号第0个元素(newArr . length)
        // 3、我们采取递减的方式
        var arr = ['red', ' green', 'blue', 'pink", " purple'];
        var newArr = [];
        for (var i = arr.length - 1; i >= 0; i--) {
            newArr[newArr.length] = arr[i];

        }
        console.log(newArr);
    </script>

总结：

以上就是我想分享的比较的简单却又重要的一些知识点，也是我在学习和写的时候没有怎么注意的，给你们提醒不要踩雷！容易忘记内容的话，就多看看，多记背，随时使用和多练习。