개발세발
자바스크립트 1️⃣ - 기초 개념 본문
html, js 파일 연결하기
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>자바스크립트 공부</title>
<style> /*css - head의 맨 아래에 삽입*/
body{
color: red
}
</style>
</head>
<body>
Javascript
<script src="index.js"> /*js - body마지막에 작성하기 scr="외부파일 경로"*/
</script>
</body>
</html>
객체(Object)
: 실세계에 존재하는 대상 또는 생각할 수 있는 어떤 개념
: 값 또는 기능을 가지고 있는 데이터
웹브라우저 = 소프트웨어 세계에 존재하는 사물, 즉 객체
자바스크립트는 웹브라우저라는 객체에게 명령을 내리기 위해 사용하는 언어
따라서 자바스크립트는 사용자가 웹브라우저에게 명령을 내릴 수 있도록 돕기 위해 웹브라우저와 관련된 다양한 객체를 제공한다.
| 객체.데이터 | 객체가 가진 다양한 데이터(숫자, 문자)를 사용 |
| 객체.기능 | 객체가 가진 다양한 기능을 수행(괄호 필수) |
작성 규칙
1. 대문자와 소문자 구분하기
2. 구문 끝에는 세미클론(;) 입력하기 -> 구문의 종료지점을 표기
3. 한 줄에 두 개 이상의 구문을 작성하지 않기
alert
<script>
window.alert("랄라라")
//winndow -> 객체인 '웹브라우저' 호출
</script>
주석작성하기
//한줄
/*여러줄*/
단축키
주석 : (윈도우) ctrl + / (맥) cmd+/
(*) 위의 이미지에서 나온 키를 입력했지만 원하는 단축키 적용이 안된다면
오른쪽 하단 설정을 통해 'key
콘솔(Console)
브라우저 안에 내장된 브라우저의 하위 객체로 브라우저의 디버깅 콘솔에 접근할 수 있게 함
브라우저 객체를 통해 접근가능하며 디버깅 콘솔을 사용하여 자바스크립트 코드를 테스트할 수 있음
<script>
window.console.log("console 이용해보기 ");
</script>
변수
: 데이터를 기억하기 위해 사용
- 선언
let 변수이름;
변수이름 = 데이터1;
변수이름 = 데이터2; //새로운 데이터 대입가능
(*) 변수 이름 규칙
1) 문자, 숫자, $ _ 만 사용가능
2) 첫 번째로 글자로 숫자가 올 수 없다
3) 예약어는 사용할 수 없다
- 예시
<script>
let use = "변수 사용해보기";
console.log(use);
use = "변수 바꿔보기" //변경시 let 은 생략가능
console.log(use);
console.log("테스트");
</script>
자료형
: 데이터 표현 방식의 구분
| 숫자 | 정수와 실수로 구분 |
| 문자열 | 기호의 순차 수열로 문자, 숫자, 특수문자 등 다양한 기호를 조합해 만들 수 있는 '기호의 집합' ('' 또는 "" 안에 기입 ) |
- 예시
let number = 10;
console.log(number);
number = 100
console.log(number);
number = -100
console.log(number);
console.log(-11);
console.log(11.11);
alert("중간알람")
console.log("마지막줄");
(*) 실행은 위에서부터 아래로 시작된다. 그래서 alert을 닫아야 마지막 console.log("마지막줄") 이 실행된다
상수
: 변하지 않는 값
const 상수이름 = 데이터;
상수름 = 데이터; // error
-예시
const mid_alert = "중간알람"
mid_alert = "상수 테스트" //error
alert("mid_alert")위의 코드를 실행시키면 아래와 같이 개발자도구에서 에러를 확인할 수 있다
(*)const 는 값은 처음 선언할 때 할당하여야 한다 (let은 상관없음 - 에러안남)
기타
◎ 사용자 편의를 위해 window. 은 생략가능하다
◎ 개발자 도구 열기 : (윈도우) Ctrl + Shift + I (맥) alt + cmd + i
◎ 디버깅: 현재 프로그램의 상태를 모니터링
'코딩공부 > Javascript' 카테고리의 다른 글
| 자바스크립트 6️⃣ - 이벤트 (0) | 2022.08.12 |
|---|---|
| 자바스크립트 5️⃣ - 함수 (0) | 2022.08.09 |
| 자바스크립트 4️⃣ - 제어문, 반복문 (0) | 2022.08.04 |
| 자바스크립트 3️⃣ - DOM, 비교연산자 (0) | 2022.08.02 |
| 자바스크립트 2️⃣ - prompt, 템플릿 리터럴 (0) | 2022.07.31 |
