js基础之输入输出，变量，常量，数据类型及转换

本文链接：https://blog.csdn.net/m0_56713342/article/details/134132179

本文详细介绍了JavaScript的基础知识，包括代码书写位置（行内、内嵌、外链）、语句与注释、输入输出语句、变量的定义、命名规则、常量和数据类型（包括基本类型和转换），以及与HTML、CSS和Node.js的关联。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前言

编程语言(逻辑)

html - 标记语言 - 负责页面内容

css - 层叠样式表 - 美化样式

js - 脚本语言(配合html网页) - 负责页面的交互、动画、表单校验...

服务器程序 node

一、js代码书写位置

1、行内式(了解)

在标签开始标签里写js代码

<button onclick="alert(123)">按钮</button>

2、内嵌式(掌握)

在html结构body标签内写<script> </script>,在此标签内写相应的js代码

<body>
  <script>
    alert('hello world')
  </script>
</body>

3、外链式(掌握)

在外部新建一个.js的文件，再由<script src=" "> </script>引入.js文件

  <script src="./js/my.js">
    //  alert('hi') 此处不要写代码
  </script>

二、js语句与注释

有分号与无分号

看团队要求,绝大多数无分号规范

注释单行 // ->快捷方式 ctrl+/

多行注释 /* */ ->快捷方式 shift+alt(option)+a

三、输入输出语句

alert 弹窗（文本输出内容

alert('你好,js')

console.log 控制台打印输出

console.log('hellow world')

prompt 提示(提示用户输入）

 var education = prompt('请输入您的学历')
 console.log(education)

document.write() 文档输出内容

 document.write('我是js动态生成的')
    document.write('<h1>我是js动态生成的标题</h1>')

    // 画表格
    document.write(`<table border="1">
    <tr>
      <th>学号</th>
      <th>姓名</th>
    </tr>
    <tr>
      <td>100001</td>
      <td>张三</td>
    </tr>
  </table>`)

四、变量（重点）

1 、变量:存储数据的容器

2 、定义变量 var 变量名 = 值，或先声明后赋值

var  age=20
	var score
	score = 90

  //  let  score
    //  score  =  90
    //  alert(score)

定义多个变量

var  a,b,c =20   //var a var b  var c=20

注意：

let不允许重复定义变量，var可以重复定义变量
let不具有变量提升（必须先声明再使用）
   let money = 12000
   money = 12000 //变量重新赋值
let定义的变量具有块级作用域

var具有变量提升（js执行这段代码的时候，默认会把var声明的变量提升
       console.log(num);
       var num = 100

等价于

       var num
       console.log(num);
       num=100 )

五、变量命名规则

名字组成部分：

                1、数字，中文，字母，_ ,$
       2、不能以数字开头
       3、区分大小写
       4、不能是关键字 let if else for ...
       5、有意义 name , age, score...
       6、小驼峰命名 studentName, getElementById

六、常量

常量-->其值不能改变的量

let / const
一般优先使用const，假如值后期发生改变用let

const  PI = 3.1415926
	PI = 3.14   //报错，不能重新赋值（常量名不能直接出现在赋值的左边）
	const a  //常量必须初始化

七、数据类型

1.基本数据类型--->7种
typeof 判断数据类型

number 数字类型

   NaN（not a number)
   Infinity 无穷大
   -Infinity 负无穷大

string 字符串

模板字符串 ${` 反引号 ` } 支持换行，表达式
外单内双外双内单引号不可嵌套

boolean 布尔型 true false
undefined 未赋值的变量默认值是undefined，类型是undefined
null 空值 object
Symbol() symbol 产生独一无二的值
加n (表示很大的数） bigint

2、引用数据类型--->如数组，对象....

八、数据类型转换

字符串---->数字

1、+'123'---->123
2、Number() -----> 把其他类型转成数字类型

3、'123'-0 '123'*1 '123'/1 隐式转换

    // 字符串->数字 
    // 1 +'123'->123
    // const  age = +prompt('请输入年龄')
    // console.log(age, typeof age);
    // console.log('1年后您是'+(age  + 1)+'岁');
    // 2 Number() -> 把其他类型转成数字类型
    console.log(Number('123'));
    console.log(Number(true)); // true->1  false->0
    console.log(Number(null));// null->0
    console.log(Number(undefined));// undefined->NaN
    // 3 '123'-0 '123'*1 '123'/1 隐式转换

数字------>字符串

1、在数字前或后面加一个空的字符串

2、用Srting（）进行转换

3、用to.String() xiao

 // 数字->字符串 // 5->'5'
    console.log(5+''); // '5'+''-> '5'
    console.log(''+5);
    console.log(String(100));  // '100'
    console.log(String(true)); //  'true'
    console.log(String(null)); // 'null'
    console.log(String(undefined)); // 'undefined'
    console.log((5).toString());//  输出5的十进制字符串形式
    console.log((5).toString(2)); //  输出5的二进制字符串形式

练习

增加年龄

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        let age=+prompt('你现在多少岁了')
        console.log(`据我估计，五年后，你可能${age+5}岁了`)
    </script>
</body>
</html>

获取用户信息

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        let name=prompt('请输入您的姓名：')
        let age= prompt('请输入您的年龄：')
        let sex=prompt('请输入您的性别：')
    console.log(`用户的姓名：${name}`)
    console.log(`用户的年龄：${age}`)
    console.log(`用户的性别：${sex}`)
    </script>
</body>
</html>