복습하기
let count = 0
function hey(){
count += 1
if (count %2 == 0){
alert('짝수입니다')
} else{
alert('홀수입니다!')
}
}말로 설명하기
1. 카운트는 0부터 시작한다.
2. 함수 hey는 한번 누를때마다 1을 더해준다.
3. 카운트를 2로 나눈수가 0과 ==(같다면) '짝수입니다'알람을 띄운다.
4. 그렇지 않다면 '홀수입니다'를 띄운다.
count += 1 // 카운트를 하나씩 더한다.
==과 =는 다른것이다. 함수에서 선언을 할때 =를 사용하고 있기 때문에 (같다)라는 의미를 사용할때는 두개를 연달아 사용한다.
Jquery 기초
jquery를 이야기 하기 이전에 웹이 어떻게 우리집 안방까지 올 수 있게 되는가에 대해 이해를 해보자. 클라이언트는
api를 통해서 데이터 베이스에 접근한다.
제이쿼리는 CT가 서비스를 요청할 때 접근하는 http,css,js 등 중에서 js를 누군가 미리 짜놓은 것을 말한다. 라이브러리 (프레임워크와는 다르다는 것을 기억하자)
jquery의 철학 : write less, do more 덜쓰고 더 하자
API : Application Programming Interface
프로그램과 프로그램을 연결해주는 매개체. CT와 DB사이에서 정보를 잘 주고 받을 수 있도록 한다. CT와 서버는 API를 통해서 통신하는 것이다.
자바 스크립트에서 이렇게 써야하는 것을
document.getElementById("element").style.display = "none";제이쿼리를 이용하면 이렇게 직관적으로 쓸 수 있다.
$('#element').hide();jQuery 사용법
이렇게 미리 작성된 Javascript코드를 가져오는 것을 '임포트'라고 부른다.
구글에서 Jquery를 사용할 수 있도록 지원해 주고 있다. 헤드 사이에 들어갈 수 있도록 아래처럼 적어주기만 하면 준비 끝.
jQuery의 선택자 : css에서는 선택자로 class를 사용했지만 jQuery에서는 id값을 통해 특정 버튼,인풋박스,div 등을 가르키게 된다.
연습문제 1.
버튼을 눌렀을 때 칸에 아무것도 없으면 "입력하세요!" 얼럿 띄우기
내가 작성한 답
function q1() {
$('#input-q1').val(){
if (#input-q1 ==''){
alert('입력하세요!')
}
}
당연히 실행되지 않았다. 일단 어제 공부한 내용에서 정보의 흐름이 중요하다고 했으니까 입력한 값을 가져오고 싶었는데 그냥 무작정 id를 적으면 불러오는줄 알았나. 어제 분명 let과 for를 공부했다고 생각했는데 어이없는 코드를 짜버리고 만것이다. 힌트도 엄청 많았는데!!
답안
function q1() {
let txt = $('#input-q1').val()
if (txt == '') {
alert('빈칸입니다!')
} else {
alert(txt)
}
}내가 한 실수
-
인풋박스q1에 입력된 정보를 변수로 선언하지 않았다. txt라는 변수값으로 내가 가져오고자 하는 값을 변수로 선언하고 정보를 가져와줘야 한다. 그런데 나는 단순히 내가 가져오고 싶은 값을 정직하게 넣었다. 이렇게 되면 정보를 인식하지 못한다. 정보의 흐름이 시작조차 하지 못하는 것이다.
-
if문에 조건을 넣어야하는 곳에 id값을 그대로 넣어버렸다. let으로 선언한 변수값을 넣어서 조건식을 만들어야 한다.
function이 시작되면 let txt = $('#input-q1').val()처럼 let으로 변수를 선언하는 것을 잊지말자
연습문제 2.
2-1. 버튼을 눌렀을 때 입력받은 이메일로 얼럿 띄우기
2-2. 이메일이 아니면(@가 없으면) '이메일이 아닙니다'라는 얼럿 띄우기
답안지
function q2() {
let email = $('#input-q2').val()
if (email.includes('@')) {
let domainWithDot = email.split('@')[1]
let onlyDomain = domainWithDot.split('.')[0]
alert(onlyDomain)
} else {
alert('이메일이 아닙니다.')
}
}
참고자료
.val()은 양식(form)의 값을 가져오거나 값을 설정하는 메소드입니다.
var jbd = $( 'input#jbInput' ).val();
은 아이디가 jbInput인 input 요소의 값을 변수 jbd에 저장합니다.정보의 흐름을 생각해서 답안지를 풀어 설명해보자.
1. let으로 email이라는 변수를 선언한다.이때 val은 세트라고 생각하자.
2. indcludes 는 @가 표함되어 있을때를 의미한다. 만약 emaildp @가 포함되어 있다면
2-1. domainWithDot이라는 변수는 email에서 @를 기준으로 두번째 정보를 의미한다.
2-2. onlyDomain 라는 변수는 domainWithDot에서 .을 기준으로 나눈 것에서 첫번째(0)정보를 의미한다.
2-3. onlyDomain 을 알림으로 띄운다.
3. @가 포함되어 있지 않다면 '이메일이 아닙니다.'라고 알림으로 띄운다.
느낀점 : 함수가 왜 이렇게 생겼는지가 아니라 정보가 어떤식으로 흘러가는지, 그 정보를 흘려보낼 때 어떤 함수를 적어야 하는지 주의하면서 보면 좋을것 같다.
참고사항
function 함수이름(매개변수1, 매개변수2,...) { 함수가 호출되었을 때 실행하고자 하는 실행문;} // addNum라는 이름의 함수를 정의함. function addNum(x, y) { // x, y는 이 함수의 매개변수임. document.write(x + y); } addNum(2, 3); // addNum() 함수에 인수로 2와 3을 전달하여 호출함.
function 함수란 무엇인가? 하나의 데이터 타입(datatype)이다. 따라서 함수를 변수에 대입하거나 함수에 프로퍼티를 지정하는 것도 가능하다.
property란 무엇인가? (프로퍼티) 해당 object의 특징이다. 보통 데이터 구조와 연관된 속성을 나타낸다. 프로퍼티는 이름과 값을 가지고 있다.
function 함수와 property의 차이 function 선언과정 :메모리 공간 할당 → 이름 부여 property 선언과정 : 이름부여 레퍼런스 선언이란 이름이 존재하는 메모리 공간에 하나의 이름을 더 부여하는 행위이다. 생성되는 방법에 있어서만 차이를 보일 뿐 일단 만들어지고나면 완전히 같은 것이다. ** 레퍼런스를 이요하면 심지어 하나의 메모리 공간에 셋 이상의 이름을 부여하는 것도 가능하다.
내가 이해한 것 : function이라고 적는 것은 메모리 공간을 할당하는 행위임과 동시에 이름을 부여하는 것이라고 할 수 있다. 하지만 함수 내에서 같은 값에 또 다른 이름을 지정할 수 있는데 이것을 프로퍼티라고 한다. 이름은 다르지만 내용은 완전히 같을 수 있는 것이다.
연습문제 3. html 붙이기,지우기 연습
3-1. 이름을 입력하면 아래에 나오게 하기
function q3() { // 1. input-q3 값을 가져온다. let newName = $('#input-q3').val(); if (newName == '') { alert('이름을 입력하세요'); return; } let temp_html = `<li>${newName}</li>`; // 3. 만들어둔 temp_html을 names-q3에 붙인다. //(jQuery의 $('...').append(temp_html)을 이용하면 굿!) $('#names-q3').append(temp_html); } 1. function으로 q3이라는 이름을 부여하고 데이터 공간을 확보함. 2. let으로 newName 이라는 프로퍼티 부여(이름,값) 3. 제이쿼리로 input-q3를 불어옴. 4. if문으로 시작. 만약 newName 값이 없다면 '이름을 입력하세요'알림을 띄워라. 5. return해라. *참고: id값으로 부여되었기 때문에 #input-q3로 불러왔다. (#) 6. let으로 temp_html 프로퍼티 부여. 리스트에 newName을 넣어라. 7. #input-q3 내용의 끝에 temp_html 를 추가한다. *참고: .append()는 선택한 요소의 내용의 끝에 콘텐트를 추가한다.
**return 란? 함수 실행을 종료하고 주어진 값을 함수 호출 지점으로 반환한다. 정보의 흐름을 한번 끊어주는 역할을 한다. (시작지점으로 반환) 함수는 return을 호출하는 지점에서 즉시 실행을 멈춘다. 반복문에서 return을 통해 종료 지점을 알려줄수도 있다.
3-2. 다 지우기 버튼 만들기
function q3_remove() { // 1. names-q3의 내부 태그를 모두 비운다. //(jQuery의 $('....').empty()를 이용하면 굿!) $('#names-q3').empty(); } 1. q3_remove() 을 누르면(onclick) #names-q3을 모두 지운다.
느낀점: 정보의 흐름이 어떻게 흘러가는지는 주의해서 살펴보았다. 정보를 불러올 때는 어떻게 해야한느지, 불러온 정보로 원하는 값을 출력했을 때 어떻게 표기할 것인지. 결과값을 지우려면 어떻게 해야하는지 등등 정보를 다루는 방법을 살펴보았다. 가장 헷갈리는 부분은 역시 함수와 프로퍼티이다. 개념의 차이가 무엇인지 계속해서 써보면서 생각해봐야겠다.
