什么是JS

JS的编码方式

内部样式

外部样式

行内样式

一：JS的数据类型及定义

二：JS的输入与输出

1) 输入

2) 输出

三：运算操作符

1）基础操作符

2）比较运算符

3）逻辑运算符

优先级

四：分支语句

五：循环语句

六：数组和字符串

增

删

查

改

七：函数

函数传参

函数返回return

arguments

箭头函数

八：类与对象

创建对象的三种方式

1）字面量创建对象

2）new一个对象

3）构造函数创建对象

数组对象

迭代器

forEach

map和filter

什么是JS

js是JavaScript的简称，但是要注意，JS和Java是两种不同的编程语言。

还是那句话：把前端三件套比作一个人，那么，html就是人的骨头框架，css就是衣服裤子等装饰物，JavaScript就是给人编辑各种动作

既然是编辑动作了，那JS自然就少不了人机互动。例如像C语言的输入输出等等

JS是类似于C++或java的一种代码(甚至可以用JS去ac题目)

在html文件中想要用JS语言进行修改，就要在<head></head>标签中添加<script></script>标签,在<script>之间即为JS语言

例如以下就是用JS打的一个输入a和b的值，输出a+b的值的JS代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script>var a=prompt();var b=prompt();alert(parseInt(a)+parseInt(b));</script>
</head>
<body></body>
</html>

实际上JS基础部分和C语言类似，所以会C语言，再学JS就会轻松很多。

JS的编码方式

和css语言一样，JS也可直接打在html中，也可新建一个后缀为js的文件中，也可以直接打在标签内部。

内部样式

像上面图片的例子，这个就是内部样式。在<head>标签的<script>中

外部样式

和css类似，需要在html中<head>标签中打

<script src="xxxx"></script>
xxx即为js所在地址

行内样式

类似于C语言的printf()，JS的输出是alert();

那么行内样式就是这样的

<input onclick="alert()">

一：JS的数据类型及定义

JS的基础数据类型有：int float string和bool类型。

但是严格的来说：JS的数据类型是有六种：数字(Number），字符串(String)，布尔(Boolean)，空指针(Null)，未知定义(undefined)，符号(symbol)

但是定义变量并不是像C/C++那样的：int xxx。

JS的定义方式有3种：var let 和const。其中var代表全局变量，let代表局部变量，const代表常量。

var a; //定义全局变量
let b; // 定义局部变量
const c=1;//定义常量且不能再被修改

其中var let和const会根据后面的值，自动适应成int float string或者bool类型。

let a=1;       //定义a为整形,并且赋值为1
let a=1.3;     //定义a为浮点形,并且赋值为1.3
let a="ab2ba"; //定义a为字符串形,并且赋值为ab2ba
let =True;     //定义a为布尔形，并且赋值为True
let a=1,b=2;   //定义a和b均为整形,并且赋值为1,2

当然，js也会有强转：

let a="1",b="1.1",c="True";
parseInt(a);//强转为int类型
parseFloat(b);//强转为float类型
Number(a);//强转为数字,即前两个的综合
Boolean(c);//强转为bool类型
String(a);//当然也可以强转为string类型
b.toString();//这个也是强转为string类型

二：JS的输入与输出

1) 输入

类似于C语言的scanf()函数，js的输入是prompt()函数。但是要注意输入的是默认为string类型

输入会在网页中弹出提示框

2) 输出

类似于C语言的printf()函数，JS的输出有两个函数。

(1) alert()函数。输出会在网页中弹出提示框，但是效率比较低下。

(2)console函数。

其中console.log()是最常用的也是最基本的，当然还有其他的例如：console.error()，console.warn()等等

这个输出会在控制台中显示，按F12即可打开网页控制台。

在JS中，也可以采用一种特殊的字符串来引用输出：` ` (键盘1左边的那个键）

var a=1,b="13",c=true;
console.log(`${a} ${b} ${c}`); //输出1 13 true

三：运算操作符

1）基础操作符

JS的运算符其他编程语言类似，均有+，-，*，/，%。

不过需要特别注意的是+还可以是字符串的拼接，例如："aa"+"bb"="aabb"。并且 / 是会有小数点的，也就是不会像c语言那样向下取整，最多保留16位，类似于%s输出。

var a=prompt();//假设输入1
var b=prompt();//假设输入2
console.log(a+b);
//则系统会输出12.而不是3

有基础运算符，那必然也会有 +=，-=，*=，/=，%=，以及三目运算符？：

2）比较运算符

比较操作符即：>，<，>=，<=，==，!= 。

但是在JS中，==和!=是会自动转化成相同类型的数据来比较，例如："1"==1 是返回true的。

然而有个新的符号 === 或者 !== 这两个表示全等，所以类型不同也就返回false啦。

3）逻辑运算符

逻辑运算符即：&&，||，和 !

优先级

和其他编程语言类似，优先级为：幂 > 正负号 > 乘除 > 加减 > 比较操作符 > 逻辑运算符

四：分支语句

var a=2,b=1;
if(a>b) {console.log(a+b);
}

那么结果自然也会输出3啦。

if else嵌套什么的也和C类似，可以说一模一样。

五：循环语句

同样的，JS也有循环结构，也就是 while()循环，for()循环，do while()循环以及switch 开关。当然用法也和C基本上一样。

例如：

var a=2;
for(var i=1;i<=5;i++) {console.log(a);
}

从理论上说，应该输出5个2，但实际上呢？如图所示

并没有输出5个2，而是输出⑤2。

那要怎么才能输出5个2呢。很简单，可以新定义一个变量b自适应成string，让b来累加a，最后输出b

var a=2,b='';
for(var i=1;i<=5;i++) {b+=a;
}
console.log(b);

看看效果，成功。

六：数组和字符串

JS的数组和C数组不同的是，JS的数组是动态的。比起这点它更像C++的vector。

JS的数组定义是这样的：

var a=[];//定义空数组
var a=[1,2,'aaa',true,1.2]//定义有长度的数组

可以发现，和C不同的是，JS定义数组不用再方括号里写数组大小，并且由于JS定义是自适应，所以数组里的变量类型可以不是单一的。

访问数组的方式可以直接用下标索引。例如返回第2个元素，那么就是arr[1]（注意下标是从0开始的）。

字符串的库函数和数组的库函数大致相同。

增

1）可以直接利用下标索引的方式增加或修改元素。

let a=[0,1,2,4];   //定义数组
console.log(a[1]); //访问第二个元素,输出1console.log(a);    //输出[0,1,2,4]a[3]=3;            //修改下标3的数据
console.log(a);    //输出[0,1,2,3]a[4]=4;            //增加大小并赋值
console.log(a);    //输出[0,1,2,3,4]a[10]=10;          //增加大小并赋值
console.log(a);    //输出[0,1,2,3,4,空a~5,10],此时长度是返回的11

2）采用库函数a.push() 的方式进行尾插。

3）采用库函数a.unshift() 的方式进行头查。

删

删除数据可以利用库函数 a.pop() 进行尾删

查

1）查找数据可以利用a.find() 函数来查找，查到了返回下标，没查到返回-1

2）可以采用 a.indexOf(元素) 来查询下标。

3）利用 a.isArray(元素) 来查询该元素是否在数组中，若在返回true，若不在返回false。

改

1）改变数据可以直接利用下标索引的方式

至于排序依旧可以a.sort() 进行快排。

七：函数

JS声明函数的关键字：function。

由于JS没有主函数，被调函数之分，所以直接在下面调用即可。

function f() {console.log('呵呵呵')；
}
f();//调用函数

函数传参

同样，函数的形参于实参也是自适应的，准确点应该说形参自适应。

和C语言不同的是，声明函数括号内不用打int xxx这种。直接打变量名就行

function f(a) {console.log(a);
}
f('呵呵呵');
/* 格式:function 函数名(形参) {代码片;}函数名(实参)
*/

和C语言不同的是，JS函数形参与实参的个数可以不匹配。

如果实参数目>形参，则形参有多少就自适应多少。

但是，如过形参>实参，若有其他还没有传递的形参在代码中，就会输出NaN，也就是报错

函数返回return

同样的，函数返回值也是自适应的。是int类型就返回int，是string类型就返回string。

arguments

arguments是个新概念，argument相当于一个数组，里面存储了函数的实参，当出现实参和形参数量不相同，就可以用arguments来获取。但是这个"数组''的功能并不全，比如没有push，pop等操作，只是单纯的存储工具，但有length的操作。

function f(a) {console.log(arguments);
}
f(1,2,3);

箭头函数

有时候为了方便，可以省去function，采用let var const的定义方式定义函数：

let f=(a,b,c) =>{return a+b+c;
}
console.log(f(1,2,3)); //输出6

当只有一个参数的时候，可以不用用小括号。

let f=a=>{return a*3
}
console.log(f(2)); //输出6

八：类与对象

类与对象，就类似于C语言的结构体一样。

在计算机的世界中，万物皆为对象。路边的某一条狗，可以称之为对象，桌子上的某一本书，也可称之为对象。但是单纯的说路边的狗，那就不叫对象，叫做类。因为路边的狗可能有很多，我们不知道具体指的是哪条，所以狗是类，具体的某条那就是对象了。

创建对象的三种方式

1）字面量创建对象

数组是中括号，那么对象就是花括号了。

//创建对象的模板
let 对象名={属性1:属性值, //注意是逗号属性2:属性值,//对象中的函数叫做方法方法1:function(参数) {xxxx; //函数的内容},方法2:function(参数) {xxxx; } //注意最后一个没有逗号
}

let person={Name: '张三',age: 18,  //这些就叫做属性Hobby: ['唱','跳','篮球','rap'], //属性值也可以是数组形式//对象中也可以嵌套其他的对象friend: { Name: '李四',age: 19,...}
}

访问的方式也是大同小异，采用对象.属性，对象.方法() 的方式。

或者说采用对象['属性'] 的方式调用

let person={Name: '张三',friend: {Name: '李四',}
}console.log(person.Name); //张三
console.log(person['Name']) //张三
console.log(person.friend.Name); //李四

2）new一个对象

其方法是先new一个空的对象，然后再依次创建（可随时添加）属性和方法。

var obj =new Object();//创建空对象obj.name='张三'; //创建属性
obj.age=18; //创建属性

3）构造函数创建对象

换句话说也就是创建类（结构体)。

//创建类
function Person(name,age) {this.name=name;this.age=age;
}
//实例化对象
let p1=new Person('张三',18);
let p2=new Person('李四',19);console.log(p1.name)// 输出张三

数组对象

在之前提到过，数组里面的元素类型是不固定的，所以数组也是可以用来储存对象的。

let person=[{Name: '张三',age: 18,},{Name: '李四',age: 19,},{Name: '王五',age: 17,}
] //定义数组对象console.log(person[0]); //输出关于张三的这个对象
console.log(person[1].Name); //输出李四

迭代器

数组对象的迭代器也就是：forEach，map以及filter。

forEach

forEach是操作型的迭代器，他相当与C语言函数的void定义，只操作无返回。

let person=[{Name: '张三',age: 18,},{Name: '李四',age: 19,},{Name: '王五',age: 17,}
] //定义数组对象//函数形式
person.forEach( function(p) {console.log(p.Name);
});
//箭头形式
person.forEach(p=>{console.log(p.Name);
});
//依次输出 张三,李四,王五。

在函数形式中，function是将类以对象化的形式写出。function()里面的参数至少有一个，第一个参数p则是指针，代表该对象的地址。所以之后用p.xxx代表该对象的元素。

同样，箭头形式也是类似的。

map和filter

map和filter都是返回型的迭代器，它们返回的数据会存到数组中。

let person=[{Name: '张三',age: 18,},{Name: '李四',age: 19,},{Name: '王五',age: 17,}
] //定义数组对象let name=person.map(function(p) {return p.Name;
}); //定义数组name来接收map的返回值
console.log(name[1]); //李四

不过map和filter的区别是filter的返回可以有筛选效果，也就是说在filter迭代器中，可以选择是否返回，如果true才返回，false就不返回。

let person=[{Name: '张三',age: 18,flag: true,},{Name: '李四',age: 19,flag: false,},{Name: '王五',age: 17,flag: true,}
] //定义数组对象let object=person.filter(function(p) {return p.flag===true;
});
console.log(object); //这时候object储存的是对象,并且只有张三和王五的对象

当然也可以再添加一个map进行进一步的返回。

let person=[{Name: '张三',age: 18,flag: true,},{Name: '李四',age: 19,flag: false,},{Name: '王五',age: 17,flag: true,}
] //定义数组对象let name=person.filter(function(p) {return p.flag===true;
}).map(p=>{return p.Name;
});
console.log(name); //这时候name只有['张三','王五']

前端三件套之JS速成相关推荐

利用python和前端三件套来一场线上烟花秀
目录 python烟花秀效果展示: 全部代码如下: 前端三件套(JS.CSS.HTML)的烟花秀 HTML部分:定义网页内容 CSS部分:描述网页布局 JS部分:控制网页行为 End ✨✨✨✨✨✨✨ ...
web前端面试题整理(vue、uni-app、前端三件套、web基础)
Vue 对mvvm的理解 mvvm分为model.view.viewmodel三者 model代表数据模型 view代表视图 viewmodel代表连接视图和模型,实现了vue数据的双向绑定 view ...
全栈1——前端三件套
前端三件套简单笔记 B/S 软件的结构前端的开发流程网页的组成部分页面由三部分内容组成分别是内容(结构).表现. 行为. 内容( 结构) , 是我们在页面中可以看到的数据. 我们称之为内容. ...
javaWeb学习笔记1—前端三件套 HTML CSS JavaScript
学习视频地址 javaWeb学习笔记-前端三件套 HTML CSS JavaScript 1.字体标签 2. 字符实体 3.标题标签 4.超链接 5.列表标签 6. img标签路径 7.表格 8.i ...
thymeleaf加载不了js引用_web前端教程之js中的模块化一
web前端教程之js中的模块化一:我们知道最常见的模块化方案有CommonJS.AMD.CMD.ES6,AMD规范一般用于浏览器,异步的,因为模块加载是异步的,js解释是同步的,所以有时候导致依赖还没 ...
前端html继承的方式,好程序员web前端教程之JS继承实现方式解析
好程序员 web 前端教程之JS 继承实现方式解析 , JS 是 Web 前端三要素之一,也是每一个初学前端的同学遭遇的第一条拦路虎.很多人反应 JS 学习不易,各类知识点概念及应用常常让人抓耳挠腮 ...
前端知识点总结——JS高级（持续更新中）
前端知识点总结--JS高级(持续更新中) 1.字符串什么是: 连续存储多个字符的字符数组相同: 1. 下标 2. .length 3. 遍历 4. 选取: slice(starti[, endi] ...
好程序员前端分享使用JS开发简单的音乐播放器
好程序员前端分享使用JS开发简单的音乐播放器,最近,我们在教学生使用JavaScript,今天就带大家开发一款简单的音乐播放器.首先,最终效果如图所示: 首先,我们来编写html界面index.htm ...
web程序前后台功能实现_好程序员web前端教程之JS继承实现方式解析
好程序员web前端教程之JS继承实现方式解析,JS是Web前端三要素之一,也是每一个初学前端的同学遭遇的第一条拦路虎.很多人反应JS学习不易,各类知识点概念及应用常常让人抓耳挠腮.在接下来的北京Web ...

前端三件套之JS速成

什么是JS

JS的编码方式

内部样式

外部样式

行内样式

一：JS的数据类型及定义

二：JS的输入与输出

1) 输入

2) 输出

三：运算操作符

1）基础操作符

2）比较运算符

3）逻辑运算符

优先级

四：分支语句

五：循环语句

六：数组和字符串

增

删

查

改

七：函数

函数传参

函数返回return

arguments

箭头函数

八：类与对象

创建对象的三种方式

1）字面量创建对象

2）new一个对象

3）构造函数创建对象

数组对象

迭代器

forEach

map和filter

前端三件套之JS速成相关推荐

最新文章

热门文章