ECMA Script
- jQuery 사용 형태 + Javascript 사용형태 로 바뀐 것
- ES5 ~ ES6 사용
- ES15까지 나옴 (ES7에서 많이 바뀜)
- 일반 script보다 빠름
- <script></script> 는 body 아래 작성
👀 ES6 ~ => class 함수를 사용하여 모든 메소드를 컨드롤하는 형태 구조
⚡ 일반 class형태
<body> <input type="button" value="클릭" id="btn"> </body> <script> document.querySelector("#btn").addEventListener("click",function(){ z.ccc(); }); //일반 class형태 class abc{ aaa(){ console.log("함수aaa"); } bbb(data){ console.log("bbb 데이터 : " + data); } ccc(){ alert("테스트 진행 !"); } } let z = new abc(); //얜 class 아래 있어야함 z.aaa(); //함수aaa z.bbb("홍길동"); //bbb 데이터 : 홍길동 </script>
⚡ 선언식 class형태
<body> <input type="button" value="클릭" id="btn"> </body> <script> document.querySelector("#btn").addEventListener("click",function(){ new zzz().abc(); //선언식 형태 test 출력 }); var zzz = class bbb{ abc(){ console.log("선언식 형태 test"); } } console.log(zzz.name); //bbb 출력 (name : 해당 변수의 class명 출력시킴) </script>
👀 extends 있음!!
⚡ extends - class상속
<script> class box{ abc(data){ //가상변수 (var 안써도 됨) - 메모리를 잡아먹지 않음(속도빠름) this.msg = data + "님 환영합니다~" return this.msg; } } var z = new box(); var zz = z.abc("강감찬"); console.log(zz); //강감찬님 환영합니다~ //해당 외부 클랙스를 extends를 이용하여 상속받음 class box2 extends box{ bbb(data2){ this.cs = data2; //가상변수 console.log(this.cs); //이순신 this.re = this.abc("유관순"); //상속받은 메소드 console.log(this.re); //유관순님 환영합니다~ } } var bx2 = new box2(); bx2.bbb("이순신"); var result = bx2.abc("홍길동"); console.log(result); //홍길동님 환영합니다~ </script>
'CLASS > HTLML,CSS,JS' 카테고리의 다른 글
| #11-3 / ES7 class 핸들링,constructor,get,set (0) | 2024.07.16 |
|---|---|
| #11-2 / ECMA Script (함수 사용법) - ES7 (1) | 2024.07.16 |
| #10-2 / js중급 - 키보드 이벤트 핸들링 (0) | 2024.06.11 |
| #10-1 / js중급 - 자식노드핸들링,시간함수 (0) | 2024.06.11 |
| #9 / html include (by php) (0) | 2024.05.30 |