자바스크립트 기본문법

변수, 자료형, 반복문, 조건문, 함수

1. 변수

• 값을 저장한다.
• 선언을 통해 사용한다.

  var str = "얼른 취업하고싶다."
  let Num = 20210904
  //변수의 이름(str, Num)은 유의미한 이름으로 지정해야 한다. 이름만 보고 내가 어떤 용도의 변수를 선언했는지 알 수 있어야 한다.

사실 사전 준비 이전에도 자바스크립트 기본문법을 조금 배우긴했다. 그때 배운 선언은 var, 새로 알게된 선언은 let 이다.

2. 자료형과 연산자

• 어떤 종류의 데이터를 사용하는지 알려준다.
• 자료형에는 각자의 연산자가 있다.
• 자료형은 같은 자료형끼리만 연산된다.

  1. Number(숫자열) : + , - , % , * ,()
  2. String(문자열) : "" , +
  3. Boolean(논리) : &&, ||, !
     -논리어는 true,false를 반환.
  4. Null : 값이 비어있음
  5. Undefined : 값이 정의되지 않음
  6. object(객체) : 배열[],딕셔너리{}

• 딕셔너리와 리스트가 같이 쓰이게되면 반복문에 사용하기 참 좋다.

3. if 조건문

• 조건식이 참이면 코드 실행

  if ( 조건식1 ) {...code...}
  else if( 조건식2 ) {...code...} //조건식1은 참이고 else는 거짓일때(조건식이 샌드위치)
  else{...code...} // 조건식1,2 모두 거짓일때 실행

• if 조건문 돌리다 발견한 alert과 prompt의 차이점.
  alert은 경고문처럼 확인 버튼만있고 텍스트 입력창이 뜨지않는다. prompt는 사용자의 값을 입력받을 수 있는 텍스트창이 있다.

4. for 반복문

for (var 변수 = 0; 변수<Number; 변수++) {...code...}
//변수가 설정한 Number에 도달할때까지 조건을 검사해 코드를 실행

• 반복문과 배열이 그렇게 찰떡궁합이다. 둘이 자주 붙어서 쓰인다.
• 반복문에는 원래 while과 for문이 있지만, 더 많이 다루는건 for문이라 이것만 정리한다.(사전준비에서는 for문만 알려주시기도했다.)

5. 함수

function 함수이름 (매개변수) { ...code...
				return Y; }

JQuery와 사용법

부트스트랩 처럼 만들어둔 javascript를 미리 작성해둔 것

1. 사용방법

• JQery의 시작템플릿 코드를 복사해 < title >아래에 넣어준다.
  (코드는 W3school에서 얻을 수 있다.)
• $("선택자").속성();
  선택자에는 element,class,id값을 셀렉할 수 있다.

  자바스크립트를 입힐 대상에 id값을 주면 사용하기 편하다.

  1. $("선택자").val() : input값 가져오기
  2. $("선택자").hide() : 선택자 숨기기
  3. $("선택자").css("속성","속성값") : css값 삽입하기
  4. $("선택자").text() : 태그내 텍스트 삽입
  5. html삽입
     • let html_temp = 삽입할 컨텐츠
       // 백틱(``)을 이용한다.
     • $("선택자").append(html_temp)
       // 선택자는 삽입할 컨텐츠가 들어갈 부분을 지정한다.

• JQery를 배우고 익숙해지기 위한 퀴즈를 힌트를 보며 스스로 풀어보았다. 링크텍스트

2. 퀴즈를 풀고 배운것

1. var 변수 = $("선택자").속성(); 이렇게 변수로 선언해서 함수, 조건문과 반복문, 함수에 활용이 가능하다.
2. 변수를 잘 활용해야 조건문, 반복문, 함수를 실행하는데 무리가 없다.
3. split() _ 문자열을 분할하는 메서드
   • 변수.split(separator,limt)
   • separator : 분할기준 _ 자료형을 맞춰야한다.
   • limt : 최대 분할 갯수
4. includes() _특정 문자열을 포함하는지 확인하는 메서드
   • 변수.includes(serchString,length)
   • serchString : 검사할 문자열 _ 자료형 맞춰야한다.
   • length : 검색을 시작할 위치
   • true 또는 false를 반환하기때문에 조건문에 쓸 때 굳이 변수에 선언해서 사용하지 않아도 된다. true가 반환되면 알아서 조건문을 실행한다.
5. 코드를 짜야할 때 필요한 요소들의 큰 그림을 주석을 이용해 적어본뒤 순서대로 짜면 보다 수월하게 코드를 작성할 수 있다.
6. 코드를 하나 짤때 콘솔에 확인하면 오류를 빠르게 캐치할 수 있다.

Ajax

javascript로 서버에서 페이지를 받아오기

1. 서버와 클라이언트의 이해

• 서버 <------(요청: API)------- 클라이언트
  - API의 타입
  1. Get : 데이터 조회
  2. Post : 생성,변경,조회
• 서버 ----(요청응답:Json 포맷)---> 클라이언트
• http:// 서버의 주소 / 서버내에서의 요청문서 주소 ? 가지고가는 데이터

2. Ajax 시작하기

• JQery를 임포트한 페이지에서 사용할 수 있다.
• Ajex의 기본 골격을 이용하여 시작한다.
  (* 주의 : 기본골격은 외우는게 아닌 가져다 쓰는것이다.)

  //Ajex의 기본골격
  $.ajex ({
  type : "Get" or "post",
  url : "여기에 주소입력.",
  data : {post일때만 입력},
  success : function (response){
  	console.log(response) //내 입맛에 맞게 추출해서 사용. 반복문이나 
      				조건문을 사용해도 괜찮다
  				}
  	})

• response를 다른 이름으로 둬도 실행하는데 아무 이상 없지만 대부분 response로 냅둔다.
• Ajex에 익숙해지기 위해 연습문제들을 풀었다.

1. 링크텍스트
2. 링크텍스트
3. 링크텍스트

3. 연습문제를 풀고 배운것

1. 기본 골격에서 다른줄 끼리는 서로 상관이 없는 코드기때문에 ","로 띄어줘야 제대로 실행된다.
2. css를 입혔는데 적용이 안되면 혹시 나의 조건식에 문제가 있는지 확인하기.
3. let 변수 = 필요한정보 변수[루프변수]["원하는 정보"]
   ->루프내에서 정보를 추출할 땐 루프변수를 적어줘야 한다. 루프변수를 안적어주면 Undefine가 뜬다.
   (아마 루프가 돌기때문에 몇번째인지 지정을 해줘야 값을 찾을 수 있지 않을까 생각한다.)
4. 필요한 정보를 추출할때 꼭 자료형을 맞춰야한다.
5. 이미지 태그의 주소를 변경하는 JQery
   -> $(#id).attr("src",이미지URL)
6. 화면에 추가 하는게 아니라면 굳이 html삽입 JQery를 사용하지 않아도 된다.(링크3번째 문제에 굳이 쓰지 않아도 잘 돌아가는 코드를 넣었다..)