Notice
Recent Posts
Recent Comments
Link
«   2025/07   »
일 월 화 수 목 금 토
1 2 3 4 5
6 7 8 9 10 11 12
13 14 15 16 17 18 19
20 21 22 23 24 25 26
27 28 29 30 31
Tags more
Archives
Today
Total
관리 메뉴

개발캡슐

2022.06.30_1주차_Javascript_12강~14강 본문

스파르타코딩클럽-항해99_9기/1주차_HTML, CSS, Javascript

2022.06.30_1주차_Javascript_12강~14강

DevGreeny 2022. 7. 18. 19:18

1-12강. Javascript(자바스크립트) 맛보기

1_ 자바스크립트

  • 웹사이트 완성 - html, css, js(javascipt)
  • html - 뼈대, CSS - 꾸미기, Javascript - 움직이게 하기(동작)
  • javascript - 프로그래밍 언어 중 하나, 브라우저가 알아들을 수 있는 언어.
    • 전세계에서 인터넷에 약속한 표준.
    • java 와 javascript 차이 - 그냥 서로 관련없는 다른 언어.

 

2_ 자바스크립트 기초 맛보기

  • file name: index_js01.html
  • 기초 맛보기
  • HTML
 <div class="mytitle">
 	<h1>내 생애 최고의 영화들</h1>
    <button onclick="hey()">영화 기록하기⚡</button>
</div>

=> 영화 기록하기 버튼에 onclick="hey()" 속성을 달아주고

=> onclick="key()" : 클릭을 하면 hey()를 호출해라라는 속성.
그리고 그 hey()는 아래 javascript에 정의를 했어.

  • javascript
<script>
 //javascript -기초맛보기
     function hey(){
        alert('안녕!');
    } 
 
</script>

 

=> 브라우저 결과 : 영화 기록하기 버튼 클릭 시에 alert() 메서드의 명령으로 팝업창으로 안녕!이란
                               문구를 확인할 수 있어.                           

 

 

 

1-13강. Javascritp 기초 문법(1)

  • file name: index_js02.html

1_javascript 문법 - script 안에 쓰는 것.

  • javasript 문법 - script안에 쓰는 것과 같아. 
<head>  
	<script>
	 //javascript -기초맛보기
    	 function hey(){
    	    alert('안녕!');
    	} 
	</script>
</head>

 

  • 이 script는 검사창에 있는 console창과 같아.

1. 화면 아무데나 마우스 오른쪽 버튼 클릭하고 "검사"라는 메뉴찾아 들어가.

 

2. 검사창이 뜨고 탭 중에 Console탭으로 들어가면,

 

3. Console창이 떠. 이게 script창과 같아.

 

 

2_Console창이란?

  •  Console 창:
    • 개발자들이 개발할 때 실제로 잘 됐나 보려고 여기서(코딩프로그램) 고치고 새로고침하고 다시 고치고 새로고침하는 게 힘드니까
    • Google이 Console탭을 만든 것.
    • 개발자 도구, 개발자들을 위한, 개발자들이 개발을 할때 쓰면 편한 도구

 

3_문법 종류

  • 5가지 : 변수, 자료형, 함수, 조건문, 반복문
    • 변수 : 값을 담는다.
    • 자료형 : 이게 숫자냐, 문자냐
    • 함수 : hey()같은 애들.
    • 조건문 : if() - 이렇다면 이렇고, else() - 그게 아니라면 이렇게 된다.
    • 반복문 : 계속 반복하자.

 

  • 브라우저창에 검사(F12)켜고 console(콘솔로그)창에 쳐서 익혀.

1. 변수

예시1)

<script>
//1)
    let a = 2;
    //a
    //2
    let b = 3;
    //b
    //3
    a+b;
    //5
</script>

 

 

예시2)

<script>
	a+b;
	//5 인 것처럼
    
	let first_name = 'haerhee';
	//undefinded
	let last_name = 'nam';
	//undefinded
	first_name+last_name;
	//'haerheenam'
	a+last_name;
	//'2nam'
</script>

 

=> 참고로 console창에선 새로고침만 안 하면 이어서 써져.

 

2. 자료형(2가지) - list, 딕셔너리형

  • 자료를 담는 방법이 필요할 거야.
    수박, 배, 참외로 데이터를 저장해야하는데 이게 100개면.
    근데 불가능하거나 힘드니까 let a = 수박 / let b = ..이렇게 100개 100줄같이
  • 무수히 많은 데이터를 쓸 수 없으닌까
    데이터를 한 번에 모아서 정렬하는 방법이 필요해.

 

1) 리스트(list)형 - 숫자가 중요.

예시A)

 <script>
    let a_list = ['수박','참외','배']; //이거 기억해
    //undefined
    a_list[1]; //이거 기억하고
    //'참외'
    //순서(번째) : 수박=0, 참외=1, 배=2

    //추가
    a_list.push('감');
    //4
    a_list;
    //(4) ['수박', '참외', '배', '감'] 
 <script>

 

예시B)

<script>
	let b_list = ['철수', '영희'];
	//undefined
	a_list.push(b_list);
	//5
	a_list;
	//(5)['수박', '참외', '배', '감', Array(2)]
	a_list[4][0];
	//'철수'
	a_list[4][1];
	//'영희'
</script>

 

=>타고타고타고
=> (5)['수박', '참외', '배', '감', Array(2)] 여기에서 Array(2) 얘를 집어서
let b_list = ['철수', '영희'] 안에서 '철수'얘를 집는거야.

 

2) 딕셔너리형 - key, value 이루어져있고, 그렇게 key, value로 매칭되는 것들을 중요시 해. 

<script>
 //key, value
    let a_dict = {'name':'bob','age':27};
    //undefined
    a_dict['name'];
    //'bob'
    //key => 'name', 'age' / value => 'bob','27'

    //추가
    a_dict['height'] = 180;
    //180
    a_dict;
    //{name: 'bob', age: 27, height: 180}
    //height까지 추가된 걸 알 수 있어.
</script>

 

3) 재밌는 자체 함수들 몇가지

예시A) gmail요소만 뽑아내고싶다.

<script>
	let myemail = 'saprta@gmail.com';
	//Undefined
 	myemail.split('@');
 	//(2) [ 'sparta', 'gmail.com']
 	myemail.split('@')[1];
 	//'gmail.com'
 	myemail.split('@')[1].split('.');
 	//(2) ['gmail', 'com']
 	myemail.split('@')[1].split('.')[0];
 	//'gmail'
</script>

 

 

1-14강. Javascript 기초 문법(2)

  • file name: index_js03.html
  • 함수, 조건문, 반복문

1_함수

1) 정해진 동작을 하는 애야.

  • HTML
<script>
	function sum(a,b){
		alert(a+b)
    }
</script>

일 때,

=> F12, Console창

<scirpt>
	sum(2,3);
	//5 (팝업창으로 뜸- alert기능)
</scirpt>

 

=> 이게 함수. 정해진 것을 하는 것.

 

2) 정해진 값을 주기도 해.

<script>
	function sum(a,b){
    	 alert('계산을 하자');
    	 return a+b;
	}//이건 그냥 정의를 해준거구.

	let result = sum(2,3);
	alert(result);
</script>

 

=> 예상해 봐. 

=> 예상 결과 :
일단 let result = sum(2,3); 으로 sum( 2, 3)을 불렀어,
그럼 function sum(a, b)에 sum(2, 3)이 들어가겠지.
먼저 alert('계산을 하자'); 이게 뜰거고, return a+b; 의 a+b가 5가 되겠고,
let result = sum(2,3);는 sum(2,3)이 5가 되어 result란 변수에 5가 들어가서 5라는 alert이 뜨겠구나.

=> 실제 결과 : 먼저 alert('계산을 하자'); 바로 뜨고, 그 다음 5라는 alert이 뜨는구나~

  • 위에 alert들이 왜 흰 화면(로딩중)에 떴을까! 
<script>
	function sum(a,b){
    	 alert('계산을 하자');
    	 return a+b;
	}//이건 그냥 정의를 해준거구.

	let result = sum(2,3);
	alert(result);
</script>

=> 이게 body가 뜨기 전에 head의 script가 있는 alert이 먼저 읽혀서 그래.

=> 즉,    
<body></>body> 부분이 뜨기 전에 <head>부분이 먼저 작동되면서 뜨기에
<head> 안에 있는 <script>부분의 javascript기능이 먼저 뜬 거야.

 

3) Console.log

<script>
//alert 대신에 console.log라고 써줄 수 있어.
	function sum(a,b){
		console.log('계산을 하자');
		return a+b;
	}//정의
		let result = sum(2,3);
		console.log(result);
</script>

=>
console.log : f12, 콘솔창에 찍어줘라.는 의미야.
alert이 자꾸 뜨면 개발자가 확인하기 어려우니까.

=> Console창 확인해 보면

 

==> 이게 함수야. 

 

 

2_조건문

<script>
	function is_adult(age){
		if(age > 20) {
			alert('성인입니다');
		}else{
			alert('청소년입니다');
		}
	}
	// F12, 콘솔(console)창
	//is_adult(20)
	// => 청소년입니다.(모달창으로 뜸)
	//is_adult(25)
	// => 성인입니다. (모달창으로 뜸)
</script>

=> is_adult(age)에서  만약 age가 20보다 크면 성인입니다 뜨게 하고 아니면 청소년입니다.라고 뜨게 해.
라는 명령이야.

 

  •  Console창 예시 : is_adult(20)

=> 20보다 커야 성인이 나오니 성인이 아니라고 나오겠지.

  • Console창 예시 : is_adult(25)

=> 20보다 크니 성인이라고 나오고.

 

3_반복문

예제1)

<script>
	let a_list = ['사과', '배', '감', '딸기'];
		for (let i = 0; i < a_list.length; i++) {//i가 0부터인 i가 어디까지 a_list의 length만큼 돈다. i가 하나씩 높아지면서.
		console.log(a_list[i]); //콘솔에 한 번 찍어보자. 일단 봄.
	}
</script>

 

 

=> 결과

=> 이게 무슨 말이냐면, 

  • for (let i = 0; i < a_list.length; i++)

i 가 0부터 하나씩 커지는 거야. 그러면서 도는 건데, 돌면서 내용물을 실행시키는거야
즉,  i 가 0부터 하나씩 커지면서 내용물을 실행시켜, 언제까지? a_ilst.length의 길이(=4)까지.

 

예제 2)

<script>
    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]);
    }

//f12, 콘솔(console)창 결과
//{name: '철수', score: 90}
//{name: '영희', score: 85}
//{name: '민수', score: 70}
//{name: '형준', score: 50}
//{name: '기남', score: 68}
//{name: '동희', score: 30}
</script>

=> 보면 scores 안에 리스트가 크게 들어있고, 리스트 안에 딕셔너리가 0번째~5번째 들어있어.
=> scores의 0번째의 name은 철수 라며 타고타고 들어가서 읽는 거야.

 

 

=> console창 결과

 

예제 3)  score만 찍고싶어요. 할 경우.

<script>
	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]['score']);
	}
</script>

=> 그러면 0번째의 또는 1번째의 score만 찍어라 하면 돼.

 

=> 리스트와 같이 노는 게 '반복문'이야.
90%패턴이 이렇게 돌아가.

 

예제 4)  나머지 10%는.

돌다가(실행하다가) 70점 넘는 애들만 찍어주고 싶다면,

<script>
	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++) {
		if (scores[i]['score'] > 70) {//돌다가 70점 넘는 애만 찍어주고싶을 때
		//scores의 i번째의 score라는 값이 70보다 큰 친구들만

		console.log(scores[i]['name']);//scores의 i번째의 'name'만 찍어줘.
   		 }
    }
</script>

=> 이게 아주 전형적인 패턴이야.

 

=>

'스파르타코딩클럽-항해99_9기 > 1주차_HTML, CSS, Javascript' 카테고리의 다른 글

2022.06.30_1주차_Javascript 연습 _15강  (0) 2022.07.26
2022.06.30_사전준비 1주차_html, css_1강~11강  (0) 2022.07.18
'스파르타코딩클럽-항해99_9기/1주차_HTML, CSS, Javascript' Related Articles more