任务3-1(JavaScript基础)

1.VScode配置:

需要安装的插件:Live Server, Bracket Pair Colorizer,JavaScript (ES6) code snippet

2.JavaScript语法:

2.1 注释和console

2.2 三个容器关键字

 1. var  
 2. const 常量关键字,不能修改常量的值(但是可以改变对象中的属性),定义常量一定要赋值

2.3 数据类型

1. 基本数据类型
	string(字符串),Number(数值),Boolean(布尔) Null(空) Undefined(未定义) Symbol(符号)
2. 引用数据类型
	Object(对象)
	数组 []

2.4 类型转换

let val;
//数组转化为字符串
val=String([1,2,3,4]);
//toString:转化为字符串
val = [55].toString();

//别的类型转换为数值
val = Number(false);
//NaN
val = Number('hello');
//另外一种形式
val = parseInt("100.30");
val = parseFloat('100.30');

//输出
console.log(val);
consolr.log(typeof val);

//console.log(val.toFixed(2))

2.5 数值运算和Math对象

const numl=180;
const num2=50;
let val;
//数值运算
//val=numl+num2；
//val=numl-num2；
//val=numl*num2；
//val=numl/num2；
//val=numl%num2；

//Math object
//val=Math.PI；
//val=Math.round（2.6）；//四舍五入
//val=Math.ceil（2.4）；//向上取整
//val=Math.floor（2.8）；//向下取整
//val=Math.sqrt（64）；//平方
//val = Math.abs（-3）；//取绝对值
//val=Math.min（2，33，4，1，55，6，3，-2）；//最小值//val=Math.max（2，33，4，1，55，6，3，-2）；//最大值

2.6 字符串方法

const firstName='William';
const lastName=‘Johnson';
const age=32; 
//拼接
let val;
val=firstName+lastName;
//空格拼接
val=firstName +''+lastName;
//转义
//val = 'this\'s ugly, i can\'t wait';
val="That's awesome，i can't wait";
//length
val=firstName.length;
console.log(val);
// concat 拼接
val=firstName.concat('',lastName);
//大小写转换
val=firstName.toUpperCase();
val=firstName.tolowerCase();
//字符串下标
val=firstName[2];
//indexof
val=firstName.indexof('l');
val=firstName.lastIndexof('l');
//charAt 
val=firstName.charAt(2);
//获取最后一个字符
val=firstName.charAt(firstName.length-1）;
//获取子字符串
val=firstName.substring(0,4);
//slice 
val=firstName.slice(0,4);
val= firstName.slice(-3);
//转数组
const str ="my name is lina";
val =str.split(' ');

2.7 模板字符串

const name='John';
const age=31;
const job='web Developer';
const city='Beijing';
let html;
//没有模板字符串(es5)
html=
'<ul><1i>Name:'+
name+
'</lis<lisAge:'+
age+
'<1i>Job:'+
job+
'</li>City'+
city+
'</ul>';
document.body.innerHTML=html;

function hello{
	return 'hello world'
}
//模板字符串展示（ES6）
html=`
<ul>
<1i>Name：${name}</li>
<li>age：${age}</li>
<1i>job：${job}</li>
<li>city：${city}</li>
<lisName：${2+2}</1i>
<1isName：${hello}</li>
<li>${age>30?0ver 30'："Under 30}</1i>
</ul>
`

2.8 数组方法

//数组方法
const numbers =[43,45,56,33,44,1,71；
const numbers2=new Array[22,40,32,76,99]；
const fruit=['Apple',‘Banana','Orange','Pear']；
const mixed=122，'Hello'，true，undefined，null，
let val；
//获取长度
val=numbers.length；
//检查是不是数组
val=Array.isArray(numbers)；
//获取数组单个元素
val=numbers[3]；
//更改案个元素值
numbers[2]=108；
//查找元素下标位置
val=numbers.indexof(4)；
//添加和删除
numbers.push(250);
//从前面加
numbers.unshift(120);
//从后面删除
numbers.pop();
//从前面删除
numbers.shift();
//删掉多个
numbers.splice(1,3);
//反转
numbers.reverse();
//数组拼接
val=numbers.concat(numbers2);
//排序
val=fruit.sort();
val=numbers.sort();
//正常排序数值
val=numbers.sort(function(x,y){
return x-y;
});

2.9 对象

const person={
	firstName:‘米斯特吴’,
	lastName:‘Wu',
	age:32,
	email:'277323570qq.com',
	hobbies:['music','sports'],
	address:{
		city:'Chengdu',
		state:'chenghuaqu'
	},
	getBirthYear:function（）{
		return 1987;
	}
};
let val;
val=person;
//获取到单个属性
val=person.firstName;
val=person['lastName'];
val=person.age;
val=person.hobbies[1];
val=person.email;
val=person.address.city;
val=person.getBirthYear;

//数组对象嵌套
const people=[
	{name:‘Bucky'，age：30},
	{name:‘Henry'，age：32},
	{name:'Elyse'，age：38}
]
for (let i=0；i< people.length；i++){
	const.log(people[i].name);
}

2.10 日期

let val;
const today =new Date();
let birthday =new Date('9-10-1988 11:28:00');
birthday=new Date(' September 18 1988');
birthday=new Date('9/10/1988');
val=birthday;
val=today. getMonth();
val=today. getDate();
val=today. getDay();
val=today. getFullYear(;
val=today, getHours();
val=today. getMinutes();
val= today. getSeconds();
vat=today. getMilliseconds(;
val=today. getTime();
birthday. setMonth(2);
birthday. setDate (12);
birthday. setFullYear (1987);
birthday. setHours(3);
birthday. setMinutes(20;
birthday. setSeconds(25);

2.11 分支语句

//if switch
//if分支语句
//if（“条件”）{}
//条件关系运算符逻辑运算最终结果为boolean
//关系运算符：><==>=<=|====l==
//逻辑运算符：&&（AND）||{0R） ！（取反）
let id = 100;
//if（id ==180）{
//console.1og（‘条件为真：id的值就是100）；
//else{
//console.1og（‘条件为假：id的值不是100）；
//}
//console.1og（‘分支外的语句‘）；
//TEST 分支条件是否为undefined
if (typeof id == 'undefined'）{
	console.log（'没有设置id'）;
}else{
	console.log('id为:${id}');
}


//逻辑运算符
const name=‘Steve';
const age=14;
//逻辑与&&AND 
if(age>0 && age<12){
	console.log('${name}is a child);
}
//逐辅或一真既真
if(age<16 ll age>65){
	console.log('s{name}要么是孩子要么是老人);
}else{
	console.log('${name)是个成人”);
}
//逻辑非！
if(!true){
	console.log('Correct');
}
//三目运算符
console.log(id == 100?'Correct'：'Incorrect');

2.12 Switch分支

//switch
const color=' orange';
switch (color)
	case' red':
		console.log(' Color is red');
		break;
	case 'blue':
		console.log(' Color is blue');
		break;
	case 'yellow':
		console.log(' Color is yellow');
		break;
	default:
		console.log('tolor is not at all');
		break;

2.13 循环

for(let num = 1;num<10;num++){
  console.log(num);//1,2,3,4,5,6,7,8,9
}

var num = 1;//1、声明循环变量         
while (num<10){//2、判断循环条件;
    console.log(num);//3、执行循环体操作；
    num++;//4、更新循环变量；
}

var num = 10;            
do{
    console.log(num);//10 9 8 7 6 5 4 3 2 1 0
    num--;
    }while(num>=0);         
   console.log(num);//-1

2.14 函数

JavaScript 函数语法
JavaScript 函数通过 function 关键词进行定义，其后是函数名和括号 ()。
函数名可包含字母、数字、下划线和美元符号（规则与变量名相同）。
圆括号可包括由逗号分隔的参数：
(参数 1, 参数 2, ...)
由函数执行的代码被放置在花括号中：{}
function name(参数 1, 参数 2, 参数 3) {
    要执行的代码
} 

//有参致无返回值
firstName='米斯特吴';
function greet(firstName ='形参'){
	console.log（'Hello'+firstName）;
}
//有参数有返回值
function greet(firstName='形参'){
	return‘Hello'+firstName;
}
//.函数调用
greet('实参');
//函数表达式
const square=function(x){
	return x*x;
}
console.log(square(10))

//自执行函数
(function(){
	console.log("自执行函数");
})()

//属性函数
const todo ={
	add:function(){
		console.log ('Add todo..');
	edit:function(id){
		console.log('Edit todo...'+id);
	}
};
todo.delete=function(){
	console.log("Delete todo...");
};
todo.add();
todo.edit(222);
todo.delete();

2.15 window对象

//WINDOW METHODS/0BJECTS/PROPERTIES
window.console.log("Hello");
//alert
window.alert("Helto");
//prompt
const input=prompt();
alert(input);
//confirm
if(confirm('Are you sure？')){
    console.log('YES');
}else{
    console.log('NO');
}


//可视大小
val=window.innerHeight;
val=window.innerwidth;
//滚动大小
val=window.scrollY;
val=window.scrollx;
//location 
val=window.location;
val=window.location.hostname;
val=window.location.port;
val=window.location.href;
val=window.location.search;
//Redirect
window.location.href="http://www.baidu.com";
//Reload
window.location.reload();

//History
window.history.go(-3);
val=window.history.length;
//Navigator
val=window. navigator;
val=window. navigator. appName;
val=window. navigator. appVersion;
val=window. navigator. userAgent;
val=window. navigator. platform;
val=window. navigator. language;

2.16 变量作用域

• 局部作用域

   JavaScript 局部作用域
   变量在函数内声明，变量为局部作用域。
   局部变量：只能在函数内部访问。
   
   因为局部变量只作用于函数内，所以不同的函数可以使用相同名称的变量。局部变量在函数开始执行时创建，函数执行完后局部变量会自动销毁。		
  

  实例

  // 此处不能调用 carName 变量
  function myFunction() {
      var carName = "Volvo";
      // 函数内可调用 carName 变量
  }
  

• 全局作用域

    JavaScript 全局变量
    变量在函数外定义，即为全局变量。
    全局变量有全局作用域: 网页中所有脚本和函数均可使用。 
    实例
  

  var carName = " Volvo";
  // 此处可调用 carName 变量
  function myFunction() {
      // 函数内可调用 carName 变量
  }
  

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