JavaScript快速入门

目录

  • 什么是JavaScript?
  • 在HTML中写JavaScript
    • 单独写JavaScript
  • 注释
  • 基本语法入门
    • 变量
    • 条件控制
    • 调试
    • 数据类型
    • map
    • set
  • iterator
  • 函数
  • let,const,var
  • 日期Date
  • JSON对象
  • 面向对象编程,与其他语言的区别
    • ES6面向对象class继承
  • 最后

什么是JavaScript?

JavaScript是世界上最流行的脚本语言
Javascript的历史
大部分浏览器支持es5代码,开发环境–线上环境,版本不一致

在HTML中写JavaScript

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
  <script>
    alert('hello');
  </script>
</body>
</html>

单独写JavaScript

外部引入

<script src="js/hello.js"></script>

JavaScript快速入门_第1张图片

注释

  1. 内部
    在这里插入图片描述
  2. 外部
//。。。
  1. 多行注释
/*
*
*
*
*/

基本语法入门

变量

弱类型语言

var num = 1;
var name = qiumingshan;

条件控制

if(2>1){
      alert('true');
    }

规则和c++一样,也允许嵌套

if(2>1){
      if(3>2){
        alert('3max');
      }

JavaScript快速入门_第2张图片

if(scor>=60){
      if(score>60&&score<70){
        alert('及格');
        if(score>=70&&score<80){
          alert('良好');
          if(score>=80&&score<90){
            alert('优秀');
            if(score>=90){
              alert('非常优秀')
            }
          }
        }
      }
    }else {
      alert('不及格');
    }

调试

用浏览器调试F12,进入调试,
JavaScript快速入门_第3张图片
可以在控制台,来打印
在这里插入图片描述
console.log(score)
在这里插入图片描述
相当于cout<

断点

JavaScript快速入门_第4张图片
可以一步一步来看

数据类型

数值,文本,图形,音频,视频……

number
js不区分小数和整数

123//整数123
123.1//浮点数123.1
1.123e3//科学计数法
-99//负数
NaN//not a number
Infinity//表示无限大

字符串

‘abc’ “abc”

转义字符
JavaScript快速入门_第5张图片

字符串拼接:


    let name = "qinjiang";
    let age = 3;
    let msg = 'hello,${name}';

字符串的长度

name.length

字符串的可变性,不可变,和Java,c++一样

大小写转换:

//这里是方法,不是属性了
name.toUpperCase()
name.toLowerCase()

字符串截取:

[)
name.substring(1)//从第一个到最后一个
name.substring(1,3)//[1……3)

布尔值
true,false

逻辑运算

&&
||

与c++或Java一样

比较运算符

=
==//等于,类型不一样,值一样,也会判断为true
====//绝对等于(类型一样,值一样,结果为true

NaN === NaN,这个与所有数字都不相等,包括它自己

null和undefined

null空
undefined未定义

数组

JS中可以是一系列不同类型的对象

var arr = [1,2,3,'hello',null,true]
  1. 长度
arr.length

假如给arr.length赋值,数组大小就会发生变化~
在这里插入图片描述

  1. 通过下标来取值赋值

JavaScript快速入门_第6张图片
3.slice()截取Array的一部分,返回一个新数组

也是[) 包头不包尾
在这里插入图片描述

  1. push,pop
    JavaScript快速入门_第7张图片
    push,尾部压入
    pop,尾部弹出
    JavaScript快速入门_第8张图片

  2. unshift(),shift()头部
    在这里插入图片描述
    unshift()头部插入,shift()尾部插入

  3. 排序sort
    arr.sort()

  4. 元素反转
    arr.reverse()

  5. concat()
    拼接
    JavaScript快速入门_第9张图片
    concat()

  6. 连接符号join
    打印拼接数组,使用特定的字符串连接
    在这里插入图片描述

  7. 多维数组

arr = [[1,2],[3,4],[5,6]];
arr[1][1];
4

对象
对象是大括号,数组是中括号

var person = {
	name: "jj",
	age: 18,
	work: ['student','cs']
}

每个属性之间使用逗号,最后一个不需要添加逗号

var 对象名 = {
属性名: 属性值,
属性名:属性值,
属性名:属性值
}
JavaScript快速入门_第10张图片

键值对描述属性xxx :xxx,多个属性之间使用都逗号隔开,最后一个属性不加逗号

  1. 对象赋值

person.name = “qin”

  1. 使用一个不存在的对象属性不会报错
  2. 动态的删减属性

delete person.name

  1. 动态的添加

person.hhh = “hahaha”;

  1. 判断属性值是否在这个对象中
'age' in person   //判断age是否在person中

Map和Set
ES6才出来

map

let map = new Map([['tom','99'],['jake','100']]);
    let name = map.get('tom');//通过get获得value
    console.log(name);

set

无序不重复的集合

var set = new Set([3,1,1,1,1];//set可以去除重复
set.delete(1);
console.log(set.has(3));

iterator

var set = Set([6,7,8]);
for(let x of set){ //循环
	console.log(x);
}

函数

function abs(x){
	if(x>=0){
		return x;
	}else{
		return -x;
	}
}

在这里插入图片描述
函数中的代码将在其他代码调用该函数时执行:

  1. 当事件发生时(当用户点击按钮时)
  2. 当 JavaScript 代码调用时
  3. 自动的(自调用)

当 JavaScript 到达 return 语句,函数将停止执行。
如果函数被某条语句调用,JavaScript 将在调用语句之后“返回”执行代码。
函数通常会计算出返回值。这个返回值会返回给调用者:

var x = myFunction(7, 8);        // 调用函数,返回值被赋值给 x

function myFunction(a, b) {
    return a * b;                // 函数返回 a 和 b 的乘积
}

在 JavaScript 函数中声明的变量,会成为函数的局部变量。

局部变量只能在函数内访问。

let,const,var

ES6 新增了let命令,用来声明局部变量。它的用法类似于var,但是所声明的变量,只在let命令所在的代码块内有效,而且有暂时性死区的约束。

题目1var a = 99;            // 全局变量a
f();                   // f是函数,虽然定义在调用的后面,但是函数声明会提升到作用域的顶部。 
console.log(a);        // a=>99,  此时是全局变量的a
function f() {
  console.log(a);      // 当前的a变量是下面变量a声明提升后,默认值undefined
  var a = 10;
  console.log(a);      // a => 10
}

// 输出结果:
undefined
10
99

ES6可以用let定义块级作用域变量

在ES6之前,我们都是用var来声明变量,而且JS只有函数作用域和全局作用域,没有块级作用域,所以{}限定不了var声明变量的访问范围。
ES6新增的let,可以声明块级作用域的变量。

{ 
  let i = 9;     // i变量只在 花括号内有效!!!
} 
console.log(i);  // Uncaught ReferenceError: i is not defined

方法

把函数放到对象的里面,对象只有俩个东西: 属性和方法

var person = {
	name: 'ymm',
	birthday: 2020,
	//方法
	age: function(){
		var now = new Date().getFullYear();
		return now - this.birthday;
	}
}

person.name;//属性
person.age();//方法一定要带()

日期Date

//data对象
var now = new Date();
now.getHours();

在这里插入图片描述
对应的年,月,日我就不再赘述

JavaScript快速入门_第11张图片
这里要说一个时间戳
电脑本地的时间可以修改,但是时间戳全世界都是统一的,
在这里插入图片描述

1970 .1. 1 0:00:00毫秒数

now.getTime();
//时间戳转换为时间,,1651157723736
console.log(new Date(1651157723736));

在这里插入图片描述

JSON对象

早期,所有数据传输习惯使用XML文件!

  1. JSON是一种轻量级的数据交换格式。
  2. 简洁和清晰的层次结构使得ISON 成为理想的数据交换语言。
  3. 易干人阅读和编写,同时也易干机器解析和生成,并有效地提升网络传输效率,

在JS中一切代码皆为对象,然后js支持的类型都可以用JSON来表示

格式:

  1. 对象都用{}
  2. 数组都用【】
  3. 所有的键值对都用key:value

JSON字符串JS对象的转化

var person = {
      name: "ymm",
      age: 18,
      sex: 'man'
    }

    //对象转换为JSON字符串
    var jsonPerson = JSON.stringify(person);

    //JSON字符串转换为对象
    var obj = JSON.parse('{"name":"ymm","age":3,"sex":"man"}');

面向对象编程,与其他语言的区别

类:模板
对象:具体的实例

可以说类是对象的抽象,对象是类的具体实现,也可以想为,女生是一个类,你的女朋友是这个大类中的具体一员

JS中:
不是一种真正的面向对象编程(OOP)语言,因为它的语法中没有class(类)—–es6以前是这样的。所以es5只有使用函数模拟的面向对象。

var Car = {
    color: 'red',//车的颜色
    wheel: 4,//车轮数量
}
var Car2 = {
    color: 'blue',
    wheel: 4,
}
alert(Car.color);//red
  1. 原始模式:这样的写法有两个缺点,一是如果多生成几个(100个!)实例,写起来就非常麻烦;二是实例与原型之间,没有任何办法,可以看出没有什么联系。
function createCar(color,wheel) {
    return {
        color:color,
        wheel:wheel
    }
}
//然后生成实例对象,就等于是在调用函数:
var cat1 = createCar("红色","4");
var cat2 = createCar("蓝色","4");

alert(cat1.color);//红色
  1. 原始模式的改进:通过写一个函数,解决代码重复的问题。
function createCar(color,wheel){//createCar工厂
    var obj = new Object;//或obj = {} 原材料阶段
    obj.color = color;//加工
    obj.wheel = wheel;//加工
    return obj;//输出产品
}
//实例化
var cat1 = createCar("红色","4");
var cat2 = createCar("蓝色","4");

alert(cat1.color);//红色
  1. 工厂模式
function CreateCar(color,wheel){//构造函数首字母大写
    //不需要自己创建对象了
    this.color = color;//添加属性,this指向构造函数的实例对象
    this.wheel = wheel;//添加属性

    //不需要自己return了
}

//实例化
var cat1 = new CreateCar("红色","4");
var cat2 = new CreateCar("蓝色","4");
alert(cat1.color);//红色
  1. 构造函数模式:为了解决从原型对象生成实例的问题,Javascript提供了一个构造函数(Constructor)模式。 所谓”构造函数”,其实就是一个普通函数,但是内部使用了this变量。对构造函数使用new运算符,就能生成实例,并且this变量会绑定在实例对象上。加new执行的函数构造内部变化:自动生成一个对象,this指向这个新创建的对象,函数自动返回这个新创建的对象

ES6面向对象class继承

直接定义,以学生类举例:

class Student{
	constructor(name){
		this.name = name;
	}
	hello(){
		alert('hello');
	}
}
//继承
class pupil extends Student{
	constructor(name,grade){
		super(name);
		this,grade = grade;
	}
	myGrade(){
		alert('I am a pupil');
	}
}
var xiaoming = new Student("xiaoming");
var xiaohong = new pupil("xiaohong");
xiaoming.hello();


最后

本文就到这里,由于作者能力有限,如有纰漏还请指出,不胜感激!
求一个免费的点赞!

你可能感兴趣的