본문 바로가기

JavaScript34

자바스크립트[기초] onclick 이벤트에 함수 대입 시 주의점 | 함수 호출과 함수 대입 시 다른점 input tag에 onclick 속성을 줘서 함수를 호출하고 있는 코드이다. /** 원본 코드 **/ script는 script 대로 html은 html 대로 깔끔하게 구분하고 싶어서 input tag onclick 속성에 함수를 호출하는 대신 btnPrint.onclick = printResult; 함수를 대입해주었지만 이 코드는 btnPrint를 찾을 수 없다며 오류가 나게 되는 코드이다 그 이유는 function() 블럭은 함수가 실행되기 전까지 건드려지지 않는 부분이지만 script 태그 안에 부분은 브라우저 실행 시 거치게 되는 부분이다 그래서 script tag 안 function() 블럭 밖에 있는 btnPrint.onclick = printResult; 코드는 실행 되게 되는데 프로그래밍.. 2022. 4. 19.
자바스크립트[기초] input tag | span tag input tag 에는 value라는 속성이 있어서 그 속성을 이용해 text를 바꿀 수 있는 반면 span tag 에는 value 속성은 없어서 innerText를 사용해서 text를 바꿔주면 된다 안녕하세요 2022. 4. 19.
자바스크립트[기초] parseInt parseInt는 숫자로 시작해서 문자로 끝나는 문자열에 한해서는 자동으로 숫자 뒤에 문자들을 잘라주기 때문에 따로 문자열 자르기를 하지 않아도 돼서 편리하다. var a = parseInt("12px"); console.log(a); //12 2022. 4. 19.
자바스크립트[기초] 함수의 가변인자 arguments 객체 https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Functions/arguments [참고] 자바스크립트는 데이터가 다 객체이기 때문에 매개변수 x, y는 값을 담는 역할이 아닌 그냥 값을 참조하는 이름일 뿐이다. 그래서 매개변수가 x, y 2개뿐일 때에도 document.write(add(14, 3, 25, 1, 2, "hello", "hi")); 를 통해 값을 아무리 많이 넘겨도 오류가 나지 않는다 넘겨진 객체들은 function 안에서 가변적으로 사용 할 수 있는 객체 arguments에 다 저장된다 그 객체들에 하나씩 접근하기 위해서는 arguments [index]를 통해 접근하면 된다. 2022. 4. 19.
자바스크립트[기초] JSON | JSON.stringify | JSON.parse JSON 클라이언트와 서버 간의 HTTP 통신을 위한 텍스트 데이터 포맷이다. 자바스크립트에 종속되지 않는 언어 독립형 데이터 포맷이다. JSON은 자바스크립트의 객체 리터럴과 유사하게 키와 값으로 구성된 순수한 텍스트이다. JSON의 키는 반드시 큰따옴표(작은따옴표는 사용 불가)로 묶어야 한다. 값은 객체 리터럴과 같은 표기법을 그대로 사용할 수 있다. 하지만 문자열은 반드시 큰따옴표(작은따옴표는 사용 불가)로 묶어야 한다. { "name" : "Lee", "age" : 20, "alive" :true, "hobby" : ["traveling", "tennis"] } JSON.stringify 객체를 JSON 포맷의 문자열로 변환한다. 클라이언트가 서버로 객체를 전송하려면 객체를 문자열화 해야 하는데 .. 2022. 4. 18.
자바스크립트[기초] Object 자바스크립트 동적인 언어라서 객체를 만들고 정의를 한다.(prototype 시스템 방식) 정적인 언어 C++ 이나 Java 는 클래스를 만들고 객체를 만든다. var exam = new Object(); // 원하는 만큼 확장이 가능 exam.kor = 20; exam.eng= 30; // 두 표현의 차이점 exam.kor = 30; // Default 표현 방식으로 List형의 Data Collection 구조 exam["kor"] = 30; // 문자열을 이용해서 객체의 값을 가져올 때 Map형의 Data Collection 구조 2022. 4. 18.
728x90