js

理塘在逃
172 阅读4分钟

javascript基础第N天

了解javascript

javascript是一种运行在客户端（浏览器）的编程语言，实现人机交互效果。

作用： 网页特效 (监听用户的一些行为让网页作出对应的反馈) 表单验证 (针对表单数据的合法性进行判断) 数据交互 (获取后台的数据, 渲染到前端) 服务端编程 (node.js)

组成javascript

由ECMAScript，web APIs(DOM, BOM)组成

ECMAScript:规定了js基础语法核心知识，比如变量、分支语句、循环语句、对象等等 Web APIs :（注意 DOM属于BOM） DOM 操作文档，比如对页面元素进行移动、大小、添加删除等操作 BOM 操作浏览器，比如页面弹窗，检测窗口宽度、存储数据到浏览器等等

Snipaste_2022-03-26_00-11-57.png

javascript书写方式

内部书写

直接写在html文件里，用script标签包住 script标签写在上面

<body>
    <script>
        // 弹窗
        alert('我透，你特么在干嘛')
    </script>
</body>
外部书写

代码写在.js文件里 通过script标签，引入到html页面中

<body>
    <script src="./js/02-弹出窗口.js"></script>
</body>
内联书写

代码写在标签内部（不常用）

<body>
    <!-- 双引号里面写单引号 -->
    <!-- 单引号里面写双引号 -->
    <!-- 不能写同样的 -->
    <button onclick="alert('骗你的')">点击爆炸</button>
    <button onclick='alert("骗你的")'>点击爆炸</button>
</body>

javascript注释方法

单行注释：ctrl+/ 多行注释：alt+shift+a

<body>
    <script>
        /* alt+shift+a多行注释 */
        // ctrl+/单行注释
    </script>
</body>

javascript结束符（了解）

结束符：代表语句结束(英文分号;)可写可不写

输入输出语法

语法： 人和计算机打交道的规则约定 我们要按照这个规则去写 我们程序员需要操控计算机，需要计算机能看懂

输出语法

document.write('');在body输出内容

    <script>
        // 直接在body里输出
        document.write('要输出的内容');
    </script>

console.log('');在控制台输出（常用）

    <script>
        // 控制台
        console.log('控制台打印');
    </script>

Snipaste_2022-03-26_00-12-37.png

alert（''）;弹窗

    <script>
        // 弹窗
        alert(username)
    </script>
输入语法

prompt('请输入姓名');

    <script>
        prompt('请输入你的名字');
    </script>

Snipaste_2022-03-26_00-12-50.png

输入联系输出

username = prompt('请输入你的名字'); 注意点： 前半部分定义名称，不能加引号，=前后用空格隔开 引用名称也不能加引号

    <script>
        username = prompt('请输入你的名字');
        document.write(username);
    </script>

扩展写法

    <script>
       username = prompt('你的名字');
    //    符号用空格隔开，连写用➕号
       alert('你真是个人才' + username)
    </script>
多个输入写法
    <script>
       username = prompt('你的名字');
       address = prompt('你的地址');
       musics = prompt('你喜欢听的音乐');
       sports = prompt('你喜欢的运动');
       fruit  = prompt('你喜欢吃的水果');
    //    符号用空格隔开，连写用➕号
       document.write(username + address + music + sport + fruit)
    </script>

变量

什么是变量？ 白话来说就是装东西的盒子，通俗的话是计算机用来储存数据的容器，它能让计算机变得有记忆。

注意点： 变量不是数据本身，它仅仅是一个用于储存数值的容器。可以理解为是一个个用来装东西的盒子

声明变量

首先要创建变量（专业名词为：声明变量） 语法：let 变量名

    <script>
        let num;
    </script>
变量赋值

创建变量后，你就能给它赋值。变量名后跟上一个“=”，然后是数值。

    <script>
        let num;
        num = 18;
    </script>

创建变量的同时也能赋值(方便)

    <script>
        let num = 18;
    </script>
更新变量

输出的值为最后更改的值

    <script>
        let num = 18 
        num = 20;
    </script>
let不允许多次声明一个变量

以下是不行的

    <script>
        let num = 18 
        let num = 20;
    </script>
可同时声明多个变量
    <script>
        let num = 18 , name = 李四, age = 23;
    </script>
练习1

声明一个变量，用于存放用户购买的商品 数量 为 20 件 声明一个变量，用于存放用户的 姓名 为 ’张三’ 依次控制台打印输出两个变量

    <script>
        let number = 20,userName = '张三';
        console.log(userName,number);
    </script>
练习2

需求： 浏览器中弹出对话框： 请输入姓名， 页面中输出：刚才输入的姓名

    <script>
        let userName = prompt('请输入姓名');
        document.write(userName);
    </script>
练习3

有2个变量： num1 里面放的是 10， num2 里面放的是20 最后变为 num1 里面放的是 20 ， num2 里面放的是 10

    <script>
        let num1 = 10,num2 = 20,temp;
        // temp = num1 = 10
        temp = num1;
        // num1 = num2 = 20
        num1 = num2;
        document.write(num1);
        document.write(temp);
    </script>
变量的本质

内存：计算机中存储数据的地方，相当于一个空间 变量：是程序在内存中申请的一块用来存放数据的小空间

规范的变量名

1.不能用关键字，例如let、var、if、for等 2.只能用下划线，字母，数字，$组成，且不能以数字开头 3.字母严格区分大小写，大小写是不同的变量

规范： 取名要有意义 遵守小驼峰命名法：第一个单词首字母小写，后面每个单词首字母大写。

练习4

需求：让用户输入自己的名字、年龄、性别，再输出到网页

    <script>
        let userName = prompt('输入你的名字'),
            userSex = prompt('输入你的性别'),
            userAge = prompt('输入你的年龄');
        document.write(userName,userSex,userAge)    
    </script>
数据类型
数字型number

里面的整数、小数、正数、负数等统一称为数字类型

    <script>
        let use = 100;
        let use2 = 10.2;
        let use3 = -100;
    </script>
字符串型string

通过单引号（ ''） 、双引号（ ""）或反引号( ` )包裹的数据都叫字符串，单引号和双引号没有本质上的区别，推荐使用单引号

    <script>
        let use = '100';
        let use2 = "100";
        let use3 = `200`;
        let use4 = `你好`;
        let use5 = ``;
        let use6 = '"大家好"';
        console.log(use6);
    </script>

注意点： 无论单引号或是双引号必须成对使用 单引号/双引号可以互相嵌套，但是不以自已嵌套自已（口诀：外双内单，或者外单内双） 必要时可以使用转义符 \，输出单引号或双引号

字符串拼接

    <script>
        let use = '100';
        let use2 = "100";
        document.write('100' + '100');
        document.write(use + use2);
    </script>

模板字符串

    <script>
        let use = '100';
        let use2 = "100";
        // 反引号跟${}一起使用,${}引入变量,反引号里面的所有内容包括＋号
        document.write(`${use}+${use2}`)
    </script>
练习6

需求：页面弹出对话框，输入名字和年龄，页面显示： 大家好，我叫xxx，今年xx岁了

    <script>
        let userName = prompt('输入你的姓名');
        let userAge = prompt('输入你的年龄');
        document.write(`大家好，我叫${userName},我今年${userAge}了`)
    </script>
布尔型boolean

表示肯定或否定时在计算机中对应的是布尔类型数据。 它有两个固定的值 true 和 false，表示肯定的数据用 true（真），表示否定的数据用 false（假）。

    <script>
        let itEat = true
        itEat = false;
    </script>
未定义型undefined

变量没赋值

    <script>
        let user;
        console.log(user);
    </script>
空类型null

null表示值为空

    <script>
        let user = null;
    </script>

null 和 undefined 区别： undefined 表示没有赋值 null 表示赋值了，但是内容为空

null 开发中的使用场景： 官方解释：把 null 作为尚未创建的对象 大白话： 将来有个变量里面存放的是一个对象，但是对象还没创建好，可以先给个null

获得变量数据

语法：typeof

    <script>
        let num = 1;
        let userName = '名字';
        let isEat = true;
        let age
        let userHeight = null;
        console.log(typeof num);
        console.log(typeof userName);
        console.log(typeof isEat);
        console.log(typeof age);
        console.log(typeof userHeight);
    </script>
类型转换

为什么要转换类型 JavaScript是弱数据类型： JavaScript也不知道变量到底属于那种数据类型，只有赋值了才清楚。 注意点： 使用表单、prompt 获取过来的数据默认是字符串类型的，此时就不能直接简单的进行加法运算。

隐式转换

number 1.除了+以外的算术运算符 比如 - * / 等都会把数据转成数字类型

    <script>
        let user = '100' - 20;
        let user2 = '100' / 20;
        let user3 = '100' * 20;
        // 都是数字类型
        document.write(user);
        document.write(user2);
        document.write(user3);
    </script>

​ 2.+号作为正号解析可以转换成Number

    <script>
        let user = +'100';
        let user2 = +'真棒啊';
        // +加字符串类型转变为数字类型
        console.log(typeof user);
        console.log(typeof user2);
    </script>

string

1.+ 号两边只要有一个是字符串，都会把另外一个转成字符串

    <script>
        let user =100 +'100';
        let user2 ='真好啊' + 100;
        console.log(user);
        console.log(user2);
    </script>
显式转换

number

    <script>
        let user ='100';
        let user2 = Number(user);
        let user3 = Number('100');
        console.log(typeof user2);
        console.log(typeof user3);
    </script>

如果字符串内容里有非数字，转换失败时结果为 NaN（Not a Number）即不是一个数字 NaN也是number类型的数据，代表非数字

parseInt(数据) 只保留整数

    <script>
        let user =100.12;
        let user2 = parseInt(user);
        let user3 = parseInt(100.12);
        console.log( user2);
        console.log( user3);
    </script>

parseFloat(数据) 可以保留小数

    <script>
        let user =100.12;
        let user2 = parseFloat(user);
        let user3 = parseFloat(100.12);
        console.log( user2);
        console.log( user3);
    </script>

string

    <script>
        let user =100;
        let user2 = String(user);
        let user3 = String(100);
        console.log(typeof user2);
        console.log(typeof user3);
    </script>

变量.toString(进制)

练习7

输入2个数，计算两者的和，打印到页面中

    <script>
        let num1 = +prompt('数值1');
        let num2 = +prompt('数值2');
        document.write(num1+num2);
    </script>
avatar
文章
阅读
粉丝