JavaScript & CSS & HTML

[Java Script] 내가 보려고 만든 기초 핵심 내용정리

Rosie_dev 2021. 4. 13. 00:06

 

1. HTML 파일 내 설정 위치와 문서확인법

 

별도 파일을 생성하지 않고 html 에서 파일 생성시 자바스크립트는 css 와 마찬가지로 임베디드 방식의 <head> 태그 내에서 처리할 수 있다. 마찬가지로 별도 파일을 생성하는 경우 link 를 통해 연결하면 된다. 

 

window.onload=function(){} 을 사용해서 웹 브라우저가 열렸을 때 어떤 것을 실행해서 보여줄 것인지를 확인한다. 웹의 뼈대는 <body> 태그 내에 HTML 로 구성하고 추가로 자바스크립트에서는 .html() 등을 사용해서 태그를 넣을 수 있다.

 

+

작성을 하면서 원하는 결과 값이 나오는지 확인하는 과정이 필요하기에 console.log() 또는 alert() 를 띄워서 확인한다.

오류 발생시에는 실행된 웹페이지에서 F12 를 보면 개발자도구 source 에서 버그 확인이 가능하다.

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!DOCTYPE html>
<html>
 
<head>
<meta charset="UTF-8">
<title>제목</title>
<style type="text/css"></style>
 
<script type="text/javascript">
   window.onload = function() {
        console.log("Hello,world!"); 
        alert("Hello,world!");
   } 
</script>
</head>
 
<body>
</body>
 cs

 

 

2. 타입의 설정, typeof()

 

변수의 타입을 설정할 때, java 에서는 타입별 표기가 다르고 배열은 int[] 이렇게 표기했지만, 자바스크립트에서는 모두 var 변수명 으로 작성이 가능하다. (배열포함)

변수를 변경할 수 없는 상수와 같은 개념이 있는데 let 변수명 으로 작성가능하다. 동일 변수명 설정불가!

 

그리고 변수 타입확인은 typeof() 로 가능하며, 결과값은 Number, String, Undefined, NaN, Function 등으로 나타난다.

 

 

3. 함수 선언하는 세 가지 방법

 

1번 → <script> 태그 내 에서 변수를 선언하는 함수 표현식

2번 → <script> 태그 밖에서 함수를 만드는 함수 선언식

3번 → 간단한 방식의 코드 제공을 위해 사용되는 람다표현식

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<script type="text/javascript">
   // 1번
   var plus1 = function(n,m){return n+m};
   } 
    
   // 2번 호출
   plus2 (n,m);
 
   // 3번
   let plus = (n,m) => {return `${n+m}`}
</script>
 
// 2번
function plus2 (n,m){
    return n+m;
};
 
</head>
 cs

 

 

4. 선택자 잡아오기, HTML 엘리먼트 요소 가져오는법 그리고 선택자 태그에 요소 넣는 법

 

가져올 태그의 name, id, class, tag 명으로 각각 가져올 수 있는데, 여기서 Element"s" 인지 그냥 Element 인지에 주의하자.

 

1
2
3
4
5
6
window.onload = function(){
    var nameVar = document.getElementsByName("name");
    var idVar = document.getElementById("id");
    var classVar = document.getElementsByClassName("class");
    var tagVar = document.getElementsByTagName("tag");
}
 cs

 

선택자 태그에 요소를 자바스크립트를 이용해서 넣기 위해서는 .innerHTML 또는 .innerText 를 사용하는데, .innerHTML 을 사용하면 더 광범위하게 사용할 수 있기 때문에 .innerHTML 을 사용하는 것이 적합하다.

 

 

 

5. 클릭이벤트 생성하기

 

1
2
3
test.onclick = function(){};
 
test.addEventListener("click",function(){});
 cs

 

이벤트 생성하는 방법으로 바로 이벤트(click, dbclick 등)를 이벤트소소(test) 뒤에 설정해주는 방법과 EventListener 를 이용하는 방법 2가지가 있다.

 

+

체크박스의 체크여부는 선택자.checked() 를 사용해서 true, false 로 알 수 있다.
select 태그의 이벤트는 click 이 아니라 change 이다.

 

6. Array

 

자바스크립트에서 <li> 와 같이 여러 행의 태그를 넣어줘야 하는 경우는 어떻게 해야 할까?

이 때 사용되는 것이 배열명.forEach() 문이다. 배열명.forEach(function(item, index, array){}); 으로 작성하는데 예시는 다음과 같다. 일반 for문과 동일하게 사용이 가능하며, str 이라는 문자열 변수로 받아서 HTML 의 해당 태그에 Array 값을 삽입해준다.

 

1
2
3
4
5
6
7
8
var programming = ["JAVA","JAVA SCRIPT","ORACLE"];
 
programming.push("JQUERY");
 
str="";
programming.forEach(function(item, index, array){
   str += "<li>"+array[index]+"</li>"
});
 cs

 

배열명.push() → 배열의 마지막에 () 안의 요소를 넣어주고 배열의 길이를 반환

배열명.pop() → 배열의 마지막 요소를 제거하고 마지막 요소를 반환

배열명.unshift() → 배열의 맨 처음에 () 안의 요소를 넣어주고 배열의 길이를 반환

배열명.shift() → 배열의 맨 처음에 () 안의 요소를 제거하고 그 요소를 반환

배열명.splice(start,0,element) → 배열의 특정위치에 요소추가

배열명.splice(start,deleteCount) → 배열의 특정위치에 요소부터 개수만큼 삭제

배열명.join() → 배열을 하나의 문자열로 만들기

 

배열명.indexof(찾을 value 값, 출발 index 번호) → 출발 index 에서 찾고자 하는 값을 찾았을 때의 index 값을 반환

배열명.lastIndexof(찾을 value 값, 출발 index 번호) → 출발 index 부터 역순으로 검색하여  찾고자 하는 값을 찾았을 때의 index 값을 반환

찾지 못한 경우에는 둘 다 -1 을 반환한다.

 

배열명.substring(index1, index2) → 배열의 index1 부터 index2 앞까지만 추출

배열명.substr(index1, 글자수) → 배열의 index1 부터 글자수만큼 추출

 

문자열을 배열로 만들기 위해서는 아래와 같이 문자열.split(구분자); 로 나타낸다.

 

1
2
3
var programming = "JAVA,JAVA SCRIPT,ORACLE";
 
var programArr = programmin.split(",");
 cs

 

+

배열의 요소는 객체로도 받아올 수 있다.

배열의 요소를 나타낸 태그의 값을 다시 감추는 방법은  .innerHTML = ""; 또는 .style.display = "none"; 그리고 .hide(); 로 감출 수 있다.

 

7. 내장 메서드의 사용

 

[ Date ]

날짜와 시각은 Date 함수를 객체로 만들어서 사용한다. + 자바 Date 기능과 유사

시간을 이용해서 timer 를 만들 때에는 자바스크립트에 내재된 setTimeout, setInterval 을 이용한다. 타이머 중지 기능은 clearTimeout 을 이용한다.

 

1
2
3
4
5
6
// 현재시각을 a라고 하자
// 1000 은 1 밀리초를 의미
 
setTimeout('a',1000);
 
setInterval(function(){a}, 1000);
 cs

 

[ URI ]

문자열을 인코딩하기 위해서는 encodeURI 를, 다시 원래대로 되돌리기 위해서는 decodeURI 를 사용한다.

 

1
2
var newString = encodeURI(string);
var originString = decodeURI(newString);    
 cs

 

[ String ]

문자열.toLocalString('en'); 

문자열인 임의의 수에서 toLocalString('en') 의 요소인 'en' 영어권 국가의 숫자표기방식을 따른다는 말이다.

 

[ Math ]

Number 형 함수에 대해서 내장 메서드 Math 를 사용할 수 있다. Math 객체에서 알아둘 메서드는 abs(), ceil(), floor(), max(), min(), round(), random, trunc() 가 있다. 

 

 

8. form 태그의 활용

 

form 태그를 자바스크립트에서 getElementById("id") 대신에 document.(form의 name) 을 변수로 설정해서 사용할 수 있다.  document.(form의 name) 뒤에 .태그 name 으로 받는다.

 

이하 코드에서 살펴보면 form 이라는 변수로 form 을 받아와서 userid 라는 이름의 태그의 값을 userid 로 만든 것을 알 수 있다.

 

1
2
var form = document.registerForm;
var userid = form.userid.value;
 cs

 

 

9. 정규표현식

 

 

10. window 와 alert

 

기본이 되는 alert(); 는 경고나 alert 팝업이 뜨도록 설정하는 메서드이다.

window.onload() 는 실행시 바로 보이는 부분을 설정하는 메서드이다.

window.open() 은 팝업창을 띄우는 것으로 win.document.writeln(); 을 사용해서 작성가능하다.

 

 

'JavaScript & CSS & HTML' 카테고리의 다른 글

[JS] owl carousel 문제 해결하기  (0) 2021.09.29
[JS] 모달창 이슈 해결하기  (0) 2021.09.27
[Jquery] 내가 보려고 만든 기초 핵심 내용정리  (0) 2021.05.16
[HTML/CSS] 내가 보려고 만든 기초 핵심 내용정리  (0) 2021.03.30
[인강] HTML, CSS 기초  (0) 2020.12.09
댓글