js기본문법
</head>
<body>
<h1>자바스크립트의 변수</h1>
<p id="text"></p>
<!-- 자바스크립트 적용 방법-1.HTML문서 내부에 script태그를 활용-->
<script>
// 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>
'Java > UI구현' 카테고리의 다른 글
| 2023.03.29 while, for문 (0) | 2023.03.29 |
|---|---|
| 2023.03.28 타입, 연산자, 조건문 (0) | 2023.03.28 |
| 2023.03.22 (0) | 2023.03.22 |
| 2023.03.21 (0) | 2023.03.21 |
| 윈도우에서 자주 사용되는 단축키 (0) | 2023.03.21 |