레이어 이름이나 div이름 같은 녀석에 접근하여 스타일의 배경색을 바꾸는 코드

document.getElementById('레이어 이름').style.backgroundColor = "#ffffff";
//레이어 이름이나 div이름 같은 녀석에 접근하여 스타일의 배경색을 바꾸는 코드

버튼누르기

document.getElementsByClassName('버튼 클래스명')[0].click();

딜레이 실행

setTimeout(() => ResizeDynamic(), 3000);

동적으로 css 사이즈 변경

이렇게 하면 구브라우저에서도 퍼센트와 픽셀 동시적용이 가능하다.
css3같은건 브라우저에 따라 지원 안 하는 경우도 많으니까

설령 자바스크립트가 안 돌아가는 브라우저라도 기본으로 설정해둔 스킨이 적용되어서 문제없음

다양한 사이즈 대응도 가능한것도 장점

<script>
var entrys=document.getElementsByClassName('entry');
var entryWidth=0;
var articleWidth=0;
var commentWidth=0;
if(entrys.length>0)
{
 entryWidth=document.getElementsByClassName('entry')[0].style.width;
 articleWidth=document.getElementsByClassName('article')[0].style.width;
 commentWidth=document.getElementsByName('comment')[0].style.width;
}
//var listEntryWidth=document.getElementsByClassName('listEntry')[0].style.width;
var listEntryBgWidth=0;
var searchList=document.getElementById('searchList');
var searchListWidth=0;
if(searchList!=null)
{
	searchListWidth=searchList.style.width;
  listEntryBgWidth=document.getElementsByClassName('listEntryBg')[0].style.width;
}

var bannerRightLeft=document.getElementById('BannerRight').style.left;
function ResizeDynamic() 
{ 
   console.log("ResizeDynamic()");
	var listEntryBgs=document.getElementsByClassName('listEntryBg');
	var articles=document.getElementsByClassName('article');
	var comments=document.getElementsByName('comment');
	if(window.innerWidth>750+500)
	{
		for(var i=0; i<entrys.length; i++)
		{
    		entrys[i].style.width = window.innerWidth-500+"px";
	  }
		for(var i=0; i<listEntryBgs.length; i++)
		{
    		listEntryBgs[i].style.width = window.innerWidth-500+"px";
	  }
		for(var i=0; i<articles.length; i++)
		{
    		articles[i].style.width = window.innerWidth-500+"px";
	  }
		for(var i=0; i<comments.length; i++)
		{
    		comments[i].style.width = window.innerWidth-522+"px";
	  }
		if(searchList!=null)
		{
    	searchList.style.width = window.innerWidth-455+"px";
		}
    //document.getElementsByClassName('listEntry')[0].style.width = window.innerWidth-455+"px";
    document.getElementById('BannerRight').style.left = window.innerWidth-235+"px";
  }
	else
	{
		for(var i=0; i<entrys.length; i++)
		{
    		entrys[i].style.width = entryWidth;
	  }
		for(var i=0; i<listEntryBgs.length; i++)
		{
    		listEntryBgs[i].style.width = listEntryBgWidth;
	  }
		for(var i=0; i<articles.length; i++)
		{
    		articles[i].style.width = articleWidth;
	  }
		for(var i=0; i<comments.length; i++)
		{
    		comments[i].style.width = commentWidth;
	  }
if(searchList!=null)
		{
    searchList.style.width = searchListWidth;
		}
    //document.getElementsByClassName('listEntry')[0].style.width = listEntryWidth;
    document.getElementById('BannerRight').style.left = bannerRightLeft;

  }
}
	ResizeDynamic();
	setTimeout(() => ResizeDynamic(), 3000);
window.addEventListener('resize', function() 
{
	ResizeDynamic();
});
//동적 사이즈 변경
</script>

일정시간마다 이미지 교체

   <img id="testImg" src="">
  
<script>
	ImageChange();
		
		var link1="이미지링크1";
		var link2="이미지링크2";
	function ImageChange() 
	{ 
		//이미지 교체
		if(document.getElementById("testImg").src == link1)
		{
    	document.getElementById("testImg").src = link2;
		}
		else
		{
    	document.getElementById("testImg").src = link1;
	  }
	setTimeout(() => ImageChange(), 3000);
	}
</script>

인풋 id는 query랜다

버튼 id는 search_btn

document.getElementById('query').value="검색테스트";
document.getElementById('search_btn').click();

그래서 각각코드는 이렇게 된다

실행하면 잘된다

자바스크립트는 웹상에서 동작하는 언어로서

브라우저가 깔려있다면 어디서든지 사용가능하다

테스트는 여기서 해보면 편하다

https://codepen.io/pen/

다음은 hello world를 띄우는 예제이다

<script>

    alert('hello world');

</script>

<script>는 HTML에서 자바스크립트로 사용을 전환하겠다는 의미이고

</script>는 선언종료를 의미한다

다른방법

<script type="text/javascript">
    alert('hello world');
</script>

함수

function test() { 
//작동할 코드
}

변수
타입선언을 안 해도 되는등 다른언어에 비해 매우 유연하다

text = "텍스트";

배열

  arr=[];
  arr[0]="이미지링크1";
  arr[1]="이미지링크2";
  arr.length //길이

반복문

for(i=0;i<2;i++)
{
	//작동코드
}

로그

console.log("로그내용");

예제코드들

document.getElementById('레이어 이름').style.backgroundColor = "#ffffff";
//레이어 이름이나 div이름 같은 녀석에 접근하여 스타일의 배경색을 바꾸는 코드

document.body.style.backgroundImage = 'url(이미지 링크)';
//body의 배경이미지를 지정한 이미지 링크로 변경한다

HTML띄우기 예제

따옴표 내 따옴표는 \"로 표기해야 한다. 때문에 '문자열'도 많이 쓴다

//1번방법
document.write("<img src=\"이미지링크\">");

//2번방법
document.write('<img src="이미지링크">');

//3번방법
document.write("<img src='이미지링크'>");

시간 가져오기

let now = new Date();
let year  = now.getFullYear();  //0~1 (1월=0)
let month  = now.getMonth();  //0~1 (1월=0)
let date = now.getDate();
let day = now.getDay(); //0~6 (일요일=0,월요일=1)
let hour = today.getHours();
let min = today.getMinutes();
let second = today.getSeconds();
let ms = today.getMilliseconds();


if ((month+1==11)&&(date == 11))
{
    //빼빼로 데이일때 실행됨
}

addEventListener들

//마우스를 댈때
(function(img) 
{
  img.addEventListener('mouseover', function() 
  {
      img.src=imglinks2[imgIndex];
  });
})(img);

//마우스를 뗄때
(function(img) 
{
  img.addEventListener('mouseout', function() 
  {
      img.src=imglinks2[0];
  });
})(img);


//마우스를 클릭할때
(function(x,img) 
{
  img.addEventListener('click', function() 
  {
    imgIndex=x;
  });
})(x,img);

-아래부턴 HTML과 병합되어있다

버튼 누르면 이미지 변경

v1

  <button id="testButton">
   <img id="testImg" src="이미지링크1">
  </button>
  
  
<script>
document.getElementById("testButton").addEventListener("click", function(){
    document.getElementById("testImg").src = "이미지링크2";
});

</script>

v2

v1보다 훨~씬 간결해져서 기분이 좋아짐

  <button onclick="test()">
   <img id="testImg" src="이미지링크1">
  </button>
  
  
<script>
    function test() { 
    document.getElementById("testImg").src = "이미지링크2";
    }
</script>

표
참고 : https://www.w3schools.com/html/html_table_borders.asp

 <table id="testTable" border="1" bordercolor="black" ></table><style>
   table
   { 
      border-collapse: collapse;
   }
   
</style>
<script>
  tb = document.getElementById("testTable");
  for(y=0;y<10;y++)
  {
    tr = document.createElement('tr');
    tb.appendChild(tr);
    for(x=0;x<10;x++)
    {
        td = document.createElement('td');
        td.innerText = x+","+y;
        tr.appendChild(td);
    }
  }
</script>

표 초기화

tb = document.getElementById("testTable");
while (tb.firstChild) {
    tb.removeChild(tb.firstChild);
}

클릭하면 동작하는 표

<table id="testTable" border="1" bordercolor="black" ></table><style>
   table
   { 
      border-collapse: collapse;
   }
   
</style>
<script>
  tb = document.getElementById("testTable");
  for(y=0;y<10;y++)
  {
    tr = document.createElement('tr');
    tb.appendChild(tr);
    for(x=0;x<10;x++)
    {
        td = document.createElement('td');
        td.innerText = x+","+y;
        (function(x, y, td) 
        {
          td.addEventListener('click', function() {
              alert('Clicked: ' + x + ',' + y);
          });
        })(x, y, td);
        tr.appendChild(td);
    }
  }
</script>

클릭하면 동작하는 표 (이미지)

 <table id="testTable" border="1" bordercolor="black" ></table><style>
   table
   { 
      border-collapse: collapse;
   }
   
</style>
<script>
  imglinks=[];
  imglinks[0]="이미지링크1";
  imglinks[1]="이미지링크2";
  
  tb = document.getElementById("testTable");
  for(y=0;y<4;y++)
  {
    tr = document.createElement('tr');
    tb.appendChild(tr);
    for(x=0;x<4;x++)
    {
        td = document.createElement('td');
        tr.appendChild(td);
        {
          img = document.createElement('img');
          img.src = imglinks[0];
          img.style.width = "50px";
          img.style.height = "50px";
          (function(x, y, img) 
          {
              img.addEventListener('click', function() 
              {
                  img.src=imglinks[1];
                  alert('Clicked: ' + x + ',' + y);
              });
          })(x, y, img);
          td.appendChild(img);
        }
    }
  }
</script>

배열처리

array = {0,1,2,0,1,2}

//C#의 ConvertAll과 동일
//결과 : 1, 2, 3, 1, 2, 3
array = array.map(x => x+1);

//C#의 FindAll과 동일
//결과 : 0, 0
array.filter(x => x==0);