JS / 01 / 기초-1

JavaScript

• 웹페이지를 동적으로, 프로그래밍적으로 제어하기 위해 만들어진 언어

• 비동기통신을 해줄 수 있음

• 확장성과 호환성이 아주 좋음

• 백엔드서버까지도 확장 해서 Node.js 라고 있음

• 명령어 순서가 영어 직독직해와 비슷함 . . .

• html body 태그 안에 script 태그로 표시

• 모든 명령어 뒤에 세미콜론 ( ; ) 찍어주자

  • 압축시, 세미콜론 없으면 다 한줄로 인식합니다.

---

동기통신 : 페이지 갱신시, 전체가 새로고침 되는
비동기통신 : 페이지 갱신시, 일부만 새로고침 되는 (인스타 피드 스크롤)

---

JS 기반 언어들
: Node.js / jQuery / react / 뷰 등


[ if ] 자바쪽으로 간다면, react 먼저 배우고 뷰를 배우는게 좋다.
react는 문법이 길고 복잡 / 뷰는 간단, 심플

---

개발자적 사고, 알고리즘 사고 . . .🤔

• boolean의 True False를 보면 연관지어서 if문을 생각해봐야하고
• 리스트(배열)을 보면 범위에서 기능하는 for문을 생각해봐야하고
  
  👉 코드만 주구장창 외우는게 아니라, 이해하고 연상하는 걸 기르자

---

자바스크립트의 출력문 3가지

① 문서(화면)에 직접 쓰는 방법 / 거의 사용 X

• document.write("<span>안녕하세요</span>") ;

• ✔️ document는 문서니까, html파일이라고 생각하면 됩니다 . .

---

② [⭐ ⭐] 콘솔창에 출력하는 방법 [ ⭐ ⭐ ]

• 개발자 소통 도구 ( 프론트 개발자 <=> 백앤드 개발자 )
• ≒ 파이썬 print
• 콘솔에 기록을 남긴다

사용처
1) 백엔드에서 넘어온 데이터를 확인할때
2) api 통신할때 데이터를 확인 하는 공간
3) 오류검증 할때 사용

• JS는 인터프리터언어(위에서아래로)라서,
  오류 검증시, 중간에 넣어서 코드 실행하는지 테스트

console.log("텍스트") ;
console.error("텍스트") ;
console.warn("텍스트") ;

---

③ 알림창 형태 제공

• 회원가입 완료, 주문완료 알람창 등
• window 객체에서 호출 되는 함수

[ ❓ ] window 객체

• 브라우저 보다 먼저 실행 되는 윈도우 객체
• 인터프리터언어 상관 없음
• 우선 순위 근본 자체가 다름
• alert, prompt, confirm 등 . . .

alert("주문이 완료 되었습니다.") ;

---

자바스크립트의 입력문 2가지

① 사용자에게 직접 글자를 입력 받는 입력문

• 구조 : 첫번째 매개변수 , 두번째 매개변수(미리보기 ≒ placeholder)
• 리턴데이터(입력받은 데이터)는 무조건 문자형태이다.

prompt("이름을 써주세요.","예를 들면 김철수,김민지,양민아") ;

---

② 사용자에게 한번 더 확인 받는 입력문

• 다시 한 번 더 물어보는 역활
• 책임전가 ?..
• 우리 사이트 떠나지마 . .
• 리턴데이터가 boolean형 타입이다. (확인 True / 취소 False)
  

confirm("회원 약관을 확인하셨습니까?") ;

---

✅ 배열과 딕셔너리의 차이

• 배열(리스트) : 동일 재료 나열, 같은 형태, 같은 의미를 가진 데이터 담는 공간
• 딕셔너리(객체) : 다른 의미의 데이터(재료)를 담는 공간

이름표 = ['민지','동수','재석']
인덱스로 특정 값 추출할 때, "아 이름표 리스트니까, 값도 이름이 있겠구나"


신상 = {'이름':'민지','나이':86,'사는곳':'서울'}
"아 이 신상 정보에는 각각의 이름,나이,사는곳이 있구나"