함수(function)는 혼자 덩그러니 놓여진 메소드,
메소드(method)는 어딘가에 포함된 함수이다.
이 둘은 위치차이만 있고 같은 역할을 한다고 볼 수 있다.
둘 다 코드를 보관하고 원할 때 실행할 수 있는 영역이다.
1.자바는 함수가 없다. 자바는 클래스 밖에 뭘 만들 수가 없다. 때문에 클래스 안에 감싸져있는 메소드 밖에 없다.
2.자바스크립트 함수에는 접근제한이라는 개념이 없다. 접근제한 키워드인 private/public이 없다.
자료형을 따로 구분하지 않는다(int, string 등) 그냥 var(변수variable)로 통칭한다. 때문에 만약 정수를 표현할 때
int a라기보단 var a라기보단, function a 라고 한다.
자바에서 메소드는
class TestClass{
public void test(){ -> function test(){
System.out.println("TEST!"); -> console.log("TEST!");
}; -> };
};
이렇게 생겼다. 때문에 아래에 그냥 test(); test(); 를 하면 콘솔창에 바로 입력이 된다.
3.매개변수도 형태가 작성될 필요가 없다.
만약 정수형 변수 두개를 나타낼 때,
function test(int a, int b){ 를 2번 특징과 같이 나타내면 function test(var a, var b){ 이다.
하지만 3번 특징으로 인해 function test(a, b){ 데이터를 2개 받는 함수는 이렇게만 나타내면 된다.
만약
function test(a, b){
console.log("a="+a);
console.log("b="+b);
}
test(); 하면 a,b값이 undifined로 나온다.
하지만 test(10, 20); 으로 하면 a=10 b=20으로 값이 나온다.
또한 자바와 다른게,
function test(a){ ---(1)
console.log("a="+a); ---(2)
function test(a, b){ ---(3)
console.log("a="+a); ---(4)
console.log("b="+b); ---(5)
}
test(10);
하면 (3)의 a만 10으로 나타나게 된다. 오류도 뜨지 않는다. 이유는,
위에 (1),(2)식은 없는 식이 되어버리기 때문이다.
같은 이름의 함수를 만들 생각을 하면안된다.
이제는 함수 활용에 대해서 알아보자.
자바스트립트는 최종 목표가 HTML태그와 연계하는 것이다.
이를 위해 함수를 만들고 HTML태그의 특정 상황에서 실행되도록 만든다.
-onclick : 클릭했을 때
-oninput : 입력했을 때
-onload : 로딩이 완료되었을 때
class가 input인 태그 한개를 선택하는 구문 : var tag = document.querySelector(".input");
HTML이 기본골격이고, CSS로 꾸미고 Javascript가 기능을 채우며 보조해주는데
<script>
function test(){
console.log("Hello");
}
</script>
</head>
<body>
<input type="button" value="눌러">
</body>
가 있다고 보면 , button을 만들었으니 눌렀을때 Hello가 나오게 만들어 볼것인데 이것을 이벤트 바인딩이라고 한다. 현재 버튼을 이용하여 기능을 부여하는 것을 해보게 될텐데(골격+기능), 이때 필요한 것은 onclick이라는 기능이 있다.
<input type="button" value="눌러" onclick="test();"> 이렇게 하면 필요로 하는 기능이 부여된다.
tag라는 변수를 통해 대상 태그의 속성을 추가 또는 수정할 수 있다.
tag.placeholder뿐만아니라
tag.value = "hello",
tag.type = "date"도 있다.
<script>
function test(){
var tag = document.querySelector(".input");
tag.placeholder="안녕";
}
</script>
</head>
<body>
<input type="button" value="눌러" onclick="test();">
<input type="text" class="input">
</body>
'JAVASCRIPT' 카테고리의 다른 글
| [JAVASCRIPT#07]자바스크립트 이미지 확대 축소 및 응용 (0) | 2020.12.23 |
|---|---|
| [JAVASCRIPT#06]비밀번호 검사 (0) | 2020.12.23 |
| [JAVASCRIPT#05] 글자 복사 함수 (0) | 2020.12.22 |
| [JAVASCRIPT#03]자바스크립트와 자바의 차이 (0) | 2020.12.22 |
| [JAVASCRIPT#02]Visual Studio Code 설정 (0) | 2020.12.16 |