JavaScript基础知识

初识 JavaScript

参照传智播客的视频。

定义

javascript是一种运行在客户端的脚本语言 (与css类似)

作用

  • 表单动态检验
  • 网页特效
  • 服务端开发(Node.js)
  • 桌面程序(Electron)
  • APP(Cordova)
  • 控制硬件-物联网(Ruff)
  • 游戏开发(cocos2d-js)

js的组成

1.javascript语法(ECMAScript)
2.面向文档对象模型(DOM)
3.浏览器对象模型(BOM)

JavaScript 变量

定义

程序在内存中申请的一块用来存放数据的## 空间

使用

1.声明变量 2. 赋值

// 声明用关键词var
var  age; // 声明一个名称为age的变量
// 赋值
age=10; // 给age这个变量赋值
// 变量的初始化
var age = 18; // 推荐写法

案例

变量的使用: 1.弹出一个对话框,提示用户输入姓名
2.弹出一个对话框,输出用户刚才输入姓名

	var myname = prompt('请输入您的姓名');
    alert(myname);

输出结果:
在这里插入图片描述

变量语法扩展

  1. 更新变量
var age = 18;
age = 20; // 第二次的值会把第一次的完全覆盖
  1. 声明多个变量
var age=18,address='火影村'; // 多个变量之间用逗号隔开
  1. 特殊情况
var sex; // 只声明不赋值 结果是undefined
console.log(tel); 不声明,不赋值,直接使用某个变量会报错的
qq = 110; // 不声明直接赋值使用 

变量的命名规则

在这里插入图片描述

案例

交换两个变量的值

	var temp; // 临时变量
    var apple1='青苹果';
    var apple2 = '红苹果';
    temp = apple1;
    apple1 = apple2;
    apple2 = temp;
    console.log(apple1);
    console.log(apple2);

小结

在这里插入图片描述

JavaScript数据类型

数据类型简介

// js的变量数据类型是只有程序在运行过程中,根据等号右边的值来确定的
var num = 10; // 数值型
var str = 'pink' // 字符串型
// js动态语言,变量的数据类型可以变化

简单数据类型

在这里插入图片描述

数字型 Number

var num = 10;
var PI = 3.14;
// 1.八进制 0-7 我们程序里面数字前面加0 表示八进制
var num1 = 010; // 010 八进制 转换为10进制 就是8
// 2.十六进制 0-9 a-f 在程序数字前加0x 表示十六进制
var num2= 0xa; // 10
// 3.数字型的最大值 (了解)
alert(Number.MAX_VALUE);
alert(Number.MIN_VALUE);
// 三个特殊词 (了解)
alert(Infinity) // 无穷大
alert(-Infinity) // 无穷小
alert(NaN) // 非数字

isNaN() 这个方法用来判断非数字
在这里插入图片描述

字符串型 String

可以是单引号或双引号 在js中推荐用单引号

嵌套

口诀: 外双内单,内双外单

var str = '我是一个"高富帅"的程序员';
字符串转义符
转义符 解释说明
\ n 换行符 newline
\ \ 斜杠 \
\ ’ 单引号’
\” 双引号"
\t tab缩进
\b 空格
字符串长度

获取字符串的长度可用length属性

var str = 'my name is andy';
console.log(str.length) // 15
字符串拼接 +

拼接方式:字符串+任何类型 = 拼接之后的字符串
+号口诀:数值相加,字符相连
拼接加强: 将字符串和变量来拼接

var age =18;
console.log('pink老师'+ age +'岁') // pink老师18岁
// 口诀: 引引加加
案例

显示年龄 简单js交互
1.弹出一个输入框(prompt),让用户输入年龄
2.把输入的值用变量保存起来,把字符拼接起来
3.使用alert语句弹出警示框

布尔型 Boolean

有两个值: true 和false

var flag = true;
var flag1 = false;
console.log(flag + 1); // 2
console.log(flag1 + 1); // 1

undefined 未定义和Null 空数据

变量声明未赋值 就是undefined 数据类型
Null就是空数据类型

console.log(undefined + 'pink');//  undefinedpink 
console.log(undefined + 1); // NaN
console.log(null + 'pink'); // nullpink
console.log(null + 1); // 1

获取变量的数据类型

typeof属性可获取

var num = 10;
console.log(typeof num); // Number
var str = 'pink'; 
console.log(typeof str); // String
var flag = true; 
console.log(typeof flag);// Boolean
var vari = undefined 
console.log(typeof vari);// undefined
var timer = null; 
console.log(typeof timer); // object

字面量
是在源代码中一个固定值的表示方法

数据类型转换

转换为字符串类型

加号拼接字符串是重点
在这里插入图片描述

// 隐式转换
var num = 10;
console.log(num + '');

转换为数字型(重点)

记住前两个
在这里插入图片描述

var age = prompt('请输入您的年龄');
// parseInt(变量) 得到结果是整数
console.log(parseInt(age));
console.log(parseInt('3.94')); // 3 取整
console.log(parseInt('120px')); // 120    会去掉px单位
console.log(parseInt('rem120px')); // NaN
// parseFloat(变量) 得到结果是小数 浮点数

案例

1.计算年龄
在这里插入图片描述
2.简单加法器
在这里插入图片描述
转换为布尔型
在这里插入图片描述
代表空、否定的值会被转换为false,如 ’ '、0、NaN、null、undefined
其余值全部是true

作业案例

		var uname = prompt('请输入您的姓名');
        var age = prompt('请输入您的年龄');
        var sex = prompt('请输入您的性别');
        var ages = prompt('您现在多少岁了');
        var page = parseInt(ages) + 5;
        console.log(typeof page);
        console.log('您的姓名是:' + uname);
        console.log('您的年龄是:' + age);
        console.log('您的性别是'+ sex);
        console.log('据我估计,五年后,您可能' + page +'了');

运算符 operator

是用于实现赋值、比较和执行算数运算等功能的符号

算术运算符

在这里插入图片描述

// 取余 %
console.log(5 % 3); // 2
console.log(3 % 5); // 3
//  浮点数  算数运算里面会有问题
console.log(0.1 + 0.2); 
console.log(0.07 * 100);

浮点数精度问题
表达式和返回值
表达式是由数字、运算符、变量等组成的式子

console.log(1 + 1); // 2 就是返回值
// 把右边表达式计算完毕把返回值给左边

递增和递减运算符

必须和变量配合使用

前置递增运算符

口诀:先自加1,后返回值

// 想要一个变量自己加1 
var num = 1;
++num; // 类似于 num = num + 1
var p = 10;
console
  • 2
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值