1. JS 기본 문법 (작성 방식)
* 자바스크립트는 복잡한 무언가(주기적으로 내용이 갱신되는 기능이나 능동적인 지도, 변화하는 2D/3D 그래픽, 동영상 등)를 웹페이지에 적용할 수 있게 하는 스크립트 혹은 프로그래밍 언어.
1) inline 방식
<li onclick="alert('inline 방식!!!');">inline 방식</li>
2) 내부 작성 방식
// head에 작성
<script type="text/javascript">
function embeddedFunction(){
var doc = document.getElementsByTagName("li")[1];
doc.style.color = "red";
doc.innerHTML = "<strong>javescript가 html 문서(document)를 변화시켰다!!!</strong>";
}
</script>
// ...
// body에 호출
<li onclick="embeddedFunction();">내부 작성 방식</li>
3) 외부 *.js 방식
// 외부 파일에 작성
function fileFunction(){
window.alert("외부 js file에서 실행됨!!")}
// head 받아옴
<script type="text/javascript" src="폴더위치/위치/부를파일명.js"></script>
// body 호출
<li onclick="fileFunction();">외부 *.js 방식 (file)</li>
* window.onload()
위에서 아래로 순차적으로 실행되는 프로그래밍 작동 방식으로 인해 위치 때문에 오작동 일어나는 경우가 발생할 수 있다. 아래서 만든 태그를 위에서 먼저 사용할 수는 없는 것이다.
그렇기 때문에 자바스크립트 문서가 준비된 상황 이후에 발동하도록 하기 위해서 window.onload 메소드를 사용한다.
onload = function(){ ... }
window.onload = function(){ ... }
jQuery 에서는 $(function(){ ... }), $(document).ready(function(){ ... }) 로 사용할 수 있다.
2. 변수 선언하기 : val 변수명 = 값
1) 규칙 : 대소문자 구분, 영문, $, _ 로 시작할 수 있고 숫자로는 시작 불가. 키워드(예약어) 사용 불가.
2) 변수의 범위 : 전역변수(window 객체에 포함됨), 지역변수(함수나 객체 내부에 선언)
3) 타입 종류 : string, number, boolean, null, object, function
<head>
<script type="text/javascript">
var variable = 10; <!-- 전역변수 -->
function val01(){
variable += 5; <!-- 전역변수이므로 15가 됨 -->
document.getElementById("value01").innerHTML="<b style ='color:red; background:yellow;'>" +variable+"</b>";"
<!-- 이 문서에서.Id가 value01인 요소를 찾아서.HTML에 입력 = (빨간색 글자에 배경은 노란색) variable값 -->
</script>
</head>
<body>
<!-- ... -->
<button onclick="val01();">확인</button>
<p id="value01"></p>
<!-- ... -->
</body>
3. alert("내용 출력 (단순 대화창)")
1) 선택창이 있는 창 confirm
if(confirm("배경을 파란색으로 변환?")){alert("파란색으로 변환합니다.")}
else{alert("배경색을 없앱니다")}
2) 텍스트 박스로 입력을 받을 수 있고 선택창이 있는 창 prompt
var txt = prompt("좋아하는 과목을 선택해 주세요\n[1:python 2:html/css 3:javascript]", "3")
if (txt == 1){
alert("python 재밌죠!!!");
} else if (txt == 2) {
alert("문서 구조화 하고 스타일 지정 재밌죠!!!");
} else if (txt == 3) {
alert("아직 몇개 안해봤는데 벌써 재밌죠!!");
} else if (txt == null) {
alert("하나라도 좋아해 주세요ㅠㅠ");
} else {
alert("1이나 2나 3만 입력해 주세요ㅠㅠ");
}
4. 함수
1) 명시적 함수 : 이름이 있는 함수 (function 함수명(){ ... })
2) 익명 함수 (함수 리터럴 방식으로 만들어진 이름 없이 몸체만 있는 함수): var 변수명 = function(){ ... }
3) 즉시 실행 함수 function(){ ... }();
4) 외부 함수 : 외부함수(안에 내부함수). 함수를 포함하고 있는 함수.
function closureFunc(val){
var suffix = "님, 안녕하세요~";
function innerFunc(){
alert(val + suffix + "잘 부탁 드립니다.");
}//내부함수에서 외부함수의 값/기능 등을 쓸 수 있도록 하는 것을 'closure'라고 함
return innerFunc; //(괄호)없고 함수 이름만 써져 있음, 함수를 값으로 사용한 것 => 함수를 변수에 저장해놓고 func02를
//함수를 호출하지 않고 함수이름만 쓸 때=>함수 값 자체를 전달했다는 뜻, 함수가 값 자체로 저장되어 넘어갔다.
}
var closureTest01 = closureFunc("멀캠")
function closureTest02(val){
closureFunc(val)();
}
<!-- ... -->
<p onclick="closureTest01();">클로저: 외부함수에 접근 가능(변수 등)</p>
<p onclick="closureTest02('멀티캠퍼스');">연습</p>
5. JS 조작하기
0) console.log(기록을 보고싶은 값) : object나 array, variable 모두 콘솔창으로 확인 가능
1) 조건문 if
if (조건) { 실행문 } else if (조건) { 실행문 } else { 실행문 }
2) 특정 값으로 이동 swich
switch (조건) {
case "조건에 해당하는 값1" : 실행문; (break;)
case "조건에 해당하는 값2" : 실행문; (break;)
case "조건에 해당하는 값3" : 실행문; (break;) ...
default : 조건에 해당하지 않는 경우의 실행문 }
3) 횟수반복문 for
for (var i=0; i<x.length; i++){실행문}
4) 조건반복문 while
while (i<x.length){실행문 ... i++}
* 증감 연산자 : 변수++ (변수값 리턴하고 +1연산), ++변수 (+1연산 먼저하고 변수값 리턴)
6. 객체 object
1) property : 속성
2) function (method) : 기능
3) this : 객체 내부의 메서드나 속성을 정의
4) prototype : 객체의 확장
* 객체 생성은 마치 설계도를 바탕으로 만들어진 정형화된 물건.
// 함수
function objTest(){
//객체 생성
obj01.prn();
}
function object01() {
this.name01="홍길동"; // this: 파이썬의 class에서의 self와 유사
var name02 = "hong =gd";
this.getName02 = function(){
return name02;
}
}
// ...
// 함수 호출
<button onclick="objTest();">확인</button>
6. string (문자열)
1) 문자열 합치기 : 문자열+문자열 = 문자열문자열 (나열)
2) 문자열이 섞인 숫자 합산 : 숫자도 문자열 타입으로 반환됨. 나열 형식으로 합쳐짐
* 자동 형변환 : 10 == '10' (true). 10 === '10' (false)
(문자열 객체와 문자열) "멀캠" == new String("멀캠") (true). "멀캠" === new String("멀캠") (false)
3) 문자열 인덱스 찾기 : 문자열.indexOf(찾을문자열); 문자열.lastIndexOf(찾을문자열);
4) 문자열 추출 : 인덱스 찾고 나서 -> 문자열.substring(시작 인덱스, 끝 인덱스)
5) 문자열 나누기 : 문자열.split(분리 기준)
7. number (숫자)
1) 숫자 찾기 : isNaN(해당값) == true 면 숫자 아님.
2) 관련 함수
(1) Math.random() : 0 <= X < 1
(2) Math.floor() : 내림
(3) Math.round() : 반올림
(4) Math.ceil() : 올림
// 0 ~ 100
var hundred = Math.floor(Math.random() * 100)
// 10~100
var min = 10;
var max = 100;
var ran = Math.floor(Math.random() * (max-min) + min)
alert(ran);
// 1~46
var ranNum = Math.floor(Math.random() * 45 + 1)
alert(ranNum)
// 로또 생성해보기 (번호 중복되면 안됨!)+ random으로 만든 원 그리기
<body>
<button onclick="randomCircle();">랜덤 원 그리기</button>
<button onclick="circleArea();">원의 넓이/둘레</button>
<br>
원의 넓이 : <span id="area"></span>
원의 둘레 : <span id="len"></span>
<br>
<br>
<br>
<style>
#circle{
border: 1px solid red;
display: none;
}
</style>
<div id="circle"></div>
<script>
function randomCircle(){
var rnum = Math.floor(Math.random() * 200)
var circle = document.getElementById("circle")
circle.style.width = rnum + "px"
circle.style.height = rnum + "px"
circle.style.borderRadius = Math.floor(rnum/2) + "px"
circle.style.display = "block"
}
function circleArea(){
// Math.PI
// 원의 넓이 : pi r^2
var circleWidth = document.getElementById("circle").style.width
var rnum = circleWidth.substring(0, circleWidth.length-2) / 2
// circleWidth.split('px')[0]
var circleA = Math.floor(rnum*rnum*Math.PI)
document.getElementById("area").innerHTML = circleA
// 원의 둘레 : 2 r pi
var circleB = Math.floor(2*rnum*Math.PI)
document.getElementById("len").innerHTML = circleB
// alert(parseInt(circleWidth))
}
</script>
</body>원의 넓이 : 원의 둘레 :
8. date (날짜)
1) 생성
var date = new Date(); // Date 객체 생성
2) 함수
(1) date.toDateString() : Thu Jan 27 2022
(2) date.toLocaleDateString() : 2022. 1. 27.
(3) date.toLocaleString() : 2022. 1. 27. 오전 10:46:07
(4) date.toLocaleTimeString() : 오전 10:46:07
(5) date.getFullYear() : 2022
(6) date.getMonth() + 1 : 1
(7) date.getDate() : 27
(8) ["일", "월", "화", "수", "목", "금", "토"][date.getDay()] : 목
3) 경과 날짜 출력하기
<script>
function overDate(){
var dates = document.getElementById("dates").value;
var inputDate = document.getElementById("inputdate").value;
var date = new Date(dates);
date.setDate(date.getDate() + parseInt(inputDate));
document.getElementById("result").value = date.toLocaleDateString();
}
</script>
<h2>경과 날짜 출력하기</h2>
<label>지정 날짜</label>
<input type="date" id="dates" size="50">
<br>
<label>경과일</label>
<input type="number" id="inputdate">
<br>
<label>경과 후 날짜</label>
<input type="text" id="result" readonly="readonly">
<button>경과날짜</button>경과 날짜 출력하기
4) D-Day
<script>
function DDay(){
var dates02 = document.getElementById("dates02").value;
var inputDate02 = document.getElementById("inputdate02").value;
var nowDate = new Date(dates02);
var afterDate = new Date(inputDate02);
// getTim() milliseconds로 나옴 그래서 [1000(초로 변환)*60(분으로 변환)*60(시간으로 변환)*24(일단위로 변환!)]된걸 나눠주면 끝!
var resultVal = (afterDate.getTime() - nowDate.getTime()) / (1000 * 60 * 60 * 24);
document.getElementById("result02").value = resultVal;
}
</script>
<h2>D-Day</h2>
<label>시작 날짜</label>
<input type="date" id="dates02" size="50">
<br>
<label>종료 날짜</label>
<input type="date" id="inputdate02">
<br>
<label>남은 일수</label>
<input type="text" id="result02" readonly="readonly">
<button>남은 일수 구하기</button>D-Day
'코딩 어쩌구 > web' 카테고리의 다른 글
| [풀스택] jQuery (0) | 2022.01.30 |
|---|---|
| [풀스택] JavaScript (2) : DOM (0) | 2022.01.29 |
| [풀스택] HTML, CSS로 Layout 만들기 (0) | 2022.01.26 |
| [풀스택] CSS (0) | 2022.01.22 |
| [풀스택] HTML (0) | 2022.01.20 |
