JavaScript 기반

JavaScript

프로그래밍 언어로 주로 클라이언트에게 사용된다.
브라우저에서 응용 프로그램의 동작과 요청을 보낼 때의 동작을 담당합니다.
페이지를 업데이트하지 않고 화면을 전환하는 비동기식 통신 사용
서버에서 값 등을 받을 수 있습니다.

개발 도구

검증 도구 등으로도 불린다.일반 브라우저 포함
표시되는 웹 사이트의 HTML 요소 확인, 편집
표시되는 웹 사이트의 CSS 확인 및 편집
JavaScript 실행
Elements 패널에서 HTML 및 CSS 확인, 편집 가능
콘솔 패널에서 JavaScript를 실행할 수 있습니다.
콘솔 패널 사용
JavaScript 코드를 실행하는 방법을 학습합니다.루비의irb처럼.

console.log

브라우저 콘솔에 텍스트를 표시하는 방법
콘솔에 매개 변수로 표시할 정보를 전달합니다.루비의 puts 방법과 마찬가지로 사용할 수 있습니다.

console.log("Hello")

실제로 사용해 보세요.

console.log("Hello world")

JavaScript의 기본 구문

변수 정의

JavaScript에서 변수 정의 스타일은 var, const, let 세 가지입니다.

var

var는 구문법에서 다시 정의하고 다시 대입할 수 있는 정의 방법이다.

var example = "こんにちは"

example = "こんばんは"
// 再代入OK

var example = "おやすみ"
// 再定義OK

개발 현장에서 var라는 작법은 별로 사용하지 않는 것 같다.

const

나중에 다시 쓸 수 없는 변수의 쓰기 방법을 정의합니다.재부여 값과 재정의는 모두 받아들일 수 없는 제한이 있다.

const example = "こんにちは"

example = "こんばんは"
// 再代入NG

const example = "おやすみ"
// 再定義NG

const greet = "hello"

console.log(greet)
// => hello と出力される

const language = "English"

language = "Japanese"
// => エラー発生

실제로 콘솔에서 시도해 보세요.

let

let은 나중에 개작할 수 있는 변수를 정의하는 기법으로 그 특징은
값을 다시 지정할 수 있지만 재정의할 수 없습니다.

let example = "はじめまして"

example = "こんにちは"
// 再代入OK

let example = "こんばんは"
// 再定義NG →エラー発生

let과 const의 차이

·let 계획 재대입 변수 정의
· const는 재정의하지 않을 변수를 정의하는 데 사용됩니다.

템플릿 텍스트

문자열에 표현식을 삽입하려면 JavaScript 구문의 큰따옴표를 사용할 수 있습니다.
템플릿 문자를 사용하지 않을 경우

const name = "Mike"
const age = 13

const introduction = "私の名前は" + name + "、" + age + "歳です"
console.log(introduction)
// => 私の名前はMike、13歳です と出力される

템플릿 텍스트 사용 시

const name = "Mike"
const age = 13

const introduction = `私の名前は${name}、${age}歳です`
console.log(introduction)
// => 私の名前はMike、13歳です と出力される

조건 분기
조건 충족 여부에 따라 실행 내용의 처리를 나눈다.

if (条件式1) {
  // 条件式1がtrueのときの処理
} else if (条件式2) {
  // 条件式1がfalseで条件式2がtrueのときの処理
} else {
  // 条件式1も条件式2もfalseのときの処理
}

주의사항

① 조건식()으로 묶기
② 조건식 이후 괄호 {} 내의 처리
JavaScript에서는 조건 표현식 뒤에 {} 를 추가해야 합니다.
③ 여러 조건을 지정할 때else 다음에 if문장을 계속 기술하세요
Ruby에서는 elsif이지만 JavaScript에서는 else if를 주의해서 써야 합니다.
콘솔에서 실제로 사용하도록 하겠습니다.

const num = 30

if (num % 15 == 0) {
  console.log(`${num}は3と5の倍数です`)
} else if (num % 3 == 0) {
  console.log(`${num}は3の倍数です`)
} else if (num % 5 == 0) {
  console.log(`${num}は5の倍数です`)
} else {
  console.log(`${num}は3の倍数でも、5の倍数でもありません`)
}

배열 요소 가져오기

JavaScript에도 배열 개념이 있습니다.

const list = ["メロン", "スイカ", "イチゴ", "レモン", "ぶどう"]

console.log(list)

console.log(list[2])　#イチゴが出力される。

반복 처리

for 문장

반복 처리 시 사용됩니다.
for([① 초기화식];[② 조건식];[③ 덧셈식]){
//처리 내용
}
① 초기화식
사용할 변수를 정의합니다.변수는 현재 몇 번째 처리인지 확인하는 데 사용됩니다.
② 조건식
반복 처리 횟수를 지정합니다.값이 진짜로 되돌아오면 계속 실행합니다.
③ 덧셈식
초기화 표현식으로 정의된 변수의 변화를 설명할 수 있습니다.i=i+1이면 일주일에 1
작업을 수행합니다.

for ( let i = 1; i <= 20; i++ ) {
  // 20回処理を繰り返す
}

실제로 콘솔에서 사용하세요.

let count = 1
for (let i = 1; i <= 5; i += 1) {
  console.log(`${count}回目`)
  count +=  1
}

forEach 함수

수조에 저장된 모든 요소를 중복 처리할 때 사용하는 함수입니다.

配列.forEach( function(value){
  // 処理の記述
})

forEach 함수의 매개변수에 함수를 지정할 수도 있습니다.
지정한 함수에 대한 매개 변수를 정의함으로써 이 매개 변수는 그룹 요소를 포함합니다.
위의 예시에서 매개 변수는value입니다.매개변수는 0에서 마지막 요소로 반복될 때마다 각 요소로 대체됩니다.

fruits = ["lemmon", "strawberry", "melon"]
fruits.forEach( function(fruit) {
  console.log(fruit)　// 配列に格納されている要素の数だけ実行される
})

이번에는 여기까지 하겠습니다.