티스토리 뷰
1. 자바 스크립트
- 자바 스크립트는 웹 문서를 동적으로 제어하기 위해 고안된 프로그래밍 언어이다.
- HTML5은 모델 담당, CSS3는 뷰 담당 그리고 자바 스크립트는 제어담당을 한다.
- 자바 스크립트는 표준화되기 전의 이름으로, 현재는 ECMA스크립트라고도 불린다.
- Interpreter 언어라고도 부른다. ( 컴파일 과정이 없고, 1줄 읽고 바로 실행한다. )
2. 자바 스크립트의 역할
- 1 ) 요소의 추가 및 삭제
- 2 ) CSS 및 HTML 요소의 스타일 변경 ( 하지 않는 것이 좋다. )
- 3 ) 사용자와의 상호작용
- 4 ) 폼의 유효성 검증
- 5 ) 마우스와 키보드 이벤트에 대한 스크립트 실행 (*)
- 6 ) 웹 브라우저 제어 및 쿠키 등의 설정과 조회
- 7 ) AJAX 기술을 이용한 웹 서버와의 통신 (**)
3. 자바 스크립트 작성 방법
- 대소문자를 구분하여 작성
- 문장은 세미콜론( ; )으로 구분한다.
- Ex. var age = 26;
- Ex. console.log(age);
- 큰 따옴표( “ “ )와 작은 따옴표( ‘ ‘ ) 둘 다 사용이 가능하지만, 구분해서 사용한다.
- HTML문서 내부에서 사용할 때에는 헤드나 바디에서 <script>태그를 사용해야 한다.
- HTML 태그 안에 이벤트 핸들러 코드로 속성값으로 정의할 수도 있다.
- 외부 자바스크립트 파일을 생성한 후에, HTML 문서 내에서 script : src로 참조할 수 있다.
( ex. <script src="./js/ttt.js"></script> )
- script : src에서 src 속성값을 URL로 지정해 줄 수도 있다.
4. 자바 스크립트 - 데이터 타입
- 1 ) 기본형 타입 : number, string, Boolean, array, object, null, undefined
- Number은 정수와 실수 모두를 포함한다.
- Object는 name:”홍길동”;처럼 데이터 속성과 값으로 이루어진 집합을 의미한다.
- Undefined은 값이 정해지지 않은 상태를 의미한다.
- 2 ) 객체 타입
- + 자바스크립트는 변수타입을 지정하지 않고, 값이 들어갈 때 결정된다.
- + 이때 typeof 변수명을 통해서 해당 변수의 타입을 알 수 있다.
- + 배열의 경우, 값으로 [1, 2, 3, 4]로 주어져도 typeof로
- + 또한 자바스크립트에서는 변수타입이 하나로 고정되는 것이 아니라 값에 따라서 변할 수도 있다.
5. 자바 스크립트 – 변수명 작성 규칙
- 변수명은 문자, 밑줄(_), 달러 기호($)로 시작할 수 있다. ( 숫자로 시작할 수 X )
- 변수명은 대소문자를 구분하며, 한글이 사용은 가능하지만 영문자를 권장한다.
- 자바스크립트에서 이미 정한 예약어의 경우에는 변수명으로 사용이 불가능하다.
6. 자바 스크립트 – 전역 변수 / 지역 변수
- 변수의 유효범위에 따라서 전역 변수와 지역변수로 구분할 수 있다.
- 1 ) 전역변수 : 코드 내 어느 위치에서도 선언하여 사용할 수 있는 변수이다.
- 2 ) 지역변수 : 함수블록 내에서 생성되어, 선언된 해당 함수블록 내에서만 유효하게 사용할 수 있다. ( 1. Var 키워드 생략 불가 2. 함수블록 내에서 선언 )
- + 함수 블록이 아닌 블록에서 선언하게 되면 지역변수가 아니다.
- + 함수 블록 내에서 선언될지라도 var을 붙이지 않고 선언하면, 자동으로 전역변수로 생성된다.
[ 1. 미디어 쿼리 패턴 1 (**) - @media ]
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="user-scalable=no,initial-scale=1.0, maximum-scale=1.0"/>
<title>미디어 쿼리 기능3 (***)</title>
<style>
/* 아래의 미디어 쿼리 설정이 나올때 전까지 CSS 선언 블록은 공통으로 적용된다. */
*{
margin: 0px;
padding: 0px;
}
body{
width: 960px;
margin: 0 auto;
overflow: hidden;
/* 정해진 영역을 넘는 콘텐츠 영역은 보이지 않게 하였다. */
}
#menu{
width: 260px;
float: left;
/* 바디 영역의 왼쪽에 나타나게 된다. */
/* 이때에는 바디 태그의 왼쪽이지, 화면의 왼쪽이 아니다. */
}
#section{
width: 700px;
float: right;
}
/* 미디어 쿼리 설정 */
@media only screen and (max-width : 767px){
/* only는 작성하지 않아도 정상적으로 기능한다. */
/* 스마트폰 사이즈에서는 위에서 정한 것을 해제한다. */
body{
width: auto;
/* auto는 브라우저에게 맡기는 것이기에 정한 값이 해제된다. */
}
#menu{
width: auto;
float: none;
}
#section{
width: auto;
float: none;
/* float : clear은 전의 요소에 적용되었던 float의 영향을 막는 것이지만, none은 float 효과를 없애 버린다. */
}
}
/* 이렇게 되면 최대 767px인 화면을 가진 디바이스에서는 section과 메뉴가 위 아래로 보이지만, 그 외에는 오른쪽과 왼쪽으로 구분되어 표현된다. */
</style>
</head>
<body>
<div id="menu">
<ul>
<li>메뉴A</li>
<li>메뉴B</li>
<li>메뉴C</li>
</ul>
</div>
<div id="section">
<h1>Lorem ipsum dolor sit amet.</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quasi placeat totam nesciunt.
Quam minima, suscipit odit optio aut sint molestias, ad aliquid quibusdam in saepe est corrupti dolor facilis repellendus
tempore deleniti ipsum! Minima, dicta earum quis officia eum sunt architecto? Fugit deserunt, est earum natus tempore molestias nisi excepturi
eum accusantium cum, unde veritatis quam odio, quo ut porro id accusamus obcaecati adipisci laborum. Illo numquam beatae molestiae debitis, corporis accusamus,
ea earum quae, quasi dolor sed consequatur quidem eaque! Dolores, alias? Necessitatibus maxime ipsum repellat. Quos perferendis optio voluptatibus natus dolore
perspiciatis eum, quisquam at nulla accusamus. Magni sint in, soluta consectetur mollitia distinctio vitae exercitationem dolor officia ratione nulla dignissimos,
voluptatum alias omnis. Odit aliquam molestiae assumenda illo commodi tempore, eius placeat nostrum nesciunt, nihil eveniet, quod ut a ducimus similique? Iusto laborum
est similique consequatur qui? Officiis ipsam nisi repellat odit earum asperiores mollitia quas ipsa.</p>
</div>
</body>
</html>[ 2. 미디어 쿼리 패턴2 (*) ]
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="user-scalable=no,initial-scale=1.0, maximum-scale=1.0"/>
<title>미디어 쿼리 - 패턴3</title>
<style>
*{
margin: 0px;
padding: 0px;
}
body{
width: 960px;
margin: 0 auto;
overflow: hidden;
}
#menu{
width: 260px;
float: right;
}
#section{
width: 700px;
float: left;
}
li{
list-style: none;
}
@media screen and (max-width : 767px){
/* 스마트폰 사이즈에서는 위에서 정한 것을 해제한다. */
body{
width: auto;
/* auto는 브라우저에게 맡기는 것이기에 정한 값이 해제된다. */
}
#menu{
width: auto;
float: none;
}
#section{
width: auto;
float: none;
/* float : clear은 전의 요소에 적용되었던 float의 영향을 막는 것이지만, none은 float 효과를 없애 버린다. */
}
}
</style>
</head>
<body>
<div id="section">
<h1>Lorem ipsum dolor sit amet.</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quasi placeat totam nesciunt.
Quam minima, suscipit odit optio aut sint molestias, ad aliquid quibusdam in saepe est corrupti dolor facilis repellendus
tempore deleniti ipsum! Minima, dicta earum quis officia eum sunt architecto? Fugit deserunt, est earum natus tempore molestias nisi excepturi
eum accusantium cum, unde veritatis quam odio, quo ut porro id accusamus obcaecati adipisci laborum. Illo numquam beatae molestiae debitis, corporis accusamus,
ea earum quae, quasi dolor sed consequatur quidem eaque! Dolores, alias? Necessitatibus maxime ipsum repellat. Quos perferendis optio voluptatibus natus dolore
perspiciatis eum, quisquam at nulla accusamus. Magni sint in, soluta consectetur mollitia distinctio vitae exercitationem dolor officia ratione nulla dignissimos,
voluptatum alias omnis. Odit aliquam molestiae assumenda illo commodi tempore, eius placeat nostrum nesciunt, nihil eveniet, quod ut a ducimus similique? Iusto laborum
est similique consequatur qui? Officiis ipsam nisi repellat odit earum asperiores mollitia quas ipsa.</p>
</div>
<div id="menu">
<ul>
<li>메뉴A</li>
<li>메뉴B</li>
<li>메뉴C</li>
</ul>
</div>
<!-- 요소의 순서가 달라도, float으로 위치를 지정해주면 표현되는 화면은 동일하다. -->
</body>
</html>[ 3. HTML 문서 내 자바 스크립트의 위치 (*) ]
<script>
console.log("1");
</script>
<!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>자바 스크립트 연습 - 자바 스크립트의 위치</title>
<script>
// JS코드를 작성할 수 있음
console.log("2");
</script>
</head>
<body>
<script>
// JS 코드를 작성할 수 있음
console.log("3");
</script>
</body>
</html>
<script>
// JS 코드를 작성할 수 있음
console.log(4);
</script>
<!-- 자바 스크립트는 위치의 제한을 받지 않는다. -->
<!-- 자바스크립트는 단순히 나온 순서대로 출력한다. ( 개발자 도구의 콘솔 탭에서 확인할 수 있다. ) -->[ 4. 자바스크립트 뷰포트에서 출력하기 - document.write( ); (*) ]
<!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>자바 스크립트2</title>
<script>
var num = 0;
// var은 변수를 지정할 때 사용한다. (**)
document.write("head 태그 내 실행 순서 : " + num + "<br>");
// document.write은 console.log와 다르게 콘솔에 출력하는 것이 아니라, 뷰 포트에 출력한다.
// 하지만 doucument.write보다는 console.log를 사용하는 것이 좋다.
// +는 문자열과 숫자타입의 변수인 num을 합치라는 의미이다. ( 자동형 변환이 일어난다. )
// "<br>"처럼 태그를 입력할 수도 있다. (**)
// doucument.write는 입력한 값이 문자열이면 텍스트로 출력하고, 태그이면 태그로 출력한다.
</script>
<script>
var num = 1;
document.write("head 태그 내 실행 순서 : " + num + "<br>");
</script>
</head>
<body>
<script>
var num = 2;
document.write("body 태그 내 실행 순서 : " + num + "<br>");
// 자바와 같이 문자열 + 숫자타입으로 하면, 자동형변환이 일어난다.
</script>
<script>
var num = 2;
document.write("body 태그 내 실행 순서 : " + num + "<br>");
</script>
</body>
</html>[ 5. 자바 스크립트 - 외부 JS파일과 연결하기 (**) ]
<!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>자바스크립트 3 - 외부 js파일 연결</title>
<script src="./js/ttt.js"></script>
<!-- 외부 js파일을 지정하여, 연결할 수 있다. ( script : src로 자동생성할 수 있다. ) -->
<!-- 외부 파일에 console.log로 작성되어 있기에, 콘솔창에 입력되게 된다. -->
<script>
var num = 0;
// var은 변수를 지정할 때 사용한다. (**)
document.write("head 태그 내 실행 순서 : " + num + "<br>");
</script>
<script>
var num = 1;
document.write("head 태그 내 실행 순서 : " + num + "<br>");
</script>
</head>
<body>
<script>
var num = 2;
document.write("body 태그 내 실행 순서 : " + num + "<br>");
// 자바와 같이 문자열 + 숫자타입으로 하면, 자동형변환이 일어난다.
</script>
<script>
var num = 2;
document.write("body 태그 내 실행 순서 : " + num + "<br>");
</script>
</body>
</html>[ 6. 자바 스크립트 - URL로 외부 JS파일과 연결하기 (**) ]
<!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>자바스크립트 4 - 외부 js파일 연결</title>
<script src="./js/ttt.js"></script>
<!-- 외부 js파일을 지정하여, 연결할 수 있다. ( script : src로 자동생성할 수 있다. ) -->
<!-- 외부 파일에 console.log로 작성되어 있기에, 콘솔창에 입력되게 된다. -->
<script src="http://197.185.30.8:8080/external.js" crossorigin="anonymous"></script>
<!-- src 속성의 속성값으로 URL 형식의 값도 지정해 줄 수도 있다. -->
<!-- 위의 자바스크립트 태그를 실행하면, 콘솔창에서 CROS policy ( 동일출처원칙 위반 )이라는 에러가 발생하게 된다. -->
<!-- 이는 같은 라이브 서버가 아닌, 다른 라이브 서버로 접속하였기에 나타나는 에러이다. -->
<!-- 이는 crossorigin="anonymous"를 작성하였기에, 나타나는 에러로 -->
<!-- crossorigin="anonymous"는 보안기능을 하는 속성이다. (***) -->
<!-- + crossorigin="anonymous"를 작성하지 않으면, 체크하지 않기에 에러가 발생하지 않는다. -->
<script>
var num = 0;
// var은 변수를 지정할 때 사용한다. (**)
document.write("head 태그 내 실행 순서 : " + num + "<br>");
</script>
<script>
var num = 1;
document.write("head 태그 내 실행 순서 : " + num + "<br>");
</script>
</head>
<body>
<script>
var num = 2;
document.write("body 태그 내 실행 순서 : " + num + "<br>");
// 자바와 같이 문자열 + 숫자타입으로 하면, 자동형변환이 일어난다.
</script>
<script>
var num = 2;
document.write("body 태그 내 실행 순서 : " + num + "<br>");
</script>
</body>
</html>
[ 7. 자바 스크립트 - 외부 자바스크립트 파일과 연결 / alert 함수 (***) ]
<!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>자바 스크립트 4</title>
<script src="./js/ejs.js"></script>
</head>
<body>
<p>
<!-- 버튼을 클릭하면 메세지 창 출력 -->
<!-- 인라인 방식의 자바스크립트 코드로 수행 -->
<button type="button" onclick="alert('경고 문구 : 외부 자바스크립트 파일 적용');">버튼 클릭</button>
<!-- alert는 경고창을 띄워주는 함수이다. (*) -->
<!-- alert는 ( ) 안에 문자열을 넣어 줘야 하며, 이때에는 onclick에서 " "를 사용하고 있기 때문에 alert()에서는 ''를 사용해서 문자열을 작성해야 한다. -->
</p>
</body>
</html>var age = 23;
// 문자에 스타일 적용
document.write("<div style='color: red; font-size: 24px;'> 외부 자바스크립트 파일</div>");
// 태그가 그대로 인정되기에 현재 스타일이 적용되어, 뷰포트에 출력된다.
// " "과 ''는 충돌되어서는 안되기에, " "안에서는 ' '를 사용해야 한다. (**)
// 탈출문자인 \를 활용하여 " "안에 " "를 사용할 수는 있으나, 사용하지 않는 것을 추천한다.
document.write("당신의 나이는 " + age + "입니다.");[ 8. 자바스크립트 - 다중 외부 JS파일 연결 ]
<!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>자바 스크립트 5 - 다중 외부스크립트 참조</title>
<script src="js/ejs1.js"></script>
</head>
<body>
<script src="js/ejs2.js"></script>
<script src="js/ejs3.js"></script>
<!-- 외부 자바스크립트 파일을 여러개 연결할 수 있다. -->
<!-- 외부 자바스크립트 파일 내에서 다시 외부 자바스크립트 파일을 불러올 수는 있으나, 사용하지 않는 것이 좋다. -->
</body>
</html>[ 9. 자바 스크립트 - 변수 기본형 타입 ]
<!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>자바 스크립트 6 - 변수 기본형 타입</title>
</head>
<body>
<script>
// 1. 기본형 타입
var num; // 변수 값이 없다.
var obj = null; // 객체의 변수값이 없다.
// 선언과 정의를 구분한다.
console.log(typeof 100); // 정수 - number
console.log(typeof 10.5); // 실수 - number
console.log(typeof "홍길동"); // string
console.log(typeof true); // boolean
console.log(typeof [1, 2, 3]); // 배열 - object
// 실제로 배열의 의미인 array는 나타나지 않고, object로 출력된다.
console.log(typeof { name : "홍길동", age : 25}); // object
console.log(typeof num); // undefind (***)
// undefind는 정의만 했지, 초기값을 주지 않을때 나타난다.
console.log(typeof obj); // object
// null은 객체주소가 없기 때문에 object로 출력된다.
// object는 어느 타입도 포함할 수 있다.
// typeof로 변수의 타입을 문자열로 받을 수 있다. (**)
// null과 undefind는 타입이기도 하지만, 동시에 값으로도 들어갈 수 있다.
</script>
</body>
</html>[ 10. 자바 스크립트 - 변수명 ]
<!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>자바 스크립트 - 변수명 짓기</title>
</head>
<body>
<script>
var x; // 변수 x 선언
var y = 10; // 변수 y 선언 및 초기값 할당
var x = y; // 변수 x에 y의 값을 저장
var a=b=c=10; // 변수 a, b, c에 같은 값 저장
// 안되는 변수명
// var 7num = 100; - 변수명을 숫자로 시작할 수 없다.
// var true = 1; - 변수명을 예약어로 생성할 수 없다.
// var a+b = 20; - 변수명에 연산식을 기입해도 불가능하다.
</script>
</body>
</html>[ 11. 자바스크립트 - 변수 타입 ( 재선언 ) ]
<!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>자바 스크립트 - 변수</title>
</head>
<body>
<script>
var num = 10;
document.write("num 변수 : " + typeof num + "타입<p/>");
document.write("------데이터 값 변경 후 -----<p/>");
var num = "홍길동";
document.write("num 변수 : " + typeof num + "타입<p/>");
// var num을 다시 정의한다고 하여도, 새로운 변수를 만드는 것이 아니라 위의 변수와 동일한 변수를 사용한다.
num = 25;
document.write("num 변수 : " + typeof num + "타입<p/>");
// var을 작성하지 않아도 재선언이 가능하다. (***)
// 이처럼 자바스크립트의 변수의 타입은 값에 따라서 달라질 수 있다.(**)
</script>
</body>
</html>[ 12. 자바스크립트 - 변수 타입 ( 재선언 ) (*) ]
<!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>자바 스크립트 - 변수 재선언</title>
</head>
<body>
<script>
name = "홍길동"; // var 키워드 생략
grade = 96; // var 키워드 생략
var name; // 변수명 재선언 (***)
var grade; // 변수명 재선언 (***)
// var을 붙이든, 붙이지 않던 변수를 생성할 수 있다.
// 하지만 var을 붙이는 것이 좋다.
// 변수를 혼용해서 사용하는 것은 지양하는 것이 좋다. ( 이름 변수에 나이를 넣지 말아라! )
console.log("1. 학생 이름 : " + name);
console.log("2. 성적 : " + grade);
// 변수가 정상적으로 재선언되어 출력되고 있다.
</script>
</body>
</html>[ 13. 자바 스크립트 - 지역변수 / 전역변수 ]
<!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>자바 스크립트 - 지역 / 전역 변수</title>
</head>
<body>
<script>
function getGrade(){ // 함수 정의
var kor = 95; // 지역 변수 선언 : 함수 블록 내에서만 사용 가능
kor2 = 1212; // 전역 변수 선언 : var이 없어서 전역 변수로 생성되었다.
} // getGrade 함수 블록
// 자바 스크립트는 리턴타입이 없을 수도 있다. ( 있을 수도 있다. )
var kor = 100; // 전역 변수 선언 : 어디에서든 사용가능
// 위의 kor은 지역변수이기 때문에, 재선언된 것이 아니라 새로운 변수로 생성된 것이다.
var kor2 = 12; // 전역 변수 재선언 : 어디에서도 사용이 가능
getGrade(); // 함수 호출
// 안에 있는 지역변수는 수명이 다했지만, 전역변수는 살아 남아 있기에 kor2는 1212로 다시 재선언된다.
document.write("국어 점수 : " + kor + "<br>");
console.log("국어 점수 : " + kor);
console.log("학번 : " + kor2);
// 콘솔 메소드를 살펴보면, Console.log(...data: any[]): void로 되어 있는 것으로 보아 가변인자로 설정되어 있는 것으로 보이기에 +가 아닌 ,로도 할 수 있다.
console.log("학번 : ", kor2, kor2, kor2);
// 콘솔 메소드는 ,로 작성하는 것이 좋다. (***)
// document도 ,로 작성하는 것이 가능하다.
// document.write 보다는 console.log를 사용하는 것이 브라우저에 좋다.
// 변수명은 유니크하게 작성하는 것이 좋다!
</script>
</body>
</html>
728x90
'KH 정보교육원 [ Java ]' 카테고리의 다른 글
| KH 65일차 - 자바 스크립트 ( 함수 / ES6 / 배열 (*****) ) (0) | 2022.05.30 |
|---|---|
| KH 64일차 - 자바 스크립트 (***) (0) | 2022.05.27 |
| KH 62일차 - 변이효과 / 애니메이션 / 반응형 웹 (*****) (0) | 2022.05.25 |
| KH 61일차 - CSS 기본 다지기 7 ( 그림자 / position / 레이아웃 ) (***) (0) | 2022.05.24 |
| KH 60일차 - CSS 기본 다지기 6 ( 선택자 및 박스모델 ) (*****) (0) | 2022.05.23 |
댓글