2023.03.27 자바스크립트 시작

Java/UI구현

2023.03.27 자바스크립트 시작

amungstudy 2023. 3. 27. 15:29

js기본문법

</head>

<body>

<h1>자바스크립트의 변수</h1>

// html에 경고메세지창 출력해주는 alert함수 실행

// alert("hello world");

js에서의

여러줄

주석

// 한줄 주석

// ;(세미콜론) - js의 마침표로 활용을 주로 하게된다.

// :(콜론)

// 변수 - 메모리상에서 특정 값이 저장된 공간

// 변수 선언 방법 및 초기화

// 변수 a에 1이라는 숫자를 저장

// 변수 선언 : 새로운 변수를 생성한다는 뜻

// 변수 선언시 규칙

// 변수선언키워드(let or const)

// 변수명(저장되는값을유추할수있도록)

// =(대입연산자) : 오른쪽항에 값을 왼쪽항에 저장을 시키겠다.

// (리터럴)저장할값;

// 예시) let(const) name = "김영식";

// 변수name에 김영식이라는 문자열이 저장되어있다.

// 변수선언 키워드는 let이다.

// 변수선언 키워드

// let : 값이 수정이 가능한 변수선언 키워드

let a = 1;

a = 3; //변수a에 3이라는 숫자를 재할당

// == : 우리가 알고 있는 왼쪽항과 오른쪽항의 값이 같다.

// = : 오른쪽항에 값을 왼쪽항에 저장을 시키겠다.

// alert(a);

// const : 값이 수정이 불가능한 변수선언 키워드(상수)

const b = 3;

// b = 5; -> 재할당이 불가능(에러발생)

// alert(b);

// 변수명 생성시 규칙

// 식별자

/* - 변수나 함수의 이름을 작성할때 사용하는 이름

- 영문자(대소문자),숫자,언더스코어(_) 또는 달러($)만 사용가능

- 식별자는 숫자로 시작할 수 없다.

ex) name, a, _age, $addr, num1 등등

// 식별자 작성 방법

1. Cammel Case방식 : 두가지 이상 단어의 합성어를 사용할 때,

첫단어는 소문자, 두번째 이상의 단어의 첫글자를 대문자로 작성하여 연결

ex) myName , firstVar , userId

2. Underscore Case방식 : 두가지 이상 단어의 합성어를 사용할 때,

단어와 단어를 _로 구분하여 연결

ex) my_name , first_var, user_id

// 변수명(함수명) 작성시 예약어는 사용이 불가능

// ex)let, const, function, 등등 문법상에서 미리 지정이된 단어들은 사용이 불가능

// 자바스크립의 출력문

// 1. window.alert(출력할 메시지) 함수

// window객체(키워드)는 생략 가능함

// alert("경고창 출력");

// 2. DOM요소를 이용한 innerHTML 프로퍼티

document.getElementById("text").innerHTML = "JS를 이용한 HTML조작";

// 3. console.log(출력할메시지); 함수

// 개발자모드(브라우저에서 F12를 눌러 실행)의 console탭에서 로그를 출력하는 함수

console.log("개발자모드에서만 확인 가능");

// 연습문제

// 1. let키워드를 이용하여 변수명은 변수의 값에 부합하게끔 작성

// 2. 저장할 값은 사는 동네 (ex: 부산시 부산진구 부전동)를 저장시키고,

// 3. console.log()를 이용해 위에서 선언한 변수를 출력 해봅시다.

let address = "부산시 해운대구 좌동";

console.log(address);

// 1. const키워드로 선언

// 2. 변수이름은 : myName

// 3. 저장할 값 : 본인이름

// 4. alert함수를 이용하여 myName 출력.

const myName = "김서영";

// alert(myName);

//변수선언과 사용 응용(심화)

//선언과 동시에 초기화

// let c = 3;

let c; // 변수 선언

console.log(c); //undefined (해당변수에 값이 저장이 되어있지 않다.)를 출력

c = 3; // 변수 초기화

console.log(c);

//변수 선언시 여러개의 변수를 한번에 선언도 가능(변수의 구분은 ,로 한다.)

// let date , weather; // date변수와 weather변수를 한번에 선언

//윗줄과 같은 뜻이다.

// let date;

// let weather;

//변수 선언과 초기화를 여러개 한꺼번에

// date변수와 weather변수를 한번에 선언과 초기화한 형태

let date="2023-03-27", weather="맑음";

// 변수선언시 변수 이름은 중복이 불가능

// let date="2023-03-28"; -> 기존에 date라는 변수명으로 선언되어있기 때문에 에러

// let 키워드를 이용시 변수의 값 재할당하는 방법

// 즉, 특정변수가 let키워드로 선언이 되어 있다면, 저장된 값을 수정할 수 있다.

console.log("날씨-1 : ",weather); //재할당 이전의 값 출력

weather = "흐림"; // weather변수에 값 재할당한 형태

console.log("날씨-2 : ",weather); //재할당 이후 값 출력

// 상단에서 미리 변수명이 선언 되어있는 상태에서 [ 변수명 = 수정할값; ]

// 연습문제

// 1. 변수 값 재할당 : 위에서 선언한 주소를 나타내는 변수에 현재 위치(부산IT아카데미)

// 의 주소로 수정(사용할 주소 : 부산시 수영구 남천동)

// 2. console.log(주소변수명); 으로 출력해봅시다.

address = "부산광역시 수영구 남천동";

console.log(address);

JS의 타입

//JS의 타입 : 두가지

// 1.기본타입 : 더이상 나누어지지 않는 하나의 값

- 숫자(number)

- 문자열(string)

- 불리언(boolean)

- null

- undefined

// 숫자타입 : 우리가 알고있는 숫자를 다루는 타입이다.

let age = 40; //쌍따옴표 없이 숫자로만 표기를 하면 숫자타입이 된다.

let num1 = 4.4; // 변수num1에는 4.4라는 실수가 저장되있다.

// 변수키워드는 아무거나 선택

// 변수명은 endTime

// 저장할 값은 마치는 시간(1630)을 저장해봅시다.

const endTime = 1630;

//숫자의 연산

let endTime2 = 1+2;

console.log("endTime2 : ",endTime2);

// 문자타입 : JS에서 문자열은 큰따옴표("") 혹은, 작은따옴표('')로 둘러싸인 문자의 집합

let name = "김영식"; //자바나 기타 타입이 세부적으로 나누어진 언어에서는 ""를 문자열로 인식하기때문에

// ""를 사용해서 문자열표기를 습관화 해주면 편리함.

let firstName = '김';

let lastName = '영식';

//문자타입의 연산

let fullName = '김' + '영식';

console.log("fullName : ",fullName);

// 숫자타입과 문자타입의 +연산

let ex1 = 20 + '30';

console.log("숫자+문자 : ",ex1); //숫자와 문자열을 더하게 되면 문자열이 된다.

let endTime3 = 16 + ":" + 30;

console.log(endTime3); //출력을 했을때 16:30 이라고 출력되도록 소스코드를 작성해봅시다.

let strNum='10' , num2=10;

//strNum에는 문자 10 이 저장되어있고, 1이라는 문자와 0이라는 문자로 이루어진 문자열.

// num2에는 숫자10 이 저장되어있다. 단순 숫자

// 불리언타입(true, false) - boolean타입

// 참(true)과 거짓(false) 두가지 값을 표현

let isShow = true; //true와 false 중에 하나를 ""('')로 묶지 않고 그냥 표현한다.

isShow = false;

//주로 조건문에서 자주 사용된다.

let isTrue = 3 > 1; // 참

console.log(isTrue);

// null과 undefined

// null과 undefined는 값이 없다는 뜻

// == : 값을 비교하는 연산자

console.log("null과 undefined의 값 비교" ,null == undefined);

// null과 undefined의 값과 타입까지 비교

// === : 값과 타입까지 비교하는 연산자

console.log("null과 undefined의 값 비교" ,null === undefined);

//타입을 확인하는 연산자

//사용방법 : console.log(typeof 변수명(값));

console.log("-----------------------타입체크-----------------------")

console.log(typeof num1);

console.log(typeof name);

console.log(typeof isShow);

console.log(typeof null);

console.log(typeof undefined);

//문자열템플릿: 문자열안에서 변수명이나 표현식을 자유옵게 표현하기 위한 수단.

console.log("--------------문자열 템플릿-----------");

console.log("(문자열템플릿 사용x)isShow의 값은 : "+isShow);

console.log(`(문자열템플릿 사용o)isShow의 값은 : ${isShow}`);

//문자열 템플릿 사용하는 방법

// 키보드의 1왼쪽에 있는 따옴표(``)를 이용한다.

// `${변수명(or 표현식)}`

let strTemp1 = `안녕하세요 제 이름은 ${name} 입니다.`;

console.log(strTemp1);

let strTemp2 = `개인정보처리 방침 동의 여부 : ${true} 입니다.`;

console.log(strTemp2);

let strTemp3 = `3은 1보다 크다 : ${3 > 1 }`;

console.log(strTemp3);

let strTemp4 = `3 + 1 : ${3 + 1} 입니다.`;

console.log(strTemp4);

//16:30표현은 문자열템플릿을 활용하여 출력

console.log(`${16}:30`);

console.log(`${16}:${30}`);

// 2.참조타입 : 기본타입들을 하나의 단위로 묶어서 관리

- 객체(object)

- 배열(array)

- 클래스(class)

//객체

//기본타입의 부모이기도 하다.

// 여러가지 기본타입 혹은 참조타입 등을 묶어놓은 일종의 집합체

// js에서 객체를 표현할때 : {}를 사용한다.

// 객체 안에서 속성을 추가하는 방법

// { 속성명1(변수명1) : 값1, 속성명2(변수명2) : 값2 }

let dog = { name:"로즈", age:4, family:"포메라니안", isLive:true };

//dog 객체를 이용하여 dog객체 안에 포함된 값을 이용하는 방법

// dog객체의 name값을 출력 해보자

// 객체명(변수명).속성명(변수명) -> .을 기준으로 객체 안에있는 데이터를 이용할 수 있다.

console.log(dog.name);

// dog객체를 이용하여 다음과 같이 출력해봅시다.

// 출력할 내용: 이름은 로즈이고, 나이는 4살입니다. 로즈는 포메라니안 입니다.

//문자열 템플릿 이용하여 출력

console.log(`이름은 ${dog.name}이고, 나이는 ${dog.age}살입니다. ${dog.name}는 ${dog.family}입니다. `);

//+연산을 이용하여 출력

console.log('이름은 '+dog.name+'이고, 나이는 '+dog.age+'살입니다. '+dog.name+'는 '+dog.family+'입니다.');

//배열

//클래스

</script>

</body>

</html>