오늘은 Java Script의 function, event에 대해서 공부해보겠습니다
| 목차 | |
| 1. | 설정 |
| 2. | let |
| 3. | function |
| 4. | event |
| 5. | operators |
| 6. | 느낀 점 |
1. 설정
- VSCode에서 파일 생성하고 파일명 뒤에 .js를 붙입니다
- 웹 사이트에서 F12를 누른 후 console에서 출력된 값과 Error를 찾을 수 있습니다
2. let
- Html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 자바 스크립트 파일 연결 -->
<script src="01_let.js"></script>
<script> // 자바 스크립트 안(주의)
console.log("head 태그 안 자바 스크립트 작성")
</script>
<style>
/* css영역 */
</style>
</head>
<body>
<script>
// 자바 스크립트 안 (주의)
console.log("body 태그 상단 자바 스크립트 작성")
</script>
<h1>자바 스크립트 사용법</h1>
<ol>
<li><script> 작성 </script> </li>
<li>파일명.js 파일을 만들어서 코드 작성 후 src 경로로 연결</li>
<li>hearder 안에도 script 작성가능 (사용시 주의)</li>
<li>body 태그 내 가장 하단에 script를 위치시켜 작성 (가장 많이 사용)</li>
<li>마지막 끝처리 ; (필수사항은 아님.)</li>
</ol>
<!-- 자바 스크립트 파일 연결 -->
<script src="파일연결.js"></script>
<script>
// 직접작성(일반적)
console.log("body 태그 상단 자바 스크립트 작성")
</script>
</body>
</html>
- Js
/*
주석 외부파일 자바 스크립트
*/
console.log("외부파일 자바 스크립트 작성")
function mySecondFunction(){
console.log("두 번째 함수 외부 let.js 파일에 위치")
}
▷ 출력
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>자바 스크립트의 변수</h1>
<ul>
<li>값을 담고 있는 메모리 공간의 이름</li>
<li>java => 자료형 변수명 (int, double, float, long ... 8개의 자료형)</li>
<li>자바 스크립트는 변수를 선언하는 역할만 함.(자료형이 없음)</li>
<li>var(비권장), let, const</li>
<li>var 변수의 중복선언이 가능</li>
<li>
var a = 10;
var a = [10,20,30]; => 가능
</li>
<li>
let은 중복선언 불가능, 재할당은 가능
자바에서 사용되는 지역변수의 개념
</li>
<li>
let name = '홍길동';
name = '김영이'; => 재할당 가능 o
let name = '박순이'; => 재선언 불가능 x
</li>
<li>
const : 중복선언 불가능, 재할당도 불가능
const name = "홍길동";
name = "김영이"; => 재할당 불가능 x
</li>
<li>const : 고정된 값을 사용하는 규칙, 객체, 엘리먼트 정의시 사용</li>
<li>
스코프(scope) : 사용범위(변수의 사용범위)
{ } 안에서만 사용가능
스코프를 벗어나면 재선언 가능
</li>
</ul>
<script>
// 변수 선언
// camelCase : java, c에서 주로 사용 / JS에서도 사용
// 변수명으로 선언할 값이 여러 단어를 복합한 값일 경우
// myFirst
// 자바스크립트에서 문자값 '', "" 둘 다 가능 (짝은 맞춰야 함.)
// 변수 안의 문자는 '' 일반적
let myFirst = 'hong';
console.log(myFirst);
myFirst = 'kim';
console.log(myFirst);
// 선언없이 변수 사용 가능(java, C는 불가능)
// 선언없이 변수를 사용하면 그 변수는 전역변수로 사용되어 영향을 미치므로
// 가급적 사용X
mySecond = 100;
console.log(mySecond);
/*
자바에서는 문자열 => "문자열로 인식", char ch = 'c'; '한 문자만 가능'
자바 스크립트의 문자열
"문자열로 인식" => 큰따옴표(더블 쿼테이션)
'문자열로 인식' => 작은따옴표(싱글 쿼테이션)
`문자열로 인식` => 백틱(자주 사용함 특별한 기능이 있음)
*/
// 변수명은 숫자로 시작할 수 없음
// 상수 : 한 번 선언 시 값을 변경하지 않고 사용 => const
// 상수는 대문자로 선언
const MY_NAME = 'HONG';
console.log(MY_NAME);
// MY_NAME = 'KIM'; error
// typeof : 해당 변수의 타입을 확인
console.log(typeof myFirst);
// 백틱 : `` 내부에 변수명을 삽입하여 사용 가능. ${변수명}
console.log('내 이름은' + myFirst + "입니다.");
console.log(`내 이름은 ${myFirst}입니다.`);
// 이름, 나이, 주소의 변수 선언 후 값을 넣고
// 콘솔에 출력 내 이름은 OOO, 나이는 OO, OOO에 살고 있습니다.
let myName = 'AAA';
let myAge = 'BB';
let myAddress = 'CCC';
console.log('내 이름은 ' + myName + ', 나이는 ' + myAge + ', ' + myAddress + '에 살고 있습니다.')
console.log(`내 이름은 ${myName}, 나이는 ${myAge}, ${myAddress}에 살고 있습니다.`)
</script>
</body>
</html>
▷ 출력
◈ date type
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>데이터 타입 : 변수나 상수에 할당할 수 있는 값의 종류</h1>
<ul>
<li>숫자 : Number => 정수, 실수, NaN(not a Number : 숫자가 아님)</li>
<li>문자 : String => "", '', `` 감싼 데이터</li>
<li>불리언 : Boolean => true / false</li>
<li>
객체 : Object => 1개 이상의 데이터가 특정 구조를 가지고 있는 형태
{키 : 값} {} : 아무값이 없어도 1개의 객체로 취급
</li>
<li>
배열 : Array => [1,2,3] 형태의 집합
(java/python list와 같은 형태 index(순서) length(길이)가 있음)
</li>
<li>알 수 없는 값 : null => 인지가 안 된 상태</li>
<li>미지정된 값 : undefined => 선언은 되었지만 값이 할당되지 않음</li>
</ul>
<script>
let num = 123;
let str = 'string';
let bool = true;
let obj = {name:'hong'}; // 많이 사용
let obj2 = new Object(); // 자바 스크립트에서 제공하는 내장 객체
let arr = [1,2,3,4]; // 많이 사용
let arr2 = new Array();
let undi = undefined;
let ne = null;
let undi2;
console.log(undi2);
console.log(obj);
console.log(typeof obj);
console.log(obj2);
console.log(arr);
console.log(typeof arr);
</script>
<ol>
<li>
기본자료형 : 값이 메모리에 주소값을 가르키는 곳에 직접 할당이 되어있는 값
number, boolean, string(참조자료형이지만 편의상 기본자료형과 같이 사용)
</li>
<li>
참조자료형 : 값이 저장되어 있는 주소를 할당(간접할당)
string, array, object, function, null, undifind
</li>
<li>
== 같다(값만 비교) != 같지 않다
</li>
<li>
=== 같다(값과 타입이 같은지 비교) !== 같지 않다
</li>
<li>
삼항연산자 => (조건식) ? true : false
</li>
</ol>
<script>
let num1 = '10'
let num2 = 10;
console.log(num1 === num2 ? "t" : "f");
</script>
</body>
</html>
▷ 출력
3. function
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>함수(function) : 특정 기능을 수행하기 위해 작성한 코드</h1>
<ul>
<li>함수는 호출되어야만 실행(자바의 method와 같은 의미)</li>
<li>자바는 class => method 생성</li>
<li>자바 스크립트는 어디서든 function 생성 가능</li>
</ul>
<ul>
<li>function이라는 키워드를 사용하여 정의</li>
<li>
function 함수명(파라미터){
로직 작성;
return 값;
}
</li>
<li>
함수명 : 기능을 함축하는 의미로 작성
</li>
<li>
파라미터(매개변수) : 선택적으로 작성(없어도 ()는 있어야 함.)
</li>
<li>
자바 스크립트에서는 파라미터의 자유도가 높아 다양한 형태로 사용가능.
</li>
<li>
return 함수 종료의 역할과 동시에 특정 값을 호출한 위치로 반환
</li>
</ul>
<!-- <script>
console.log('다른 자바 스크립트 영역');
myFirstFunction(); 선언되기 전에 호출함 error
</script> -->
<!-- 함수 호출 전에 미리 링크 연결 -->
<script src="01_let.js"></script>
<script>
// 함수 선언 전 호출
console.log("myFirstFunction 함수 선언전 호출")
myFirstFunction();
// 함수 정의
function myFirstFunction(){
console.log("내가 처음 만든 함수 body 하단 스크립트 위치")
}
// 호출
myFirstFunction();
// let.js안의 함수 호출
mySecondFunction();
// sum 함수를 생성
// 파라미터 숫자 2개를 받아서 콘솔에 두 수의 합계를 출력하는 함수
function sum(a, b){
console.log(`두 수의 합 : ${a + b}`);
}
sum(10, 20);
function sum1(a, b){
return a+b;
}
let num1 = 10
let num2 = 20
let s = sum1(num1, num2);
console.log(s);
</script>
<!-- 이 위치에서는 함수 인지가 안 됨. -->
<!-- <script src="01_let.js"></script> -->
<script>
console.log('다른 자바 스크립트 영역');
myFirstFunction();
</script>
</body>
</html>
▷ 출력
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>함수의 파라미터 / 리턴 타입 사용</h1>
<ul>
<li>파라미터 : 함수 내부에서 사용될 값을 외부에서 전달 받는 값</li>
<li>파라미터의 개수는 제한이 없으나, 많으면 관리가 힘듦</li>
<li>파라미터의 타입도 제한이 없음 전달된 타입을 그대로 사용</li>
<li>
파라미터의 변수명은 외부 변수명과 같아도 상관없고, 달라도 상관없음
함수 내부에서 사용될 값이므로 함수 내부의 지역변수와 이름이 다르기만 하면 됨
</li>
<li>
return의 유무에 따라 값을 리턴할 수 있고, 종료 시점도 결정
</li>
</ul>
<script>
let myName = "홍길동"; // js 스크립트 안에서의 변수
function callName(name){
// 파라미터명 : name
let yourName = "김영이"; // function 내부 변수
console.log(`나의 이름은 : ${myName}`); //외부변수
console.log(`너의 이름은 : ${yourName}`); //내부변수
console.log(`친구 이름은 : ${name}`); //파라미터
}
callName("박순이");
console.log(`나의 이름은 : ${myName}`); //외부변수
// console.log(`너의 이름은 : ${yourName}`); //내부변수
console.log(`친구 이름은 : ${name}`); //파라미터
// return이 있는 함수는 return 값을 받을 변수가 필요함.
function sum(a, b){
return a+b;
}
let result = sum(10,20);
console.log(result);
// 표현식 함수
const myFunc = function(name2){
return "Hello~!! " + name2;
}
let result2 = myFunc('hong');
console.log(result2);
// 화살표 함수(Arrow Function)
const arrowFunc =(param1, param2) => {
return param1 + param2;
}
let arrowResult = arrowFunc(100,200);
console.log(arrowResult)
const arrowFunc2 = (p1, p2) => (p1 + p2);
let arrowResult2 = arrowFunc2(1000, 2000);
console.log(arrowResult2);
const arrowFunc3 = (p1, p2) => {
console.log(p1 + p2);
}
arrowFunc3(3, 5);
</script>
</body>
</html>
▷ 출력
◈ object
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>Object : 객체</h1>
<ul>
<li>Object : 데이터의 구조를 상세 특징으로 표현하려는 형식</li>
<li>
const로 선언하는 것이 일반적
: 객체의 구조를 보호. 지속력있게 유지 및 확보하기 위함
</li>
<li>{키(속성명) : 값, 키 : 값, 키 : 값, ...}</li>
<li>속성명 : key, 값 : value</li>
<li>같은 Object안의 같은 속성명은 불가능 (key는 중복불가능)</li>
<li>객체 내부에서 속성값으로 사용될 수 있는 데이터는 제한이 없다</li>
<li>
객체의 속성값으로 익명함수를 정의 => 메서드라고 부름
메서드의 이름은 속성명이 됨
</li>
</ul>
<script>
const car={
name: 'myCar',
year: 2024
};
console.log(car);
// car = 100; 재할당 불가능
let myCar={
name: 'mySuperCar',
year: '2024'
}
console.log(myCar);
// let으로 객체 정의가 가능은 하지만 일반적이지 않음.
// 객체의 기능이 사라짐. - 객체를 활용하려고 했던 목적이 사라짐
myCar = 100;
console.log(myCar);
console.log("-----------------------");
const me = {
name : 'AAA',
age : 20,
address : 'BBB',
isDeveloper: true,
'hobby':'coffee',
'myFavor':'game',
avail:{
year : 2020,
title : 'javaScript',
ver : 'ES6+',
profect: 'Back-End',
intro:function(title, ver){
console.log(`ex1) ${title} : ${ver}`); //함수 내부에 해당 변수가 없음.
console.log(`ex2) ${this.title} : ${this.ver}`);
console.log(`ex2) ${me.avail.title} : ${me.avail.ver}`);
}
}
};
console.log(me);
console.log(me.name);
console.log(me.address);
console.log(me.avail.title);
console.log(me.avail.intro);
me.avail.intro('java', 'JDK11'); // 함수를 실행
console.log("---------------");
console.log(me['address']);
console.log(me['hobby']);
console.log(me['avail']['title']);
me['avail']['intro']('java', 'JDK8');
let keyName = 'name';
console.log(me.keyName); // undefined
console.log(me['keyName']); // keyName이 변수값으로 들어올 경우 사용
// 객체 생성
// 좋아하는 가수의 인적사항, 가수의 플레이리스트 3곡
// 이름, 나이, 주소, 플레이리스트 객체, 함수(p1, p2, p3) => console에 출력
// 출력
// 이름(나이), 주소
// 가수의 노래 : 플레이리스트 3곡
// 함수 실행
const musician ={
name : 'ChungHa',
age : 28,
address : 'Seoul',
playList :{
first : 'Roller Coaster',
second : '벌써 12시',
third : 'Play',
},
jukebox : function(first, second, third){
console.log('가수의 노래: ' + first + ', ' + second + ', ' + third)
console.log(`가수의 노래: ${this.first}, ${this.second}, ${this.third}`)
}
}
let p1 = "why don't you know";
let p2 = "Love u";
let p3 = "snapping";
console.log(`${musician.name}, ${musician.age}, ${musician.address}`);
musician.jukebox(p1, p2, p3)
</script>
</body>
</html>
▷ 출력
4. event
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.s{
background-color: bisque;
color: grey;
}
</style>
</head>
<body>
<h1>이벤트 객체 : 전역객체로서 모든 태그에 객체를 참조시킬 수 있다.</h1>
<ul class="uls">
<li>
a tag / button tag에 이벤트를 참조시켜 사용
클릭에 대한 반응을 기대할 수 있게 만드는것이 일반적
</li>
<li>
a tag는 자체 이동 (href 속성)이 구현
별도로 이동을 막는 코드가 필요
</li>
<li>
객체에 이벤트를 부여하는 방식이 크게 3가지
</li>
<li>
각자 목적과 작동방식이 다름
</li>
</ul>
<ul class="uls">
<li>
화면에 출력 영역을 document(영역 / 객체)라고 한다.
</li>
<li>
DOM 영역
</li>
<li>
tag : html element, 속성은 attribute, 일반 텍스트 textNode라고 함
</li>
<li>
html 객체를 가져올 때
id 속성으로 가져오기 : getElementById('idName')
class 속성으로 가져오기 : querySelector('selector') => . #
</li>
<li>
html 화면에 출력할 때
html element로 출력 : innerHtml라는 property를 사용
일반 텍스트로 출력 : innerText라는 property를 사용
</li>
</ul>
<button onclick="eventFun()">클릭해보세요.</button>
<button onclick="eventFun2()">클릭해보세요.</button>
<button onclick="eventFun3('세 번째 버튼입니다.')">클릭해보세요.</button>
<br>
<button id="btn">button</button>
<button id="test">test</button>
<h1 id="printResult"></h1>
<script>
const printResult = document.getElementById('printResult');
console.log(printResult);
//onclick = 하나의 이벤트만 등록가능.
const test = document.getElementById('test');
test.onclick = function(){
alert("Hi~!!");
}
//button #btn 객체 가져오기
document.getElementById('btn').addEventListener('click', ()=>{
// addEventListerner 씌우는 방법
// 여러 개의 이벤트를 등록할 수 있음. (자주 사용)
alert('button click !!');
})
function eventFun(){
printResult.innerText='첫 번째 버튼을 클릭했습니다.';
}
function eventFun2(){
printResult.innerHTML=`<span class="s">두 번째 버튼을 클릭했습니다.</span>`;
}
function eventFunc3(param1){
printResult.innerHTML=`<span class="s">${param1}</span>`;
}
const ul = document.querySelectorAll('.uls');
console.log(ul);
console.log(ul[0]);
console.log(ul[1]);
</script>
</body>
</html>
▷ 출력
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- 화면에 버튼을 생성하여 버튼을 클릭하면 내 이름이 h1태그에 표시 -->
<button id="btn">button</button>
<h1 id="h1"></h1>
<script>
const btn = document.getElementById('btn');
const h1 = document.getElementById('h1');
btn.addEventListener('click', ()=>{
h1.innerText='ABC';
})
</script>
</body>
</html>
▷ 출력
5. operators
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>연산자</h1>
<ul>
<li>산술연산자 : 사칙연산(+ - * /), 나머지(%), 제곱(**) 등..</li>
<li>
대입연산자 : = += *= -= 자체값을 연산하여 다시 대입
a = b : a 변수에 b 변수의 값을 대입하라
a += b : a 변수에 a + b 값을 대입하라 a = a + b
</li>
<li>
비교연산자 : 이상(>=), 이하(<=), 초과(>), 미만(<), 같다(==), 다르다(!=)
비교연산자의 결과는 항상 true / false
</li>
<li>
논리연산자 : and(&&), or(||), not(!)
</li>
<li>
증감연산자 : ++(1씩 증가) --(1씩 감소)
</li>
<li>
비트연산자 : 웹 분야에서는 활요도가 낮음.
</li>
<li>
삼항연산자 : (조건식) ? true : false
</li>
</ul>
<script>
let kor = 90;
let eng = 100;
let math = 78;
let sum = kor + eng + math;
console.log(sum);
let avg = sum / 3;
// 각 점수를 표시하고, 세 점수의 합계하고 평균을 출력
console.log(`국어: ${kor}, 영어: ${eng}, 수학: ${math}, 합계: ${sum}, 평균: ${avg}`);
</script>
</body>
</html>
6. 느낀 점
Java와 Java Script가 서로 다른 언어라는 것은 알고 있었지만 기본적인 용어부터 확실히 다른 점이 이해하는 것에서 어려움을 느꼈고 Html, Css를 번갈아가면서 같이 코딩을 하다보니 헷갈리기도 했다. 꼭 복습을 여러 번 해야할 것 같다.
'Front-end > Js' 카테고리의 다른 글
| Js 기초(class)- AWS 풀스택 과정 21일차 (0) | 2024.08.12 |
|---|---|
| Js 기초(set, map)- AWS 풀스택 과정 20일차 (0) | 2024.08.09 |
| Js 기초(array)- AWS 풀스택 과정 19일차 (0) | 2024.08.08 |
| Js 기초(if, for)- AWS 풀스택 과정 18일차 (0) | 2024.08.07 |
| Js 기초(input, string)- AWS 풀스택 과정 17일차 (0) | 2024.08.06 |