JavaScript的学习笔记（一）

最新推荐文章于 2024-07-26 20:46:33 发布

旺仔小薯条

最新推荐文章于 2024-07-26 20:46:33 发布

阅读量194

点赞数

分类专栏： JavaScript学习笔记文章标签： javascript html js 字符串 html5

本文链接：https://blog.csdn.net/begin_glory/article/details/113703536

版权

JavaScript学习笔记专栏收录该内容

2 篇文章 0 订阅

订阅专栏

一、JS的组成

JS由三部分组成：ECMAScript （JavaScript语法）, DOM（页面文档对象模型）, BOM（浏览器对象模型）

二、JS有三种书写位置，分别为行内、内嵌和外部。

1.行内式

语法：

<input type="button" value="点我试试" onclick="alert('Hello World')">

可以将单行或少量JS 代码写在HTML标签的事件属性中（以on开头的属性），如：onclick
注意单双引号的使用，在HTML中推荐使用双引号，JS中推荐使用单引号
可读性差，在html中编写大量JS代码时，不方便阅读
一般不使用这种方法

如：

<body>
    <input type="button" value="你的名字" onclick="alert('Kun')">
</body>

2.内嵌式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        alert('正道的光')
    </script>
</head>

3.外部js 双标签

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

如：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="my.js"></script>
</head>

三、JS注释

1.单行注释用// 快捷键为Ctrl + /

2.多行注释用/* */ 快捷键为Shift +Alt + a

四、JavaScript输入输出语句

在这里插入图片描述

console.log()中的内容不会显示在浏览器网页上，只有在浏览器控制台里才能看到。

五、变量

1.变量的声明和赋值

<script>
        // 1.声明一个who变量
        //尽量不要直接用name作为变量名
        var who;
        // 2.给who变量赋值
        who = Kun;
        //3. 输出结果
        console.log(who);
        // 4.变量的初始化
        var myname='Aurora';
        console.log(myname);
        //5.声明多个变量
        var who = you,
            age = 18,
            sex = male;  
</script>

在这里插入图片描述

undefined未定义的

2.变量命名规范

在这里插入图片描述

注：中间不能有空格；除了字母和数字，只能用下划线和美元符号，不能用其他的符号；下划线和美元符号可以放变量首。

六、简单数据类型
在这里插入图片描述

1.在JS中八进制前面加0，十六进制前面加0x

2.数字型三个特殊值

Infinity,无穷大，大于任何数值
-Infinity,无穷小，小于任何数值
NAN，Not a number, 非数值

3.字符串的拼接：只要有字符串和其它类型相拼接，最终的结果是字符串类型

+号口诀：数值相加，字符相连

4.Undefined 和Null

在这里插入图片描述

5.typeof 检测变量数据类型

6.转换为字符型

在这里插入图片描述

7.转换为数字型

在这里插入图片描述

注：parseInt()转化为整数类型只取整数部分，不论小数是多少

<script>
        console.log(parseInt('3.14'));//3
        console.log(parseInt('3.14px'));//3
        console.log(parseInt('rem3.14px'));//NaN
        console.log(parseFloat('3.14'));//3.14
        console.log(parseFloat('3.14px'));//3.14
        console.log(parseFloat('rem3.14px'));//NaN
</script>

七、前置递增和后置递增运算符

1.前置递增运算符：++写在变量前面，先自加1，后返回值

<script>
    var age=10;
    ++age;//相当于age = age + 1
    console.log(age);//11
</script>

2.后置递增运算符：++写在变量后面，先返回原值，后自加1

<script>
    var age=10;
    age++;
    console.log(age);//11
//前置递增和后置递增如果单独使用，效果是一样的
</script>

<script>
    var age=10;
    console.log(age++ + 10);//20
    console.log(age);//11
</script>

<script>
    var age=10;
    age++;//age++  11
    console.log(age++ + 10);//21
    console.log(age);//12
</script>

3.例如：

<script>
        var a = 10;
        ++a;  //++a 11     a = 11
        var b = ++a + 2;  //a = 12   ++a = 12
        console.log(b); //14

        var c = 10;
        c++; // c++ 11  c = 11
        var d = c++ + 2; // c++ = 11  c = 12
        console.log(d); //13

        var e = 10;
        var f = e++ + ++e;  // 1. e++ = 10  e = 11  2. e = 12 ++e = 12
        console.log(f); // 22
        //后置递增  先表达式返回原值，后面变量再自加1
</script>

4.开发时，大多使用后置递增/减，并且代码独占一行

5.等号
在这里插入图片描述

八、逻辑运算符

逻辑运算符	说明	案例
&&	“逻辑与”，简称“与” and	true&& false
\|\|	“逻辑或”，简称“或” or	true \|\| false
！	“逻辑非”，简称“非” not	！true

1.短路运算（逻辑中断）

①逻辑与

语法：表达式1&&表达式2
如果表达式1为真，则返回表达式2
如果表达式1为假，则返回表达式1

②逻辑或

语法：表达式1||表达式2
如果表达式1为真，则返回表达式1
如果表达式1为假，则返回表达式2

2.运算符优先级

在这里插入图片描述

旺仔小薯条

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript的学习笔记（一）

一、JS的组成JS由三部分组成：ECMAScript （JavaScript语法）, DOM（页面文档对象模型）, BOM（浏览器对象模型）二、JS有三种书写位置，分别为行内、内嵌和外部。1.行内式语法：<input type="button" value="点我试试" onclick="alert('Hello World')">可以将单行或少量JS 代码写在HTML标签的事件属性中（以on开头的属性），如：onclick注意单双引号的使用，在HTML中推荐使用双引号，
复制链接

扫一扫

专栏目录