听阳光的猫

道阻且长、望你如一

0%

发表于 更新于 分类于
本文字数： 12k 阅读时长 ≈ 11 分钟

【JavaScript】typeof和instanceof的区别

image-20201002224535001

数据类型可以分为基本数据类型和引用数据类型

基本数据类型 ：String、Number、Boolean 、Null、Undefined、Symbol、BigInt ;

引用数据类型：Object;

typeof 一般被用于判断一个变量的类型，我们可以利用 typeof 来判断number, string, object, boolean,

function, undefined, symbol 这七种类型。

Object.prototype.toString.call() 我们可以利用这个方法来对一个变量的类型来进行比较准确的判断

instanceof 检测的左边必须是引用类型：数组、对象、用new()创建的对象；右边必须是函数

阅读全文 »

发表于 更新于 分类于
本文字数： 21k 阅读时长 ≈ 19 分钟

创建项目

npm install -g @vue/cli

vue create todo-app

image-20201028134057459

npm run serve 运行程序

阅读全文 »

发表于 更新于 分类于
本文字数： 36k 阅读时长 ≈ 33 分钟

一. 认识JavaScript

JavaScript作用是和网页进行交互的

JavaScript是一门编程语言

编程语言的发展史:

  1. 机器语言
  2. 汇编语言
  3. 高级语言: JavaScript/C/C++

JavaScript的历史

诞生背景: 1995网景公司 Eich, Scheme, 发明JavaScript

微软公司: JScript

1996年网景公司向ECMA(欧洲计算机制造商协会)提交了提案: ECMA指定这门语言的标准

1997年ECMA指定标准: ECMAScript

JavaScript只是ECMAScript一种实现:

JavaScript: JavaScript + DOM + BOM

阅读全文 »

发表于 更新于 分类于
本文字数： 42k 阅读时长 ≈ 38 分钟

coderwhy

01_表格实现细线表格

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>

    <style>
        h2 {
            text-align: center;
        }

        table {
            /* 1.边框的宽度 2.实线/虚线 3.边框的颜色 */
            border: 1px solid #666;

            /* 重点: 将边框合并 */
            border-collapse: collapse;

            /* table的居中显示 */
            margin: 20px auto;
        }

        table tr:first-child {
            font-weight: 700;
        }

        td {
            border: 1px solid #666;
            padding: 20px;
        }
    </style>
</head>
<body>
    
    <!-- table>(tr>td{单元格$}*5)*3 -->
    <h2>影院电影放映列表</h2>
    <table>
        <tr>
            <td>单元格1</td>
            <td>单元格2</td>
            <td>单元格3</td>
            <td>单元格4</td>
            <td>单元格5</td>
        </tr>
        <tr>
            <td>单元格1</td>
            <td>单元格2</td>
            <td>单元格3</td>
            <td>单元格4</td>
            <td>单元格5</td>
        </tr>
        <tr>
            <td>单元格1</td>
            <td>单元格2</td>
            <td>单元格3</td>
            <td>单元格4</td>
            <td>单元格5</td>
        </tr>
    </table>

</body>
</html>

text-align 用于设置元素内容在元素中的水平对齐方式，CSS属性定义行内内容（例如文字）如何相对它的块父元素对齐。

text-align并不控制块元素自己的对齐，只控制它的行内内容的对齐。

阅读全文 »

发表于 更新于 分类于
本文字数： 53k 阅读时长 ≈ 48 分钟

一. 认识CSS

CSS提供了3种方法，可以将CSS样式应用到元素上

内联样式(inline style)

将样式直接写在元素的style属性上

CSS样式之间用分号;隔开，建议每条CSS样式后面都加上分号;

在很多国内外资料中，“CSS样式”与“ CSS属性”是同义词

样式名 -> 属性名
样式值 -> 属性值

1
2
3
4
5
6
7
8
<body>
    <!-- 1.内联(行内)样式: inline -->
    <!-- <h1 style="属性名: 属性值;属性名: 属性值;">网页的标题</h1> -->
    <h1 style="font-size: 50px; color: red;">网页的标题</h1>
    <p style="color: red;">网页的段落</p>
    <a style="color: red;" href="#">百度一下</a>
    <div style="font-size: 20px; background-color: red;">哈哈哈</div>
</body>
阅读全文 »

发表于 更新于 分类于
本文字数： 789 阅读时长 ≈ 1 分钟

VSCode常用插件

image-20200915172757838

阅读全文 »

发表于 更新于 分类于
本文字数： 24k 阅读时长 ≈ 22 分钟

一.开发者工具

VSCode的使用

安装插件：

  1. Chinese 工具中文支持
  2. open in browser 将html页面在浏览器中打开
  3. Atom 个人比较喜欢的一款主题
  4. Vscode-icons 文件图标的样式

工具配置：

  1. Auto Save 自动保存
  2. Font Size 修改代码字体大小
  3. Word Wrap 代码自动换行
  4. Render Whitespace 空格的渲染方式(个人推荐)
  5. Tab Size 代码缩进
  • 基础阶段建议缩进4个空格,进阶阶段开始慢慢习惯2个空格
阅读全文 »