열심히

함수

일련의 실행문들을 메모리에 저장했다가 필요할 때 다시 호출하여 사용

내장형 : 이미 자바스크립트에 내장되어 있는 함수문

사용자 정의 : 사용자가 직접 실행문들을 함수문에 작성해서 필요할때마다 호출하여 사용하는 것

지역변수 : 변수가 정의된 함수내에서만 사용이 가능한 변수

함수 내에서 선언하며 반드시 앞에 var 키워드를 붙여서 선언합니다.

전역변수 : 현재 페이지 내 자바스크립트 어디서든 사용이 가능한 변수

함수바깥에 선언하거나 함수 내에서 var 연산자를 붙이지 않고 선언합니다.

변수의 중복사용을 막기위해서 구분

기본형식

function 함수명(){
	실행문;
}
함수명();

전달(인자)값이 있는 함수

function 함수명(매개변수1,매개변수2){
	실행문;
}

함수명(인자값1,인자값2);

return

다음 실행문들을 수행하지 않고, 함수문을 마칩니다

함수 호출문에게 값을 반환합니다.

재귀함수 호출

실행문에서 자기 자신을 스스로 호출하는 것을 '재귀함수 호출'이라고 합니다.

내장 함수

생성자 함수

사용자 정의 객체

function 함수명(매개변수1,매개변수2,..매개변수3){
this.속성1=매개변수1;
this.속성2=매개변수2;
this.속성n=매개변수n;
this.메서드1=function(){
		실행문;
	}
}

var 인스턴스 네임(객체명)=new 함수면(값1,값2,..값n);

객체(Object)

특정 기능을 수행하는 단위체

매서드(method)

객체가 지닌 각각의 기능

객체의 생성

new 연상자 사용

var todayObj=new Date();

Date 객체

var 변수=new Date();

var 변수=new Date(연,월,일,시,분,호);

Math객체

String 객체

var 변수(인스턴스 네임)=new String("자바스크립트")

var 변수(인스턴스 네임)="자바스크립트";

Array객체

배열, 하나의 변수에 여러개의 데이터를 저장

각 공간마다 인덱스의 번호가 존재

var 변수(인스턴스 네임)=new Array();

변수[0]="값1"

변수[1]="값2"

변수[2]="값3"

변수[3]="값4"

변수[4]="값5"

var 변수(인스턴스 네임)=new Array((5);

var 변수(인스턴스 네임)=[값1,값2,값3,값4]

배열 메서드

배열 데이터 추가/삭제 메서드

html-css 링크 외부선언

<link rel="stylesheet" type="text/css" href="css/main.css">
<link rel="stylesheet" type="text/css" href="css/media.css">

media.css ->반응형 웹페이지(모바일)문서

언제나 링크 제일아래에 위치

jquery 링크

<script src="https://code.jquery.com/jquery-3.1.0.min.js" 

javascript 선언문 예제

<script type="text/javascript">

document.write();

</script>

document 객체 Object

write() 메서드 Method 기능

변수 및 데이터형

변수 : 데이터를 저장하는 공간, 한번에 1개의 데이터만 저장하고 새로운 데이터가 입력되면 기존의 값은 삭제

var 변수명; 또는 var 변수명1,변수명2,변수명3; 또는 var 변수명=데이터값;

연산자

산술연산자

비교연산자

대입(할당)연산자

증감 연산자

논리 연산자

문자 결합 연산자

조건 연산자

조건문? 실행문1:실행문2

조건문의 결과가 참(true)이면 실행문1, 거짓(false)이면 수행문2

confirm 메서드

확인,취소 창

확인이면 true, 취소하면 false값을 반환

예제

<script type="text/javascript">
<![CDATA[
var result=confirm("Do you like javascript?");
var the Text=result ? "good":"No-good";
doucument.write(theText);
]]>
</script>

제어문

조건문

if(조건식){
	실행문;
}

if~else문

if(조건식){
	실행문1;
}else{
	실행문2;
}

if(조건식1){
	실행문1;
}else if(조건식2){
	실행문2;
}else if(조건식3){
	실행문3;
}else{
	실행문4;
}

swich~case문

num=3;
switch(num){
	case 1:
    	실행문1;
        break;
    case2:
    	실행문2;
        break;
    case3:
    	실행문3;
        break;
    default:
    	실행문4;
}        

조건문과 switch~case문 차이

조건문은 '데이터 중복'의 경우라 하더라도 특정 '조건'을 허용할때 사용하는 반면

switch~case문은 '정확히' 일치하는 경우만 허용할때 사용

반복문

while문

 특정조건식을 만족하는 동안 실행문을 반복적으로 수행

var i=초기값;
while(조건식){
	실행문;
    증감식;
}

---------
<예>
var i=1;
while(i<=10){
	document.write(i+"<br />";
    i++;
}

for문

while문과 비슷하지만 간단해서 사용빈도 더높음

for(var k=초기값; 조건식;증감식){
	실행문;
}

---------
<예>
for(var k=1; k<=10;k++){
	document.write(k+"<br />");
}

2중for문

바깥for문+안쪽for문

break문

반복문의 실행문은 break문을 만나면 종료

continue문

반복문이 continue문을 만나면 바로 증감식으로 돌아가 실행을 반복

[html]

<div class="openMenu">
                    <i class="fas fa-bars"></i>
</div>
<div class="sidenav">
                    <a href="#" class="closebtn">&times;</a>
                    <a href="#">About</a>
                    <a href="#">Services</a>
                    <a href="#">Clients</a>
                    <a href="#">Contact</a>
</div>

openMenu 의 사이드네비게이션 아이콘은 폰트어썸사용했음

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.8.2/css/all.min.css" />

[css]

.openMenu{
        display: block;
        float: right;
        margin-right: 50px;
        font-size: 50px;
}
    
.sidenav {
  height: 100%;
  width: 0;
  position: fixed;
  z-index: 1;
  top: 0;
  right: 0;
  background-color: #111;
  overflow-x: hidden;
  transition: 0.5s;
  padding-top: 60px;
}

.sidenav a {
  padding: 8px;
  line-height: 30px;
  text-decoration: none;
  font-size: 25px;
  color: #818181;
  display: block;
  transition: 0.3s;
}

.sidenav a:hover {
  color: #f1f1f1;
}

.sidenav .closebtn {
  position: absolute;
  top: 0;
  right: 25px;
  font-size: 36px;
  margin-left: 50px;
}

[js]

$(document).ready(function(){    
    $('.openMenu').click(function(){
        $('.sidenav').css('width','250px')
    });
    $('.closebtn').click(function(){
        $('.sidenav').css('width','0');
    });
});

[결과]

gnb마우스호버시 slidedown, slideup만 쓰니까 마우스떼면 바로 올라가버려서 해결

$(document).ready(function(){ 
    $('.gnb').hover(function(){ 
        $('.lnbWrap').slideDown();  //gnb hove시 lnbWrap 슬라이드다운
    }); 
    $('.lnbWrap').hover(function(){  
        $('.lnbWrap').css('display','block');  //lnbWrap 안에 마우스커서있을경우에 유지
    },function(){ 
        $('.lnbWrap').slideUp();  // 마우스커서 나가면 슬라이드업
    }); 
});