阶段三 JavaScript网页编程---js基础语法

系列文章目录

一：计算机基础和JavaScript介绍

二：JavaScript变量

三：JavaScript数据类型

四：JavaScript操作符

五：JavaScript流程控制及案例

六：JavaScript循环及案例

七：JavaScript数组和冒泡排序

八：JavaScript函数及应用

九：JavaScript作用域及预解析

十：JavaScript对象

十一：JavaScript内置对象及案例

十二：JavaScript简单类型和复杂类型

---

文章目录

• 系列文章目录
• 前言
• 一、计算机基础和 JavaScript介绍
• 二、使用步骤
  • 1.引入库
  • 2.读入数据
• 总结

---

前言

红的标注的都是和钱钱相关的，你不看在知识的份上，也得看在钱钱的份上，况且我知道大家  视金钱如粪土  视知识为力量  那就更要好好记住了  因为常用且重要   不标注的也不是不重要  都得学  只不过红的对于找工作阶段的孩子们  要重要点

---

一、计算机基础和JavaScript介绍

说点废话：

数据以二进制0和1存储在计算机内部，比如图片、文件都是以二进制存在硬盘、内存里 

数据存储单位：bit<byte<kb<GB<TB<....

位(bit)：1bit可以保存一个0或者1；

字节(byte):1B=8b    相当于8个0等于1个B的大小

千字节(KB)：1KB=1024B

剩下的自己百度吧  

程序咋运行的呢：  硬盘----->内存条------>CPU

打开程序，先把硬盘中的代码加载到内存中，然后CPU在执行内存中的代码

因为CPU运行速度太快了，硬盘干活太慢了，跟不上，就给内存条，内存条是电，硬盘是机械，就好比，A要讲一篇文章，太墨迹了，C听得着急，B就把A要说的  快速的说一遍。

JavaScript：运行在客户端的脚本语言

浏览器执行js:

浏览器分成两部分：渲染引擎和JS引擎

渲染引擎：用来解析HTML和CSS，就是内核，如chrome浏览器的blink

JS引擎：读取网页的JavaScript代码，对其处理后运行

简单理解：写一行js代码，JS引擎就把这行代码转为机器语言，然后计算机去执行；

---

重点来了啊，竖起小耳朵

1.JS组成

 2.JS书写位置：行内 内嵌  外部 （ 和css里的style差不多）

行内：

<input type="button" value="哈哈哈" onclick="alert('xixixi')">

内嵌：写在head里，如果写在body里，就写在html元素下面 我说的是你写的HTML布局下面，别写出HTML标签外了  如果想写在HTML元素上面 也行，到时候再说 现在忘了

<script>
        prompt('gg') //输入框
        alert('弹出框')
        console.log('控制台打印的，给程序员测试用的');
</script>

外部：注意这里的script标签里不能写代码

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

好累 刚辛苦打出来那么多给我卡没了，我再说一遍吧，我打字多慢的，给我卡没了，像话吗  不像话 哎呀  我这个不写那么细  初学者建议去看pink老师的课  也可以去淘宝买 或者哔哩哔哩免费

我这就是辅助性文章，但是最强辅助，吹牛的 就是自己大白话理解一下 好了 不说了 你经常看我的文章就知道我是个小墨迹怪  唉  被卡没了  记仇啊！！！

二、JavaScript变量

1.什么是变量

存放数据的容器，通过变量名获取数据，甚至修改数据

比如：博主我的美妆蛋就代表数据，装这个美妆蛋的盒子就代表变量，我有好几盒，这盒的名字叫num  我可以通过这盒num，拿到其中的美妆蛋，也就是数据，这是获取，我还可以把他拿出来剪成两半  这算修改  懂了吧

另外啊普及美妆知识：

美妆蛋用来上粉底液的  题外话 我贴睫毛画眼线技术挺好的 底妆修容我真是脑袋疼，小姐妹们，小兄弟们化妆厉害的教教我，争取德智体美全面发展！！！哈哈哈哈哈哈

 变量专业解释：变量是程序在内存中申请的一块用来存放数据的空间

2.变量的使用：1.声明 2.赋值

2.1声明变量：  var  age;  开辟了一个空间

2.2赋值：age=10   把10给age  不是相等

2.3.变量的初始化：声明一个变量同时赋值为变量的初始化

var age=10;

注释：变量名不要为关键字 、 name 

声明多个变量：

    var age = 18,
        sex = '男',
        tel = 111;

声明变量的特殊情况：

1.声明变量未赋值：

 var hh;
 console.log(hh); //控制台打印undefined

2.不声明不赋值 直接使用某个变量会报错：

console.log(a);

 3.不声明  直接赋值使用：  可以使用 不提倡  会变成全局变量

ff = 7;
console.log(ff); // 返回7

3.交换两个变量的值

   <script>
        // a 1 b 2
        var a = 1;
        var b = 2;
        var temp = a;
        a = b;
        b = temp;
        console.log(a, b);
    </script>

三：JavaScript数据类型

1.为什么需要数据类型

不同的数据占据的存储空间不同，为了充分利用存储空间，定义了不同的数据类型；

比如pink老师举得例子：不同的人不同的体重，太瘦的睡单人床，太胖的睡双人床；能够充分利用空间，不然都睡单人床太挤，都睡双人床太浪费空间

举个例子，别杠，不存在任何歧视，为了更好的理解，抱歉。

2.js的变量的数据类型  是根据右边变量值的数据类型来判断的；

3.js拥有动态类型，同时意味着相同的变量可用作不同的类型

 <script>
        var a = 0;
        a = 'hh'
        console.log(a); //hh  变量的数据类型是可以变化的
 </script>

4.数据类型分类（面试常问）敲重点啊姐妹们！！！兄弟们！！！

这可是和挣钱有关的啊 都给我仔细学！！！！背下来！！！！！！

js把数据类型分为两类：

简单数据类型：Number、String、Boolean、Undefined、Null

复杂数据类型：object（function、array）

(复杂数据类型就是object，他要问你还有啥，就说还有function、array，因为这两个是object的小儿子)

注意：和字符串类型拼接的都会变成字符串；

 console.log('pink' + 0); //pink0
 console.log('0' + 1); //01
 console.log('undefined' + 1); //undefined1

5.数字型 Number

二进制、十进制、八进制、十六进制

八进制  前面加0  比如012

十六进制   前面加0x 比如0x12

6.isNaN()   代表不是一个数字

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

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

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

aaaaaaaaa!!!!!!!又给我整没了   我哭！！！！

我不写那么细了 有问题可以问我    

7.undefined和null区别（面试常问）

undefined：作用于已经声明的变量但未初始化

null：表示尚未存在的对象

还有：这里是因为发生了隐式转换哦

console.log(undefined + 1); //NaN
console.log(null + 1); //1

8.typeof检测变量数据类型的（面试常问）

判断方法typeof
typeof可以用来区分除了Null类型以外的原始数据类型，对象类型的可以从普通对象里面识别出函数：
问题一：typeof不能识别null，如何识别null？答案：如果想要判断是否为null，
可以直接使用===全等运算符来判断
问题二：typeof作用于未定义的变量，会报错吗？答案：不会报错，返回"undefined"。

9.转换为字符串类型

toString()	用法：变量.toString()
String()	用法：String(变量)
利用 + 拼接	用法：+ " "

10.转换为数字型

parseInt(string)	用法：parseInt(变量)     取整 如： console.log(parseInt('12.96')); //12 console.log(parseInt('120px')); //120    可以去掉单位 console.log(parseInt('rem120px')); //NaN   字母在前面不行
parseFloat(string)	用法：parseFloat(变量)     浮点数 如：  console.log(parseFloat('12.962')); //12.962  console.log(parseFloat('120px')); //120  console.log(parseFloat('rem120px')); //NaN
Number()	用法：Number(变量)
利用 - * /隐式转换	用法：

四：JavaScript操作符

五：JavaScript流程控制

六：JavaScript循环

1.循环的目的

目的：重复执行某段代码；

好处：减少代码量，程序更高效；

2.for循环语法结构

在js中，主要有三种类型的循环语句：for循环、while循环、do...while循环；

for (初始化变量; 条件表达式; 操作表达式) {

        //循环体(一段被重复执行的语句被称为循环体)

}

// 初始化变量：就是var声明的一个普通变量，通常跟计数有关，只执行一次

// 条件表达式：就是决定循环体是否继续执行，就是终止条件

 操作表达式：每次循环后，最后执行的代码  常用于计数器变量更新，递增或递减

例如：

for (var i=0; i<=10; i++) {

console.log(" 哈哈哈哈 ")

} //打印十次哈哈哈哈

七：JavaScript数组和冒泡排序

1.删除指定数组元素

代码思想：定义一个新的空数组，用来装遍历原数组之后筛选后的元素，

                  遍历原数组，用if判断，如果原数组里的这个元素 不等于 要删除的那个元素

                  那么就把原数组里的这个值赋给新数组，新数组长度等于原数组筛选后的长度

代码实现：

例如：删除78，3, 5,2

var arr=[2,5,56,78,5,2,0,9,3]; //原数组

var newArr=[];  //定义一个新的空数组

for (var i=0; i<arr.length; i++) {  // 遍历原数组

        if (arr[i]!==78&&arr[i]!==3&&arr[i]!==5&&arr[i]!==2) {

                newArr[newArr.length]=arr[i]; //原数组里的这个值赋给新数组

        }

}

 console.log(newArr); //打印新数组    打印结果：[56,0,9]

上面也能实现数组去重，但是数组去重是 重复的只留下一个，而不是都删除

2.数组去重（面试常问）

那我们来真正实现一个数组去重：

代码思想：定义一个新的空数组，用来装遍历原数组之后筛选后的元素，

                  遍历旧数组，拿旧数组的元素去查新数组，

                  如果旧数组里的这个元素在新数组里没有，就把这个值给新数组，如果有了，就不存 

                  了，利用新数组.indexOf（数组元素），如果返回-1，就说明新数组里面没有该元素。

代码实现：可以用函数封装起来实现

单词 unique ：独特的，独一无二的

function unique () {

        var newArr=[];  //定义一个新的空数组

        for (var i=0; i<arr.length; i++) { //遍历旧数组

                if (newArr.indexOf(arr[i])=== -1) {

                        newArr.push(arr[i]) //用push把该元素添加到新数组中

                }

        }

        return newArr // 把新数组返回出去

}

var arr=['c' ,' 5' ,5 ,'c','b','g'];

console.log(unique(arr)) // 调用函数

,

没更完！！！！！

在很多重复的时候，是不是有些麻烦？我们可以采用es6新增的一些方法，快速简洁的实现数组去重功能，这个也是面试常问哦，还可能让你手写呢，加油，和我一起把他吃透吧！

数组去重

八：JavaScript函数及应用

九：JavaScript作用域及预解析

十：JavaScript对象

十一：JavaScript内置对象及案例

十二：JavaScript简单类型和复杂类型

还没写完！！！！

1.引入库

代码如下（示例）：

import numpy as np import pandas as pd import matplotlib.pyplot as plt import seaborn as sns import warnings warnings.filterwarnings('ignore') import ssl ssl._create_default_https_context = ssl._create_unverified_context 

2.读入数据

代码如下（示例）：

data = pd.read_csv( 'https://labfile.oss.aliyuncs.com/courses/1283/adult.data.csv') print(data.head()) 

该处使用的url网络请求的数据。

---

总结

提示：这里对文章进行总结：
例如：以上就是今天要讲的内容，本文仅仅简单介绍了pandas的使用，而pandas提供了大量能使我们快速便捷地处理数据的函数和方法。