【Javascript】基础知识

JavaScript基础

JavaScript是一种所谓的动态类型的 弱类型语言，意味着可以先将变量初始化位数字，然后重新分配为字符串或者其他任何类型的变量，这提供了极大的灵活性

基础概念

• 定义：
  运行在浏览器的脚本语言，是前端和用户的交互问题，包括使用交互和数据交互，浏览器执行. （在页面不刷新的时候能够获取数据： 比如在浏览页面的时候，选择栏选择的选项不同，显示出来的新闻不同，但是并没有刷新页面）

• 特点：
  1. 可以直接嵌入到HTML文件里
  2. 跨平台， 前端语言，只要有浏览器，都可以执行
  3. 安全性好，　不能操作盘符，不能打开文件，不能打开系统盘
  4. 兼容性，EDG GOOGLE都可以用

• 目的：

  1. 特效
  2. 表单验证
     （JS最早是因为表单验证而开发的）

• 语法：

  1. 在

<script>
alert (\x3c1234);// 十进制编码的方式
</script>

2. 在 标签里写

 <a href ="javascript:alert('\x3c1234\x3e')">baidu</a> //阻止跳转

3. 外部引入
   在外部写一个js文件，然后再引入

（中间不能放入任何东西， 放了也不执行）

4. 属性方式 标签属性
   不是个普通按钮 （js里的单击事件）

JavaScript编程

• 通过声明创建变量

let num = 2;
// 在旧版本里 用var定义 

• 运算符

// + - * /
let a = 1;
let b = 2;
let c = a + b;
let d = a * b;
let e = b - a;

let a += 2; // 在变量上进行操作
let b -= 1;

let a ++; //+1
let b --; //-1

• 常量

const num = 2;
//定义一个常量且不能够修改

Javascript的数据类型

• 数字
• 字符串
  连接字符串

let firstName = "SUN";
let lastName = 'Xiaomao';
let wholeName = firstName + " " + lastName;  // valeur: "SUN Xiaomao"

• 布尔型

Javascript 用类定义对象及其属性

1. 键/值对为JSON表示法的对象。它们使您可以将多个关联的数据元素保存在一个变量中。

2. 点号（dot）可以访问对象的值以及修改它们的可能性;

3. 类，以及如何使用类使创建对象更容易和更易读。

Javascript 对象以JSON编写，对象可以保存在变量中。

let Stu = {
	uname : "sxm",
	sex : "w",
	age: 18,
	classid : "php215"
};

• 访问对象数据

let Stu = {
	uname : "sxm",
	sex : "w",
	age: 18,
	classid : "php215"
};

let stuname = Stu.uname; 

• Javascript的构造函数

let Stu = {
	uname : "sxm",
	sex : "w",
	age: 18,
	classid : "php215"
	constructor(uname , sex , age,classid  ) {
        this.uname = uname ;
        this.sex = sex;
        this.age= age;
        this.classid= classid;
    }
};

• 实例化对象

let stu= new Stu("sxm", "w",18, "PHP215");

Javascript 数组类型 Array

• 创建一个数组(数组索引从0开始)

let stu[];
let stu['sxt','sxm','ska','sml'];
let arr = new Array();
var nl = null;

• 访问数组元素

let fisrtstu = stu[1];

• 删除数组元素

//删除某个数据会变成undefined ，下标还是存在
delete arr[20];

• 值的传递

  两个变量没有链接保持不变，值的传递不是通过引用传递的

// 将20的值传递到新变量中，并且两个变量没有链接保持不变，值的传递不是通过引用传递的
let a =20;
let b = a;

在修改该对象之前创建了数组并传递了该对象，可以在数组中看到它。这是因为当我们使用数组和对象时，我们是将引用传递给对象，而不是传递它们所包含的数据的值。

let Stu{
	name : 'sxt',
	age :18,
	available: true
};
let stu = [Stu];
Stu.available = false;
console.log(stu);// 输出 {name: 'sxt',age: 28, available: false}

• 常用方法
  
  
• 数学 函数
  

数据类型转换

• ParasInt (转化成INT类型)

let str = '20';
console.log(str);
console.log(typeof(str));


let z = paraseInt(str);
console.log(z);
console.log(typeof(z));

let aa = "30abc";
let zz = paraseInt(aa); //-------->30
let bb= "wew30eds";
let zzz = paraseInt(bb); //-------->NAN

• ParaseFloat

let str = '20';
console.log(str);
console.log(typeof(str));

let zz = paraseFloat(str);
console.log(zz);
console.log(typeof(zz));

let str = '3.4e2';
console.log(str);
console.log(typeof(str));

let zz = paraseFloat(str);
console.log(zz);//---------->340
console.log(typeof(zz));

• NUMBER 强制类型转换

let str= '20';
let str= '20.abc'; //NAN
let str= '3.4';//3.4
let str= '3.5e2';//350
let str= true;//1
let str= false;//0

let z = Number(str);

• 强制转化成字符串 String

let z = String(str);

• 强制转化成布尔类型

let n = 0;//false
let n = 0.0;//false
let n = null;//false
let n = false;//false
let n = '';//false
let n = NAN;//false
let n = undefined;//false
let z = Boolean(n);

• 数据类型 ‘0’ 在php 和 js 中是真还是假

• 自动类型转换

let x = 12;
if (x){
	alert('真');
}else{
	alert('假');
}

let z = 20 + '20';
// z 变成string了

let z = 20 - '10';
// z 变成int了

let z = 10 + 2 + '3';
// z 变成string了  123

let z = 10 * '2' ;
// z 变成string了 20


let z = 10 + '3px' ;
// z 变成string了 103px

let z = 10 - '3px' ;
// z 变成int --->NAN (任何东西和NAN做运算都是NAN)

函数声明的方式

function demo(){
	//函数体
}

var demo  = function(){
	//匿名函数声明方式
}
var d =demo;
// 第三种声明方式

<style
	.dvs{
		width:200px;
		height:100px;
		color: pink;
	}
</style>
<div class= 'dvs' onclick ='demo(this)' ></div> //this ->当前div本身的标签
function demo(){
	obj.style.background ='blue';
}

！注意 当函数名和变量名冲突的时候，会报错

Table 数组 （在JavaScript里数组table非常强大，有非常多的属性和方法）

1. length : 数组属性，指其包含的元素数

let stu = ['sxx','sxm','sml','ska'];
let leng = stu.length; //------->4

2. 删除和添加数组数据

stu.push('sbx'); //添加数据到末尾
stu.unshift('sdf');//添加数据到开头
stu.pop(); //从数组中删除最后一个元素

== 练习 ==

/*
在本练习中，episodes  已经创建了一个空数组  。

使用push  情节表格方法  ，一次添加一个情节。将第三集添加两次。

使用pop方法，从棋盘上删除多余的情节  episodes.

创建一个名为的变量  numberOfEpisodes  ，其中包含  length  来自Episodes数组的。

享受添加和删除剧集的乐趣，并检查一切是否正常。
*/
let episodes = [];
episodes.push('第一季');
for(let i = 0 ; i< 2; i++){
  episodes.push('第三季');
}
episodes.pop();
let numberOfEpisodes = episodes.length;

Set 和 MAP （其他集合）

我们看一下在JavaScript中：

set 可以看成是个无序列表，意味着我们不可以靠检索列表项，因为数据们没有固定的索引。 我们可以用set方便给任何给定时间在线注册用户。

map 可以看成是个有序列表，看起来更像一个对象。但是MAP里面有键， 我们可以很容易知道map里有多少元素。