220511 Do it! 자바스크립트 1

연주·2022년 5월 11일
JavaScriptTILdoit자바스크립트
0

TIL

목록 보기
3/37

Do it! 자바스크립트

1강 안녕? 자바스크립트!

1. 웹 프로그래밍이란?

Programming : 프로그램을 만드는 과정
coding : 소스 코드를 작성하는 행위

  • 사용자의 검색 요청을 처리해 알맞은 정보를 전달해 주는 컴퓨터 👉 서버
  • 웹 브라우저를 보여주는 PC나 노트북, 모바일 기기등 👉 클라이언트
  • 웹 브라우저에서 보이는 것을 만드는 '프런트엔드'
    👉HTML , CSS, JavaScript
  • 사용자의 요청을 처리하고 데이터를 관리하는 '백엔드'
    👉PHP, DB, ASP, Java

2. 자바스크립트로 무엇을 할 수 있을까?

  • 웹 사이트를 동적으로 만들 수 있다.
  • 웹 브라우저에서 실행되는 프로그램을 만들 수 있다.
  • 서버를 구성하고 서버용 프로그램을 만들 수 있다.

3. 자바스크립트의 특징은 무엇일까?

  • 모든 웹 브라우저에서 작동한다
  • 웹 브라우저에서 실행 결과를 즉시 확인할 수 있다.
  • 풀스택 웹 개발뿐 아니라 다양한 용도의 프로그램을 만들 수 있다.
  • 다양한 자바스크립트 공개 API를 사용할 수 있다.
    API란? 어떤 정보를 다른 사람이 손쉽게 가져갈 수 있도록 미리 준비한 체계
  • 다양한 라이브러리와 프레임워크를 사용할 수 있다
    라이브러리란? 자바스크립트로 미리 구현해 놓은 기능을 묶어 놓은것
    ex)제이쿼리(jQuery)
    프레임워크란? 기본으로 제공하는 소스를 수정하거나 추가하는 방법으로 웹 프로그램을 만들 수 있게 미리 준비한 일종의 틀
    ex)앵귤러(Angular),뷰(Vue)

2강 자바스크립트와 친해지기

1. 비주얼 스튜디오 코드와 인사하기!

  • 자바스크립트 소스 확인 후 외부 스크립트 파일 연결
    👍 HTML문서가 너무 많을 때 자바스크립트 파일을 따로 저장해서 용이하게 관리할 수 있게 해준다.
    HTML문서와 자바스크립트 코드가 섞이지 않는 다는 장점도!
	<script>
		var heading = document.querySelector('#heading');
		heading.onclick = function() {
			heading.style.color = "red";
		}
	</script>
  • 소스를 .js 파일로 저장하고, 저장한위치로 연결
	<script src = "js/change.js"></script>

2. 나의 첫 번째 자바스크립트 프로그램

	<script>
		var name = prompt("이름을 입력하세요");
		document.write("<b><big>"+name+"</big></b>님, 환영합니다.")
	</script>

생활코딩에서 쓰지 않았던 코드라 궁금해서 검색해봤다.

prompt() 함수 문자열을 입력할 때 사용
<b><big> 글자를 굵게, 크게

3. 자바스크립트의 입력과 출력

  • 크롬 브라우저의 콘솔 도구와 함께 공부하기
    주소 표시줄에 about:blank 👉 빈창이 열린다
    Ctrl + Shift + J 👉 콘솔창이 열린다
  • 사용자 입력값 받기 - prompt( ) 
prompt("이름을 입력하세요.")
prompt("이름을 입력하세요.","홍길동")

// 다른점 👉 프롬프트창의 텍스트 필드 안에 '홍길동'이 입력되있다.
  • 알림 창으로 출력하기 - alert( )
alert("환영합니다");
  • 웹 브라우저 화면에 출력하기 - document.write( )
var name = prompt("이름: ");
document.write(name + "님,어서오세요!");
  • 콘솔에 출력하기 - console.log()
var name = prompt("이름: ");
console.log(name + "님,어서오세요!");
  • 크롬 브라우저 콘솔로 오류 찾아내기
  1. Ctrl + Shift + J 로 콘솔 창 열기
  2. 콘솔창에 오류 개수, 오류 내용, 오류 발생 위치 확인

4. 자바스크립트 소스를 작성할 떄 지켜야 할 규칙

  • 대소문자를 구별하여 소스를 작성한다.
  • 읽기 쉽게 들여 쓰는 습관을 들인다.
  • 세미콜론으로 문장을 구분한다.
  • 자바스크립트 소스에 메모를 하려면 주석을 사용한다
ex) //한 줄 주석
   /* 두 줄 주석은
	  이렇게 한다
   */
  • 식별자는 정해진 규칙을 지켜 작성한다.
    단, 식별자의 첫 번째 글자는 문자,_,$로 시작
  • 예약어는 식별자로 사용할 수 없다.

3강 변수와 자료형 그리고 연산자

1. 변수란 무엇일까?

  • 수식으로 알아보는 상수와 변수
    나이 = 올해연도 - 태어난연도 + 1
    나이, 올해연도, 태어난연도 👉 언제든 값이 변하므로 '변수'
    1 👉 항상 값이 일정하므로 '상수'

  • 변수를 선언하는 규칙 세 가지
    var 변수이름;
    ☑ 이름은 의미 있게 짓는다.
    ☑ 여러 단어를 연결한 변수 이름은 낙타 모양으로 만들어 준다.
    낙타 모양이란? 첫 번째 단어는 소문자, 두 번째 단어부터는 대문자로 표기
    ☑ 선언할 수 없는 이름도 있다.
    변수의 첫 글자는 반드시 문자, _ , $

  • 변수에 값이나 식 저장하기

var apple = "yammy"; // 변수를 선언하면서 값을 저장
var banana;
banana = "long and yummy"; // 변수를 선언한 다음에 값을 저장
  • 나이 계산 프로그램 만들기 - 변수 선언하기
 	<script>
		function calc(){
			var currentYear = 2022 ;
			var birthYear = 1993 ;
			var age;
			age = currentYear - birthYear + 1;
			document.querySelector("#result").innerHTML = "당신의 나이는" + age + "세입니다."; 
            
            // document에서 선택자를 사용하여 querySeletor 값이 result인 태그를 선택하고 html에 삽입한다.
		}
	</script>
  • 나이 계산 프로그램 만들기 - 사용자 입력값 변수에 할당하기
<script>
		function calc(){
			var currentYear = 2022 ;
			var birthYear = prompt("태어난 연도를 입력하세요.","YYYY") 
            // 프롬프트 창에 태어난 연도를 입력하게 합니다.
			var age;
			age = currentYear - birthYear + 1;
			document.querySelector("#result").innerHTML = "당신의 나이는" + age + "세입니다."; 
		}
	</script>

2. 자료형 이해하기

*자료형을 확인하는 방법? typeof 연산자 

 ex) typeof 1990; 
	"number"
	typeof "hello"
	"string"

  • 숫자형 정수 : 소숫점 없는 숫자

  • 숫자형 실수 : 소수점 있는 실수

  • 문자형 : ' ' 나 " "로 묶은 자료

  • 논리형
    논리형(Boolean)은 True 와 False의 값을 표현하는 자료형

  • undefined 와 null
    undefined는 자료형이 정의되지 않았을 때의 상태
    '처음부터 변수에 값이 할당되지 않았다'
    null
    '처음에 할당된 값이 더는 유효하지 않음'

  • 배열

// 변수 정의
var spring = "봄";
var summer = "여름";
var fall = "가을";
var winter = "겨울";


// 배열을 사용하면
var seasons = [''봄" , "여름" , "가을" , "겨울"];
// 쉼표로 구분해서 [  ] 로 묶으면 배열 선언

// 배열의 특정 값을 가져올 때 사용하는 인덱스
seaseons[0]
"봄"
seasons[1]
"여름"
  • 객체 (Object)
// 여러 자료를 { } 로 묶을 수 있다.
var kim = {
	firstName : "John",
	lastName : "Kim",
	age : 35,
	address : "seoul"
}

3. 연산자 이해하기

currentYear - birthYear + 1
currentYear '피연산자' / birthYear '연산자'

  • 나머지 연산자 %
    15 % 2
    1
    15/2 는 몫은 7 나머지 1
    그래서 % 는 나머지 값 1을 표현

  • 증감연산자 ++

  • 감소연산자 --

++앞에 붙을때랑 뒤에 붙을떄 결과값이 달라짐
"첨엔 이해가 안되서 당황했지만 동영상 찾아보니까 이해되서 다행쓰"

  • 할인 가격 계산 프로그램 만들기 - 연산자 활용
<script>
		function showPrice(){
			var originPrice = document.querySelector("#oPrice").value;
			var rate = document.querySelector("#rate").value;
			var savedPrice = originPrice * (rate / 100);
			var resultPrice = originPrice - savedPrice;
			document.querySelector("#showResult").innerHTML =
            "상품의 원래 가격은" +originPrice + "원이고, 할인율은" +
            rate + "%입니다." + savedPrice + "원을 절약한 "
            resultPrice + "원에 살 수 있습니다.";
		}
	</script>

4. 연산자 깊게 알아보기

  • 할당 연산자 (Assignment Operator , =) 응용
var x = 10;
x += 10  // x = x+10
20
var y = 20;
y *= 10 // y = y*10
200
  • 문자형과 숫자형의 연산 이해하기
var numVar = 100
var strVar = "50"
numVar + strVar
'10050'
numVar - strVar
50
numVar * strVar
5000
numVar / strVar
2

+ 는 숫자와 문자를 구분
- * / % 는 문자형 자료를 모두 숫자로 인식

  • 비교연산자
    ture 나 false로 결괏값을 내놓는 연산자
    == 같은지 확인
    != 다른지 확인
  • <와 <= , >와 >=
var a =3 , b = 4;
a == b
false
b =! 6
true
a < 3
false
a >= b
false
  • ==와 ===
10 == "10"
true
10 === "10"
false

⚠ ==는 문자를 숫자로 자동 변환
⚠ ===는 문자 그대로 , 변환 X

  • 논리 연산자
    true, false를 처리하는 연산자

  • OR 연산자 ( || )
    왼쪽과 오른쪽 중 하나라도 맞으면 ture

  • AND 연산자 ( && )
    왼쪽과 오른쪽 모두가 참일 때만 true
    하나라도 틀리면 false

  • NOT 연산자 ( ! )
    true나 false를 반대로 뒤집는다.

var isAdult = false;
isAdult 
false
isAdult = !isAdult;
true

💬 하루 되돌아보기
오늘부터는 Do it! 자바스크립트 기본편을 공부한다.
생활코딩으로 이런게 자바스크립트구나 라는걸 깨닳았고,
두잇으로 뭔가 하나하나 차근차근 이해하면서 내것을 만드는 느낌?

오늘은 아는 걸 다시 복습하는거라 그런가 더 재밌고 흥미로웠다!

profile
연주
성장중인 개발자🫰
이전 포스트

220510 생활코딩 - JavaScript 2

다음 포스트

220513 Do it! 자바스크립트 3

0개의 댓글