JavaScript初认识,变量常量,数据类型

199 阅读2分钟

一.JavaScript介绍

基础概念

1.js是什么:是一种运行在客户端(浏览器)的编程语言,实现人机交互效果。

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

3.js组成(有什么):ECMAScript(规定了js基础语法核心知识)Web APIs :DOM,BOM(DOM 操作文档,比如对页面元素进行移动、大小、添加删除等操作 BOM 操作浏览器,比如页面弹窗,检测窗口宽度、存储数据到浏览器等等

1.js书写位置

1.行内(点击中奖 )

2.内部()

3.外部( )外部 js 标签中间不要写代码,否则会被忽略

2.输入和输出的语法(3+1)

<script>
        // 1.在页面上输出内容,在页面可以输出标签(输出)
        document.write('我是一只来自<em> 北方</em>的狼')
        // 2.弹窗(输出)
        alert('hello')
        // 3.控制台打印(输出)
        console.log('我爱你')
        // 4.输入语法,也会弹窗(输入)
        prompt('请输入您的银行卡密码')
</script>

3.字面量(literal) (4种)

1.1000 数字字面量

2 ' ' 字符串字面量

3 [ ] 数组字面量

4 { } 对象字面量

二.变量

1.变量:计算机存储数据的"容器"

变量不是数据本身,仅仅是一个用于储存数据的容器

2.变量的基本使用

2.1声明变量: let:变量名

let不允许多次声明一个变量

let一次声明多个变量,用逗号隔开(不推荐)let一行只声明一个变量,为了代码的可读性

2.2变量赋值: = 赋值运算符

2.3弹框输出变量​: alert (变量)

2.4变量的初始化:let height=170(声明变量+赋值)

2.5案例

 <!-- 1.  请输入你的名字 -->
<script>
        // 将用户prompt输入的信息保存到uname这个变量里来
        let uname = prompt('请输入您的姓名')
        // 在页面输出uname变量
        document.write(uname)
</script>
 <!-- 2. 交互2个变量值 -->
<script>
        let jj='居居'
        let xhz='侯磊'
        // 1.准备1个临时变量
        // 2.把jj的值赋值给temp
        let temp=jj
        jj = xhz
        xhz =temp
        console.log(jj,xhz);
</script>

2.3变量的本质

纯概念

目标:能够说出变量的本质是什么

内存: 计算机中存储数据的地方,相当于一个空间

变量本质: 是程序在内存中申请的一块用来存放数据的小空间

2.4变量名命名规则与规范

  1. 不能用关键字。例如:let、var、if、for等(规则)
  2. 只能用下划线、字母、数字、$组成,且数字不能开头(规则)
  3. 字母严格区分大小写(规则)
  4. 起名要有意义(规范)
  5. 遵守小驼峰命名法(第一个单词首字母小写,后面每个单词首字母大写。)(规范)

2.5变量拓展--数组(Array)

数组 (Array) —— 一种将 一组数据存储在单个变量名下

数组元素,下标,长度

<script>
        // 声明空数组
        let abc = []
        // 声明有数据的数组,组里面的每项数据对应的编号
        // 索引(下标)  0      1       2       3 
        let names =['小明','小红','小米','小刚']
        // 获取数组里面的某个数据  数组名[索引]
        console.log(names[0]);//小明
        console.log(names[2]);//小米
        // 数组长度 数组里面元素的个数 数组名.length
        console.log(names.length);//4
</script>

三.常量 const

常量:当某个变量永远不会改变时用const赋值,不用let

<script> const π = 3.1415926 console.log(π) </script>

注意:常量不允许重新赋值,声明的时候必须赋值(初始化)

四.数据类型

基本数据类型(4)+引用数据类型(1)

区别概念

JS 是弱数据类型,变量到底属于那种类型,只有赋值之后,我们才能确认

Java是强数据类型 例如 int a = 3 必须是整数

1.number 数字类型 (整数、小数、正数、负数...)

1.算数运算符: + -* /求商 %取模 (取余数,开发中经常作为某个数字是否被整除)

注意运算优先级(从左往右执行) : ( ) > * / % > + -

2计算圆的面积

        let r = prompt('请输入圆的半径')
        let π = 3.14
        let area = π * r * r
        document.write(area)
</script>

3NaN(not a number)

  • NaN 代表一个计算错误。它是一个不正确的或者一个未定义的数学操作所得到的结果
  • NaN 是粘性的。任何对 NaN 的操作都会返回 NaN

2 .string 字符串型

通过单引号('') 、双引号( "")或反引号( ``) 包裹的数据都叫字符串

推荐使用单引号''

单引号/双引号可以互相嵌套,但是不以自已嵌套自已

必要时可以使用转义符``,输出单引号或双引号

字符串拼接 + (数字相加,字符相连)

模板字符串:拼接字符串和变量 ${变量名} 代替+

 <script>
        let uname=prompt('请输入您的姓名')
        let age=prompt('请输入您的年龄')
        document.write('我是'+uname+',我今年'+age+'岁了')//不建议
        document.write(`我是${uname},我今年${age}岁了`)//模板字符串
</script>

3.boolean 布尔型 (ture/false)

4.undefined未定义型

只声明变量,不赋值的情况下,变量的默认值为 undefined

开发场景:如果检测变量是undefined就说明没有值传递过来

5.null空类型

代表"值未知",赋值了,存放的是一个对象,但是内容为空(对象字面量:4种字面量之一)

开发场景:如果一个变量里面确定存放的是对象,如果还没准备好 对象,可以放个null

6.检测数据类型console.log(typeof 变量名)

这种写法的typeof是作为运算符 另一种写法——函数形式: typeof(x)

控制台语句:数字型和布尔型颜色为蓝色,字符串和undefined颜色为灰色

console.log(typeof '1' + 1) //返回结果是 string``1