Javascript 기초정리 // 2주차 jquery 연습
1.
자바스크립트의 실행문은 세미콜론으로 구분됨.
대소문자를 정확히 구분하므로 주의가 필요
문자열 넣을 때는 " "을 사용해야 함.
2.
식별자란 변수나 함수의 이름을 지정할 때 쓰는 이름을 의미함.
영문자, 숫자, _ , $만을 사용할 수 있음.
(숫자로 시작할 수 없음. 숫자와 식별자간의 빠른 구별을 위함.)
camel(대문자로 띄어쓰기 구분; 첫 문자는 소문자여야된다.) case -> firstLocalVar
Underscore(언더바로 '') case -> first_local_var
3.
키워드 var과 function
각각 변수정의와 함수정의를 위해 예약된 키워드
4.
자바스크립트의 출력
window.alert() 메소드
HTML DOM 요소를 이용한 innerHTML 프로퍼티????
document.wrist() 메소드
console.log() 메소드 --> 콘솔 화면에 입력값을 띄워줌.
5.
javascript 코드의 경우 html 내에 삽입 가능; .js.확장자 파일을 만들어 연동시키는 것도 가능
6.
변수 : 어떤 정보에 이름을 붙여 쓰고 싶을 때 사용
name = "mike";
age = 30;
--> 문자는 " " 로 항상 감싸줘야함. ' ' 가능
숫자는 그냥 써도 된다.
**class는 예약어 이므로 변수 지정 불가능
경고창, alert() // 콘솔에 입력 console.log()
7.
변수설정 let과 const
등호(=)로 변수 설정할 경우 마지막에 쓰인 변수명에 해당하는 값으로 변수값이 덮어씌워지게 된다.
name = "aru"
name = "eori" --> 변수값은 eori로 덮어씌워진다.
let name = "aru"; --> 이렇게 하면
let name = "eori" 로 했을 때 에러가 뜬다.
const name = "eori" 이렇게 하면 절대 변하지 않는 변수로 입력
name = "aru" 쓰면 에러 발생 ; 지정된 변수를 바꾸고자 했으니까.
**이런경우 대문자로 쓰는게 맞다.
8.
<script>
function q1() {
// 1. input-q1의 입력값을 가져온다. $('# .... ').val() 이렇게!
let txt = $('#input-q1').val();
// 2. 만약 입력값이 빈칸이면 if(입력값=='')
if (txt == '')
// 3. alert('입력하세요!') 띄우기
{alert ('입력하세요!');}
// 4. alert(입력값) 띄우기
else {alert(txt);}
}
**자꾸 실수하는 내용 :
1. ' ' 잘 사용 안하는 것이 제일 문제. --> 문자열 넣을 때는 " "을 사용해야 함.
2. 함수 마지막에 ; 안 쓰는 것도 문제. --> 자바스크립트의 실행문은 세미콜론으로 구분됨.
=========================================================================
9.
function q2() {
// 1. input-q2 값을 가져온다.
// let email = $('#input-q2').val();
let txt2 = $('#input-q2').val(); --> id 불러올 때 # 빼먹지 말기
// 2. 만약 가져온 값에 @가 있으면 (includes 이용하기 - 구글링!)
// if (email.includes(`@')) {
if (txt2.includes('@')==true) --> .includes(' ') ; 함수 사용법 숙지 --> 얘는 불린이니까 == true, false 로 함수 줘.
// 3. info@gmail.com -> gmail 만 추출해서 ( .split('@') 을 이용하자!)
{alert(txt2.split('@')[1].split('.')[0]);}
// 4. alert(도메인 값);으로 띄우기
// 5. 만약 이메일이 아니면 '이메일이 아닙니다.' 라는 얼럿 띄우기
else{alert('이메일이 아닙니다.');}
}
**자꾸 실수하는 내용 :
1. ' ' 잘 사용 안하는 것이 제일 문제. --> 문자열 넣을 때는 " "을 사용해야 함.
2. 함수 마지막에 ; 안 쓰는 것도 문제. --> 자바스크립트의 실행문은 세미콜론으로 구분됨.
3. id 불러올 때 # 빼먹지 말기
4. .includes(' ') ; 함수 사용법 숙지 --> 얘는 불린이니까 == true, false 로 함수 줘.
=========================================================================
10.
function q3() {
// 1. input-q3 값을 가져온다. let txt = ... q1, q2에서 했던 걸 참고!
let name = $('#input-q3').val(); --> 소름돋게 또 안쓰네.
// 2. 가져온 값을 이용해 names-q3에 붙일 태그를 만든다. (let temp_html = `<li>${txt}</li>`) 요렇게!
let temp_html = `<li>${name}</li>` --> temp_html은 역따옴표를 써야된다!! 따옴표('), 역따옴표(`) ; 다르다!!
// 3. 만들어둔 temp_html을 names-q3에 붙인다.(jQuery의 $('...').append(temp_html)을 이용하면 굿!)
$('#names-q3').append(temp_html);} --> $(a) : 얘는 a에 ~을 한다. 라는 의미 //
function q3_remove() {
// 1. names-q3의 내부 태그를 모두 비운다.(jQuery의 $('....').empty()를 이용하면 굿!)
$('#names-q3').empty();
}
**자꾸 실수하는 내용 :
1. ' ' 잘 사용 안하는 것이 제일 문제. --> 문자열 넣을 때는 " "을 사용해야 함.
2. 함수 마지막에 ; 안 쓰는 것도 문제. --> 자바스크립트의 실행문은 세미콜론으로 구분됨.
3. id 불러올 때 # 빼먹지 말기
4. .includes(' ') ; 함수 사용법 숙지 --> 얘는 불린이니까 == true, false 로 함수 줘.
5. let temp_html = `<li>${txt}</li>`; temp_html은 역따옴표를 써야된다!! 따옴표('), 역따옴표(`) ; 다르다!!
6. $('#names-q3').append(temp_html);
7. $('#names-q3').empty();