JavaScript Basic

/**
  * `event有： blur, click, change, style, style.backgroundColor, keydown, focus
  * blur 当点击别处时发生变化
  * click
  * change
  * style 后面可以跟css tag 
  * style.backgroundColor = 'red'  change the backgroundColor
  * keydown
  * focus
  */

// fetch 返回的是一个 Promise，你可以用 .then() 来处理响应。
fetch(URL, {
  method: "POST";
  headers: {
  "Content-Tpye"
},

document.createElement('span') // span tag在html中
span.innerText = ‘Email’  // 会在html的 span tag后显示 Email
input.setAttribute('input', 'text') // input tag 后加入 属性
div.appendChild(span)
div.appendChild(input)
document.getElementById('email-list').appendChild('div')

function isValidDate(){
  const dateStr = getBirth();
  const dateArr = dateStr.split("/");
  const targetDateStr = `${dateArr[1]}/${dateArr[0]}/${dateArr[2]}`;
  return !isNaN(Date.parse(targetDateStr));
} 
/**
	* new Date('00/00/0000') 会返回Invalid Date
	* Date.parse(new Date('00/00/0000')) 会返回NaN
	* 重点是 isNaN()函数 
	* isNaN(1) 会返回fales
	* isNaN(NaN) 会返回true
	*/

fullName.onblur = function(){
  console.log('fullName: ', fullName.value);
}; // 在input输入框内 改了名字 在点一下周围就会获取到新的

selectAll.addEventListener('chane', function(){
  console.log('fullName: ',selectAll.checked );
})// checkbox 也会更新的 false or true

// 检查valid date是否合法
if(!/[0-9]{2}\/[0-9]{2}\/[0-9]{4}/.test(date.value)){
  console.log("Please input a vaild date")
}

var x = 3;
var y = 2;
var sum = x + y;
console.log(sum); //能将结果打印出来
// 这就是注释 

/**
	* 定义一个函数，接收两个数值，返回两个值 加的和
	* num 1
	* num 2
	*/
function add(num1, num2){
  return num1 + num2;
}
console.log(add(1,2))；

/**
  * 赋值给sum
  */
let sum = 0;

var num1 = 5; // var 是关键字 num1 是变量名字， 这是把5赋值给num1
var num2 = 6;
var sum = num1 + num2;
console.log(sum);  // 输出11
sum = "JavaScript"// 可以给变量重新赋值
// 输出 11  也输出 JavaScript

let num = 1;
const PI = 3.142 ;

var num = 5;
console.log(num);
num = "JavaScript";
console.log(num)  // 动态弱类型language

var arr = [1, 2, 3]; //arry
var obj = { name: "Yafei", age: 25}; // object
var greet = function(){
  console.log('hello');
};

console.log(typeof arr); // 输出object
console.log(typeof obj); // 输出object
console.log(typeof greet); // 输出function
// typeof 无法得到引用类型的准确的值类型

// 可以用instanceof 来判断引用类型 
console.log(arr instanceof Array) // 输出ture

// 也可以通过Object.prototype.toString.call(target)来判断
if (Object.prototype.toString.call(arr) === '[object Array]'){
  alert('arr is a Array object ')
};

for (var i = 0; i < 5; i++) {
  console.log('i = ' + i)
}
// 可以和逗号运算符搭配使用
for (var i = 0, j = 5; i < j; i++, j--){
  console.log('i = ' + i + ', j = ' + j);
}

// 面试题 数组去重
function uniqueArray(arr){
  var result = [];
  for (var i = 0; i < arr.length; i++){
    var isDuplicate = false;
    for (var j = 0; j < result.length; j++){
      if (arr[i] === result[j]) {
        isDuplicate = true;
        break;
      }
    }
    if (!isDuplicate) {
      result.push(arr[i]);
    }
  }
  return result;
} 

var i = 0
while (i < 10) {
  console.log(i);
  i++;
}

//成功与否
var success = false;
// 尝试次数
var attempts = 0;
// 最大尝试次数
var maxAttempts=3;
do {
  attempts++;
  //模拟操作(例如网络请求或文件读写)
  success = Math.random()>0.5;// 随机成功或失败
  console.log("Attempt " + attempts +(success ? " succeeded." :" failed."));
} while(!success && attempts < maxAttempts);
if(!success){
console.log("Operation failed after " + maxAttempts + " attempts.");
} else {
console.log("Operation succeeded after " + attempts + " attempts.");
}

// 在指定序列中找到想要数字的位置
var arr = [1, 66, 2, 3, 4, 5, 6, 7, 8, 9];
for (var i = 0; i < 10; i++) {
  console.log("currently location: ", i, "vaule is ", arr[i]);
  arr[i] === 66 && console.log("congratulation you find the 66! location is ", i);
}
/** 后面的8次循环是浪费的
  currently location:  0 vaule is  1
  currently location:  1 vaule is  66
  congratulation you find the 66! location is  1
  currently location:  2 vaule is  2
  currently location:  3 vaule is  3
  currently location:  4 vaule is  4
  currently location:  5 vaule is  5
  currently location:  6 vaule is  6
  currently location:  7 vaule is  7
  currently location:  8 vaule is  8
  currently location:  9 vaule is  9
*/

var arr = [1, 66, 2, 3, 4, 5, 6, 7, 8, 9];
for (var i = 0; i < 10; i++) {
    console.log("currently location: ", i, "vaule is ", arr[i]);
    if (arr[i] === 66){
      console.log("congratulation you find the 66! location is ", i);
      break;
    }
}
/** 后面的8次循环是浪费的
  * currently location:  0 vaule is  1
  * currently location:  1 vaule is  66
  * congratulation you find the 66! location is  1
  */

var students = [{name: "Yafei", score: 99},{name: "Luffy", score: 70},{name: "Wang", score: 91},{name: "Li", score: 89}];

for (var i = 0; i < students.length; i++) {
  if (students[i].score < 90){
    // 低于90，跳出本次迭代
    continue；
  }
  console.log(students[i].name + "high distinction of student score: ", students[i].socre);
}

// 只会打印出来90分以上的

var matrix = [
  [1, 2, 3],
  [4, 5, 6],
  [7, 8, 9],
];
for (var i = 0; i < 3; i++){
  for (var j = 0; j < 3; j++) {
    if (i >= 1 && j >=1){
      break; // 跳出循环，只跳出当前循环（j） 
    }
    console.log('matrix[${i}][${j}]:', matrix[i][j]);
  }
} // 输出 1 2 3 4 7

// 使用label
outerLoop: for (var i = 0; i < 3; i++){
  for (var j = 0; j < 3; j++) {
    if (i >= 1 && j >=1){
      break outerLoop; // 跳出最外层循环
    }
    console.log('matrix[${i}][${j}]:', matrix[i][j]);
  }
} // 输出 1 2 3 4       

firstLoop: for (var i = 0; i < 3; i++){
    sencondLoop: for (var j = 0; j < 3; j++){
        thirdLoop: for (var k = 0; k < 5; k++){
          if (k === 2) {
            break sencondLoop;
          }
          if (k === 3) {
            break firstLoop;
          }
          console.log("i = " + i + ", j = " + j + ", k = " + k);
        }
    }
}
/**
  * 打印输出
  * i = 0, j = 0, k = 0
  * i = 0, j = 0, k = 1
  * i = 1, j = 0, k = 0
  * i = 1, j = 0, k = 1
  * i = 2, j = 0, k = 0
  * i = 2, j = 0, k = 1
  */

var person = { name: "luffyzh", age: 29, email:"835531965"};
for (var key in person) {
  console.log(key + ": " + person[key])
}
/**
	* name: "luffyzh"
	* age: 29
	* email:"835531965"
  */

// 遍历数组  遍历可迭代的对象
var arr = [2, 4, 6];
for (var value of arr){
  console.log("value: " + value);
}
/**
	* value: 2
	* value: 4
	* value: 6
*/

// 遍历字符串
var str = "hi";
for (var char of str){
  console.log("char: " + char);
}
/**
	* char: h
	* char: i
  */

// 1 声明函数
function greet(name){
  alert('Hello ' + name);
}
// 调用 
greet('Yafei') // Hello Yafei

// 2 函数表达式 匿名函数 
var sayHello = function(name) {
  alert('Hello ' + name);
}
// 调用 
sayHello('Yafei') // Hello Yafie

// 3 箭头函数 相当于省去了写function(name)
var sayGoodbye = (name) => {
  alert('Hello ' + name);
}
// 调用 
sayGoodbye('Yafei') // Hello Yafie

// 函数参数 可以传入任意参数
function greet(name){
  alert('Hello ' + name);
}
greet()// 你可以传递参数，也可以不传递，不传递就是undefined

/** 
	* 非常特殊的函数内置对象 -- arguments
	* arguments有下标索引值
	* arguments不是Array数据类型
*/

function showArguments(){
  console.log('first value: ', arguments[0]); // first value: 1
  console.log('second value: ', arguments[1]); // sencond value: 2
  console.log('third value: ', arguments[2]); // third vaule: 3
  console.log('Is arguments a Array: ', arguments instanceof Array); // Is arguments a Array: false
}
showArguments(1, 2, 3);

// 箭头函数当中不存在 arguments
var sayGoodbye = (name) => {
  console.log(arguments);
} // arguments is not defined

// 写不写return 都有返回值
function add(num1, num2){
  console.log(num1 + num2); // 它的值是undefined
  return num1 + num2; // 他的值是number
}

/**
	* parseInt: 将字符串转换成整数
	* parseFloat: 将字符串转换成浮点数
	* includes() 查找数组是否包含某个元素
	* indexOf() 查找元素在数组的中的下标
	* forEach() 内置函数提供遍历数组的元素的方法
  */

var num = "123.36"

parseInt(num); // 123
parseFloat(num); // 123.39

var arr = [1, 2, 3]
arr.inculdes(3); // true
arr.indexOf(2); // 1

arr.forEach(items) => {
  console.log('item is: ', item)
}

// item is: 1
// item is: 2
// item is: 3

// 接收一个函数作为参数，在函数体中调用这个传递进来的参数函数
function processUserInput(callback){
  const name = prompt('Please enter your name.'); // prompt是个api会有弹窗提出
  callback(name); //在这个场景里可以理解为callback变成了greet
}

function greet(name){
  alert('hello, ' + name);
}
// 调用的方法给了 greet
processUserInput(greet)

// JavaScript 的异步函数主要用于处理那些耗时的操作（如网络请求、定时任务等），而不会阻塞主线程。下面是一些简单概念：
async function fetchData() {
  try {
    const response = await fetch('https://api.example.com/data');
    const data = await response.json();
    console.log(data);
  } catch (error) {
    console.error('Error:', error);
  }
}

fetchData();
//在这个例子中，fetchData 是一个异步函数，通过 await 等待 fetch 请求完成，然后处理返回的数据。整个过程中，主线程不会被阻塞，从而能同时处理其他任务。

function sum = (a) => (b) => (c) => {

}
function sum = (a) => {
  sum(b) => {
    sum(c) => {
      
    }
  }
}

function handlEvent = (a) => (b) => (c) => {
	element.addEventListener(a, c)
}

var obj = {
  a = 1,
  b = 2,
}

// 得到属性描述符
var des = Object.getOwnPropertyDescriptor(obj, 'a');
console.log(des);
/**
	* 打印输出
	* {value: 1, writable: true, enumerable: true, configurable: ture }
	*/

var obj = {
  a = 1,
  b = 2,
}

Object.defineProperty(obj, 'a', {
  value:10,
  writable:false, // 不可重写
  enumerable:false, // 不可遍历
  configurable:false, // 不可修改描述符本身
})；

for (var key in obj) {
  console.log(key); // 输出b 遍历不出来a
}

var keys = Objects.keys(obj);
console.log(keys); // 输出 ['b']

Object.defineProperty(obj, 'a', {
  // 读取器 getter
  get: function () {   
    console.log('Hello world';)
    return 123;
  }
  // 设置器 setter 
  set: function (val) {
  	console.log('hahah');
	}
}
console.log(obj.a) //get 函数里面是什么，就输出什么，先输出"Hello world" 再输出123
obj.a = 3+2 // 赋值操作 相当一执行了set函数
console.log(obj) // 先输出‘hahah’ 再输出Hello world" 再输出123

var internalName = Ya;
Object.defineProperty(user, 'name', {
  get: function () {
    return internalName;
  },
  // 传一个参数
  set: function (val) {
  	internalName = val;
	}
})