JavaScript基础笔记

记录一下一些UNSW6080课的基础学习方便我复习

基础

常量变量：

const Constvalue = 'hey';
//不能修改常量（can't be modified）

let variableValue = '0';
//可修改变量

let value, 这里注意一下null是变量被赋予空值，undefined是变量未被赋值

null与undefined都是假值（falsy values），但它们不是相同的类型。null是一个对象类型，而undefined是其自身独有的类型。

let value;

// A float or integer number
value = 0.1;

// A string,double quotes "" can also beused
value = 'some-string ';

// In JavaScript,null is a separate type
value = null;
//This type represents no value and novariable
value = undefined;
// A boolean value,either true or false
value = true;

// A unique value
value = SymboL();
// An object, which is basically adictionary
//of dynamically typed values identifiedby their keys
value = {key: 'hey ' , anotherKey: 10 };

value = 0.1;
console.log(typeof value);// Prints 'number'
value = 'some-string ';
console.log(typeof value);// Prints 'string'
value = null;
console.log(typeof value);// Prints 'object'
value = undefined;
console.log(typeof value);// Prints 'undefined'
value = true;
console.log(typeof value);// Prints boolean'
value = SymboL();
console.log(typeof value);// Prints 'symbol'

Function:

三种编写函数的不同方法，第三种更常规

function add2 (one,two){
console.log(one + two);}

const add3 = function(one,two){
console.log(one + two);
}
const add = (one,two)=>{
console.log(one + two);};

add(1，2);

==只对比值是否相等，===则同时比较值和type是否相同，通常情况下最好使用===(triple)进行比值，以避免出现string被误认为相等的情况。

const str = '[object object]';
const obj { catsSay:'meow ', dogsSay: 'woof'}
console.log(str == obj);
// Prints 'true'
console.log(str === obj);
// Prints 'false '

Object:

// An object is a dictionary of dynamically typed valuesconst 
obj ={ key: 'some-value', anotherKey:10.2 };
console.log(obj.key);// Prints 'some-value'
console.log(obj[ ' key']);// Prints 'some-value'
// An array is an indexed list of dynamically typed 
// values. Every Array is also an object.
const arr =['first value ', 2,obj];
console.log(arr[0]); // Prints 'first value'
console.log(arr.length); // Prints '3'
console.log(typeof arr);// Prints 'object'

//A Map is an object that can use any value as a key
//(not only strings）and preserves the original
//element order.
const map = new Map();
map.set(' one', 1);
console.log(map.get( 'one ')); // Prints '1'
// A Set is an object that contains unique values
const set = new Set();
set.add( 'one ');
set.add('one');// 'one' isn't added the second time
console.log(set.has( 'one '));// Prints 'true'

条件语句：

//ternary statement (条件/三元运算符)
condition ? ifTrue() : ifFalse();
const mark = 45;
const grade = mark < 50 ? 'Fail’: ‘Non-fail';
console.log(grade);

//truthiness of the value
if (true) {
console.log( 'Always prints');}
if (false){
console.log( ' Never prints');}

//any non-empty string is true 
//any empty stringis false 
if ('hey'){
console.log( 'Always prints');}
if(''){
console.log( ' Never prints');}

//a string of 0 is true and the number zero is false
if ('0'){
console.log( 'Always prints');}
if(0){
console.log( 'Never-prints');}

//除了0之外的数字都是truthy
if(1){
console.log( 'Always prints');}

//null and undefined is falsey
if (null){
console.log( 'Never prints');}
if (undefined){
console.log( 'Never prints');}

//all obj , functions and symbols are truthy
if（{ x: 'test'}){
console.log( 'Always prints' );}
if (SymboL()){
console.log( 'Always prints');}
if (function x()){
console.log( 'Always prints' );}


console.log(!!( '1' - 1));//print false 可以用这个语句查看条件的正负

循环语句 （similar to C）

//Good old for loop
for (let i = 0;i <100; i++) {console.log(i);}

// An equivalent while loop 
let i = 0;
while (i < 100){console.log(i);i++;}

// Or equivalent do. ..while loop
i = 0;
do {++i;
if(i >=100){break;
}
console.log(i);}while (true);

const,names = [ ' Hayden', 'Jake', 'Emily'];
for (const name of names){
console.log(name);}

Class

和Java很像

// Defining a new classcLass Snack i
// A consuctor that will be auto-called
//also have inheritance
class Snack {
constructor(calories,name) {
this.caloriesRemaining = calories;
this.name = name;
}
//One of attached functions,usually called 'methods '
chew(){
this.caloriesRemaining -=100;}
}

class Pizza extends Snack {
static caloriesPerGram = 2.66;

constructor(weightInGrams) {
super(Pizza.caloriesPerGram * weightInGrams,'XL');}
}

class Crisps extends Snack {
static caloriesPerGram = 5.36;
constructor(weightInGrams){
super(Crisps.caloriesPerGram * weightInGrams,'Thins')}
}

Mapreduce and filter

const newNums2 = nums.filter(num => num < 5);
consoLe.Log( newNums2);

//filter it which means go get all the items search through them 
//one by one and chose which to keep, and then return a new list.
//过滤所有元素保留符合要求的并返回一个新列表

const newNums3 = nums.map(num => num * 2);

这些例子中把函数当做变量来进行传递，这是一个很重要的概念

const greeting =() =>{
    return 'Hello';
}
const printName = (fn,name) =>{
consoLe.Log(fn(),name);
}
printName(greeting，'Hayden' );

Dom

a representation of your webpage

DOM将文档视为一个树形结构对象模型，其中每个节点都是文档的一部分，例如标签、属性、文本等。这种结构允许开发者通过脚本语言对文档进行各种操作，比如添加、移除或修改节点，改变样式，响应事件等。

DOM的核心特性包括：

节点（Node）:** 文档树中的每一个部分，如元素、属性和文本。
元素（Element）:** 文档树中的标签，是DOM操作的主要对象。
属性（Attributes）:** 元素的属性，如`id`、`class`、`style`等。
事件（Events）:** 文档或元素上发生的交互动作，如点击、按键、鼠标移动等。

//Returns an html element with the given id
document.getElementById(id);
//Returns a DOM HTMLCollection of all matches
document.getElementsByTagName(name);
document.getElementsByClassName(classname);
//Returns the first Element that matches the selector
document.querySeletor(query);

//Create a new div element
let element = document.createElement("div");
//Create a new text node
let textNode = document.createTextNode("Some Text");
//Adding and removing elements
element.appendChild(textNode );
element.removeChild(textNode );
//Making changes to attributes
button.setAttribute( "disabled", "");

//Changing element.style
element.style.left = "50px" ;// Note: don't forget units!
//Adding 5px to the left value
let newLeft = parseInt(element.style.left，10)+5 + "px ";element.style.left = newLeft;
element.style.backgroundColor = "red" ;//Note: camelCase

可以查看不同elements的属性和方法的网站：

HTML elements reference - HTML: HyperText Markup Language | MDN