3.9 day19 js基础第一天

已于 2023-03-09 22:51:55 修改
阅读量190 收藏 1
点赞数
分类专栏： js基础 文章标签： javascript 前端 html5 Powered by 金山文档
于 2023-03-09 21:28:30 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45190461/article/details/129420541
版权
该文档详细介绍了JavaScript的学习路径，从语言的基本概念到实际的书写位置，包括内部、外部和内联的脚本使用。讲解了注释、输出语法如alert和console.log，以及变量的声明、赋值、更新和命名规范。还涉及到了数据类型的讨论，如数字、字符串、布尔值、特殊值NaN，以及类型转换的重要性。文档中包含多个实例和练习题，帮助读者巩固所学知识。
摘要由CSDN通过智能技术生成

1.javaScript学习路线

2.javaScript介绍

3.书写位置

1.内部

2.外部

3.内联

4.小结

5.课堂练习

<!DOCTYPE html>
<html lang="en">
<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>Document</title>
    
</head>
<body>
    <!-- <script>
        alert("勤奋")
    </script> -->
    <script src="./my.js"></script>
</body>
</html>
alert("我要努力学习js")

4.注释

5.结束符号

6.输入输出语法

1.输出

2.输入

3.练习

<!DOCTYPE html>
<html lang="en">
<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>Document</title>
</head>
<body>
    <script>
        alert("你好js")
        document.write("js我来了")
        console.log("他会魔法")
    </script>
</body>
</html>

7.字面量

8.总结

3.变量

1.变量是什么

2.基本使用

  1. 变量声明

2.变量赋值

3.总结

4.课堂练习

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=scr, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        let num = 20
        let uname = "张三"
        console.log(num);
        console.log(uname);
    </script>
</body>
</html>

5.更新变量

6.声明多个变量

7.总结

8.案例练习

1.弹出名字

2.交换变量的值

9.变量的本质

10.命名规范和规则

11.课堂练习

<!DOCTYPE html>
<html lang="en">
<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>Document</title>
</head>
<body>
    <script>
        let name = prompt("请输入名字")
        let age = prompt("请输入年龄")
        document.write(name, age)
    </script>
</body>
</html>

12.let和var区别

4.变量拓展-数组

1.简介

2.案例

3.总结

5.常量

1.概念

2.总结

6.数据类型

1.数据类型

2.数字类型

1.简介
2.总结
3.案例
<!DOCTYPE html>
<html lang="en">
<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>Document</title>
</head>
<body>
    <script>
        const pi = 3.14
        let r = prompt("请输入圆的半径")
        document.write(pi *r *r)
    </script>
</body>
</html>

4.特殊值NaN

3.字符串类型string

1.简介

2.拼接

3.模板字符串

1.简介
2.总结
3.案例

4.boolean

5.undefined

6.null

7.总结

8.检测数据类型

7.类型转换

1.为什么类型转换

2.隐式转换

3.显式转换

4.案例

8.综合案例

1.案例1

<!DOCTYPE html>
<html lang="en">
<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>Document</title>
    <style>
        * {
            text-align: center;
            font-weight: 400;
        }
        table {
            /* 合并相邻边框 */
            border-collapse: collapse;
        }
        th {
            padding: 0 20px;
        }
        table,th,td {
            border:1px solid black;
        }
    </style>
</head>
<body>
    <script>
        let name = prompt("请输入名称")
        let money = prompt("请输入价格")
        document.write(`<table>
        <tr>
            <th>商品名称</th>
            <th>价格</th>
        </tr>
        <tr>
            <td>${name}</td>
            <td>${money}</td>
        </tr>
    </table>`)
    </script>
</body>
</html>

2.常见错误

9.单选题

10.简答题

  1. 请说出变量的使用场景？

声明变量,申请内存空间,赋值

  1. 请说出基本数据类型有哪5种？

number,string,boolean,undefined,null

  1. 请说出模板字符串使用方法？

`${num1}`

  1. 下面代码输入结果是？ （）

const num=10
console.log( num+11) 21
console.log( num+'11') 1011
console.log( num+ +'11') 21

  1. 下面代码输入结果是？ （）

const num=10

console.log( typeofnum+'11') number11

console.log( typeof (num+'11'))string

console.log( typeof (num+ +'11'))number

11.编程题

1.获取用户信息

<!DOCTYPE html>
<html lang="en">
<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>Document</title>
</head>
<body>
    <script>
        let name = prompt("请输入姓名")
        let age = prompt("请输入年龄")
        let gender = prompt("请输入性别")
        console.log(`用户的姓名为${name}`)
        console.log(`用户的年龄为${age}`)
        console.log(`用户的性别为${gender}`)
    </script>
</body>
</html>

2.增加年龄

<!DOCTYPE html>
<html lang="en">
<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>Document</title>
</head>
<body>
    <script>
        let age = +prompt("请输入年龄")
        alert(`据我估计,你五年后年龄为${age + 5}`)
    </script>
</body>
</html>

3.计算银行卡余额案例

<!DOCTYPE html>
<html lang="en">
<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>Document</title>
    <style>
        * {
            text-align: center;
            font-weight: 400;
        }

        th {
            padding: 5px 20px;
        }

        table,th,td {
            border-collapse: collapse;
            border:1px solid black;
        }

    </style>
</head>
<body>
    
    <script>
        let total_money = +prompt("请输入总金额")
        let elec = +prompt("请输入总电费")
        let water = +prompt("请输入总水费")
        let net = +prompt("请输入总网费")
        let money = total_money - elec - water - net
        document.write(`
        <table>
        <tr>
            <th>总金额</th>
            <th>电费</th>
            <th>水费</th>
            <th>网费</th>
            <th>余额</th>
        </tr>
        <tr>
            <td>${total_money}</td>
            <td>${elec}</td>
            <td>${water}</td>
            <td>${net}</td>
            <td>${money}</td>
        </tr>
    </table>
        `)
    </script>
</body>
</html>

12.排错题

4.1
5行:关键字不能作为变量名
7行:变量名不能以字母开头
11行:const定义的常量不能二次赋值

4.2
5行:个实话输出字符串,是键盘上的esc下边那个键``,不是单引号
我在某马学前端
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
小虎前端学习笔记-JS基础篇(三)
zs875421的博客
03-21 1019
运算符 文章目录 算数运算符 递增递减运算符 比较运算符 逻辑运算符 赋值运算符 运算符优先级 一、算数运算符 加 + 减 - 乘* 除 / 取模 % （先乘除 后加减） console.log(1 + 1);//2 加 console.log(1 - 1);//0 减 console.log(1 * 1);//1 乘 console.log(1 / 1);//1 除 console.log(4 % 2);...
javascript高级程序设计阅读收获（3.5.1）——一元操作符
木子 旭的博客
05-27 85
1.递增递减操作符（++ --） –/++在前，该变量先+/-1再进行其他运算 let num = 10; let num2 = ++num; console.log(num);//结果为9 console.log(num2);//结果为9 –/++在后，该变量进行其他运算后再+/-1 let num = 10; let num2 = num++; console.log(num);//结果为11 console.log(num2);//结果为10 该操作符可以作用于任何类型。 作用于
JS练习题
红炉一点雪的博客
07-23 220
JS练习题JS2021.02.01 JS 2021.02.01 视频链接：https://wy310.cn/2019/12/18/what-is-call-and-apply/ 链接：https://www.nowcoder.com/questionTerminal/cee7e6f5d99e46e0a01e28b60a93d5cb 来源：牛客网 1） 当作为一个构造函数（带有运算符 new）调用时，Boolean() 将把它的参数转换成一个布尔值，并且返回一个包含该值的 Boo
[译]送你43道JavaScript面试题
infotw的博客
06-19 1697
导读 这两天的GitHub Trending repositories被一个名叫 javascript-questions的项目霸榜了，项目中记录了一些JavaScript题目。 我大概从头到尾看了一遍，都是一些基础的题目，我大概花了半个小时（有些题很简单，可以一扫而过）把这些题做完了，虽然题目很简单，但是每道题都对应一个知识点，如果这个知识点你没有接触过，那肯定会做错，如果你接触过这些知识点，那...
JavaScript-操作符简介
u012137648的博客
05-28 376
JavaScript-操作符简介 本篇来讲一讲操作符，几乎包含了所有的操作符。内容较多，花了几个晚上写加修改，终于完稿! 你将学到： 一元操作符 ++和– +和- 位操作符 与AND 或OR 非NOT 异或XOR 按位左移<< 按位右移>> 无符号右移>>> 布尔操作符 逻辑非! 逻辑与&& 逻辑或|| 算术操作符 加+ 减- 乘* 除/ 取余% 幂等** 关系操作符 >、>=、<、<=、==、!= ===
python-3.9.19.exe
03-20
windwos环境下python 3.9系列32位安装包，仅推荐个人学习、开发、娱乐或者测试环境下使用。
python-3.9.19-amd64.exe
03-20
windwos环境下python 3.9系列64位安装包，仅推荐个人学习、开发、娱乐或者测试环境下使用。
python-3.9.19.tgz
07-11
python-3.9.19.tgz
python 3.9.19源码编译包
05-01
python 3.9.19源码编译包python 3.9.19源码编译包python 3.9.19源码编译包python 3.9.19源码编译包python 3.9.19源码编译包python 3.9.19源码编译包python 3.9.19源码编译包python 3.9.19源码编译包python 3.9.19...
MAPZONE 桌面GIS系统 v3.9.6782基础版
04-15
MAPZONE桌面GIS系统是一款专业的地理信息系统软件，其v3.9.6782基础版为用户提供了强大的地图处理和地理数据分析功能。该系统专为满足各类用户在地理信息领域的应用需求而设计，尤其对于林业管理数据的处理有着显著...
JavaScript基础
qq_44997166的博客
03-14 1116
JavaScript的概述 1.组成部分 三部分组成：ECMSCript 基础语法（es5） DOM document object model 文档对象模型（操作html文档内容） BOM borswer object model 浏览器对象模型（操作浏览器内容） JavaScript书写位置： ...
3.2JavaScript网页编程——JavaScript网页编程基础
lanmy_dl的博客
10-13 1881
特殊的几个为假的：undefine、null、0、false、‘’ 这五个和&&直接不用判断后面 和 ||直接看后面，（nan是非数值，所以不考虑，一般也可以暂且看做false，在if条件里面也是），并返回该数组的新长度arr.unshift(‘ewer’,‘rewt’)，添加之后是[‘ewer’,‘rewt’,…prompt()的获取输入默认是字符串类型，可以+prompt()获取就是数字类型了，括号里面可以加提示字符串。前面括号是定义，传入的函数是形参，后面的括号是调用执行，里面是实参。
『每日一题』搬砖之三
tang422622的博客
04-20 338
公众号上看的每日一题，搬砖来记录下，会把一些重点的评论摘抄下来。 下面输出什么？？？ 1、 function Person (firstName, lastName) { this.firstName = firstName; this.lastName = lastName; } const lydia = new Person ('Lydia', 'Hallie'); const sarah = Person('Sarah', 'Smith'); console.log(lydia); cons
JavaScript基础（1）
qq_54034432的博客
04-20 970
一、JavaScript介绍 二、变量 三、数据类型 四、类型转换
typeof(),类型转换学习总结1
yangsm的博客
07-14 1260
typeof() 有两种写法：typeof() typeof加空格 typeof 可以给我们返回六种数据类型， number,string,boolean object, undefined, function null最开始是代替空对象的形式出现的，给对象来占位的， 类型转换 var num = 1 + 1 // 2 number var num = 1 + '1' // 11 string var num = 1 - '1' // 0 number var num = '2' - '1' // 1 nu
JavaScript 之 typeof 操作符 及 类型转换
M_DREAMER的博客
03-30 670
    一、typeof操作符 作用： 返回值的类型，类型转换。 值得六种返回类型：Number     string     boolean    object    undefined    function  这里说一下特殊的返回类型： 返回值为object有三种情况：{}、null、数组类型[] 返回值为undefined情况：undefined 返回值为function情况：...
JavaScript基础——数据类型的检测及转换
NGUP_LEE的博客
03-17 1393
1、数据类型检测 1.1 控制台输出语句检测 在控制台输出时，颜色为蓝色表示数值类型，颜色为黑色表示字符串类型 1.2 typeof 检测数据类型 样例代码：console.log(typeof num) 2、数据类型转换 JavaScript是弱数据类型，只有对变量进行赋值之后才知道变量属于什么数据类型 所以就导致在使用表单，prompt等获取过来的数据默认是字符串类型的，此时就无法直接用其进行加减法运算 两个字符换用+号连接时，会进行拼接字符串 此时就需要进行数据类型的转换，就是把一种数据
意想不到的console.log()输出题目
loringray的博客
07-23 2450
一、 Number类型： console.log( Number(true), //1 Number(false), //0 Number(undefined), //NaN Number(null), //0 Number(''), /...
console.log详解
热门推荐
qq_29007709的博客
01-10 3万+
console.log方法用于在控制台输出信息。它可以接受一个或多个参数，将它们连接起来输出。 console.log('Hello World') // Hello World console.log('a', 'b', 'c') // a b c console.log方法会自动在每次输出的结尾，添加换行符。 console.log(1); console.log(2); conso...
python 3.9.19安装
最新发布
08-02
Python 3.9.19是一个特定版本的Python解释器，你可以按照以下步骤来在你的系统上安装它： 1. **检查已有的Python版本**：首先，打开命令行或终端，输入 `python --version` 或 `python3 --version` 确定当前是否有...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值