본문 바로가기

전체 글

 (252)
[JavaScript] 대화상자 Dialog Box 대화상자(DialogBox) alert()메소드 사용자에게 간단한 메세지를 보여주고, 그것에 대한 사용자의 확인을 기다림 alert() 메소드 alert대화상자 prompt() 메소드 사용자에게 간단한 메세지를 보여주고, 사용자가 입력한 문자열을 반환함 prompt 창 버튼선택 화면에 있는 버튼을 클릭하면 입력창이 뜬다. 코드에서 기본값으로 설정해둔 홍길동이 적혀있다. innerHTML을 통해서 내가 입력한 text 아이디인 글자가 화면에 뿌려진다. **innerHTML은 문서바디 안에 있는 html 코드를 자바스크립트로 조작할 수 있게 해주는 코드이다. confirm() 메소드 사용자에게 간단한 메세지를 보여주고, 사용자가 확인이나 취소를 누르면 그 결과를 불리언(boolean) 값으로 반환함 conf..
[JavaScript] 아직 생성되지 않은 HTML 요소에 속성 추가 아직 생성되지 않은 HTML 요소에 속성 추가 속성추가 안녕 속성추가 버튼을 누를 때마다 새로운 단락이 추가 되고 가장 하단에 있는 글씨(태그)가 빨간색이 되는 문장이 있다. setAttribute() .setAttribute() 괄호 안에서 선택한 요소(Element)의 속성(Attribute) 값을 정한다. 만약 속성값이 원래 있었다면 지우고 다시 넣는다. document.getElementById("para").setAttribute("style", "color:Red"); id para 안에 값을 넣는다. 어떤 값? 스타일 요소에서 속성값 빨간색 createElement() .createElement() 괄호 안에서 선택한 요소(Element)를 추가한다. var newNode = document..
[JavaScript] 문자열, 배열 관련 메소드 모음 문자열의 위치 찾기 indexOf() - 앞에서부터 찾는다. lastIndex() - 뒤에서부터 찾는다. 특정 문자나 문자열이 처음으로 등장하는 위치나 마지막으로 등장하는 위치를 반환하는 메서드이다. 전달 받은 특정 문자나 문자열을 찾을 수 없을 때는 -1을 반환한다. var str = "abcDEFabc"; document.write(str.indexOf('abc') + " "); document.write(str.indexOf('abcd') + " "); document.write(str.indexOf('abc', 3) + " "); document.write(str.lastIndexOf('abc') + " "); document.write(str.lastIndexOf('d') + " "); docu..
[JavaScript] 함수(1) 함수(function) 하나의 특별한 목적으로 작업을 수행하도록 설계된 독립적인 블록을 의미한다. 필요할 때마다 호출하면 반복해서 사용 가능! 반환문(return) 함수는 반환문을 포함할 수 있다. 호출자가 함수에서 실행된 결과를 반환을 통해서 받을 수 있다. return는 배열이나 객체를 포함한 모든 타입의 값을 반환할 수 있다. function multiNum(x, y) { return x*y; } let a = multiNum(3,4); document.write(a); multiNum(3,4) 인자값 3,4가 함수로 전달된다. 함수가 호출되고 계산을 한 뒤 리턴값이 a에 저장된다. 변수의 유효 범위 1. 지역 변수 (local variable) 2. 전역 변수 (global variable) 지역..
JavaScript의 기본과 오브젝트의 설명 JavaScript 사용자의 input값을 핸들링 하는 경우 예를들어 DOM, DOM 객체를 보이거나 안 보이게 하거나.. style을 다르게 주거나 이런 걸 컨트롤 한다. 변수 var, let, const 변수명 기능 var 동일한 변수명을 선언해도 허용 let 동일한 변수명을 선언하면 오류가 뜸 const 상수의 의미로 한 번 선언을 하면 값 수정도 못 함 10년 동안 자바스크립트에는 var만 있었지만 또 다른 타입인 let과 const가 생겼다. var 변수만을 사용해서 개발을 하는 경우. 한 페이지에 방대하게 작성했을 때 개발자가 실수로 같은 변수명을 만들어서 사용하는 경우가 있다. 그렇게 되면 앞에 썼던 변수의 값이 나도 모르게 바뀌는 불상사가 생기곤 해서 다른 변수 타입들이 생기게 된 것이다...
자바스크립트/제이쿼리 비교 (2) - 각 지역의 동네를 조회(select) 자바스크립트와 제이쿼리의 차이 자바스크립트로 작성한 코드를 제이쿼리 언어로도 표현할 수 있다. 더 짧게 줄일 수 있기에 편하게 사용 가능! (기초적인 html 기능들은 따로 설명하지 않음) 연습 이름 : 지역 : 서울 practice365.xyz 저번 글에 이어서 ... 이번엔 동네까지 추가를 해본다. 서울이 디폴트 상태이니까 서울의 동네를 표시하고 내가 다른 지역을 선택하면 서울의 동네가 지워지고 내가 선택한 지역의 동네를 보여주는 코드! 자바스크립트 버전 이름 : 지역 : 서울 인천 동네 : 강남 서초 부평 학익 제출 동네 : 강남 서초 부평 학익 아래에서 함수를 만들기 위해 각 select id를 설정할 때 "region_"까지는 맞추고 뒤에 오는 숫자에 지역번호를 넣는다. style = "disp..
자바스크립트와 제이쿼리의 차이 제이쿼리는 자바스크립트로 만든 라이브러리로 자바스크립트를 좀 더 간결하게 사용할 수 있다! 자바스크립트의 표준이 워낙 예전에 정해졌기 때문에 브라우저 별로 중구난방이었는데 제이쿼리가 동일한 코드로 대부분의 브라우저와 버전을 지원하기 때문에 편하다. 하지만 제이쿼리만 배우는 게 부정적인 이유는 제이쿼리 외에 다른 라이브러리를 사용할 수 없고, 자바스크립트의 작동방식을 이해하는 게 어렵기 때문에 둘을 같이 배우는 게 좋다고 합니다. 모바일 버전에서는 제이쿼리가 단점이 되는 경우도 있어서 요즘엔 사용하지 않는 경우도 많다고 하니 참고 하는 게 좋을 듯해요~ 이름 : 지역 : 서울 인천 제출 이름과 지역을 선택하고 제출을 눌렀을 때 경고창(alert)에 이름과 지역번호가 뜨게 만드는 코드이다. alert(doc..
연관 배열 예제 필드1 필드2 필드3 document.myForm["a" + i].value = i; 연관배열은 반드시 따옴표 안에 들어가야한다.

티스토리툴바