JavaScript学习笔记

Mark Down语法

Markdown是一种纯文本格式的标记语言。通过简单的标记语法,它可以使普通文本内容具有一定的格式。

相比WYSIWYG编辑器

优点:

1、因为是纯文本,所以只要支持Markdown的地方都能获得一样的编辑效果,可以让作者摆脱排版的困扰,专心写作。

2、操作简单。比如:WYSIWYG编辑时标记个标题,先选中内容,再点击导航栏的标题按钮,选择几级标题。要三个步骤。而Markdown只需要在标题内容前加#即可

缺点:

1、需要记一些语法(当然,是很简单。五分钟学会)。

2、有些平台不支持Markdown编辑模式。

还好,简书是支持Markdown编辑模式的。

开启方式:设置->默认编辑器->Markdown编辑器
一、标题

在想要设置为标题的文字前面加#来表示

一个#是一级标题,二个#是二级标题,以此类推。支持六级标题。

注:标准语法一般在#后跟个空格再写文字,貌似简书不加空格也行。

示例:

# 这是一级标题
## 这是二级标题
### 这是三级标题
#### 这是四级标题
##### 这是五级标题
###### 这是六级标题

二、字体
    • 加粗

要加粗的文字左右分别用两个*号包起来

    • 斜体

要倾斜的文字左右分别用一个*号包起来

    • 斜体加粗

要倾斜和加粗的文字左右分别用三个*号包起来

    • 删除线

要加删除线的文字左右分别用两个~~号包起来

示例:

**这是加粗的文字**
*这是倾斜的文字*`
***这是斜体加粗的文字***
~~这是加删除线的文字~~

效果如下:

这是加粗的文字

这是倾斜的文字

*这是斜体加粗的文字*

这是加删除线的文字


三、引用

在引用的文字前加>即可。引用也可以嵌套,如加两个>>三个>>>

n个...

貌似可以一直加下去,但没神马卵用

示例:

>这是引用的内容
>>这是引用的内容
>>>>>>>>>>这是引用的内容

效果如下:

这是引用的内容
这是引用的内容
这是引用的内容
四、分割线

三个或者三个以上的 - 或者 * 都可以。

示例:

---
----
***
*****

效果如下:

可以看到,显示效果是一样的。





五、图片

语法:

![图片alt](图片地址 ''图片title'')

图片alt就是显示在图片下面的文字,相当于对图片内容的解释。
图片title是图片的标题,当鼠标移到图片上时显示的内容。title可加可不加

示例:

![blockchain](https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/
u=702257389,1274025419&fm=27&gp=0.jpg "区块链")

效果如下:

blockchain

上传本地图片直接点击导航栏的图片标志,选择图片即可

markdown格式追求的是简单、多平台统一。那么图片的存储就是一个问题,需要用图床,提供统一的外链,这样就不用在不同的平台去处理图片的问题了。才能做到书写一次,各处使用。

关于图床的选择我写了一篇文章,对网上存在的各种方法做了总结,需要的朋友可以看看。markdown图床

六、超链接

语法:

[超链接名](超链接地址 "超链接title")
title可加可不加

示例:

[简书](http://jianshu.com)
[百度](http://baidu.com)

效果如下:

简书

百度

注:Markdown本身语法不支持链接在新页面中打开,貌似简书做了处理,是可以的。别的平台可能就不行了,如果想要在新页面中打开的话可以用html语言的a标签代替。

<a href="超链接地址" target="_blank">超链接名</a>

示例
<a href="https://www.jianshu.com/u/1f5ac0cf6a8b" target="_blank">简书</a>

七、列表
无序列表

语法:

无序列表用 - + * 任何一种都可以

- 列表内容
+ 列表内容
* 列表内容

注意:- + * 跟内容之间都要有一个空格

效果如下:

  • 列表内容

  • 列表内容

  • 列表内容

有序列表

语法:

数字加点

1. 列表内容
2. 列表内容
3. 列表内容

注意:序号跟内容之间要有空格

效果如下:

  1. 列表内容

  1. 列表内容

  1. 列表内容

列表嵌套

上一级和下一级之间敲三个空格即可

  • 一级无序列表内容

  • 二级无序列表内容

  • 二级无序列表内容

  • 二级无序列表内容

  • 一级无序列表内容

  1. 二级有序列表内容

  1. 二级有序列表内容

  1. 二级有序列表内容

  1. 一级有序列表内容

  • 二级无序列表内容

  • 二级无序列表内容

  • 二级无序列表内容

  1. 一级有序列表内容

  1. 二级有序列表内容

  1. 二级有序列表内容

  1. 二级有序列表内容


八、表格

语法:

表头|表头|表头
---|:--:|---:
内容|内容|内容
内容|内容|内容

第二行分割表头和内容。
- 有一个就行,为了对齐,多加了几个
文字默认居左
-两边加:表示文字居中
-右边加:表示文字居右
注:原生的语法两边都要用 | 包起来。此处省略

示例:

姓名|技能|排行
--|:--:|--:
刘备|哭|大哥
关羽|打|二哥
张飞|骂|三弟

效果如下:

姓名

技能

排行

刘备

大哥

关羽

二哥

张飞

三弟

九、代码

语法:

单行代码:代码之间分别用一个反引号包起来

    `代码内容`

代码块:代码之间分别用三个反引号包起来,且两边的反引号单独占一行

(```)
  代码...
  代码...
  代码...
(```)
注:为了防止转译,前后三个反引号处加了小括号,实际是没有的。这里只是用来演示,实际中去掉两边小括号即可。

示例:

单行代码

`create database hero;`

代码块

(```)
    function fun(){
         echo "这是一句非常牛逼的代码";
    }
    fun();
(```)

效果如下:

单行代码

create database hero;

代码块

function fun(){
  echo "这是一句非常牛逼的代码";
}
fun();
十、流程图
```flow
st=>start: 开始
op=>operation: My Operation
cond=>condition: Yes or No?
e=>end
st->op->cond
cond(yes)->e
cond(no)->op
&```

效果如下:

简书不支持流程图,所以截了个图

流程图.png

VScode快捷键

https://blog.youkuaiyun.com/weixin_46655235/article/details/121788623

JavaScript学习方法论

一、JavaScript笔记

[JavaScript笔记](E:\Personal Files\JavaScript学习\JavaScript记忆笔记.xlsx)

第1章 什么是JavaScript

第2章 HTML中的JavaScript

第3章 语言基础

3.1 语法

3.1.1 基本语法
  • 多行注释,仅限于 里使用。其他地方HTML使用无效。

  • 多行注释,还有单行注释 //

  • JS严格区分大小写

  • 多个空格或换行 会被忽略

  • 每一个语句都以分号结尾; 但JS具有自动添加分号的机制。

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>基本语法</title>
    <script>
    /*
        HEAD里放title 和 script 
    */
        alert(123)
    </script>
</head>

3.2 关键字与保留字

3.3 变量

3.3.1 字面量与变量
  • 字面量

字面量其实是一个值,它所代表的含义就是它字面的意思。 在js中所有的字面量都可以直接使用, 但是直接使用字面量并不方便。

  • 变量

变量可以存储字面量, 并且变量中存储的字面量可以随意的修改。

3.3.2 变量的内存结构
  • 变量中并不存储任何值, 而是存储的是值的内存地址

标识符:所有可以由我们自主命名的内容,都可以成为标识符。 比如:变量名,函数名, 类名.....

使用标识符需要遵循命名规范:

1、标识符只能含有字母、数字、下划线、$, 且不能以数字开头

3.4 数据类型

数据类型分为如下几种:

* 1、Typeof操作符

* 2、Undefined类型

* 3、Null类型

* 4、Boolean类型

* 5、Number类型

* 6、String类型

* 7、Symbol类型

* 8、Object类型

JS中原始值一共有七种

  • 1.Number

  • 2.BigInt

  • 3.String

  • 4.Boolean

  • 5.Null

  • 6.Undefined

  • 7.Symbol

七种原始值是构成各种数据的基石

原始值在JS中是不可变类型,一旦创建就不能修改

3.4.1 常量
  • 常量只能声明一次,重复赋值会报错。

  • 常量一般使用大写来突出。

  • 在JS中除了常规的常量外, 有一些对象类型的数据我们也会声明为常量。

    <script> 
        const A = 3.1415;
        A = 20;  //给常量重新赋值会报错
        console.log(A); 
    </script>

Uncaught TypeError: Assignment to constant variable. at 1.基本语法.html

3.4.2 字符串
  • 在JS中使用单引号或双引号来表示字符串

  • 转义字符

\"  -->  "   // 注意:没有空格

\'  -->  '

\\  -->  \

\t  -->  制表符

\n --> 换行
  • **模板字符串 ** (非常重要的知识点)

使用反单引号` 来表示模板字符串

模板字符串中可以嵌套变量

    <title>基本语法</title>
    <script> 
        let a = "双引号字符串";
        let b = '单引号字符串';
        let c = '单引号内嵌套"双引号"';
        let d = "双引号内嵌套'单引号'";
        console.log(c);
        console.log(d);

        //字符串如何换行呢?
        // 第一种方式使用换行符\n
        let e = "hello, \n world."
        console.log(e);

        // 第二种方式 使用模板字符串,可以直接换行即可以实现。 
        let f = `hello,
                 world`;
        console.log(f);

        //模板字符串的重要作用。 
        let name = "猪八戒"
        let str = `hello, ${name}`
        console.log(str);
        console.log(`str = ${str}`);
        console.log(typeof str);
    </script>
  • 布尔值 (Boolean)

布尔值主要用来进行逻辑判断

布尔值只有两个true 和 false

使用typeof检查一个布尔值时会返回“boolean!

  • 空值(NulI)

空值用来表示空对象

空值只有一个 null

使用typeof检查一个空值时会返回"object"使用typeof无法检查空值

  • 未定义 (Undefined)

当声明一个变量而没有赋值时,它的值就是UndefinedUndefined类型的值只有一个就是 undefined使用typeof检查一个Undefined类型的值时,会返undefined"

  • 符号(Symbol)

用来创建一个唯一的标识

使用typeof检查符号时会返回“symbol"

String() 和ToString() 的区别是什么? Video:JavaScript核心基础_讲师(李立超)
string 函数可以对Null 和Undefined生效。

类型转换指将一种数据类型转换为其他类型

将其他类型转换为(字符串、数值和布尔值)

转换为字符串

1.调用toString()方法将其他类型转换为字符串

  • 调用xxx的yyy方法

--> xxx.yyy()

  • 由于null和undefined中没有toString()所以对这两个东西调用toString()时会报错

2.调用String()函数将其他类型转换为字符串

  • 调用xxx函数 --> xxx()

  • 原理:

对于拥有toString()方法的值调用String()函数时

实际上就是在调用toString()方法对于null,则直接转换为"null"

对于undefined,直接转换为"undefined"

3.5 *操作符(也叫运算符)

3.5.1 操作运算符有哪些?
运算符(操作符)
运算符可以用来对一个或多个操作数(值)进行运算
算术运算符:
+ 加法运算符
-减法运算符
*乘法运算符
/ 除法运算符
** 幂运算
% 模运算,两个数相除取余数
注意:算数运算时, 除了字符串的加法, 其他运算的操作数是非数值时, 都会转换成数值后再运算。
<script>
        let a = 10
         a = 10 + '1'
         a = '1' + 10
         a = 10 - '1'
         a = '1' - 10
         a = 10/0  //Infinity 分母为0时, 结果为无穷大
         console.log(a); 
</script>
JS是一门弱语言类型, 当进行运算时会通过自动的类型转换来完成运算
当null参与计算时, null的值等于0;
当undefined 参与计算时, undefined的值为NaN
        a = 10 - '5' // 10 - 5
        a = 10 + true // 10 + 1
        a = true + 10
        a = false + 10
        a = 5 + null   // Null = 0
        a = null + 5
        a = undefined + 5  //undefined + 任意数 = 任意数
        a = NaN + 5  //NaN + 任意数 = 任意数
        a = 6 - undefined   // undefined 一定要小写。 如果写成Undefined的话就会报错。 
        console.log(a);
当任意一个值和字符串做加法 + 运算时,它会先将其他值转换为字符串,然后再做拼串的操作。
可以利用这一特点来完成类型转换
可以通过为任意类型 + 一个空串的形式来将其转换为字符串
其原理和String()函数相同,但使用起来更加简洁。
a = 'hello' + 'world'           //string helloworld
a = '1' + 2                    // string 12
a = true             //boolean true
a = 1 + ''  // string 1
console.log(typeof a, a)
3.5.2 赋值运算符

特别注意空赋值的情况, 即 a ??= 10 只有当a为null或者undefined时,才会给a赋值。

赋值运算符用来将一个值赋值给一个变量
    =     将符号右侧的值赋值给左侧的变量
    ??=   空赋值
          只有当变量的值为null或undefined时才会对变量进行赋值. 
    +=     a += n 等价于 a = a + n
    -=     a -= n 等价于 a = a - n
    *=     a *= n 等价于 a = a * n
    /=     a /= n 等价于 a = a / n
    %=     a %= n 等价于 a = a % n
   **=     a **= n 等价于 a = a ** n
3.4.3 自增和自减
  • ++ 自增运算符

- ++ 使用后会使得原来的变量立刻增加1

  • 自增分为前自增(++a)和后自增(a++)

  • 无论是++a还是a++都会使原变量立刻增加1

  • 不同的是++a和a++所返回的值不同

a++ 是自增前的值 旧值

++a 是自增后的值 新值

    <script>
        let a = 5
        a = a++ + ++a + a //5+7+7
        console.log(a);
    </script>
3.4.4 逻辑运算符

1.逻辑非 ! Video

可以利用这个特点将其他类型转换为布尔值

      ! 可以用来对一个值进行非运算
      它可以对一个布尔值进行取反操作
          true --> false
          false --> true
      如果对一个非布尔值进行取反,它会先将其转换为布尔值然后再取反
          可以利用这个特点将其他类型转换为布尔值
      类型转换
          转换为字符串
              显式转换
                  String()
              隐式转换
                  + ""
          转换为数值
              显式转换
                  Number()
              隐式转换
                  +
          转换为布尔值
              显式转换
                  Boolean()
              隐式转换
                  !!

2.逻辑与 Video

可以对两个值进行与运算

当&&左右都为true时,则返回true,否则返回false

与运算是短路的与,如果第一个值为false,则不看第二个值

与运算是找false的,如果找到false则直接返回,没有false才会返回true

对于非布尔值进行与运算,它会转换为布尔值然后运算

        但是最终会返回原值
        如果第一个值为false,则直接返回第一个值
            如果第一个值为true,则返回第二个值

3.逻辑或

可以对两个值进行或运算

当||左右有true时,则返回true,否则返回false

或运算也是短路的或,如果第一个值为true,则不看第二个值

或运算是找true,如果找到true则直接返回,没有true才会返回false

对于非布尔值或运算,它会转换为布尔值然后运算

但是最终会返回原值

如果第一个值为true,则返回第一个

        如果第一个值为false,则返回第二个
3.4.5 相等与全等 运算符

相等运算符 ==

  • 相等运算符,用来比较两个值是否相等

  • 使用相等运算符比较两个不同类型的值时,它会将其转换为相同的类型(通常转换为数值)然后再比较,类型转换后值相同也会返回true

  • null和undefined进行相等比较时会返回true

  • NaN不和任何值相等,包括它自身

全等运算符 ===

  • 全等运算符,用来比较两个值是否全等

  • 它不会进行自动的类型转换,如果两个值的类型不同直接返回false

  • null和undefined进行全等比较时会返回false

不等运算符 !=

  • 不等,用来检查两个值是否不相等

  • 会自动的进行类型转换

不全等运算符 !==

  • 不全等,比较两个值是否不全等

  • 不和自动的类型转换

    <script> 
        let result = 1 == 1 // true
        result = 1 == 2 // false
        result = 1 == '1' // true
        result = true == "1" // true

        result = null == undefined // true
        result = NaN == NaN // false

        result = 1 === "1" // false
        result = null === undefined // false

        result = 1 != 1 // false
        result = 1 != "1" // false
        result = 1 !== "1" // true
        console.log(result)        
    </script>
3.4.6 代码块
  • 使用 {} 来创建代码块,代码块可以用来对代码进行分组,

同一个代码中的代码,就是同一组代码,一个代码块中的代码要么都执行要么都不执行

  • let 和 var

在JavaScript中,使用let声明的变量具有块作用域

在代码块中声明的变量无法在代码块的外部访问

使用var声明的变量,不具有块作用域

    <script>
        {
            let a = 10
            console.log(`a 的值是${a}`);  
            var b = 20
        }         
        console.log(b);  // b的值是20
        console.log(a);  // 报错 Uncaught ReferenceError: a is not defined  at 0_运算符.html:18
    </script>

3.6 语句

3.7 函数

3.8 小结

第4章 变量、作用域与内存

4.1 原始值与引用值

4.2 执行上下文与作用域

4.3 垃圾回收

4.4 小结

第5章 基本引用类型

5.1 Date

5.2 RegExp

5.3 原始值包装类型

5.4 单例内置对象

5.5 小结

第6章 集合引用类型

6.1 Object

6.2 Array

6.3 定型数组

6.4 Map

6.5 WeakMap

6.6 Set

6.7 WeakSet

6.8 迭代与扩展操作

6.9 小结

二、DOM编程

三、CSS基本语法

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值