TIL 6 (웹개발 기초)

금일중 JAVA SCRIPT에 관하여 공부하였다.

 

자바스크립트란 브라우저가 알아들을 수 있는 언어이며 유용하게 쓰고있는 크롬,사파리,파이어폭스와 같은 브라우저들도 파이썬이나 이런 함수사용도 가능하지만 표준적으로 자바스크립트가 내장되어있어서 범용적으로 사용할 수 있다.

 

※ 자바스크립트 기본 기능

- 요소바꾸기

- 버튼을 클릭하면 요소바꾸기

 

※ 기본 출력문

let num = 20  -> Num은 20이다.

console.log(num) -> 콘솔창에 출력해줘. num을

 

※ 사칙연산가능

let a = 1

let b = 2

 

console.log(a+b) -> 3

console.log(a/b) -> 0.5 

 

※ 문자열

let first = 'Bob' -> Bob을 첫 문단으로

let last = 'Lee' -> Lee를 끝 문단으로

 

console.log(first + last) -> BobLee

console.log(first + ' ' + last) ->Bob Lee

console.log(first + a) -> Bob1

 

※ 리스트 만들기

let a_list = [ ] -> 공백인 리스트 생성

let b_list = [1, 2, 'hey', 3] -> 1,2,hey,3인 리스트 생성

console.log(b_list[0]) -> 순서를 불러온다. 대신 0번째는 1임. 이를 인덱스라 칭함

 

※ 딕셔너리 (객체) : 키와 밸류의 묶음 (쉽게 풀어 키와 보물상자열쇠의 개념이라는데 난 객체로 이해하는게 편했다)

let a_dict = {} -> 공백인 딕셔너리 생성

let b_dict = {'name' : 'Bob' , 'age' : 21} -> 각각 name과 age는 키로써 이름이 중복되면 안된다. 각각의 객체임

 

※ 리스트와 딕셔너리를 같이 사용한 예제

names = [{'name' : 'Bob' , 'age' : 20}

                {'name' : 'carry' , 'age' : 38}] -> 리스트양식과 딕셔너리 양식을 구분지어놓고 인덱스를 작성해주면됨

console.log(names[0]['name']) -> names의 0번의 이름을 출력

 

추가적으로,

 

new_name = {'name' : 'john' , 'age' : 7} -> 인덱스를 새로 생성해주고,

names.push(new_name) -> 명령어를 사용해주면 새로운 조건을 추가해줄수있다.

 

※ 기본 함수 배우기

1. Split
let myemail = 'sparta@gmail.com'

let result = myemail.split('@') // ['sparta','gmail.com']

console.log(result[0]) // 'sparta'을 출력
console.log(result[1]) // 'gmail.com'을 출력

let result2 = result[1].split('.') // ['gmail','com']

console.log(result2[0]) // gmail -> 우리가 알고 싶었던 것!
console.log(result2[1]) // com

console.log(myemail.split('@')[1].split('.')[0]) 
// gmail -> 간단하게 쓸 수도 있다!

 

2. Fuction

 

// 만들기
function 함수이름(필요한 변수들) {
내릴 명령들을 순차적으로 작성
}
// 사용하기
함수이름(필요한 변수들);

 

// 두 숫자를 입력받으면 더한 결과를 돌려주는 함수
function sum(num1, num2) {
console.log('숫자', num1, num2);
return num1 + num2;
}

console.log(sum(3, 5)); // 8 출력
console.log(sum(4, -1)); // 3 출력

 

※ for (반복문)

 

1. 기초반복문

 

for (let i = 0; i < 10; i++) } -> let i = 반복문이 시작될때 'index' 변수를 0으로 초기화, index < 10 = 반복문이 실행될 조건을 정의, index가 10보다 작을 동안에만 반복함, i++ = 각 반복이 끝날때마다 1씩 증가함
  console.log("hello");
}
// Hello를 10번 출력

for (let i = 0; i < 10; i++) {
  console.log(i);
}

// 0부터 9까지 반복해서 출력하는 코드

 

※ 조건문

1. if

if (조건) {
} else { 
}

 

let age = 24

if (age > 20) {
console.log('성인입니다') // true 
} else {
console.log('청소년입니다') // false
}

 

let ages = [12, 15, 20, 25, 17, 37, 24]

ages.forEach((a)=> {
if (a > 20) {
console.log('성인입니다')
} else {
console.log('청소년입니다')
}
})

// 순서대로 [false, false, false, true, false, true, true] 이므로
// 청소년입니다
// 청소년입니다
// 청소년입니다
// 성인입니다
// 청소년입니다
// 성인입니다
// 성인입니다
// 를 결과값으로 출력

 

위 조건문까지 학습하였고 

 

 

※ 어떤 문제가 있었는지

- 문제가 없었다.

 

※  내가 시도해본 것들

- 

 

※  어떻게 해결했는지

-

 

※  무엇을 새롭게 알았는지

- 자바스크립트를 공부하기전엔 파이썬, SQL도 공부해야하는데 자바까지? 라는 생각이 들었으나 각 언어마다 미묘하게 비슷한 부분이 생겨 시너지가 생기다보니 해볼만하다 느꼈다.