JavaScript第一章
JavaScript是由网景公司发明的一种脚本语言,最早期仅用于对网页中的表单进行验证或动态特效。 自从NodeJS出现后,JavaScript也能够作为后端服务器程序的开发语言。JavaScript的核心为ECMAScript,ECMAScript在市面上有不同的版本,称为ECMAScript5和ECMAScript6,简称es5和es6;es5对大多数浏览器的兼容器更好。es6具有更多的新的特性,es6的语言和大多数编程语言更相似,很多新的框架都已经实现了对es6的支持。 前端框架是基于JavaScript来实现的。目前比较主流的前端框架有Anglar JS,React,Vue JS。要掌握前端框架,就必须要学习es6. es6的代码比es5更简洁。
要学习前端框架,就应该先去了解下NodeJS,NodeJs是运行在服务端的JavaScript平台,NodeJs基于谷歌浏览器的V8引擎实现,基于JavaScript编写程序。因此为了掌握前端框架以及Nodejs,JavaScript是必不可少的知识点。
JavaScript是一种基于事件驱动的、面向对象的脚本语言。脚本语言不需要编译后再运行,浏览器负责解释并执行js代码。
JavaScript特点
脚本语言:解释性语言,边执行边解释 基于对象:基于对象而不是纯粹面向对象的语言 简单:采用的是弱类型的类型声明方式 跨平台:依赖浏览器而不是操作系统 嵌入式:开发中需要操作HTML和CSS样式,因此需要在HTML中引入
JavaScript的核心组成
JavaScript的核心: ECMAScript:是js最核心的概念,提供了语言级的相关特性。 DOM: 文档对象模型,一个网页(一个html)理解为一个对象,一个网页就是一个文档对象,文档对象中的每个子标签,同样也是一个对象。 BOM:浏览器对象模型,提供了对浏览器相关特性的访问。
在网页中引入JavaScript
JavaScript目前运行在浏览器,nodejs的出现,能够使js运行在服务端。在网页中使用JavaScript,需要在网页中编写js的标签,在标签内编写js代码。
<!--在网页中直接编写js代码-->
<script type="text/javaScript">
//编写js代码
</script>
<!--导入外部的js代码-->
<script type="text/javaScript" src="js文件的路径"></script>
JavaScript核心语法
JavaScript名字和java看起来是非常相似的,其核心语法和java也是非常相似,在java中具有数据类型,变量,流程控制,类和对象,方法,属性等特性,在js中同样也包含。
注释
被注释起来的代码,不会被浏览器去解释执行,只是起到一个备注的作用。为代码提供注释是一个非常好的习惯。对方法或者代码做注释后,能够最快速的,根据注释就能够理解代码的意图以及作用。 js中的单行注释: // js中的多行注释: /* */
//单行注释
/*
多行注释
*/
vscode插件
Chinese (Simplified) (简体中文)
Live Server 网页服务器
vscode-icons 图标
Material Icon Theme 图标主题库
HTML CSS Support css提示
CSS Peek 追踪css样式的位置
变量
/*
在java中声明变量的语法
数据类型 变量名;
数据类型 变量名 = 值;
在javascript中声明变量
var 变量名;
var 变量名 = 值;
输出变量;
使用变量;
*/
var name = '张三'; //声明了一个字符串
var age = 18; //声明了整数
var height = 1.88; //小数
var arr = [1,2,3,4,5]; //数组
var obj = {"name":name,"age":age,"height":height}; //一个对象
var fn = function(){}; //一个函数
let i = 0; //es6中声明变量的语法
const PI = 3.14; //es6中声明常量的语法
js是一种弱类型的语言,数据类型在程序运行过程中,根据变量的值来确定。java是一种强类型的编程语言,在声明变量时,就明确限制了变量的类型。
var str = 'abc'; // str是字符串,js中没有字符,字符串通过一对单引号或一对双引号表示。
str = false; //布尔
str = 123; //number
//不建议在编程中更改变量的类型
同时声明多个变量
var x,y,z;//声明变量没有赋值;他们的默认值为undefined
var x=1,y=2,z;
在声明变量时,如果没有给变量赋值,则变量的默认类型为undefined
(未被定义);
null和undefined的区别
变量声明但是没有赋值,则其默认值为undefined
。 null用于表示暂时为空,在将来可以修改其值。
undefined与null的区别:
-
null代表暂时没有赋值,undefined值未定义。
-
null分配内存空间,undefined不分配内存空间。
-
null可以参与运算,undefined无法参与运算。
typeof关键字
通过typeof
关键字检查变量的类型,返回一个字符串
var a,b=10086,c='hello',d=false;
var e = null;
var f = [1,2,3,4];
var g = {};
var h = function(){};
console.log(typeof a); //number
let和var的区别
ES6 新增了let
命令,用来声明变量。它的用法类似于var
,但是所声明的变量,只在let
命令所在的代码块内有效。
{
var a = 1;
let b = 2;
}
console.log('a = ',a) //可以访问到代码块内var声明的变量
console.log('b = ', b) //b is not defined b没有被定义
for(var i = 0;i < 10;i++){ //在java中,i被限定在了for循环之内
}
console.log('i = ',i) // 10
var
声明的变量存在作用域提升的问题。
类型转换
将字符串转换为数字
let num1 = '20.5'
let intNum = parseInt(num1) //将num1字符串转换为整数类型
console.log('intNum的类型:',typeof intNum,' 转换后的值:',intNum)
let floatNum = parseFloat(num1)
console.log('floatNum的类型:',typeof floatNum,' 转换后的值:',floatNum)
运算符
-
算术运算符
运算符 | 描述 |
---|---|
+ |
求和 |
- |
求差 |
* |
求积 |
/ |
求商 |
% |
求余数 |
-
关系运算符
运算符 | 描述 |
---|---|
> |
大于 |
< |
小于 |
>= |
大于等于 |
<= |
小于等于 |
== |
等于 |
=== |
严格等于 |
!= |
不等于 |
!== |
严格不等于 |
var a = 10; //number
var b = 10;
var express = a > b;
express = a < b;
express = a >= b;
express = a <= b;
//严格等于
var c = '10'; //string
console.log('typeof(a):',typeof(a));
console.log('typeof(c):',typeof(c));
console.log('a == c',a == c);//a和c类型不同,js执行引擎首先统一a和c的类型后比较
console.log('a === b',a === b); // true, 因为a和b的类型相同
console.log('a === c',a === c);//严格等于:先比较a和c的类型,再比较值 false,a和c的类型不同
console.log('a != c',a != c); // true
console.log('a !== c',a !== c); // true
-
逻辑运算符
运算符 | 描述 |
---|---|
&& |
并且 |
|| |
或者 |
! |
非 |
var express = true && true; //true
express = true && false; //false
express = false && false; //false
express = true || true; //true
express = false || true; //true
express = false || false; //false
express = !false; //true
express = !true; //false
js中的逻辑控制
-
条件分支
-
switch
-
循环操作
-
迭代器
条件分支
if(表达式){
//代码块
}
if(表达式){
//代码块1
} else {
//代码块2
}
//多重if
if(条件1){
} else if(条件2){
} else if(条件3){
} else {
}
switch
switch(值){
case 常量1:
break;
case 常量2:
break;
default:
//相当于else
}
循环操作
循环具有三要素:
-
循环变量
-
循环条件
-
循环变量值改变
//while循环
while(条件){
//循环操作
//循环变量值改变
}
//for循环
for(循环变量;循环条件;循环变量值改变){
}
for-in
for-in类似于java中的foreach迭代器,能够遍历对象,数组。
var stu = {
"name":'张三',
"age":19,
"gender":'男',
"phone":'13612345678',
"stuNo":1001
};
//直接输出对象
console.log(stu);
console.log(stu.name); //访问对象的属性
console.log(stu.age);
console.log(stu["gender"]); //类似于数组的用法
for(var key in stu){ //利用for-in遍历对象的属性
//console.log(key);
var value = stu[key]; //根据属性获取属性值
console.log(key + " : " + value);
}
var arr = [888,666,777,999,555];
for(var index in arr){
//console.log(index);
console.log(arr[index]);
}
字符串和数字相互转换
字符串常用方法API:https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/
数字在js中,通过typeof()
检测后范围的是number,在js中,对于数字存在一个包装类Number
。Number
中提供了很多属性和方法用于处理数字。
var maxInteger = Number.MAX_SAFE_INTEGER;
var minInteger = Number.MIN_SAFE_INTEGER;
var maxValue = Number.MAX_VALUE;
var minValue = Number.MIN_VALUE;
将字符串转换为整数
var integer = Number.parseInt('3.14');
Array对象
js数组参考API:https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array
js中的数组类似于jav中的数组+集合;
var arr = new Array(5);//声明长度为5的数组
var foods = new Array("牛肉干","豆腐干","果冻");
var balls = ['篮球','足球','乒乓球','排球'];
js中的数组提供了一系列的方法,用于操作数组中的元素
方法名 | 描述 |
---|---|
push() | 向数组的末尾追加新的元素,返回新的数组的长度 |
pop() | 根据栈的先进后出的原理,删除数组末尾的元素并返回,如果数组为空,则返回undefined |
shift() | 删除数组中第一个元素,并返回,与push方法结合使用,构成先进先出的队列 |
unshift() | 向数组的第一个位置插入元素 |
join() | 照着指定的分隔符将数组转换为字符串,默认分隔符为逗号 |
concat() | 合并数组 |
reverse() | 反转数组中的每个元素的顺序[a,b,c] -> [c,b,a] |
slice() | 截取数组中的一部分数组,返回新数组,原始数组元素不变 |
sort() | 对数组中的元素排序 |
函数
JavaScript中的函数和java中的方法的作用是相同的。
function fn_test(参数列表){
//代码块
[return]
}
function fn_test1(){ //无参数的函数
var a = Math.random() * 100
return a;
}
var ran = fn_test1(); //执行函数,并得到结果
var show = function(){ //声明一个函数对象,赋值给了show,show此时充当的是一个变量
}
show(); //执行show变量对应的函数
接收用户输,弹窗,确定取消
window.alert(); //弹框,在不同的浏览器中,效果不同。alert函数会阻塞alert之后的代码的运行,直到用户点击了确定按钮后,alert之后的js代码才能够得到执行标签:console,log,JavaScript,js,数组,var,第一章 From: https://www.cnblogs.com/huang2979127746/p/16843440.html
window.prompt('title');//在页面中接收用户的输入,返回字符串