“虽千万人吾往矣”
写在前面:
我们如何查看纯js程序的输出结果呢,打开我们文件所生成的虚拟网页,然后单击F12,点击控制台即可查看运行结果。
js的调用方式与执行顺序
定义方式属于标签,可定义在HTML中的任意位置,具体语法:
<script type="module"></script>
三种使用方法:
---直接在js标签内写代码:一段输出变量的js代码。
写入位置也是任意的,不过最好写在head标签里面。
<script type="module">
let x = 5;
console.log(x);
</script>
---类似于CSS,引入js文件:
<script type="module" src="/static/new_study.js"></script>
<!--自己创建一个js文件-->
然后再js文件中写入内容即可调用。
---*将需要的某些代码通过关键字import引入相关作用域:
需要一个暴露export函和自己定义一个函数数操作,在js文件中首先先定义需要的变量,之后创建一个函数,最后使用export将需要的函数及变量放入之中。
函数的定义方式为function。例如:js文件中的代码
let name = "历历越越程序员"
let age = 18
function print() {
console.log("my name is " + name + " i am " + age + " years old");
}
export {
name,
age,
print
}
HTML中的代码
<script type="module">
import { name, print, age } from "/static/new_study.js";
print();
</script>
记住格式即可。
这里需要注意的是在HTML中import中引用的变量或函数只能是export中所暴露的,只
引用没有的将会报错。
文件的执行顺序
类似于HTML与CSS,按从上到下的顺序执行;事件驱动执行。
变量与运算符
变量的定义统一使用“let”,常量的定义使用“const”,从这里我们可以发现js定义变量时不需要我们指定数据类型,类似于python。“let”同时可以定义对象,类似于python中的字典,c++里的map
let x = { name:"dly",age:18 }
五种常见的变量类型
我们可以通过 console.log(typeof x) 操作查看相关数据类型。
number:数值变量,例如1, 2.589
string:字符串,例如"SDUT", 'dly',单引号与双引号均可。字符串中的每个字符为只读类型。js中的字符串也是只读变量不可改变,可以看成数组进行逐个输出例如:
let asd = "dly"
console.log(asd[0])
输出结果为:d
如果我们要强制改变某一个字符使用如下操作(了解即可):
let asd_1 = asd.substr(0, 0) + 'j' + asd.substr(1);
输出结果:jly
boolean:布尔值,例如true,false
object:对象,类似于C++中的指针,例如[1, 2, 3],{name: "dly", age: 18},null
undefined:未定义的变量
类似于Python,JavaScript中的变量类型可以动态变化。
运算
与c++、python类似,只说几个特殊点:
---除数取整操作 parseInt() 括号里面放式子。
---乘方运算,2***3 的含义为2的3次方。
---等于与不等于用===和!==
输入与输出
这里的输出输出不只是从键盘获取内容。既然是web工程语言,它还可以实现从页面通过用户获取,例如我们前面学到的通过input、textarea等标签获取用户的键盘输入;通过click、hover等事件获取用户的鼠标输入,之后我们还将学到通过Ajax与WebSocket从服务器端获取输入。
输出的效果将影响当前页面的HTML与CSS并通过Ajax与WebSocket将结果返回到服务器。
---保留小数位数操作 .toFixed(位数)
格式化字符串
类似与使用c++中printf、cout操作,进行格式化输出。关键操作 :${变量名}
function main() {
let name = "dly", age = 18;
let s = `my name is ${name}. i am ${age} years old.`;
console.log(s);
}
判断操作与循环等语法与c/c++相同不再解释。
--------------------------------------------------------------------------------------------------------------------------------------------------------------------
对象
前面说到过类似于c/c++中的map和python中的字典,也是由键值对构成,其中的值可以是变量,数组,对象和函数等。例如我们定义一个人的对象,里面有若干属性:
let person = {
name: "dly",
age: 18,
gender: 'man',
money: 0,
friend: ['jiaohongli', 'feidao'],
clothes: {
size: 'L',
price: 200,
},
do_money: function (x) {
this.money += x;//相当于import
}
};
function main() {
console.log(person.money);
person.do_money(10);
person.do_money(10);
console.log(person.money);
console.log(person["age"]);
person['do_money'](10);
}
export {
main
}
访问对象里面的参数可以用‘.’;也可以用[]来访问,访问的内容用“”括起来。
函数的调用方法用‘.’即可;也可以加[],里面写入函数名添加参数即可。其中用[]访问的方法都是动态的,即里面的关键字是可变的。
输出结果为:0 20。
数组
数组是一种特殊的对象,类似于C++中的数组,但是数组中的元素类型可以不同。数组中的元素可以是变量、数组、对象、函数。例如:
let a = [1, 2, 'a', [4, 5, 6],
function () {
console.log("hello");
}
];
访问数组里的元素与c++类似,使用下标访问。如果我们访问的元素是一个数组的话,可以再加一个[],类似于二维数组的方式访问数组元素的元素,假设我们要访问5,写法:
console.log(a[3][1]);
访问函数的写法:元素位置加括号:
console.log(a[4]());
里面元素重新赋值的方法与c++相同,而且js里的数组没有越界的概念,假设上面的a数组我们只定义了5个元素,但这个数组并不是五个元素长度,我们还可以定义第十个位置,给这个位置的元素赋值,中间没赋值的元素为“undefine”。
数组的常见操作
属性length:返回数组长度。注意length是属性,不是函数,因此调用的时候不要加()。
函数push():向数组末尾添加元素。
函数pop():删除数组末尾的元素。
函数splice(a, b):删除从a开始的b个元素。
函数sort():将整个数组从小到大排序,自定义比较函数:array.sort(cmp),函数cmp输入两个需要比较的元素,返回一个实数,负数表示第一个参数小于第二个参数,0表示相等,正数表示大于。
函数
前面能用到好多次了不做过多解释,要注意的是上面说到的“undefine”,如果函数没有返回值,函数就会输出“undefine”。这里再做一遍总结:
function add(a, b) {
return a + b;
}
let add = function (a, b) {
return a + b;
}
let add = (a, b) => {
return a + b;
}
类
与C++中的Class类似。但是不存在私有成员,this指向类的实例。实例的定义方式类似于python。
class point{
constructor(x,y){
this.x = x;// 成员变量
this.y = y;
}
add(){
this.sum = this.x + this.y;// 成员变量可以在任意的成员函数中定义
}
toString(){
return `(${this.x} + ${this.y})`;
}
}
let main = function () {
let p = new point(3,4);
console.log(p.x,p.y);
console.log(p.toString())
}
export {
main
}
主要作用:对应前端的每一个组件。
继承
class Colorpoint extends point {
constructor(x, y, color) {
super(x, y); // 这里的super表示父类的构造函数,类似于父类中的constructor
this.color = color;
}
toString() {
return this.color + ' ' + super.toString(); // 调用父类的toString()
}
}
let main = function () {
let p = new Colorpoint(3, 4, 'red');
console.log(p.toString());
}
super这个关键字,既可以当作函数使用,也可以当作对象使用。作为函数调用时,代表父类的构造函数,且只能用在子类的构造函数之中。super作为对象时,指向父类的原型对象。在子类的构造函数中,只有调用super之后,才可以使用this关键字。
性质:如果子类成员与父类成员有相同名称时,子类会覆盖父类。例如子类父类都有toString,输出结果:red (3 + 4)
静态方法
在成员函数前添加static关键字即可。静态方法不会被类的实例继承,只能通过类来调用。例如:
class point {
constructor(x, y) {
this.x = x;// 成员变量
this.y = y;
}
toString() {
return `(${this.x} + ${this.y})`;
}
static print_class_name() {
console.log("Point");
}
}
let main = function () {
let p = new point(3, 4);
point.print_class_name();//正确调用方式
}
export {
main
}