浏览器分为两部分
在逐行读取HTML的时候,读到JS代码,JS引擎就会将其转换成0101的机器语言。翻译一句执行一句。
三种书写位置
<script>
alert('Hello World')
script>
标签中<script src="my.js">script>
和java/C++的语法一样
ctri+/
shift + alt + a
方法 | 说明 | 归属 |
---|---|---|
prompt(info) | 浏览器弹出输入框,用户可以输入 | 浏览器 |
console.log(msg) | 浏览器控制台打印输出信息 | 浏览器 |
alert(msg) | 浏览器弹出警示框 | 浏览器 |
一个装东西的盒子,一个存放数据的 容器
变量是程序在内存中申请的一块用来存放数据的空间
var是一个JS关键字,用来声明变量。(variable变量的意思)。使用该关键字声明变量后,计算机会自动为变量分配内存空间,不需要程序员接管。
// 声明变量
var age;
// 赋值
age = 18;
// 输出
console.log(age)
// 直接初始化
var age = 19;
弹出一个输入框,保存用户的输入
弹出对话框,输出用户输入的姓名
// 1. 用户输入姓名
var myname = prompt('输入您的姓名');
// 2. 输出
alert(myname)
一个变量被重新赋值后,他原有的值就会被覆盖,变量值将以最后一次赋值为准
var age = 18,
name = "小明";
情况 | 说明 | 结果 |
---|---|---|
var age; console.log(age); | 只声明 不赋值 | undefined |
console.log(age) | 不声明,不赋值,直接使用 | 报错 |
age = 10; console.log(age); | 不声明,只赋值 | 10 会变成全局变量,不推荐 |
上面要是出错后,下面就不会执行。因为是一条条编译执行的。
不同数据占据的存储空间不同。为了充分利用存储空间,所以定义了不同数据类型
js的变量数据类型是只有在程序在运行过程中,根据等号右边的值来确定的,也因此可以随意变换(跟python一样)
简单数据类型(Number, String, Boolean, Undefined, Null)
简单数据类型 | 说明 | 默认值 |
---|---|---|
Number | 数字型 包含整形(8、10、16进制)和浮点型 | 0 |
Boolean | 布尔值类型,代表0,1 | false |
String | 字符串,带引号 | “” |
Undefined | var a; 没有赋值 | undefined |
Null | var a = null; 为空值 | null |
复杂数据类型(Object)
//1.八进制数字序列范围∶O~7
var numl = 07; // 对应十进制的7
var num2 = 019; // 对应十进制的19
var num3 = 08; // 对应十进制的8
//2.十六进制数字序列范围∶0~9以及A~F
var num = 0xA;
JavaScript中数值的最大和最小值
alert(Number.MAx_VALUE); // l 1.7976931348623157e+308
alert (Number.MIN_VALUE); // 5e-324
JavaScript中数值的最大和最小值
alert ( Infinity); // Infinity
alert(-Infinity); // -Infinity
alert(NaN); // NaN
isNaN()
用来判断非数字,返回一个值
console.log(isNaN(12)); // false
console.log(isNaN('12')); // false
console.log(isNaN('?')); // true
var strMsg = "我爱北京天安门~"; //使用双引号表示字符串
var strMsg2 = '我爱吃猪蹄~'; //使用单引号表示字符串
//常见错误
var strMsg3 = 我爱大肘子;
//报错,没使用引号,会被认为是js代码,但js没有这些语法
字符串.length
= 字符串长度使用引号括起来。由于HTML里标签使用双引号,JS里面推荐使用单引号
JS支持引号嵌套(和python一样
undefined的相加
var variable = undefined;
console.log(variable + 'pink'); // undefinedpink
console.log(variable + 1); //NaN undefined和数字相加最后的结果是NaN
null的相加
var space = null;
console.log(space + 'pink '); // nullpink
console.log(space + true); // 1
typeof可以用来获取检测变量的数据类型
var num = 10;
console.log(typeof num); // number
var str = 'uncledong';
console.log(typeof(str)); // string
console.log(typeof null); // Object
根据浏览器输出颜色看变量类型
console.log(18); // chrome: 蓝色, firefox: 绿色
console.log('18'); // 黑色
console.log(true); // chrome: 蓝色, firefox: 绿色
console.log(undefined); // 浅灰色
console.log(null); // 浅灰色
字面量是在源代码中的一个固定值的表示法。
表单、prompt获得的数据默认是字符串类型的,此时不能直接简单的进行加法运算,需要进行 类型转换
转换为字符串类型
方法 | 说明 | 案例 |
---|---|---|
toString() | 转换成字符串 | var num = 1; alert(numtoString()); |
String()强制转换 | 转换成字符串 | var num = 1; alert(String(num)); |
加号拼接字符串 | 和字符串拼接好的都是字符串 | var num = 1; alert(String(num + ‘’)); |
转换为数字型
方法 | 说明 | 案例 |
---|---|---|
parselnt(string)函数 | 将string类型转换成整数数值型 | parselnt(‘78.9’) -> 78(被取整了,不会四舍五入) parseInt(‘120px’) -> 120(会去掉数字后面非数字的东西) 机制:先看是否有数字,如果没有数字的话就是NaN parseInt(‘121a1a1a’)) -> 121 parseInt(‘a21a1a1a’)) -> NaN |
parseFloat(String)函数 | 转换成浮点数值 | parseFloat(‘78.1’) |
Number()强制转换 | 转换成数值型 | Number(‘12’) |
js隐式转换( 加减乘除 ) | 利用算术运算隐式转换成数值型 | console.log(‘12’ - 0) |
转换为布尔型
方法 | 说明 | 案例 |
---|---|---|
Boolean()函数 | 其他类型转换成布尔值 代表 空或者否定的值会被转换成false,如0, NaN, null, undefined |
Boolean(‘true’) |
console.log (Boolean ( "')); // false
console.log (Boolean(o)); // false
console.log (Boolean (NaN)); // false
console.log (Boolean (null)); // false
console.log (Boolean (undefined)); // false
console.log (Boolean (小白')); // true
console.log (Boolean (12)); // true
计算机不能直接理解机器语言之外的语言,因此需要把程序员的高级语言f安艺城机器语言才能执行。
翻译器翻译的方式有两种,区别在于编译的时间点不同
标识符:开发人员为变量、参数、属性、函数取的名字。
关键字:编程语言已经使用了的字,不能再用来当作变量名,方法名
保留字:预留的关键字。现在还不是关键字,以后有可能成为关键字
// new出来
var 数组名 = new Array();
// 字面量
var 数组名 = []
数组名.length获取长度
通过索引号直接添加元素
var arr1 = [ 'red', 'green', 'blue'];
arr1[3]= 'pink';
console.log(arr1);
// 声明方式1
function 函数名(形参1, 形参2){
// 函数体
return 返回值;
}
// 声明方式2,该函数没有名字,所以是匿名函数
var 变量名 = function(){
};
如果实参和形参不匹配,未匹配的形参将会变成undefined
两种声明方式
function
一段程序代码中所用到的名字并不总是有效和可用的,而限定这个名字的可用性的代码范围就是这个名字的作用域。作用域的使用提高了程序逻辑的局部性,增强了程序的可靠性,减少了名字冲突。
var
直接声明的。块级作用域就是{}
中包含的定义,以下代码在别的语言是不会通过的。
if (3 < 5) {
var num = 10;
}
console.log(num)
var num = 10;
// 作用域链 内部函数访问外部函数的变量,采取的是链式查找的
function fn() {
// 外部函数
var num = 20;
function fun() {
// 内部函数
console.log(num)
}
}
最里面输出num的时候,一层层的往上找,找到那个num就用哪个num
// 例1
console.log(num);
// 报错 Uncaught ReferenceError: num is not defined
// 例2
console.log(num); // undefined
var num = 10;
// 例3
fn(); // 输出11
function fn() {
console.log(11);
}
// 例4
fun();
// 报错 Uncaught TypeError: fun is not a function
var fun = function {
console.log(11);
}
JavaScript代码是由浏览器中的**JavaScript解析器(JS引擎)**来执行的。JavaScript解析器在运行JavaScript代码的时候分为两步 预解析和代码执行
var num = 10;
fun();
function fun() {
console.log (num);
var num = 20;
}
// 变量提升后的结果
var num
function fun() {
var num;
console.log (num);
num = 20;
}
num = 10;
fun(); // undefined
var num = 10;
function fun() {
console.log (num);
var num = 20;
console.log (num);
}
fun();// undefined, 20
var a = 18;
fun(); // undefined, 9
function fun() {
var b = 9;
console.log (a);
console.log (b);
var a = '123';
}
fun();// undefined, 9
f1();
console.log (c);
console.log (b);
console.log (a);
function f1() {
var a = b = c = 9;
console.log(a);
console.log(b);
console.log(c);
}
var a = b = c = 9; -> var = 9; b = 9; c = 9; // b和c前面没有var
// 集体声明如下
var a = 9, b = 9, c = 9;
// 以下为代码提升
function f1() {
var a;
a = b = c = 9;
console.log(a); // 9
console.log(b); // 9
console.log(c); // 9
}
f1();
console.log (c); // 9
console.log (b); // 9
console.log (a); // undefined
对象是一个具体的事物,由属性和方法组成。
使用{}
,采用键值对保存属性和值
var obj = {
} // 创建了一个空的对象
var obj = {
username : '张三丰',
age : '24',
sex: '男',
sayHi : function() {
console.log('hi~')
}
}
两种调用方法
// 方法1
console.log(obj.username);
// 方法2
console.log(obj['username']);
// 方法1调用函数
obj.sayHi();
// 方法2调用函数
obj.sayHi();
直接新建后,赋值属性和方法
// 新建对象
var obj = new Object();
// 属性赋值
obj.username = '张三丰';
obj.sayHi = function() {
console.log('hi~')
}
之前两种创建对象的方式一次只能创建一个对象,每次都要重新写所有的方法
// 构造函数的语法格式
function 构造函数吗() {
this.属性 = 值;
this.方法 = function() {
}
}
// 新建对象
new 构造函数名();
// 构造四大天王
function Star(uname, age, sex) {
this.name = uname;
this.age = age;
this.sex = sex;
}
// 新建对象
var liudehua = new Star('刘德华', 18, '男')
console.log(liudehua)
/*
Star
age: 18
name: "刘德华"
sex: "男"
__proto__:
constructor: ƒ Star(uname, age, sex)
__proto__: Object
*/
this
属性和方法都能遍历出来
for (属性(key) in 对象){
console.log(属性);
console.log(对象[属性]);
}
推荐查阅文档 MDN
https://developer.mozilla.org/zh-CN/
https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Math
Math对象不是 构造器(构造函数),里面的方法都是静态的。因此可以直接调用
不能出现字符串 -> NaN
封装自己的数学对象
var myMath = {
PI: 3.141592653,
// 使用argument接受所有参数
max: function() {
var max = arguments[0];
for (var i = 1; i < arguments.length; i++){
if (arguments[i] > max){
max = arguments[i];
}
}
return max;
},
// 使用argument接受所有参数
min: function() {
var min = arguments[0];
for (var i = 1; i < arguments.length; i++){
if (arguments[i] < min){
min = arguments[i];
}
}
return min;
}
}
https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Date
var date = new Date();
console.log(date)
date2 = new Date(2019,0,1); // 下标从0开始,January
方法名 | 说明 | 代码 |
---|---|---|
getFullYear() | 获得当前年 | dObj.getFullYear() |
getMonth() | 获取当前月(0-11) | |
getDate() | 当前日期 | |
getDay() | 当前星期几(周日0-周六6) | |
getHours() | 当前小时 | |
getMinutes() | 当前分钟 | |
getSeconds() | 当前秒钟 |
学方法四部曲
使用三元运算符让日期输出更加美观
var time = new Date();
var h = time.getHours();
h = h < 10 ? '0' + h : h;
var m = time.getMinutes();
m = m < 10 ? '0' + m : m;
var s = time.getSeconds(;
s = s < 10 ? '0' + s : s;
return h +':'+m+ ':'+ s;
Date对象基于1970.1.1的毫秒数开始计算的
// 1. 普通方法
var date = new Date();
console.log(date.valueof()); // 现在时间距离1970.1.1的毫秒数
console.log(date.getTime()); // 跟上面一样
// 2. 最通用的方法
var date1 = +new Date(); // 直接返回总的毫秒数
//3. H5新增的方法
console.log(Date.now());
毫秒数是永远不会重复的,因此作为时间戳
倒计时算法
function countDown(time){
// 返回当前时间总毫秒数
var nowTime = +new Date();
// 用户输入时间的总毫秒数
var inputTime = +new Date(time);
// 剩余时间毫秒数
var times = (inputTime - nowTime) / 1000;
d = parselnt(times/60/60/24); // 计算天数
h = parselnt(times/60/60%24); // 计算小时
m = parselnt(times/60%60); // 计算分数
s = parselnt(times%60); // 计算当前秒数
return d + '天:' + h + '时' + m + '分' + S + '秒'﹔
}
var arr1 = new Array(2); // 一个数组,两个空的位置
var arr1 = new Array(2, 3); // 一个数组,两个填充满的
instanceof 运算符 可以检测是否为数组
var arr = [];
console.log(arr instanceof Array);
Array.isArray(变量)
方法名 | 说明 | 返回值 |
---|---|---|
push(参数1…) | 末尾添加一个或者多个 修改原数组 |
返回新的长度 |
pop() | 删除数组最后一个 无参数,对原数组进行修改 |
返回删除的值 |
unshiift(参数1…) | 开头添加一个或多个 修改原数组 |
返回新长度 |
shift() | 删除数组第一个元素 修改原数组 |
返回删除的值 |
方法名 | 说明 | 返回值 |
---|---|---|
indexOf() | 数组中查找给定元素的第一个索引 | 存在:返回索引编号 不存在:返回-1 |
lastIndexOf() | 数组中查找元素的最后一个索引 | 存在:返回索引编号 不存在:返回-1 |
方法名 | 说明 | 返回值 |
---|---|---|
toString() | 数组转换成字符串,逗号分隔开每一项 | 返回字符串 |
join(‘分隔符’) | 把所有元素转换成字符串 | 返回字符串 |
字符串可以直接调用方法,但字符串是基本数据类型,不是对象,这是咋回事?
var str = 'andy';
console.log(str.length); // 不会报错
把简单数据类型包装成复杂数据类型,步骤如下
新建复杂类型
var temp = new String('andy');
把临时变量的值给str
str = temp;
销毁这个临时变量
temp = null;
每次变换字符串的内容,都会新建一个字符串的空间存放数据。字符串所有的方法,都不会修改字符串本身。操作完成会返回一个新的字符串。
方法名 | 说明 |
---|---|
indexOf(‘要查找的字符,开始的位置’) | 返回指定内容在源字符串中的位置,如果找不到就返回-1 |
lastIndexOf() | 从后往前,找到第一个匹配 |
使用charAt(下标)
的方法返回字符
简单数据类型:值类型
复杂数据类型:引用类型
简单数据类型/基本数据类型,在存储时变量中存储的是值本身,因此叫做值类型string, number, bollean, undefined, null
null返回的还是object类型,这是之前设计有误
如果有变量,以后打算存储为对象,暂时没想好放啥,就可以赋值null
复杂数据类型。存储时变量中存储的仅仅是地址(引用),因此叫做引用数据类型。通过new关键字创建的对象(系统对象、自定义对象),如Object, Array, Date等。