⁂ Java Script

[JS] #11 This

참조 사이트 https://www.w3schools.com/js/js_this.asp JavaScript this W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more. www.w3schools.com 1. This is Me!! this는 자신이 갖고 있는 요소를 가리킬 때 쓰이는 명령어이다. 자바스크립트에서 자신이 갖고 있는 요소에 접근할 때 코드가 불필요하게 길어질 때가 있다. 그럴 때 this를 사용하여..

[JS] #10 자바 스크립트에서 스타일(.CSS) 접근하기

1. 자바 스크립트에서 스타일 접근하기! 자바 스크립트은 스타일에 자주 접근을 한다. 예를 들어 만약 회원가입을 할 때 아이디가 중복되어있으면 빨간색으로 아이디를 출력시킬 수 있다. 이런 식으로 자바스크립트에서 css에 대한 접근은 정말 자주 하게 된다. jQuery에서도 명령어들이 더러 있을 정도이다. 우선 아래와 같은 코드로 를 하나 만들고 버튼도 함께 만들었다. 자바스크립트에서 스타일 접근 대한민국 아래의 버튼을 누르면 div의 스타일 속성을 변화시킬 것이다. 속성 변화는 test1() 함수로 줄 것이다. 2. 버튼으로 .css 접근하기 1) test1() 함수로 의 .css에 제대로 접근하는지 alert()로 확인해보기 먼저 test1() 함수를 만들어보자. 그리고 test1() 함수가 정상적으로..

[JS] 연습문제 : 이미지 스크롤 만들기

1. 완성된 모습 Hint - 이미지를 왼쪽으로 스크롤 함. - 이미지는 3초 후에 스크롤을 시작함. - 총 8개의 이미지를 스크롤 함. - 각 이미지는 div로 개별적으로 묶어주며 이미지가 스크롤 될 배경도 으로 영역지정을 해줌. - 반복문으로 이미지 8장을 배치함, 배치할 때 left 값으로 적절하게 배치함. - 스크롤시 이미지가 움직이는 것이 아니라 여백이 줄어듦으로 이미지가 움직이게끔 보이게 함. - 이미지가 영역 밖으로 사라지면 다시 오른쪽으로 이동시킴(여백을 조정하여). 2. 완성 코드(폰트도 들어있고 수업하면서 시도해본 내용도 들어서 코드가 좀 난잡함) 눌러서 확인하세요 오늘의 포켓몬은 뭘까요!

[JS] #9-2 유효성 검사 - 회원가입틀 만들기 2

1. 유효성 검사 function validate() { // 회원가입 폼에 대한 유효성 검사 // 1) 아이디 글자 갯수 8-12 사이인지 확인 // 위의 조건을 만족하지 않으면 // -> 경고창(alert) // -> ID를 다시 입력할 수 있도록 id=uid에서 커서를 생성해 주고(focus) // -> 서버로 전송하는 것을 차단 let uid=document.getElementById("uid").value; uid=uid.trim(); // 맨 앞과 뒤의 공백 제거 if(!(uid.length>=8 && uid.length=5 && upw.length

[JS] #9-1 유효성 검사 - 회원가입틀 만들기 1

1. 유효성 검사 Frontend(UI, View)단에서 서로 다른 문법간의 데이터를 교류하기 위해서 JavaScript와 jQuery를 활용한다. 그리고 이 두 가지를 활용해 데이터의 유효성을 검증하기도 한다. 이번에는 데이터가 유효한지, 회원가입 툴을 만들어보며 데이터의 유효성 검사를 배워보려한다. 2-1. 데이터 접근하기 : ID중복확인 1) 아이디 작성 공간과 버튼 만들기 우선 회원가입을 위한 양식을 만들어보자! 아이디를 입력할 공간과 중복확인 버튼, 그리고 적용 버튼을 만들어보려 한다. 그리고 데이터에 접근하기 위해 상단에서 볼 수 있다시피 각 버튼마다 함수를 만들어보려한다. 회원가입 아이디 : HTML 삽입 미리보기할 수 없는 소스 2) getID () 입력된 아이디를 확인하기 위해서 우선 사..

[JS] #8 String 함수

참조 사이트 : https://www.w3schools.com/js/js_string_methods.asp JavaScript String Methods W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more. www.w3schools.com 프로그래밍 언어에서 문자를 나타내는 함수는 정말 다양하다. 이는 그만큼 많은 사람들이 사용할 수 밖에 없다는 뜻이다. 이 문자에 대한 함수인 String에 대해 알아보려 한..