JavaScript Essentials

63236 ワード

1.JSの起動

1.1データ型の検証

console.log('Hello world!') // ; 안붙여도 실행된다. 단, 특수한 경우에는 필요

console.log(typeof 'Hello world!') //string
console.log(typeof 123) // number
console.log(typeof true) // boolean
console.log(typeof undefined) // undefined
console.log(typeof null) // object
console.log(typeof {}) // object
console.log(typeof []) // object

function getType(data) {
  return Object.prototype.toString.call(data)
}

console.log(getType(123)) // [object Number]
console.log(getType(false)) // [object Boolean]

function getType(data) {
  return Object.prototype.toString.call(data).slice(8, -1)
}

import getType from './getType';

console.log(getType(123)) // Number
console.log(getType(false)) // Boolean
console.log(getType(null)) //Null
console.log(getType({})) // Object
console.log(getType([])) // Array

1.2算術、代入演算子

1.2.1算術演算子

console.log(1+2) //3
console.log(5-7) //-2
console.log(3*4) // 12
console.log(10/2) //5
console.log(7%5) //2 : 7을 5로 나눈 나머지 연산자

1.2.2代入演算子

let a = 2
console.log(a) // 2
a +=1 // a = a + 1 : 모든 산술 연산자 적용 가능
console.log(a) // 3

1.3比較、論理演算子

1.3.1比較演算子

const a = 1
const b = 1
console.log(a===b) // true : 일치 연산자, a와 b가 일치하는지
function isEqual(x, y) {
  return x === y
}
console.log(isEqual(1, 1)) // true
console.log(isEqual(2,'2')) // false : 숫자데이터와 문자데이터 이기 때문
const a = 1
const b = 1
console.log(a!==b) // false : 불일치 연잔자, a와 b가 서로 다른지
console.log(a < b) // false : a가 b보다 작은지
console.log(a > b) // false : a가 b보다 큰지
console.log(a >= b) // true : a가 b보다 크거나 같은지
console.log(a <= b) // true : a가 b보다 작거나 같은지

1.3.2論理演算子

const a = 1 === 1
const b = 'AB' === 'AB'
const c = false
console.log(a) // true
console.log(b) // true
console.log(c) // false
console.log('&&:', a && b && c) // false : 모두 true여야 true가 되는 AND 연산자
console.log('||:', a || b || c) // true : true가 하나 이상이면 true가 되는 OR 연산자
console.log('!: ', !a) // false : true면 false를 나타내는 부정 연산자

1.4 3項演算子

const a = 1 < 2 
if (a) {
  console.log('참') // 참
} else {
  console.log('거짓')
} 
console.log(a ? '참' : '거짓') // 조건 ? 참값 : 거짓값

1.5条件文If Else

--JS getRandom.js--
export default function random() {
  return Math.floor(Math.random() * 10)
}

--main.js--
import random from './getRandom'

const a = random()

if (a === 0) {
  console.log('a is 0')
} else if (a === 2) {
  console.log('a is 2')
} else if (a === 4) {
  console.log('a is 4')
} else {
  console.log('rest...')
}

1.6条件文スイッチ

import random from './getRandom'

const a = random()

switch (a) {
  case 0:
    console.log('a is 0')
    break
  case 2:
    console.log('a is 2')
    break  
  case 4:
    console.log('a is 4')
   break  
  default:
    console.log('rest...') 
}

1.7繰り返し文For

for(開始条件;終了条件;変化条件){}

const ulEl = document.querySelector('ul')

for (let i = 0; i < 10; i +=1) {
  const li = document.createElement('li')
  li.textContent = `list-${i + 1}`
  if ((i + 1) % 2 === 0) {
    li.addEventListener('click', function () {
      console.log(li.textContent)
    })
  }
  ulEl.appendChild(li)
}

1.8変数有効範囲

変数有効範囲再割当繰り返し宣言グローバル登録constブロックレベルXXXX letブロックレベルOXXX var関数レベルOOOO

1.9インチ移行

1.9.1 Truthy（真値）

true, {}, [], 1, 2, 'false', -12, '3.14' ...

1.9.2 Falsy（ダミー）

false, ' ', null, undefined, 0 -0, NaN(Not a Number)

2.JS関数

2.1関数の復習

const sum = function (x, y) { // 매개변수
  if (x < 2) {
    return 123 // 반환과 종료를 의미함
  }
  return x + y 
}

console.log(sum(1,3)) // 123

const sum = function (x, y) { 
  console.log(arguments)
  return arguments[0] + arguments[1]
}

console.log(sum(1,3)) // 4

2.2矢印関数

( ) => { } vs function ( ) { }

const double = function (x) {
  return x * 2
}
console.log('double: ', double(7))

const doubleArrow1 = x => x * 2
console.log('doubleArrow1: ', doubleArrow1(7))

const doubleArrow2 = x => ({ name: 'Heroppy' }) // 객체데이터 반환 시
console.log('doubleArrow2: ', doubleArrow2(7))

2.3即時実行関数

IIFE, Immediately-Invoked Function Expression

const a = 7
function double() {
  console.log(a * 2)
}
double();

(function double() {
  console.log(a * 2)
})()

2.4護衛

宣言された関数を有効範囲の上部にドラッグ&ドロップ

const a =7

double()

function double () {
  console.log(a * 2)
}

2.5タイマ関数

settimeout(関数、時間):関数

を一定時間後に実行します.

setInterval(関数、時間):1時間に1つの関数

を実行します.

clearTimeout():設定したTimeout関数

を終了します.

clearInterval():設定したInterval関数

を終了します.

const timer = setTimeout( () => {
  console.log('Heropy!')
}, 3000)

const h1El = document.querySelector('h1')
h1El.addEventListener('click', () => {
  clearTimeout(timer)
})

const timer = setInterval( () => {
  console.log('Heropy!')
}, 3000)

const h1El = document.querySelector('h1')
h1El.addEventListener('click', () => {
  clearInterval(timer)
})

2.6コールバック

関数引数としての関数

function timeout(cb) {
  setTimeout(() => {
    console.log('Heropy!')
    cb()
  }, 3000)
}
timeout(() => {
  console.log('Done!')
})

3.JSクラス

3.1コンストラクション関数（プロトタイプ）

function User(first, last) {
  this.firstName = first
  this.lastName = last
}
User.prototype.getFullName = function () {
  return `${this.firstName} ${this.lastName}`
}

const heropy = new User('Heropy', 'Park')
const amy = new User('Amy', 'Clarke')
const neo = new User('Neo', 'Smith')

console.log(heropy.getFullName())
console.log(amy.getFullName())
console.log(neo.getFullName())

3.2 this

通常(Normal)関数は呼び出し位置に基づいて定義されます!

矢印(Arrow)関数は、宣言された関数の範囲内で定義されます.

const heropy = {
  name: 'Heropy',
  normal: function () {
    console.log(this.name)
  },
  arrow: () => {
    console.log(this.name)
  }
}
heropy.normal() // Heropy
heropy.arrow() // Undefined

const amy = {
  name: 'Amy',
  normal: heropy.normal,
  arrow: heropy.arrow
}
amy.normal()
amy.arrow()

function User(name) {
  this.name = name
}
User.prototype.normal = function () {
  console.log(this.name)
}
User.prototype.arrow = () => {
  console.log(this.name)
}

const heropy = new User('Heropy')

heropy.normal() // Heropy
heropy.arrow() // Undefined


const timer = {
  name: 'Heropy!!',
  timeout: function () {
    setTimeout(function () {
      console.log(this.name)
    }, 2000)
  }
}
timer.timeout() // Undefined

const timer = {
  name: 'Heropy!!',
  timeout: function () {
    setTimeout(() => {
      console.log(this.name)
    }, 2000)
  }
}
timer.timeout() // Heropy!!

3.3 ES6 Classes

normal:function(){}=normal(){}省略可能!

function User(first, last) {
  this.firstName = first
  this.lastName = last
}
User.prototype.getFullName = function () {
  return `${this.firstName} ${this.lastName}`
}

class User {
  constructor(first, last) {
    this.firstName = first
    this.lastName = last
  }
  getFullName() {
    return `${this.firstName} ${this.lastName}`
  }
}

const heropy = new User('Heropy', 'Park')
const amy = new User('Amy', 'Clarke')
const neo = new User('Neo', 'Smith')

console.log(heropy.getFullName()) // Heropy Park
console.log(amy.getFullName()) // Amy Clarke
console.log(neo.getFullName()) // Neo Smith

3.4継承（拡張）

class Vehicle {
  constructor(name, wheel) {
    this.name = name
    this.wheel = wheel
  }
}
const myVehicle = new Vehicle('운송수단', 2)
console.log(myVehicle)

class Bicycle extends Vehicle {
  constructor(name, wheel) {
    super(name, wheel)
  }
}
const myBicycle = new Bicycle('삼천리', 2)
const daughtersBicycle = new Bicycle('세발', 3)
console.log(myBicycle)
console.log(daughtersBicycle)

class Car extends Vehicle {
  constructor(name, wheel, license) {
    super(name, wheel)
    this.license = license
  }
}
const myCar = new Car('벤츠', 4, true)
const daughtersCar = new Car('포르쉐', 4, false)
console.log(myCar)
console.log(daughtersCar)

4.「」を参照してください。

FastCampus For Business

KDT pintechフロントエンド開発者2期

(KDT FE 2)のフロントエンド開発を一度に完了したウルトラダインパッケージオンライン.

朴英雄講師

Reference

この問題について(JavaScript Essentials), 我々は、より多くの情報をここで見つけました https://velog.io/@songe/JavaScript-Essentials

テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。

Collection and Share based on the CC Protocol

flowable実装マルチインスタンス-サイン-動的構成員リファレンスdemo(xmlファイルの補充)

MongoDBのJavaアプリケーションテスト