·어제했던 회원가입
-어제 마지막 시간에 진행했던 회원가입의 유효성검사를 직접 처리하는 코드를 진행했다. 어제 나도 혼자 작성하느라 애먹었는데, 어제 굉장히 많은 시간을 할애한 부분이 바로
/^[a-zA-Z0-9_-]{6,20}$/이 부분이다. 굉장히 평범한 정규식이라고 생각이 들어서, '왜 저 부분에서 막혔지?'싶을 수 있을 것이다. 그러나 수업을 진행할 때 교수님이 {6, 20}으로 20 앞에 공백을 주셨고,(사실 공백을 주는 것은 굉장히 습관적으로 주게 되는 것이라) 나도 자연스럽게 따라서 공백을 줬었다. 그래서 어제 하루종일 왜 제대로 아이디를 입력했는데 해당 부분에서 계속 막히는지 찾아보고 또 찾아봤다. 그런데 공백 하나여서 아무리 찾아도 결론이 나지 않았다. 그래서 정규식의 문제인가까지 내 생각이 닿게 되었고, 인터넷에서 다른 정규식을 하나 찾아서 복사 붙여넣기를 하니 정상작동했다. 그리고 해당 정규식과 비교를 하니 {}안에 공백이 없다는 사실을 깨달았다.
-그리고 오늘 수업을 진행하는데 교수님도 다른 학생들도 전부 아이디에서 오류가 있었고 아무도 발견을 못해서 교수님께 개인톡을 드려 해당 오류에 대해 말씀드렸다. 다행히 오류를 찾느라 많은 시간을 낭비하지 않아서 수업을 원활하게 진행할 수 있었다. 원활한 수업 진행을 위해 말씀드린 것인데 혹여나 예의가 아닐까 염려를 했었지만, 교수님은 굉장히 감사하다며 원래 이런건 본인이 찾으면 잘 못 보는 오류기도 하고 이렇게 오류를 발견하는 것도 개발자의 역량이라고 해주시면서 거듭 감사를 표하셨다.
회원가입 검사는 내가 작성한 코드와 크게 다른 점이 없었고 마지막 부분만 조금 달랐다. confirm()메소드를 이용해서 회원가입을 원하는지 최종 확인하는 과정을 추가하셨다.
if(confirm("회원가입을 하시겠습니까?"))
{
document.form1.action = "sample_9.html";
document.form1.submit();
}else
{
alert("회원가입이 취소되었습니다.");
}confirm()메소드는 예전에도 사용해봤기에 크게 이해에 어려움이 없었다.
·prompt()
-따로 창이 뜨고 해당 창에서 입력한 내용이 화면에 뜨게 하는 prompt()메소드는 사용을 해봤었다. 그런데 해당 메소드가 입력값을 리턴해준다는 것은 알지 못했었고 따로 변수에 담아서 사용하는 것도 생각해보지 못한 것이었다.
<body>
prompt() - 사용자에게 간단한 메시지를 보여주고,
사용자가 입력한 문자열을 반환함
<p><h1 id="text">여기에 찍습니다.</h1></p>
<button onclick="promptDialog()">버튼</button>
<script>
function promptDialog()
{
var name = prompt("이름을 입력해주세요: ");
if(name != null)
{
document.getElementById("text").innerHTML = "당신의 이름은 "+name+"입니다.<br>";
}
}
</script>
</body>-이런식으로 prompt메소드의 리턴값을 변수에 담아서 해당 변수가 값을 가지고 있는지를 판단하고, 출력하거나 원하는 html의 내용을 바꿀 수도 있다.
·제이쿼리
-제이쿼리는 우선 시작하기 전에 파일을 받아서 head 영역의 script로 파일을 넣어줘야 브라우저가 제이쿼리의 문법을 이해하고 실행할 수 있다. 전에는 무조건 최신 파일로 받아서 진행을 했었는데, 오늘 교수님은 따로 파일을 받을 링크를 전체 공유하셔서 버전을 맞추셨다. 전에 제이쿼리를 배울 때는 제이쿼리의 시작을 이해하지 못했다. 그냥 문법이구나 하고 외웠을 뿐이다.
$(function(){
});그런데 이게 사실, 제이쿼리 팀에서 제공해준 굉장히 간략하게 쓰는 방식이고 원래는
$(document).ready(function(){
});이렇게 작성해야 하는 것인데 위처럼 줄여서 작성할 수 있는 것이었다. 전에 배울 때 제이쿼리의 문법은 $().()이게 기본으로 전에 있는 괄호는 선택하는 영역이고, 뒤에 괄호는 그 선택한 영역을 어떻게 할 것인가를 정의한다고 배웠는데, 시작도 결국 비슷한 구조로 되어있구나를 처음 알게 되었다. 그래서 아래의 길게 쓴 것을 알게되니 줄여서 쓰는 구조도 굉장히 쉽게 머리에 들어왔다.
-기존에는 버튼을 만들어서 onclick이벤트 처리를 해야만 클릭했을 때의 어떤 반응을 만들 수 있었다. 그러나 제이쿼리로는 다양한 영역을 선택해서 해당 영역을 클릭했을 때 다양한 반응을 만들 수 있었다.
$(function(){
$("p").on("click", function(){
$("#object").css("fontSize","28px");
});
});-위처럼 script영역에 제이쿼리문을 작성하면, p태그의 영역을 눌렀을 때, id가 object로 되어있는 모든 항목에 css를 적용하여 폰트사이즈를 28px로 바꾼다. 기존에는 버튼을 클릭해야 이뤄지는 일종의 변화를 그냥 원하는 영역을 눌렀을 때로 그 조건을 바꿔줄 수 있게 되었다. 제이쿼리를 사용하면 조금 괄호가 많기는 하지만, 차근차근 작성한다면 더 많은 동적인 변화를 가져올 수 있다.
-물론 기존의 버튼을 이용하여 제이쿼리문을 상용할 수 있다.
<script>
$(function(){
$("button").on("click",function(){
$("img[alt='pic']").attr("src", "../../img/22.jpg");
});
});
</script>
</head>
<body>
<img src="../../img/11.jpg" alt="pic" width="400" height="400">
<button>이미지변경</button>
</body>-여기서 주목해야 할 점은 $("img[alt='pic']")이 부분이다. 해당 부분은 img만 있는 것이 아니라, img 태그 중에서도 alt가 pic으로 되어있는 이미지만 선택하겠다는 뜻이다. 즉 만약 바디부분에 다른 이미지가 있어도 alt가 pic으로 되어있지 않는다면, 버튼을 눌렀을 때 아무런 변화도 없다.
-제이쿼리는 선택한 요소를 변수에 저장해서도 사용할 수 있다.
$(function(){
var items = $("li");
$("#btn2").on("click",function(){
$("#txt").text("li 태그의 총 갯수는 "+items.length+"개 입니다.");
});
});-보면 li태그를 선택해서 items라는 변수에 담았고, items.length라는 li태그의 길이를 굳이 세어보지 않아도 알아서 출력하게 만들 수 있게 변수를 활용할 수 있게 되어있다.
<body>
<script>
$(function(){
$("#btn1").on("click", function(){
$("li:has(span)").css("backgroundColor","red");
$("li:has(span)").text("<span>태그가 포함된 li태그입니다.");
});
});
</script>
<ul>
<li><span>1</span></li>
<li>2</li>
<li><span>3</span></li>
<li>4</li>
</ul><br>
<button id="btn1">버튼</button>
</body>-또한 제이쿼리의 선택자는 같은 li태그라도 더 구체적으로 span태그를 가지고 있는 li 태그를 선택하여 원하는 li태그만 변경이 가능하게 할 수도 있다.
<body>
<script>
$(function(){
$("button").on("click",function(){
$(":checked").next().text("체크된 메뉴입니다.");
});
});
</script>
<form>
<input type="checkbox" name="chk" value="1"><span>짜장면</span><br>
<input type="checkbox" name="chk" value="2"><span>햄버거</span><br>
<input type="checkbox" name="chk" value="3"><span>짬뽕</span><br>
<input type="checkbox" name="chk" value="4" checked><span>볶음밥</span><br>
</form>
<button>체크</button>
</body>-위의 제이쿼리는 버튼을 누르면 input 타입에서 체크가 된 영역의 텍스트를 "체크된 메뉴입니다."로 바꿔준다.
·조금 주어진 자습
-오늘은 교수님의 추가적인 서류 작성으로 인해 수업 중간에 꽤 긴 자습이 주어졌고, 4교시와 8교시는 아직 수업의 내용을 제대로 따라오지 못한 학생들을 위한 보충수업이 이뤄져서 굉장히 많은 자습시간이 주어졌다. 그래서 회원가입 관련 내용을 처음부터 작성해보고, 제이쿼리문을 직접 작성해서 이것저것 바꿔보는 연습을 했다. 제이쿼리문은 확실히 메모장같은 곳에서 작성하는 것보다는 에디터가 있는 것이 확실히 눈에 잘 띄어서 좋은 것 같다. 내일도 이어서 제이쿼리를 진행할 것 같다. 아마도 더 동적인 부분을 진행할 것이다. 현재까지 배운 것들은 사실 기존의 javascript에서도 충분히 다 할 수 있는 부분이기 때문에 자바스크립트가 하지 못하는 여러 기능들에 대해 배울 것이다. 그리고 금요일까지 제이쿼리를 끝내실 것이라서 아마 엄청 빠른진도가 예상된다. 뒤쳐지지 않게 잘 집중하도록 하자! 파이팅!
