初识 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);
输出结果:
变量语法扩展
- 更新变量
var age = 18;
age = 20; // 第二次的值会把第一次的完全覆盖
- 声明多个变量
var age=18,address='火影村'; // 多个变量之间用逗号隔开
- 特殊情况
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