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; // 第二次的值会把第一次的完全覆盖

2. 声明多个变量

var age=18,address='火影村'; // 多个变量之间用逗号隔开

3. 特殊情况

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.log(++p + 10); // 21