29일차 2023-04-17
2023. 4. 17. 19:24ㆍJavaScript
Java Script
스크립트언어의 특징
클라이언트(브라우저)
스크립트-> 텍스트 파일로 저장
스크립트 언어는 (컴파일 없이) 인터프리터 방식(순차적 방식)
위에서 아래로 내려오는 방식.
그래서 <script></script>의 위, 아래 위치에 따라 다른 결과를 나타낼 수 있다
화면 출력은 웹브라우저가 실행하는 것
객체지향 프로그래밍과 함수형 프로그래밍의 특징을 가지고 있다.
Html5
HTML5는 마크업 언어화면을 보여주는 틀을 작성
크게 head와 body로 구성되어 있다HTML5First.html
<!DOCTYPE html><!--DOCTYPE선언:HTML5임을 알림 -->
<html lang="ko"><!-- html문서의 시작을 알림 -->
<head>
<!-- 현재 웹 문서의 정보(작성자,작성도구,설명,인코딩 문자셋등)를 웹브라우저에 알려줌 -->
<!--
-반드시head태그 안에 기술
meta태그 ,title태그
-추가적인 태그
<script>태그(자바스크립트를 기술하기 위한 태그)
<style>태그(css를 기술하기위한 태그)등
script태그와 style태그는 body태그안에 기술해도 무방
※단,순서에 주의해야 한다
-->
<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>HTML5First.html</title>
</head>
<body><!-- body태그안에 기술한 내용이 웹브라우저에 컨텐츠로 보여짐 -->
HELLO HTML!
<h1>HTML</h1><!--h1태그의 의미는 텍스트를 진하고 크게 마크업해주세요라는 의미-->
<b>하이퍼 텍스트 마크업 언어</b>(<span style="font-size: smaller;">영어</span>: Hyper Text Markup Language, <b>HTML</b>, <span style="font-size: smaller;">문화어</span>: 초본문표식달기언어, 하이퍼본문표식달기언어)는<br/> 웹 페이지 표시를 위해 개발된 지배적인 마크업 언어다
</body>
</html><!-- html문서의 끝을 알림 -->결과)
HTML
하이퍼 텍스트 마크업 언어(영어: Hyper Text Markup Language, HTML, 문화어: 초본문표식달기언어, 하이퍼본문표식달기언어)는웹 페이지 표시를 위해 개발된 지배적인 마크업 언어다
html5에서는 스페이스 바 대신  라는 것으로 스페이스를 줄 수 있다(원래 스페이스는 연속으로 여러 번 눌러도 한 번만 적용)
엔터키 효과는 <br/> 태그로 나타냄
TextBasic01.html
<!DOCTYPE html>
<html lang="ko">
<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>TextBasic01.html</title>
</head>
<body>
<!--
<h2>텍스트 효과주기</h2>
-->
<!--
HTML 주석 처리
엔터키는 웹브라우저에서 인식 못함
엔터키는 스페이이스바 한번과 같다
줄바꿈을 하기위해서는
엔터키 효과를 내는 <br />태그 사용
-->
<h3>엔터키(줄바꿈) 적용안됨</h3>
첫번째 글
두번째 글
<h3>태그로 엔터키(줄바꿈) 효과주기</h3>
첫번째 글<br/><br/><br/><br/>두번째 글
<h3>스페이스바 적용안됨</h3>
H T M L
<h3>특수문자로 스페이스바 효과 주기</h3>
H T M L
</body>
</html>결과)
엔터키(줄바꿈) 적용안됨
첫번째 글 두번째 글태그로 엔터키(줄바꿈) 효과주기
첫번째 글두번째 글
스페이스바 적용안됨
H T M L특수문자로 스페이스바 효과 주기
H T M L
인라인 엘리먼트란?
문서의 일반적인 흐름에서 텍스트와 같이 행 중간에 위치하는 요소.
인라인 엘리먼트는 일반적으로 다른 요소 내부에 포함된다.
ex) <span>,<a>,<strong>,<em>,<img>
인라인 엘리먼트는 with나 height와 같은 크기 지정 x
일반적으로 콘텐츠의 크기에 따라 자동으로 조정.
블록 엘리먼트란?
문서의 일반적인 흐름에서 새로운 줄에서 시작하는 요소.
블록 엘리먼트는 일반적으로 다른 요소를 내포할 수 있다.
ex) <div>, <p>, <ul>, <li>, <h1>
width, height와 같은 크기 속성 지정 할 수 있다.
수평방향으로 확장 가능
둘의 차이점?
인라인 엘리먼트는 문장 내에서 강조나 링크등을 나타내는데 적합,
블록 엘리먼트는 문서의 큰 영역을 나누거나 레이아웃을 만드는데 적합.
TextBasic02.html
<!DOCTYPE html>
<html lang="ko">
<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>TextBasic02.html</title>
</head>
<body>
<!--
u태그:underline(밑줄)
i태그:italic(기울어짐)
b태그,strong태그:bold(두껍게)
sub:아래첨자
sup:위첨자
s,del,strike태그:가운데 선
-inline element
※중요
인라인 엘리먼트 안에는 블락 엘리먼트를
넣을 수 없다
블락엘리먼트안에는 인라인 및
블락 엘리먼트를 넣을 수 있다.
-->
<div>
<h2>텍스트 꾸미기</h2>
<u>밑줄긋기</u><br/>
<i>이탤릭</i><br/>
<strong>글자 진하게</strong><br/>
나의 닉네임은 <sup>자바매니아</sup> 입니다<br/>
나의 닉네임은 <sub>자바매니아</sub> 입니다<br/>
y = x2<br/>
<var>y</var> = <var>x</var><sup>2</sup><br/>
가격할인 : <i><strong><strike>10,000원</strike></strong></i> -> 5,000원
</div>
</body>
</html>결과)
텍스트 꾸미기
밑줄긋기이탤릭
글자 진하게
나의 닉네임은 자바매니아 입니다
나의 닉네임은 자바매니아 입니다
y = x2
y = x2
가격할인 :
태그나 기능으로 사용하는 문자를 문자 그 자체로 표현하기 위한 방법들
ex) > < & " '
TextBasic03.html
<!DOCTYPE html>
<html lang="ko">
<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>TextBasic03.html</title>
</head>
<body>
<!--
: 스페이스바 한번(빈칸)
> : > (greater than)
< : < (less than)
& : &
" :"(double quotation)
' 혹은 ' : ' '는 IE에서는 적용 안됨
-->
<div>
<h1>사용 예</h1>
<kosmo>한국소프트웨어 인재개발원</kosmo><br/>
<kosmo>한국소프트웨어 인재개발원</kosmo><br/>
<!--https://www.w3schools.com/charsets/ref_utf_symbols.asp-->
☎ 010-1234-5678<br/>
☕ 커피한잔 하자
<h2 title="특수 "문자" 연습입니다">특수문자 연습</h2>
<h2 title='특수 "문자" 연습입니다'>특수문자 연습</h2>
<h2 title='특수 '문자' 연습입니다'>특수문자 연습</h2>
<h2 title="특수 '문자' 연습입니다">특수문자 연습</h2>
<h2>다음중 HTML 태그가 아닌것은?</h2>
<ul style="list-style: decimal;">
<li><u>태그</li>
<li><i>태그</li>
<li><strong>태그</li>
<li><java>태그</li>
</ul>
</div>
</body>
</html>결과)
사용 예
<kosmo>한국소프트웨어 인재개발원</kosmo>
☎ 010-1234-5678
☕ 커피한잔 하자
특수문자 연습
특수문자 연습
특수문자 연습
특수문자 연습
다음중 HTML 태그가 아닌것은?
- <u>태그
- <i>태그
- <strong>태그
- <java>태그
블록 엘리먼트들: hr, color, size, width, align-left, right, center(기본)
하지만, 이것으로 표기 시 웹표준에 어긋 css로 표기하는 게 맞음style로
HR04.html
<!DOCTYPE html>
<html lang="ko">
<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>HR04.html</title>
</head>
<body>
<!--
hr: 괘선을 나타 내는 태그
속성:
color-괘선의 색상 지정(style로 적용)
size-괘선의 두께 지정(숫자만)
width-괘선의 가로폭 지정(숫자또는 %로 지정가능)
align-left,right,center(가운데정렬 기본)
상기 속성으로 지정시 웹표준에 어긋남
css로 지정
-종료 태그 가 없음
-block element
-->
<h2>hr태그 연습</h2>
<div style="background-color: yellow;width:600px">
<h3>hr기본 태그</h3>
<hr/>
<h3>괘선의 색상지정</h3>
<!--웹 표준에 어긋남(속성이 제거됨)-->
<!--
<hr color="red"/>
-->
<hr style="background-color: red;height: 1px;"/>
<h3>괘선의 두께 지정</h3>
<!--웹 표준에 어긋남(속성이 제거됨)-->
<!--
<hr size="30"/>
-->
<hr style="height:30px"/>
<h3>괘선의 가로폭 지정</h3>
<!--웹 표준에 어긋남(속성이 제거됨)-->
<!--
<hr width="50%"/>
-->
<hr style="width:50%"/>
<h3>괘선의 정렬</h3>
<!--웹 표준에 어긋남(속성이 제거됨)-->
<!--
<hr width="50%" align="right"/>
-->
<hr style="width:50%;margin-right: 0;"/>
<h2>다음 중 웹브라우저가 아닌 것은?</h2>
<hr/>
<ul style="list-style: upper-roman;">
<li>크롬</li>
<li>파이어 폭스</li>
<li>익스 프롤러</li>
<li>오페라</li>
<li>사파리</li>
</ul>
</div>
</body>
</html>결과)
hr태그 연습
hr기본 태그
괘선의 색상지정
괘선의 두께 지정
괘선의 가로폭 지정
괘선의 정렬
다음 중 웹브라우저가 아닌 것은?
- 크롬
- 파이어 폭스
- 익스 프롤러
- 오페라
- 사파리
Hn05.html
<!DOCTYPE html>
<html lang="ko">
<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>Hn05.html</title>
</head>
<body>
<!--
Hn태그:제목을 표시하는 태그,
Block Element(세로배치)
h1 ~ h6까지 : 글자가 커짐(숫자가 작을 수록)
-->
<div>
<h1>제목1</h1>
<h2>제목2</h2>
<h3>제목3</h3>
<h4>제목4</h5>
<h5>제목5</h5>
<h6>제목6</h6>
<h2 style="border:1px red solid;text-align: right;">오른쪽 정렬</h2>
<span style="border:1px red solid;text-align: right;">오른쪽 정렬</span>
<div style="background-color: yellow;width:600px">
<h2 style="border:1px red solid;text-align: right;">오른쪽 정렬</h2>
</div>
</div>
</body>
</html>결과)
제목1
제목2
제목3
제목4
제목5
제목6
오른쪽 정렬
오른쪽 정렬
오른쪽 정렬
오른쪽 정렬
P06.html
<!DOCTYPE html>
<html lang="ko">
<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>P06.html</title>
</head>
<body>
<!--
[P태그]
- PARAGRAPH:문단을 나눌때 사용하는 태그
- BLOCK ELEMENT
P태그안에는 BLOCK ELEMENT를 넣지 말아라
※Block Element:세로배치되는 태그들(예:Hn계열 태그 혹은 p태그등)
Inline Element:가로배치되는 태그들(예:a태그 혹은 img태그등)
-->
<div>
<h2>P태그 연습</h2>
<h3>자기 소개서</h3>
<p>
저는 유복한 가정에서 태어났습니다<br/>
자상하신 부모님의 사랑을 받으며 자랐습니다.
</p>
<p style="background-color: green;text-align: right;">
지원동기는 사장이 되려고 합니다<br/>
열심히 하겠습니다.
</p>
</div>
<div style="background-color: yellow;width:400px">
<p style="text-align: center;">가운데 정렬</p>
</div>
</body>
</html>결과)
P태그 연습
자기 소개서
저는 유복한 가정에서 태어났습니다
자상하신 부모님의 사랑을 받으며 자랐습니다.
지원동기는 사장이 되려고 합니다
열심히 하겠습니다.
가운데 정렬
JavaScript
인터프리터 방식 언어(순차적 언어)
JavascriptFirst.html
<!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>JavascriptFirst.html</title>
<script>
alert("자바스크립트 함수 입니다");//자스코드
// 한줄 주석
/*
여러줄 주석
*/
/*
Client-Side Script Language는
(HTML5/CSS3/JAVASCRIPT/jQuery등)은
웹 브라우저(웹 클라이언트 프로그램)에 의해
순차적으로 해석되는(Interpretor방식) 언어임.
*/
//<h2>자스코드가 아니다</h2>//자스코드가 아님
console.log('자스에러 이후의 자스 출력문');
</script>
</head>
<body>
<h2>자바스크립트 첫시간</h2>
alert("자바스크립트 함수 입니다");
<script>
//alert("자바스크립트 함수 입니다");
</script>
</body>
</html>결과)
var를 붙이면 선언부로 넘어가서 그 블락의 맨 위로 넘어간다 내부적으로 그래서 var선언보다 console.log도 가능(이걸 호이스팅이라 부름)
하지만, var선언이 없으면 그냥 대입연산임
Varialbe01.html
<!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>Variable01.html</title>
<script>
/*
https://developer.mozilla.org/ko/docs/Learn/JavaScript/First_steps/What_is_JavaScript
-자스(ES5스펙)에서는 대소문자를 구분한다.
-하나의 명령행이 끝나면 ;로 명령의 끝을 알린다.
-자스에서는 모든 데이타가 객체이다
-자스에서는 변수에 넣은 값에 따라 그 변수의 자료형이 결정된다.
-변수 선언:var라는 키워드 사용
-자바스크립트의 자료형은 Primative 타입(기본 자료형)과 Object(객체)
로 나눈다
Primative 타입은 string, number (en-US), bigint (en-US), boolean, undefined, symbol등이 있다
var 변수명;
*/
//1]변수 선언
var num;
//undefined는 하나의 자료형이자 값이다(변수 선언후 초기화 전)
//변수의 값이 정의가 안됬다라는 의미
console.log('num의 값:%s,num의 타입:%s',num,typeof num);
num = 100;
console.log('num의 값:%s,num의 타입:%s',num,typeof num);
num=3.14;
console.log('num의 값:%s,num의 타입:%s',num,typeof num);
num = new Number(1000);
console.log('num의 값:%s,num의 타입:%s',num,typeof num);
num =true;
console.log('num의 값:%s,num의 타입:%s',num,typeof num);
num = '자바스크립트';
console.log('num의 값:%s,num의 타입:%s',num,typeof num);
num = new String('자바스크립트');
console.log('num의 값:%s,num의 타입:%s',num,typeof num);
var nullvar = null;
//null은 하나의 값으로 참조하는 객체가 없다라는 의미
//자료형으로는 object 타입에 해당.
console.log('nullvar의 값:%s,nullvar의 타입:%s',nullvar,typeof nullvar);
//자바는 클래스 정의후 속성 추가 불가(정적객체)
//자스는 Class Less(프로토타입 기반) 즉 객체(프로토타입:원형)를 먼저 정의하고 이후에 속성 추가(동적객체)
var obj={};//new Object()와 같다.{}는 객체를 표현하는 객체 리터럴
console.log('obj의 값(리터럴 표기법으로 출력):%o,obj의 타입:%s',obj,typeof obj);
console.log('obj의 값(Object로 출력):%O,obj의 타입:%s',obj,typeof obj);
obj.name="가길동";
obj.age=20;
//함수형 프로그래밍 지원 즉 변수에 함수 할당할 수 있다
obj.walk=function(){
console.log('나이가 %d살인 %s가 걷다',this.age,this.name);
};
console.log('이름:%s,나이:%d',obj.name,obj.age);
obj.walk();
var obj2 ={
username:"kosmo",
'password':'kosmo1234',
"name":'한소인',
eat:function(food){
console.log('%s를(을) %s가(이) 먹다',food,this.name);
}
};
console.log('obj의 값:%o,obj의 타입:%s',obj2,typeof obj2);
console.log(obj2);
obj2.eat('피자');
//var f = new Function('x','y','return x+y');//function anonymous(x,y) {return x+y}와 같다
var f = function(x,y){return x+y;};
console.log('f의 값:%s,f의 타입:%s',f,typeof f);
console.log(f(10,10))
/*
정리
실수나 정수 리터럴(예:100,3.14등) : number타입
new Number() : object타입
true,false : boolean타입
new Boolean() : object타입
문자열 리터럴('HELLO' 혹은 "안녕") : string 타입
new String() : object타입
자스는 데이타의 자료형 관련 크게 Number/Boolean/String타입을 제공한다
단,생성자 함수를 이용한 객체 생성은 무조건 Object타입이다
변수 선언후 객체를 할당하지 않은 경우:undefined타입
{}(객체 리터럴) : object 타입. new Object()의 JSON표기법
var f= function(){}(함수 리터럴). new Function()의 JSON표기법
f는 function타입이다.
※상수와 리터럴의 차이
상수는 값이 변하지 않는 변수
리터럴은 변수에 넣는 변하지 않는 데이터를 의미 즉 데이타 자체
const NUM = 100;
여기서 NUM는 상수이고, 100은 숫자 리터럴이다.
코드 상에서 데이터를 표현하는 방식을 리터럴이라 한다
*/
//https://www.w3schools.com/js/js_hoisting.asp
//추가:var를 붙인 경우와 붙이지 않은 경우의 차이점
//var를 붙이면 호이스팅이 일어안다(호이스팅:변수의 스코프안에서 최상단으로 변수 선언코드가 올라간다)
console.log(hoistVar);//hoistVar is not defined(변수 선언전 에러)
var hoistVar;//선언후는 호이스팅이 일어나서 에러가 안나고 undefined출력
//console.log(nonHoistVar);//nHoistVar is not defined
nonHoistVar="호이스팅 되지 않는다";
console.log(nonHoistVar);
console.log("%cThis text will be red, bold, and with a yellow background", "color: red; font-weight: bold; background-color: yellow;border:1px green dotted");
</script>
</head>
<body>
</body>
</html>결과) (개발자 도구(F12) or 마우스 우클릭 검사)로 console 확인
==은 값이 맞으면 true결과, 왜냐하면 내부적으로 0=='0'을 예시로 ''을 풀어서 비교하면 number형으로 숫자 비교로 변함
한마디로 타입은 알아서 바꿔줌(loose operator)
그러나
===은 타입과 값이 다 맞아야 true 결과(strict operator)
Operator02.html
<!DOCTYPE html>
<html lang="ko">
<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>Operator02.html</title>
<script>
/*
우선순위가 같을때는 왼쪽에서 오른쪽으로 계산
산술연산자 > 비교연산자 > 논리연산자
*/
//1]산술 연산자 +,-,*,/,%
// 우선순위 : *,/,% > +,-
console.log('[산술 연산자]');
console.log('3 % 5 * 2 + 10/5는 %d',3 % 5 * 2 + 10/5);
console.log(5/3);//자바는 1, 자스는 소수점까지...
//2]비교 연산자: >,>=,<,<=,==,!=, ===, !==
// 우선순위가 모두 동일
/*※자스에서는 조건식에서 0이나 null이나 false면 false(0)으로 처리되고
그 이외 모든값은 true(1)로 판단한다
기타 산술식등에서 true는 1,false는 0으로 변환되어 실행된다
*/
console.log('[비교 연산자]');
console.log("가나다">='가나다');//자바 X,자스 O(내부적으로 한자씩 코드값으로 비교)
//3 > 9는 결과가 false. false은 0으로 간주됨 고로 0 == 0비교 와 같다.
console.log( 3 > 9 == 0);
//※ ==(loose equality) 와 ===(strict equality)
// ==는 타입이 다르더라도 내부적으로 강제 형변환해서 비교
// ===는 강제 형변환 과정 없이 정확히 값하고 타입이 일치할때만 true(주소비교)
//비교를 위해 항상 '===' 연산자를 사용 할 것을 권장.
console.log(0 == '0');//값만 비교 문자열 '0'이 자동으로 0으로 변환됨
console.log(0 === '0');//값과 타입비교.문자열 '0'이 자동으로 0으로 변환 안됨
console.log(false == '0');//값으로 비교
console.log(false === '0');//값 및 타입비교
console.log('NaN의 값:%s,NaN의 타입:%s',NaN,typeof NaN);
//※NaN는 등가비교(무조건 false)하지 말고 isNaN()함수로 NaN(Not a Number)인지 판단해라 .
console.log(NaN == NaN);//false
console.log(NaN === NaN);
var num1 = new Number('HELLO');
console.log('%s',num1);//NaN
var num2 = new Number('WORLD');
console.log('%s',num2);//NaN
console.log(num1 == num2);//false
console.log(isNaN(num1));
console.log(isNaN(num2));
num1 = new Number(100);//object타입
num2 = 100;//number 타입
console.log(num1 == num2);//true
console.log(num1 === num2);//false
</script>
</head>
<body>
</body>
</html>결과)
'JavaScript' 카테고리의 다른 글
| 34일차 2023-04-24 (0) | 2023.04.24 |
|---|---|
| 33일차 2023-04-21 (0) | 2023.04.21 |
| 32일차 2023-04-20 (1) | 2023.04.20 |
| 31일차 2023-04-19 (0) | 2023.04.19 |
| 30일차 2023-04-18 (0) | 2023.04.18 |