스파르타코딩클럽 웹개발 JAVA SCRIPT

#JAVA Script 맛보기

• 브라우저가 유일하게 알아 들을 수 있는 컴퓨터 언어, 명령을 내리면 그걸 알아듣고 동작을 수행해달라고 소통할 수 있는 언어
• Java와 Java script는 연관관계가 전혀 없다
• 기본 html 작업에서 <style>밑에 <script>를 만들어 자바스크립트 사용이 가능 

 

• 맛보기 예시
• <script>태그 안에 아래 함수 만들기

  function hey(){
            alert('안녕!')
        }

• "jumbotron"으로 가서 <a>태그 안에 onclick 태그 넣기 

<div class="jumbotron">
            <h1 class="display-4">나홀로 메모장!</h1>
            <p class="lead">중요한 링크를 저장해두고, 나중에 볼 수 있는 공간입니다.</p>
            <hr class="my-4">
            <p class="lead">
                <a onclick="hey()" class="btn btn-primary btn-lg" href="#" role="button">포스팅박스 열기</a>
            </p>
        </div>

• 그럼 [포스팅박스열기]를 누르면 alert만든 '안녕!'이 팝업( alert은 경고창)

 

• 브라우저에서 오른쪽클릭>검사 하면 console창 뜸. 우리는 이 개발자 도구에 만들어 놓았던 함수를 불러와서 사용해볼 수 있음. 매번 수정 저장 실행하면 귀찮기 때문에 여기 console창에 바로바로 수정하면서 볼 수 있게 만들어 둔것
• console.log(변수1,변수2)로 여러 변수를 한번에 출력할 수도 있음. 

 

#Java script 기초문법

• 변수, 자료형, 함수, 조건문, 반복문 -> 여기를 알아두면 왠만한 로직은 만들 수 있다

#변수 

• 값을 담는 박스
• 문자열도 담을 수 있는데 이땐 ''(작은, 큰 따옴표)안에 넣어야 함 
• 변수이름을 지을때는 아무렇게나 지을 수 있지만, 남이 봐도 알아보기 쉽게 정하는게 좋음 

 

#리스트

• 순서가 중요한 담기
• let a_list = [ ] 리스트를 선언, 변수 이름은 아무렇게나 가능 
• 컴퓨터는 숫자를 셀 때 0부터 센다. 
• 여기서 수박이 0번째 a_list[0]

let a_list = ['수박','참외','배']

 

#딕셔너리

• 일상생활에서 많이쓰는 유형. 예를들어, 생일을 물어본다면 생일에 대응되는 날짜를 알고자 물어보는 것 
• 생일이라는 키(KEY)값에 대응되는 밸류(값)을 말해달라는 것 
• name, age = key / bob,27=value 

let a_dict = {'name':'bob', 'age'=27}

• 여기는 순서가 중요하진 않다. 
• 값을 가져오고 싶을 땐 [ ], 선언할 떈 중괄호 {}

a dict = ['name']

• 딕셔너리에 값을 추가하고 싶으면 그대로 적어주면 바로 들어감 . a_dict['height']=180 이렇게 쳐주면 바로 포함됨 
• 딕셔너리와 리스트는 둘을 조합할 수 가 있음

a_dict['fruit'] = a_list

• a_list를 'fruit'라는이름으로 정해주고 넣으면 딕셔너리에 포함됨
• 'fruit'라는 리스트 안에 '수박','배','참외'가 있다고 할 때, 수박을 부르고 싶다면
• 'fruit'부르고 뒤에 순서 써주면 부를 수 있음 

a_dict['fruit'][0]

 

#그 외 기본 공식들

• let a = 100 일 때, a 를 7로 나눈다면 그에 대한 나머지는 ?
• 아래 공식으로 치면 나머지는 2 이렇게 나옴 
• 이런 공식은 들어오는 트래픽을 균등하게 나눌 때 사용
• 짝수 홀수 나눌때 사용 

a % 7

 

• 등호도 존재 함 
• a < 150 하면 true, a>200 하면 false 뜸 
• a == 100 여기서 같다라고 하려면 ==두번 쳐야함
• a !=100 같지않다 라는 뜻

 

 

• 글자를 나누기도 가능함

let myemail = 'spart@gmail.com'

• 위 코드를 @ 기준으로 나누려면?

myemail.split('@')

• ['sparta', 'gmail.com']으로 나뉘게 됨 
• 이걸 리스트로 보고 또 1번째를 취하려고 한다면?

myemail.split('@')[1]

• [gmail.com] 나오게 되고 여기서 다시 .을 기준으로 나누다면?

myemail.split('@').split('.')

• ['gmail','com']으로 나오고 여기서 0번째 를 뽑아낸다면 ?

myemail.split('@')[1].split('.')[0]

• "gmail"로 나오게 됨 -> 지금 우리는 어떤 도메인을 쓰는 이메일인지 뽑아 낸 셈!

 

 

#함수

• 프로그래밍에서의 함수는 부르면 '정해진 동작'을 하는 것 
• sum이라는 함수를 만들었다면,(sum이라는 함수 이름은 내가 그냥 정한거고 그 안에 숫자를 더하는 걸 값으로 내놓는 함수를 만든 것 

function sum(num1,num2){
	return num1+num2
}

let result = sum(2,3)
result 
5

 

• num1에 2 num2에 3이 들어가서 더해진 값 5가 나오는 것 
• 함수에서 return은 끝내고 나를 변신시켜줘! 이런 것

#IF문

기본 if 문 

let age = 20 

function is_adult(age){
	if(age> 20){
    	alert('성인입니다')
    }else{
    alert('청소년이에요')
    }
}

let sex = '남성'

// AND 표시 = &&
if(age>20 && sex =='남성') {
	console.log('성인 남성입니다')
} else {
    console.log('청소년입니다')
}

성인남성입니다

• or : ||

// 참고: OR 조건은 이렇게
function is_adult(age, sex){
	if (age > 65 || age < 10) {
	alert('탑승하실 수 없습니다')
} else if(age > 20 && sex == '여'){
	alert('성인 여성')
} else if (age > 20 && sex == '남') {
	alert('성인 남성')
} else {
	alert('청소년이에요')
	}
}
is_adult(25,'남')

 

#반복문

• 반복되는 숫자를 계속 더한다던지 반복되는 정보를 입력해야할 때 사용 

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

• 0부터 10보다 작을때까지 이 조건을 반복하는게 이 원리 

for (1. 시작조건; 2. 반복조건; 3. 더하기) {
	4. 매번실행
	}
1 -> 2체크하고 -> (괜찮으면) -> 4 -> 3
-> 2체크하고 -> (괜찮으면) -> 4 -> 3
-> 2체크하고 -> (괜찮으면) -> 4 -> 3
-> 2체크하고 -> (괜찮으면) -> 4 -> 3
와 같은 순서로 실행됩니다.
i가 증가하다가 반복조건에 맞지 않으면, 반복을 종료하고 빠져나옵니다.

• 반복문은 주로 리스트와 함께 많이 사용 
•  

let people = ['철수','영희','민수','형준','기남','동희']

people.lenght 
6

for (let i= 0; i<people.length; i++){
	console.log(people[i])
}
// people.lenght는 길이니까 6이 나올것, 근데 여기 console.log에서 people[i]를 넣으면 이름이 그대로 출력

 

• (people[i]) 를 넣음으로서 리스트를 한 바퀴 돌아라~라고 할 수 있음 

 

• 더 자주 쓰는 패턴

let scores = [
	{'name':'철수', 'score':90},
	{'name':'영희', 'score':85},
	{'name':'민수', 'score':70},
  {'name':'형준', 'score':50},
  {'name':'기남', 'score':68},
  {'name':'동희', 'score':30},
]

for(let i=0; i<scores.length; i++){
	console.log(scores[i])
}

• 이상태에서 아래처럼 돌리면 이름만 뽑아 낼 수 있음 

for(let i = 0; i <score.length; i ++) {
	console.log(score[i]['name'])
}

•  

for(let i=0; i <scores.length; i++) {
	let name = scores[i]['name']
    let scores = scores[i]['score']
    console.log(name,score)
}

//각각의 이름과 점수가 순서대로 나옴

for (let i = 0 ; i < scores.length ; i++) {
if (scores[i]['score'] < 70) {
console.log(scores[i]['name']);
}
}
// 이렇게 하면 점수가 70점 미만인 사람들의 이름만 출력할 수도 있습니다

• 딕셔너리들을 모아둔 리스트를 돌면서 필요에 맞는 딕셔너리를 if문으로 값을 찍어낼 수 있음