アカデミー61日目-JavaScript
155013 ワード
2021.06.22
javascript
ex01.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>Document</title>
<style></style>
<!-- 참조, 외부 자바스트립트 -->
<!-- <script src="js/ex01.js"></script> -->
<script src="hello.js"></script>
<script>
// 임베디드 형식
// alert('반갑습니다.');
</script>
</head>
<body>
<!--
Web Client
1.HTML
- 골격(레이아웃,틀) -> 블럭태그
- 내용물(텍스트, 이미지, 컨트롤 등) -> 인라인태그
2. CSS
- 1번 결과물 + 서식 구현
3. Javascript
- 1번 + 2번 결과물 + 프로그래밍 구현(목적: 1번(HTML) 조작 or 2번(CSS) 조작)
JavaScript
- 브라우저에서 동작하는 프로그래밍 언어
- 가볍다. (경량)
- 쉽다.(규모가 적다.)
- C계열 언어 > 기본 구문이 자바와 비슷하다.
- 1996년 1.0 넷스케이프 네이게이터(브라우저) -> IE
- 초반: 폼 태그 유효성 검사 + 링크 조작 + 이미지 조작 -> BOM
- 중반: 모든 태그 조작 -> DOM(****)
- 후반: 2015년 -> ES5 -> Node.js 출시 -> 비 브라우저 환경에서도 JavaScript 동작, 서버 구축
JavaScript가 하는 일?
1. 기본적인 프로그래밍 언어의 행동
- Core
- 변수
- 연산자
- 제어문
- 조작, 가공 등..
2. 브라우저에 특화된 행동
- HTML/CSS 요소 조작 능력
a. HTML Element 생성
b. HTML Element 수정
c. HTML Element 삭제
d. HTML Attribute 생성/수정/삭제
e. HTML PCDATA 생성/수정/삭제
f. CSS 속성 생성/수정/삭제
g. 폼 태그 조작
h. 이미지 조작
i. 링크 조작
JavaScript 역사
1. Netscape Navigator > JavaScript 1.0 > 1.1 > ... > 1.8
2. Internet Explorer > JavaScript > JScript > 1.0 ... 8.0
3. ECMA -> JavaScript -> 표준 스크립트 등재 신청 -> ECMAScript(ES) -> ECMAScript 2015 (ES6) -> ECMAScript 2020(ES11)
- 현재 자바스크립트 시장 -> ES6기반
JavaScript 적용 방법
1. 인라인 방식(X) -> 이벤트 핸들러(Event Handler) -> 이벤트
- 태그에 직접 기재
2. 임베디드 방식
- <script></script>
3. 외부 방식
- <script src="경로"><script>
-->
<!-- 이벤트 핸들러 -->
<input type="button" value="버튼" onclick="alert('안녕');"/>
</body>
</html>
ex02.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>Document</title>
<style>
/* <style>은 일반적으로 문서내 <head> 자식으로 1회 적용 */
</style>
<script>
// <script>는 문서 내에 여기저기 여러번 적용하는 모습을 자주 볼 수 있다.
// -> 코드의 실행 순서를 제어하기 위해서..
// -> 동기순으로 적용
// alert('하나');
// window.document.all.txt1.value = new Date();
</script>
</head>
<body>
<!--
자바스크립트 구문의 실행 순서
- 동기(문장 순서대로 실행)
- 브라우저가 HTML과 JavaScript를 동시에 실행한다.
- HTML 조작 시 HTML과 JavaScript 구문의 순서가 중요하다.(*****)
-->
<input type="text" name="txt1" size="50" />
<script>
// alert('둘');
// window.document.all.txt1.value = new Date();
</script>
</body>
</html>
ex03_debug.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>Document</title>
</head>
<body>
<!--
JavaScript 디버그 시 값을 확인하는 방법
1.alert(값);
- 디버그 전용 함수 X
- 구문 간단
- 블럭이 걸린다.(break)
2. document.write(값);
- 디버그 전용 함수 X
- 페이지에 직접 출력
- 사용X
3. HTML 사용
- 사용 X
- 추가 비용 발생
4. console.log(값);
- 디버그 전용 함수 O
- FM
- 적극 추천
- 개발자 콘솔창에 출력 + 사용자에게 출력 X
- Node 환경에서도 출력
-->
<script>
// alert(new Date());
// alert(100);
// document.write(new Date());
console.log(100);
console.log(100, 200, 300);
console.log('점수', 100);
console.error(300);
console.info('확인');
</script>
</body>
</html>
ex04_datatype.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>Document</title>
</head>
<body>
<script>
/*
자바스크립트 자료형
1. Number
- 숫자형(정수 + 실수)
- 리터럴(다른 언어와 동일)
변수
- 자바스크립트는 동적(<-> 정적) 할당 언어이다. > 변수를 선언할 때 자료형이 정해지지 않는다.
- 자바는 정적 할당 언어이다. > 변수를 선언할 때 자료형을 정해진다.(int a)
- var 키워드 사용
2. String
- 문자열(문자)
- 리터럴
- "문자열"
- '문자열'
3. Boolean
- 논리형
- 리터럴
- true
- false
4. Object
- 객체형
- ES6 이전에는 Class 개념이 없었다. > 생성자 함수를 통해 객체 생성
- ES6 이후에는 Class 개념이 생겼다.(진정한 Class가 아니라 Class를 흉내)
- 배열, 날짜시간, 수학 등,,
5. 기타
- null
- underfined
- NaN
연산자
- 자바와 동일
제어문
- 자바와 동일
문자 이스케이프
- 자바와 동일
- \n, \r, \t ...
*/
var a = 10; // Number
var b = 3.14; // Number
var c = '홍길동';
var d = true;
var e = new Date();
console.log(a);
console.log(typeof a); // number(콘솔창에서 자료형 표기), Number(생성자 이름)
console.log(typeof 100); // number
var str1 = "홍길동";
var str2 = '아무개';
console.log(str1, typeof str1);
console.log(str2, typeof str2);
console.log(true, typeof true);
console.log(new Date()); // 클래스 사용 + 객체 사용
console.log(new Date().toString());
console.log(typeof new Date()); // Date 자료형 X -> Object 자료형
</script>
</body>
</html>
ex04.js
// - JavaScript Core 실행 가능
// - JavaScript Browser 실행 불가능
var num = 10;
console.log('num', num);
// Ctrl + F5
//확장 프로그램 > Code Runner > 설치 -> Ctrl + Alt + N
if (num > 0) {
console.log('양수');
} else {
console.log('음수');
}
for (var i = 0; i < 10; i++) {
console.log(i);
}
ex05_function.js
/*
함수, Function
- 메소드, 프로시저
- 자바스크립트(메소드(=함수))
- function 키워드 사용
선언문
1. 자바의 선언문
public [static] void test(int a) {
실행문;
}
2. 자바스크립트의 선언문
function test(a) {
실행문;
}
*/
// 매개변수 X, 반환값 X
function f1() {
console.log('f1');
}
f1();
f1();
f1();
// 매개변수 O, 반환값 X
function f2(num) {
console.log(num);
}
f2(100);
f2(200);
f2(300);
// 매개변수 X , 반환값 O
function f3() {
return 100;
}
var result = f3();
console.log('result', result);
// 매개변수 O, 반환값 O
function f4(a, b) {
return a + b;
}
console.log(f4(100, 200));
// 주의점!!
// - 실인자와 가인자가 일치하지 않아도 가능 !!
function hello(name) {
console.log('안녕하세요' + name + '님');
// console.log('안녕하세요. %s님', name);
// console.log('안녕하세요', name, '님');
}
hello('홍길동');
// hello();
// hello('홍길동', '아무개', '하하하');
// 자료형
// - null : 그 외 나머지 비어있는 상태, 개발자 직접 명시
// - undefined : 변수를 생성 직후 초기화를 하지 않은 상태
// - 둘은 똑같다. (실제로는 다르다.)
console.log(null);
console.log(undefined);
console.log(null == undefined); // true
// var temp = null; // 명시적 선언에는 null만 사용
// var temp = undefined; // X
var temp;
console.log('temp', temp); // undefined
ex06_function.js
/*
자바스크립트의 함수
- 함수를 객체(데이터)처럼 취급할 수 있다.
-> 함수는 1급 객체(first class object)이다.
1급 객체
1. 함수를 변수나 데이터 구조에 담을 수 있다.
2. 함수를 매개변수로 전달할 수 있다.(=1번)
3. 함수를 반환값으로 사용할 수 있다.(=1번)
*/
// 1. 함수를 변수나 데이터 구조에 담을 수 있다.
var n1;
function f1() {
console.log('f1');
}
n1 = f1(); // 함수의 반환값을 n1에 대입
console.log(n1); // undefined -> 리턴값이 없는 메서드를 호출해서
n1 = f1; // 함수 자체를 n1에 대입(= 함수 포인터)
console.log(n1); // [Function: f1]
n1(); // f1 (*************)
var n2 = n1;
n2(); // f1
n2 = 100;
console.log(n2); // 100
console.log('----------------------------');
// 2. 함수를 매개변수로 전달할 수 있다.(=1번)
function f3(){
console.log('f3');
}
function f4(temp){
console.log(temp);
}
f4(100);
var n3 = f3;
f4(n3); // [Function: f3]
f4(f3); // [Function: f3]
f4(f3()); // undefined -> 리턴값이 없어서 -> 사용 X
console.log('----------------------------');
// 3. 함수를 반환값으로 사용할 수 있다.(=1번)
function f5() {
console.log('f5');
}
function f6(temp) {
temp(); // == f5()
}
f6(f5); // 함수를 매개변수로 넘김
function f7() {
console.log('f7');
}
function f8() {
return f7; // 함수를 반환값으로 쓸 수 있다.
}
// f8을 호출() -> f7로 치환 -> f7();호출 -> f7
f8()(); //f7
// ---------------------------------------------------------------------------------
/*
자바스크립트이 함수 선언
1. 명시적 선언(실명)
2. 암시적 선언(= 익명 함수, 함수 리터럴)
3. 즉시 호출
*/
// 1. 명시적 선언(실명)
function hello() {
console.log('hello');
}
hello();
// 2. 암시적 선언(= 익명 함수(****), 함수 리터럴)
var m1 = function() {
console.log('hi');
};
m1();
// 3. 익명함수를 즉시 호출할 때 쓰임
(function() {
console.log('good!!!');
})();
console.log('----------------------------');
/*
연산자 + 자료형
- 자바스크립트는 오라클과 비슷하게 자동 형변환이 잦다.
- 자동형변환이 많다. -> 개발자 편함, 개발자 불편함(가독성 저하).
- 자동형변환이 적다. -> 개발자 불편(모든걸 직접 구현해야한다.), 개발자 편함(가독성 향상).
*/
console.log(null == undefined);
/*
== 연산자
- 자료형의 비교는 하지 않고 데이터만 같은지 판단.
- 추상적(abstract) 같음 비교
*/
console.log(100 == 100);
console.log(100 == '100'); //true
console.log(1 == true); // true
console.log(0 == false); // true
/*
=== 연산자, !== 연산자
- 자료형도 비교하고, 값도 비교한다.
- 엄격한(strict) 같음 비교
*/
console.log('----------------------------');
console.log(100 === 100); // true
console.log(100 === '100'); // false
console.log(1 === true); // false
console.log(null === undefined); // false
ex64_bootstrap.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>Document</title>
<!-- Bootstrap 설치(로컬) -->
<!--
<link rel="stylesheet" href="css/bootstrap.css">
<script src="js/bootstrap.js"></script>
-->
<!-- CDN 설치(원격) -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
</head>
<body>
<!--
CSS 디자인 프레임워크
- 디자인을 손쉽게 하기 위해 만들어진 라이브러리 모음
- Bootstrap
- https://getbootstrap.com (공홈)
- http://bootstrapk.com (한국어)
- v3 ~ v4 ~ v5
Bootstrap 설정
- *. css
- *.js
1. 직접 다운로드 -> 참조
2. CDN -> 참조
-->
<div class="container">
<h1 class="page-header">Bootstrap<small>Design Framework</small></h1>
<h2>버튼 디자인</h2>
<input type="button" value="Button" />
<button>Button</button>
<input type="button" value="Button" class="btn btn-default">
<input type="button" value="Button" class="btn btn-primary">
<input type="button" value="Button" class="btn btn-success">
<input type="button" value="Button" class="btn btn-danger">
<input type="button" value="Button" class="btn btn-warning">
<input type="button" value="Button" class="btn btn-info">
<h2>버튼 크기</h2>
<input type="button" value="Button" class="btn btn-primary btn-xs">
<input type="button" value="Button" class="btn btn-primary btn-sm">
<input type="button" value="Button" class="btn btn-primary">
<input type="button" value="Button" class="btn btn-primary btn-lg">
<h2>테이블</h2>
<!-- table>tr>th*5 -->
<!-- <table class="table"> -->
<!-- <table class="table- table-bordered"> -->
<!-- <table class="table- table-striped"> -->
<!-- <table class="table- table-condensed"> -->
<!-- <table class="table- table-condensed table-bordered table-striped"> -->
<table class="table- table-hover">
<tr>
<th>번호</th>
<th>이름</th>
<th>나이</th>
<th>성별</th>
<th>주소</th>
</tr>
<!-- tr>td*5 -->
<tr>
<td>3</td>
<td>홍길동</td>
<td>20</td>
<td>남자</td>
<td>서울시 강남구 역삼동</td>
</tr>
<tr>
<td>3</td>
<td>홍길동</td>
<td>20</td>
<td>남자</td>
<td>서울시 강남구 역삼동</td>
</tr>
<tr>
<td>3</td>
<td>홍길동</td>
<td>20</td>
<td>남자</td>
<td>서울시 강남구 역삼동</td>
</tr>
<tr>
<td>3</td>
<td>홍길동</td>
<td>20</td>
<td>남자</td>
<td>서울시 강남구 역삼동</td>
</tr>
<tr>
<td>3</td>
<td>홍길동</td>
<td>20</td>
<td>남자</td>
<td>서울시 강남구 역삼동</td>
</tr>
<tr>
<td>3</td>
<td>홍길동</td>
<td>20</td>
<td>남자</td>
<td>서울시 강남구 역삼동</td>
</tr>
</table>
<h2>폼</h2>
<table class="table table-bordered" style="width: 600px">
<tr>
<th style="width: 150px">텍스트 박스</th>
<td>
<input type="text" class="form-control" />
</td>
</tr>
<tr>
<th style="width: 150px">암호 박스</th>
<td>
<input type="password" class="form-control">
</td>
</tr>
<tr>
<th style="width: 150px">다중라인 텍스트</th>
<td>
<textarea
style="height: 200px"
class="form-control"
></textarea>
</td>
</tr>
<tr>
<th style="width: 150px">셀렉트 박스</th>
<td>
<select class="form-control">
<option>항목</option>
<option>항목</option>
</select>
</td>
</tr>
<tr>
<th style="width: 150px">체크박스</th>
<td>
<input type="checkbox">
</td>
</tr>
</table>
<h2>텍스트 관련</h2>
<!-- (p>lorem)*3 -->
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Impedit minus quae velit minima explicabo fuga sit, repellendus iusto ipsam quod ut commodi exercitationem est nisi, praesentium obcaecati, nesciunt veritatis at?</p>
<p>Blanditiis repellendus numquam unde delectus ad quos odit molestias aspernatur at in. Temporibus vero, vitae vel, quia voluptatum aperiam, delectus veritatis voluptatem quibusdam eligendi earum magnam? Quia consequuntur nemo ex.</p>
<p>Sunt, facere nemo. Quibusdam magnam dicta distinctio ipsa quisquam, repudiandae dolorem rerum excepturi aspernatur laborum at cupiditate modi deserunt inventore facilis adipisci officia error soluta quia eum impedit corporis pariatur?</p>
<blockquote class="blockquote-reverse">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellendus illo cumque alias rem nulla dolorem? Veritatis excepturi ipsam libero dicta maxime ratione fuga id sequi similique. Vero atque quas similique?
</blockquote>
<h2>목록</h2>
<ul>
<li>딸기</li>
<li>바나나</li>
<li>포도</li>
</ul>
<h2>프로그래밍 코드</h2>
<p>자바스크립트의 변수는 <code>var a = 10;</code>와 같이 선언합니다.</p>
<h2>단축키</h2>
<p>
코드의 정렬은 <kbd>ctrl + Shift + F</kbd> 로 합니다.
</p>
<h2>외부 자료(preformatted Text-개행 문자 적용)</h2>
<pre>
public class Test {
public static void main(String[] args) {
System.out.print("숫자: ");
<span style="color:red">int sum = 0;</span>
for (int i=1; i<=num; i++) {
sum += i;
}
}
}
</pre>
</div>
</body>
</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>Document</title>
<style></style>
<!-- 참조, 외부 자바스트립트 -->
<!-- <script src="js/ex01.js"></script> -->
<script src="hello.js"></script>
<script>
// 임베디드 형식
// alert('반갑습니다.');
</script>
</head>
<body>
<!--
Web Client
1.HTML
- 골격(레이아웃,틀) -> 블럭태그
- 내용물(텍스트, 이미지, 컨트롤 등) -> 인라인태그
2. CSS
- 1번 결과물 + 서식 구현
3. Javascript
- 1번 + 2번 결과물 + 프로그래밍 구현(목적: 1번(HTML) 조작 or 2번(CSS) 조작)
JavaScript
- 브라우저에서 동작하는 프로그래밍 언어
- 가볍다. (경량)
- 쉽다.(규모가 적다.)
- C계열 언어 > 기본 구문이 자바와 비슷하다.
- 1996년 1.0 넷스케이프 네이게이터(브라우저) -> IE
- 초반: 폼 태그 유효성 검사 + 링크 조작 + 이미지 조작 -> BOM
- 중반: 모든 태그 조작 -> DOM(****)
- 후반: 2015년 -> ES5 -> Node.js 출시 -> 비 브라우저 환경에서도 JavaScript 동작, 서버 구축
JavaScript가 하는 일?
1. 기본적인 프로그래밍 언어의 행동
- Core
- 변수
- 연산자
- 제어문
- 조작, 가공 등..
2. 브라우저에 특화된 행동
- HTML/CSS 요소 조작 능력
a. HTML Element 생성
b. HTML Element 수정
c. HTML Element 삭제
d. HTML Attribute 생성/수정/삭제
e. HTML PCDATA 생성/수정/삭제
f. CSS 속성 생성/수정/삭제
g. 폼 태그 조작
h. 이미지 조작
i. 링크 조작
JavaScript 역사
1. Netscape Navigator > JavaScript 1.0 > 1.1 > ... > 1.8
2. Internet Explorer > JavaScript > JScript > 1.0 ... 8.0
3. ECMA -> JavaScript -> 표준 스크립트 등재 신청 -> ECMAScript(ES) -> ECMAScript 2015 (ES6) -> ECMAScript 2020(ES11)
- 현재 자바스크립트 시장 -> ES6기반
JavaScript 적용 방법
1. 인라인 방식(X) -> 이벤트 핸들러(Event Handler) -> 이벤트
- 태그에 직접 기재
2. 임베디드 방식
- <script></script>
3. 외부 방식
- <script src="경로"><script>
-->
<!-- 이벤트 핸들러 -->
<input type="button" value="버튼" onclick="alert('안녕');"/>
</body>
</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>Document</title>
<style>
/* <style>은 일반적으로 문서내 <head> 자식으로 1회 적용 */
</style>
<script>
// <script>는 문서 내에 여기저기 여러번 적용하는 모습을 자주 볼 수 있다.
// -> 코드의 실행 순서를 제어하기 위해서..
// -> 동기순으로 적용
// alert('하나');
// window.document.all.txt1.value = new Date();
</script>
</head>
<body>
<!--
자바스크립트 구문의 실행 순서
- 동기(문장 순서대로 실행)
- 브라우저가 HTML과 JavaScript를 동시에 실행한다.
- HTML 조작 시 HTML과 JavaScript 구문의 순서가 중요하다.(*****)
-->
<input type="text" name="txt1" size="50" />
<script>
// alert('둘');
// window.document.all.txt1.value = new Date();
</script>
</body>
</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>Document</title>
</head>
<body>
<!--
JavaScript 디버그 시 값을 확인하는 방법
1.alert(값);
- 디버그 전용 함수 X
- 구문 간단
- 블럭이 걸린다.(break)
2. document.write(값);
- 디버그 전용 함수 X
- 페이지에 직접 출력
- 사용X
3. HTML 사용
- 사용 X
- 추가 비용 발생
4. console.log(값);
- 디버그 전용 함수 O
- FM
- 적극 추천
- 개발자 콘솔창에 출력 + 사용자에게 출력 X
- Node 환경에서도 출력
-->
<script>
// alert(new Date());
// alert(100);
// document.write(new Date());
console.log(100);
console.log(100, 200, 300);
console.log('점수', 100);
console.error(300);
console.info('확인');
</script>
</body>
</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>Document</title>
</head>
<body>
<script>
/*
자바스크립트 자료형
1. Number
- 숫자형(정수 + 실수)
- 리터럴(다른 언어와 동일)
변수
- 자바스크립트는 동적(<-> 정적) 할당 언어이다. > 변수를 선언할 때 자료형이 정해지지 않는다.
- 자바는 정적 할당 언어이다. > 변수를 선언할 때 자료형을 정해진다.(int a)
- var 키워드 사용
2. String
- 문자열(문자)
- 리터럴
- "문자열"
- '문자열'
3. Boolean
- 논리형
- 리터럴
- true
- false
4. Object
- 객체형
- ES6 이전에는 Class 개념이 없었다. > 생성자 함수를 통해 객체 생성
- ES6 이후에는 Class 개념이 생겼다.(진정한 Class가 아니라 Class를 흉내)
- 배열, 날짜시간, 수학 등,,
5. 기타
- null
- underfined
- NaN
연산자
- 자바와 동일
제어문
- 자바와 동일
문자 이스케이프
- 자바와 동일
- \n, \r, \t ...
*/
var a = 10; // Number
var b = 3.14; // Number
var c = '홍길동';
var d = true;
var e = new Date();
console.log(a);
console.log(typeof a); // number(콘솔창에서 자료형 표기), Number(생성자 이름)
console.log(typeof 100); // number
var str1 = "홍길동";
var str2 = '아무개';
console.log(str1, typeof str1);
console.log(str2, typeof str2);
console.log(true, typeof true);
console.log(new Date()); // 클래스 사용 + 객체 사용
console.log(new Date().toString());
console.log(typeof new Date()); // Date 자료형 X -> Object 자료형
</script>
</body>
</html>// - JavaScript Core 실행 가능
// - JavaScript Browser 실행 불가능
var num = 10;
console.log('num', num);
// Ctrl + F5
//확장 프로그램 > Code Runner > 설치 -> Ctrl + Alt + N
if (num > 0) {
console.log('양수');
} else {
console.log('음수');
}
for (var i = 0; i < 10; i++) {
console.log(i);
}/*
함수, Function
- 메소드, 프로시저
- 자바스크립트(메소드(=함수))
- function 키워드 사용
선언문
1. 자바의 선언문
public [static] void test(int a) {
실행문;
}
2. 자바스크립트의 선언문
function test(a) {
실행문;
}
*/
// 매개변수 X, 반환값 X
function f1() {
console.log('f1');
}
f1();
f1();
f1();
// 매개변수 O, 반환값 X
function f2(num) {
console.log(num);
}
f2(100);
f2(200);
f2(300);
// 매개변수 X , 반환값 O
function f3() {
return 100;
}
var result = f3();
console.log('result', result);
// 매개변수 O, 반환값 O
function f4(a, b) {
return a + b;
}
console.log(f4(100, 200));
// 주의점!!
// - 실인자와 가인자가 일치하지 않아도 가능 !!
function hello(name) {
console.log('안녕하세요' + name + '님');
// console.log('안녕하세요. %s님', name);
// console.log('안녕하세요', name, '님');
}
hello('홍길동');
// hello();
// hello('홍길동', '아무개', '하하하');
// 자료형
// - null : 그 외 나머지 비어있는 상태, 개발자 직접 명시
// - undefined : 변수를 생성 직후 초기화를 하지 않은 상태
// - 둘은 똑같다. (실제로는 다르다.)
console.log(null);
console.log(undefined);
console.log(null == undefined); // true
// var temp = null; // 명시적 선언에는 null만 사용
// var temp = undefined; // X
var temp;
console.log('temp', temp); // undefined/*
자바스크립트의 함수
- 함수를 객체(데이터)처럼 취급할 수 있다.
-> 함수는 1급 객체(first class object)이다.
1급 객체
1. 함수를 변수나 데이터 구조에 담을 수 있다.
2. 함수를 매개변수로 전달할 수 있다.(=1번)
3. 함수를 반환값으로 사용할 수 있다.(=1번)
*/
// 1. 함수를 변수나 데이터 구조에 담을 수 있다.
var n1;
function f1() {
console.log('f1');
}
n1 = f1(); // 함수의 반환값을 n1에 대입
console.log(n1); // undefined -> 리턴값이 없는 메서드를 호출해서
n1 = f1; // 함수 자체를 n1에 대입(= 함수 포인터)
console.log(n1); // [Function: f1]
n1(); // f1 (*************)
var n2 = n1;
n2(); // f1
n2 = 100;
console.log(n2); // 100
console.log('----------------------------');
// 2. 함수를 매개변수로 전달할 수 있다.(=1번)
function f3(){
console.log('f3');
}
function f4(temp){
console.log(temp);
}
f4(100);
var n3 = f3;
f4(n3); // [Function: f3]
f4(f3); // [Function: f3]
f4(f3()); // undefined -> 리턴값이 없어서 -> 사용 X
console.log('----------------------------');
// 3. 함수를 반환값으로 사용할 수 있다.(=1번)
function f5() {
console.log('f5');
}
function f6(temp) {
temp(); // == f5()
}
f6(f5); // 함수를 매개변수로 넘김
function f7() {
console.log('f7');
}
function f8() {
return f7; // 함수를 반환값으로 쓸 수 있다.
}
// f8을 호출() -> f7로 치환 -> f7();호출 -> f7
f8()(); //f7
// ---------------------------------------------------------------------------------
/*
자바스크립트이 함수 선언
1. 명시적 선언(실명)
2. 암시적 선언(= 익명 함수, 함수 리터럴)
3. 즉시 호출
*/
// 1. 명시적 선언(실명)
function hello() {
console.log('hello');
}
hello();
// 2. 암시적 선언(= 익명 함수(****), 함수 리터럴)
var m1 = function() {
console.log('hi');
};
m1();
// 3. 익명함수를 즉시 호출할 때 쓰임
(function() {
console.log('good!!!');
})();
console.log('----------------------------');
/*
연산자 + 자료형
- 자바스크립트는 오라클과 비슷하게 자동 형변환이 잦다.
- 자동형변환이 많다. -> 개발자 편함, 개발자 불편함(가독성 저하).
- 자동형변환이 적다. -> 개발자 불편(모든걸 직접 구현해야한다.), 개발자 편함(가독성 향상).
*/
console.log(null == undefined);
/*
== 연산자
- 자료형의 비교는 하지 않고 데이터만 같은지 판단.
- 추상적(abstract) 같음 비교
*/
console.log(100 == 100);
console.log(100 == '100'); //true
console.log(1 == true); // true
console.log(0 == false); // true
/*
=== 연산자, !== 연산자
- 자료형도 비교하고, 값도 비교한다.
- 엄격한(strict) 같음 비교
*/
console.log('----------------------------');
console.log(100 === 100); // true
console.log(100 === '100'); // false
console.log(1 === true); // false
console.log(null === undefined); // false<!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>Document</title>
<!-- Bootstrap 설치(로컬) -->
<!--
<link rel="stylesheet" href="css/bootstrap.css">
<script src="js/bootstrap.js"></script>
-->
<!-- CDN 설치(원격) -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
</head>
<body>
<!--
CSS 디자인 프레임워크
- 디자인을 손쉽게 하기 위해 만들어진 라이브러리 모음
- Bootstrap
- https://getbootstrap.com (공홈)
- http://bootstrapk.com (한국어)
- v3 ~ v4 ~ v5
Bootstrap 설정
- *. css
- *.js
1. 직접 다운로드 -> 참조
2. CDN -> 참조
-->
<div class="container">
<h1 class="page-header">Bootstrap<small>Design Framework</small></h1>
<h2>버튼 디자인</h2>
<input type="button" value="Button" />
<button>Button</button>
<input type="button" value="Button" class="btn btn-default">
<input type="button" value="Button" class="btn btn-primary">
<input type="button" value="Button" class="btn btn-success">
<input type="button" value="Button" class="btn btn-danger">
<input type="button" value="Button" class="btn btn-warning">
<input type="button" value="Button" class="btn btn-info">
<h2>버튼 크기</h2>
<input type="button" value="Button" class="btn btn-primary btn-xs">
<input type="button" value="Button" class="btn btn-primary btn-sm">
<input type="button" value="Button" class="btn btn-primary">
<input type="button" value="Button" class="btn btn-primary btn-lg">
<h2>테이블</h2>
<!-- table>tr>th*5 -->
<!-- <table class="table"> -->
<!-- <table class="table- table-bordered"> -->
<!-- <table class="table- table-striped"> -->
<!-- <table class="table- table-condensed"> -->
<!-- <table class="table- table-condensed table-bordered table-striped"> -->
<table class="table- table-hover">
<tr>
<th>번호</th>
<th>이름</th>
<th>나이</th>
<th>성별</th>
<th>주소</th>
</tr>
<!-- tr>td*5 -->
<tr>
<td>3</td>
<td>홍길동</td>
<td>20</td>
<td>남자</td>
<td>서울시 강남구 역삼동</td>
</tr>
<tr>
<td>3</td>
<td>홍길동</td>
<td>20</td>
<td>남자</td>
<td>서울시 강남구 역삼동</td>
</tr>
<tr>
<td>3</td>
<td>홍길동</td>
<td>20</td>
<td>남자</td>
<td>서울시 강남구 역삼동</td>
</tr>
<tr>
<td>3</td>
<td>홍길동</td>
<td>20</td>
<td>남자</td>
<td>서울시 강남구 역삼동</td>
</tr>
<tr>
<td>3</td>
<td>홍길동</td>
<td>20</td>
<td>남자</td>
<td>서울시 강남구 역삼동</td>
</tr>
<tr>
<td>3</td>
<td>홍길동</td>
<td>20</td>
<td>남자</td>
<td>서울시 강남구 역삼동</td>
</tr>
</table>
<h2>폼</h2>
<table class="table table-bordered" style="width: 600px">
<tr>
<th style="width: 150px">텍스트 박스</th>
<td>
<input type="text" class="form-control" />
</td>
</tr>
<tr>
<th style="width: 150px">암호 박스</th>
<td>
<input type="password" class="form-control">
</td>
</tr>
<tr>
<th style="width: 150px">다중라인 텍스트</th>
<td>
<textarea
style="height: 200px"
class="form-control"
></textarea>
</td>
</tr>
<tr>
<th style="width: 150px">셀렉트 박스</th>
<td>
<select class="form-control">
<option>항목</option>
<option>항목</option>
</select>
</td>
</tr>
<tr>
<th style="width: 150px">체크박스</th>
<td>
<input type="checkbox">
</td>
</tr>
</table>
<h2>텍스트 관련</h2>
<!-- (p>lorem)*3 -->
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Impedit minus quae velit minima explicabo fuga sit, repellendus iusto ipsam quod ut commodi exercitationem est nisi, praesentium obcaecati, nesciunt veritatis at?</p>
<p>Blanditiis repellendus numquam unde delectus ad quos odit molestias aspernatur at in. Temporibus vero, vitae vel, quia voluptatum aperiam, delectus veritatis voluptatem quibusdam eligendi earum magnam? Quia consequuntur nemo ex.</p>
<p>Sunt, facere nemo. Quibusdam magnam dicta distinctio ipsa quisquam, repudiandae dolorem rerum excepturi aspernatur laborum at cupiditate modi deserunt inventore facilis adipisci officia error soluta quia eum impedit corporis pariatur?</p>
<blockquote class="blockquote-reverse">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellendus illo cumque alias rem nulla dolorem? Veritatis excepturi ipsam libero dicta maxime ratione fuga id sequi similique. Vero atque quas similique?
</blockquote>
<h2>목록</h2>
<ul>
<li>딸기</li>
<li>바나나</li>
<li>포도</li>
</ul>
<h2>프로그래밍 코드</h2>
<p>자바스크립트의 변수는 <code>var a = 10;</code>와 같이 선언합니다.</p>
<h2>단축키</h2>
<p>
코드의 정렬은 <kbd>ctrl + Shift + F</kbd> 로 합니다.
</p>
<h2>외부 자료(preformatted Text-개행 문자 적용)</h2>
<pre>
public class Test {
public static void main(String[] args) {
System.out.print("숫자: ");
<span style="color:red">int sum = 0;</span>
for (int i=1; i<=num; i++) {
sum += i;
}
}
}
</pre>
</div>
</body>
</html>
ex70_bootstrap.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>Document</title>
<link rel="stylesheet" href="css/bootstrap.css">
<script src="js/bootstrap.js"></script>
<style>
body {
background: #ddd;
}
main {
width: 800px;
height: 100vh;
margin: 0px auto;
border-left: 1px solid #777;
border-right: 1px solid #777;
padding-top: 20px;
background-color: #FFF;
box-shadow: 0px 0px 5px #999;
}
h1{
margin-top: 0;
padding-left: 20px;
padding-right: 20px;
}
#tbl1 th,
#tbl1 td {
text-align: center;
}
#tbl1 th::nth-child(1) { width: 80px; }
#tbl1 th::nth-child(2) { width: auto; }
#tbl1 th::nth-child(3) { width: 100px; }
#tbl1 th::nth-child(4) { width: 120px; }
#tbl1 th::nth-child(5) { width: 80px; }
#tbl1 td::nth-child(2) { text-align: left; }
.btns {
margin-top: 30px;
padding: 0px 15px;
display: flex;
justify-content: space-between;
}
nav {
text-align: center;
}
</style>
</head>
<body>
<!-- 게시판 시작 페이지(목록보기) -->
<main>
<h1 class="page-header">Board <small>Bootstrap</small></h1>
<table id="tbl1" class="table table-striped">
<thead>
<tr>
<th>번호</th>
<th>제목</th>
<th>이름</th>
<th>날짜</th>
<th>읽음</th>
</tr>
</thead>
<tbody>
<tr>
<td>5</td>
<td>게시판 테스트입니다.</td>
<td>홍길동</td>
<td>2021-06-22</td>
<td>10</td>
</tr>
<tr>
<td>5</td>
<td>게시판 테스트입니다.</td>
<td>홍길동</td>
<td>2021-06-22</td>
<td>10</td>
</tr>
<tr>
<td>5</td>
<td>게시판 테스트입니다.</td>
<td>홍길동</td>
<td>2021-06-22</td>
<td>10</td>
</tr>
<tr>
<td>5</td>
<td>게시판 테스트입니다.</td>
<td>홍길동</td>
<td>2021-06-22</td>
<td>10</td>
</tr>
<tr>
<td>5</td>
<td>게시판 테스트입니다.</td>
<td>홍길동</td>
<td>2021-06-22</td>
<td>10</td>
</tr>
<tr>
<td>5</td>
<td>게시판 테스트입니다.</td>
<td>홍길동</td>
<td>2021-06-22</td>
<td>10</td>
</tr>
<tr>
<td>5</td>
<td>게시판 테스트입니다.</td>
<td>홍길동</td>
<td>2021-06-22</td>
<td>10</td>
</tr>
<tr>
<td>5</td>
<td>게시판 테스트입니다.</td>
<td>홍길동</td>
<td>2021-06-22</td>
<td>10</td>
</tr>
<tr>
<td>5</td>
<td>게시판 테스트입니다.</td>
<td>홍길동</td>
<td>2021-06-22</td>
<td>10</td>
</tr>
<tr>
<td>5</td>
<td>게시판 테스트입니다.</td>
<td>홍길동</td>
<td>2021-06-22</td>
<td>10</td>
</tr>
</tbody>
</table>
<div class="btns">
<button class="btn btn-default">
<span class="glyphicon glyphicon-home"></span>
Home</button>
<button class="btn btn-primary">
<span class="glyphicon glyphicon-log-in"></span>
Write</button>
</div>
<nav>
<ul class="pagination">
<li>
<a href="#" aria-label="Previous">
<span aria-hidden="true">«</span>
</a>
</li>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li class="active"><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li><a href="#">6</a></li>
<li><a href="#">7</a></li>
<li><a href="#">8</a></li>
<li><a href="#">9</a></li>
<li><a href="#">10</a></li>
<li>
<a href="#" aria-label="Next">
<span aria-hidden="true">»</span>
</a>
</li>
</ul>
</nav>
</main>
</body>
</html>Reference
この問題について(アカデミー61日目-JavaScript), 我々は、より多くの情報をここで見つけました https://velog.io/@hi-dae-in/학원-61일차-JavaScriptテキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol