거인의 코딩일지

JS 객체 : {"memberId" : "user01", "memberPw" : "pass01", "age":20} JSON answkduf : '{"memberId" : "user01", "memberPw" : "pass01", "age":20}' -간단한 포멧 괄호 {} 내에 key : value 쌍으로 구성 {"key" : value} key : 반드시 문자열 사용 value : String, Number, Boolean, Array, Object, null 데이터 저장 가능 - 객체{} 또는 배열[] 데이터를 효율적으로 표시 가능 - 경량 데이터 교환 방식 - 간단한 포맷을 가지고 있어 이해하기 쉬움 - 순수 TEXT 기반 구조화된 TEXT 형식 대부분 프로그래밍 언어에서 JSON 포멧 데이터를 ..

자바스크립트 객체 자바스크립트의 객체는 {} 내에 Key : Value (Map 형식) 가 모여있는 형태로 작성된다. 객체를 생성하는 방법에는 2가지가 존재하는데 1. {} : 객체 리터럴 표기법을 이용한 생성 2. 생성자 + new 생성자()를 이용한 생성 객체생성1 객체생성2 이렇게 버튼을 html상에 만들어 주고 결과를 확인해보면 버튼 1번을 눌렀을때 값! 콘솔로 확인한 값 버튼 2를 눌렀을때 콘솔에 찍히는 값

오늘은 표준이벤트를 사용하여 위에 버튼 사진을 처음에는 아래 사진처럼 만들고 그 뒤 고전이벤트와 다른지 확인하기 위하여 또 아래 사진으로 변화 시켜줘 볼것이다! 처음엔 늘 해왔던것 처럼 html 파일에 코드를 작성해준다! 아래 사진과 같이 코드를 작성해준뒤 JS파일에 들어가 코드를 작성하여 두번째 사진처럼 스타일을 줄것이다. 이렇게 btn2 변수를 생성시켜준뒤 getElementById 함수를 사용해서 btn2 라는 아이디를 가져와서 이벤트추가 함수를 작성해주면 된다 주석에서도 말했다 싶이 이벤트 핸들러 내부에 작성된 this는 이벤트가 발생한 요소를 불러오는 것이다. 이렇게 만들고 라이브서버를 통해 확인하면 아래 사진과 같이 변하는데 고전이벤트와 다른점을 확인하기 위해서 다시 btn2에 클릭이라는 이벤..

고전이벤트 이번에는 html 파일에 button 태그를 생성한 뒤 위의 사진처럼 id 값을 부여해보자! 위와같이 js파일을 만들어 준뒤 id 값을 얻어와 onclick 이벤트를 부여하고 버튼을 누르면 상태창으로 "버튼이 클릭됨" 이라는 문자가 나타나게 된다! 이런 버튼이 생성되고 버튼을 누르면 이런 상태창이 뜨는것을 알 수 있다! 고전 이벤트와 표준 이벤트의 장점 고전/ 표준 이벤트의 공통된 장점 중 하나는 바로 이벤트 제거가 가능하다는 것이다. 요소의 속성중 on이벤트명(이벤트 리스너) 속성에 함수대신 null을 대입하면 이벤트를 삭제 할 수 있다. 적용한것을 보기위해서 아까 작성해 두었던 js 파일내부에 코드를 추가해 보자! 이렇게 코드를 작성하고 다시 실행해 보면 아까 나타났던 상태창이 한번 나타나..

인라인 이벤트 모델 확인해보기! html 문서 내부에 button태그에 인라인 이벤트 모델중 하나인 onclick 이벤트를 걸고 함수명은 자유롭게! 작성한뒤 js파일을 만들어 js 코드를 작성한다! * fnTest(this) 라는 함수명에 this란 fnTest를 의미한다. JS파일 내부에서 버튼의 글자 색을 white로 배경을 black로 버튼위로 마우스가 올라가면 마우스 커서를 pointer 로 설정해준뒤 라이브 서버를 사용하여 열어보면 아래 사진과 같이 버튼이 생성되어 있다! 이제 버튼을 눌러본다면?! 이렇게 버튼이 바뀌고 마우스를 올려보면 손가락 모양으로 변경되어 있는데 인라인 이벤트를 이용하여 바꾼것이다!

이벤트 브라우저에서 동작, 행위 ex) click, keydown, keypress, keyup, mouseover mouseout, mouseleave, mouseenter, change, submit 이벤트 리스너(Event Listener) 이벤트가 발생하는 것을 대기하고 있다가 이벤트 발생이 감지되면 연결된 기능(함수)를 수행함 ex) onclick, onkeyup, onchange, onsubmit ...(on이벤트명) 이벤트 핸들러(Event Handler) 이벤트가 리스너에 연결된 기능(함수) 이벤트가 발생했을 때 수행하고자 하는 내용을 작성하는 함수 인라인 이벤트 모델 → 요소 내부에 이벤트 리스너, 핸들러를 작성하는 방법 on이벤트명 = "함수명()" 형태로 작성된다. 고전이벤트 모델 →..

오늘은 간이 계산기 version2 보다 더 간소화 해서 코드를 작성해 볼 것이다! version2 와 다른점은 바로 동일한 함수에 this 값을 넣어주는 것이다 this는 주석에도 써놨지만 클릭이된 버튼 즉 이벤트가 발생한 요소가 됨으로 js 파일을 열어 코드를 작성하면 위 사진과 같이 코드가 더 쉽게 표현할 수 있다.

오늘은 어제 만들었던! 간이계산기를 코드를 조금 더 간단하게 만들어 볼 것이다!! 어제와 동일하게 html 파일을 만들어 준뒤 비슷하게 작성하지만! 다른점은 button 태그에 onclick 이벤트에 함수가 동일하고 내용이 다르다는 것이다!! 차이가 별로 안나는 것 같지만.....! 이 점은 뒤에 js 파일을 생성하여 작성해보면 알 수 있다!! 변수 설정 까진 동일하지만 함수를 하나에 switch- case 문을 사용하여 쉽게 나타낼 수 있다!! 그렇게 설정 뒤에 라이브 서버를 열어서 확인하면! version1 과 같은 결과지만 간편하게 나타낼 수 있다!!

위 사진과 같이 첫번째 값 과 두번쨰 값을 적고 아래 기호를 누르면 계산 결과가 나타나도록 만들어 볼것이다! 우선 html 파일 안에 위와 같은 코드를 입력해준다! input 태그 안에 id를 부여하고 button 태그 안에 onclick 이벤트를 작성하여 각각의 함수를 만들어 준 뒤 계산 결과를 나타내는 span 태그속 id를 부여하여 마무리 한다. html 파일 작성이 끝났으면 js 파일을 생성한 뒤 코드를 작성해준다! js 코드는 아까 id 값을 부여해 주었던 input 태그와 span 태그의 id값을 const 를 사용하여 변수에 저장해주고 button 태그에 부여했던 각각의 함수들을 작성해주면 된다! 그 뒤 라이브서버를 연 뒤에 잘 작동하는지 확인하면 끝!!

변수 선언 위치에 따른 구분! JAVA public class Student{ // 자바에서 나눠지는 영역 3곳 //필드 //- class 에서 선언될 변수 선언된 곳 //- 멤버변수 선언 private String name; // = 인스턴스 변수 public static String schoolName; //= static 변수, class변수 //생성자 //메소드 public void method(String name){ //매개변수(==파라미터) int num = 10; //= 지역변수 if(num > 10){ int a = 20 //= if문에 한정된 지역변수 } } } JavaScript //(js파일 / script 내부 라고 생각) var num1; // 전역 변수 um2 = 200; //..