아무것도 없는 HTML문서에서 F12를 눌러 콘솔창 을 눌러
document.querySelector("div").append("안녕 자바스크립트!!")
를 입력하면 해당 문서가 뜨게된다.
Query 셀렉터를 이용하면 DIV라는 태그를 찾고 elements에 추가해 달라는 명령어가 될수 있다.
XML, HTML 문서의 각 항목을 계층으로 표현하여 생성, 변형, 삭제할 수 있도록 돕는 인터페이스이다. W3C의 표준이다. W3C의 표준화한 API들의 기반이 된다.<위키백과>
HTML 코드상에서 <script> </scrtipt> 창에서 이를 활용할 수 있다.
어디에 둬도 상관없이 동작은 되지만, <head>, <body> 어디에 넣으냐에 따라 다르게 동작된다.
<body>에 넣은 것이 좋으며, Window는 온로드 라는 함수가 있어서
다 로딩이 된 후 자바스크립트를 실행하게 해준다.
자바스크립트는 파일을 따로 꺼내어 사용도 가능하다.
변수를 넣어서 선언도 가능하다.
변수 선언시 var를 쓰냐 안쓰냐에 따라 달라진다.
var 선언 시 지역변수로 사용된다.
변수선언종류
lat : 일반적으로 변할 수 있는 값을 선언시 사용
const : 변하지 않는 상수로 쓸 때 사용함
함수를 만들때는 function() 을 사용하여 만든다.
prompt를 활용하여 원하는 값을 받을 수도 있다.
글자를 클릭하면 색깔이 변하게 만들어보자
를 입력해준다.
함수선언
블럭단위 vs 함수단위
var
es6 이후부터는 var로 선언하는것을 좋아하지 않음 let으로 선언하는걸 권장함
var와 let으로 선언했을때 차이를 잘 알아두자
var는 함수단위로 어디로 선언되었던 다 쓸 수 있음( 함수를 밑에다가 선언해도 동작이 됨)
let의 경우, 범위가 블럭 단위로 달라지게됨
함수단위의 스코프인지 블럭단위의 스코프인지에 따라 변수가 어디까지 사용이 되는지 알아야 함
자바스크립트 스타일 가이드
코딩 규칙을 "스타일 가이드", "코딩 컨벤션"
변수란?
undifined와 null개념이 비슷하여 잘 구분할 수 있어야 함
문자열(string)
• 작은따옴표(' ')나 큰따옴표(" ")로 묶은 데이터
논리형(boolean)
배열(array)
• 하나의 변수에 여러 값을 저장할 수 있는 복합 유형
자바스크립트의 데이터 유형 자동 변환
자바스크립트의 편리한 점이면서도 약점인 부분이 데이터 유형이 유연하는 것임.
다시 말해 변수의 데이터 유형이 중간에 바뀔 수 있다.
책에 있는 ‘나이 계산 프로그램’에서는 프롬프트 창을 통해 사용자의 태어난 해를 입력받는데,
이때 프롬프트 창에서 입력받은 값은 문자열이지만 사칙연산에 사용된 문자열은 자동으로 숫자형으로 변환되어 계산
산술 연산자
• 수학 계산을 할 때 사용하는 연산자
할당 연산자(대입 연산자)
• 연산자 오른쪽의 실행 결과를 왼쪽 변수에 할당하는 연산자
연결 연산자
• 둘 이상의 문자열을 합쳐서 하나의 문자열로 만드는 연산자 ‘+’ 기호 사용
비교 연산자
• 피연산자 2개의 값을 비교해서 true나 false로 결괏값 반환
== 연산자 와 != 연산자
피연산자의 자료형을 자동으로 변환해서 비교
=== 연산자 와 !== 연산자
피연산자의 자료형을 변환하지 않음
논리 연산자
true와 false가 피연산자인 연산자
조건을 처리할 때 사용
'경기도 인공지능 개발 과정 > javascript' 카테고리의 다른 글
| Javascript 객체 (0) | 2022.06.07 |
|---|---|
| javascript 함수 (0) | 2022.06.02 |
| Javascript 기본2 (0) | 2022.05.31 |