자바스크립트는 HTML내에서 사용이 가능한 언어로 활용범위가 높다고 한다.
HTML내부에서 script 라고만 열어주면 활성화 가능하다
혹은 CSS처럼 자바 파일을 따로 열어서 연결해줘도 된다
script src=''
1) 글씨 쓸 때
documnet.write('')(파이썬의 print같은 개념)
2) 변수지정
var XX
3) Math.random() 0~1미만의 실수
=> 실수의 갯수를 늘리려면 * 숫자로 늘리면 됨
=> 정수로 변경하려면 앞에 parseInt()를 추가 하면됨
4) 변수.push() 파이선 append랑 같은 기능
=>지정된 array 값에 뒤로 추가 되는 개념
5) for (var i=0' i<7; i++){적용하려는 숫자}
<프로젝트 1 로또번호 추첨>
var lotto = [];
while (lotto.length < 6) {
var num = parseInt(Math.random() * 45 + 1);
if (lotto.indexOf(num) == -1) {
lotto.push(num);
}
}
lotto.sort((a,b)=>a-b);
document.write("<div class='ball ball1'>" + lotto[0] + "</div>");
document.write("<div class='ball ball2'>" + lotto[1] + "</div>");
document.write("<div class='ball ball3'>" + lotto[2] + "</div>");
document.write("<div class='ball ball4'>" + lotto[3] + "</div>");
document.write("<div class='ball ball5'>" + lotto[4] + "</div>");
document.write("<div class='ball ball6'>" + lotto[5] + "</div>");
//문제)텍스트 에어리아에 있는 아이디는 "jasoseol"인데 이 안에 있는 내용을 일단 출력해보자
document.getElementById('jasoseol').value
//문제)나온 글씨를 카운트 해보면
var dddd=document.getElementById('jasoseol').value
//id안에 있는걸 변수로 빼와라
var cccc = dddd.length
console.log(cccc)
//문제)나온 글씨를 "count에 입력해보자"
document.getElementById('count').innerHTML = '('+cccc+'/200)'
// id에 있는걸 = 뒤에꺼로 넣어라
//여기서부터 조금 이상함
//문제가 없어보이는데 실행이 잘 안됨
//리뷰할 때 다시 한번 차근히 봐야겠다
function counter(){
var dddd=document.getElementById('jasoseol').value
var cccc = dddd.length
if (cccc>200) {
dddd = dddd.substring(0,200)
document.getElementById('jasoseol').value = dddd
}
document.getElementById('count').innerHTML = '('+cccc+'/200)'
}
counter()
//정답 비교
<textarea class="form-control" rows="3" id="jasoseol" onkeydown="counter();">저는 인성 문제가 없습니다.</textarea>
<span id="count">(0/200)</span>
<script>
function counter() {
var content = document.getElementById('jasoseol').value;
if (content.length > 200) {
content = content.substring(0,200);
document.getElementById('jasoseol').value = content;
}
document.getElementById('count').innerHTML = '(' + content.length + '/200)';
}
counter(); 해보니까 로또랑 글자수 계산기는 좀 더 공부를 해야 할거 같다. 막상 하려니 어렵네..
미니스타크래프트는 완전히 새로운 개념의 라이브러리를 설치한 부분이라 결국 응용의 연속 같다..
<script>
console.log($("#content").val())
</script>
쿼리의 단순화 작업
<button id="click" onclick="hello();">클릭</button>
$('#click').click(hello)
익명함수
(function(){ console.log('hello');
function에 함수이름을 지정하지 않아도 최종 값에 임의로 지정해서 넣을 수 있다
근데 이게 왜 필요한건지 모르겠네
$('#spit').animate({left: '+=250'});
$('#drone').click(function(){
$('#spit').fadeIn();
$('#spit').animate({left: '+=250'});
$('#spit').fadeOut(function(){
hp = hp - 1;
$('#hp').text('HP :' + hp);
});
$('#spit').css({left: '150px'});
그나마 이해가 좀 더 쉬웠던게 기념일 계산기 같다.
이거는 방향이 명확하다고 해야 할까. 다른 것은 생각을 하면 다른 쪽으로 할 수 있는 방향이 있다보니
다시 리뷰하면 방식을 까먹고 새롭게 생각하게 되어서 문제가 되었는데
그나마 기념일파트는 정해진 몇가지 수식을 만들어야 하는 것이 명확하다보니
짜기가 좀 더 수월했던 것 같았다.
<객체의 개념
<script>
var person = {
name: 'SUNG',
age: 36,
hobby: 'music',
sayHello: function() { console.log('helloman'); }
}
console.log(person.name);
console.log(person.sayHello())
</script>
//1. Date 객체 생성
<script>
//1. Date 객체 생성
var now = new Date()
console.log(now)
//2. 연도를 가져오는 메서드 .getFullYear()
console.log(now.getFullYear())
//3. 월 정보를 가져오는 메서드 .getMonth() {0: 1월, 1: 2월, ... 10: 11월, 11: 12월}
var month = now.getMonth()+1
console.log(month)
//4. 일 정보를 가져오는 메서드 .getDate()
console.log(now.getDate())
//5. 1970년 1월 1일 00:00:00을 기준으로 흐른 시간을 밀리초로 표시하는 메서드 .getTime()
console.log(now.getTime())
//6. 특정 일의 Date 객체 생성
var christmas = new Date('2022-12-25')
console.log(christmas)
//7. 특정 ms의 Date 객체 생성
var ms = new Date(1000)
console.log(ms)
</script> 이렇게 미션을 클리어 하기 위해서 해야 할 코드가 명확하니 생각이 단순해 지면서 딱 그것만 하게 되니
시간은 오래걸려도 수월했던 것 같다.
//현재 날짜
var now = new Date()
//사귄 날짜
var day = new Date('2020-12-25')
//getTime
var timediff = now.getTime() - day.getTime()
console.log(timediff)
//일자로 계산
var dday = parseInt(timediff/(1000*60*60*24)+1)
console.log(dday)
//텍스트 변경
$('#love').text(dday + '일째')
//기념일 지정
var valentine = new Date('2023-02-14')
//기념일에서 현재날짜 빼서 날짜 입력
var timeDiff2 = valentine.getTime() - now.getTime()
var dday2 = parseInt(timeDiff2/(1000*60*60*24)+1)
console.log(dday2)
//화면에 표시
$('#valentine').text(dday2 + "남음")
var ms = start.getTime() + 999 * (1000 * 60 * 60 * 24);
var thousand = new Date(ms);
var thousandDate = thousand.getFullYear() + '.' + (thousand.getMonth()+1) + '.' + thousand.getDate();
$('#thousand-date').text(thousandDate);
// thousand, now, getTime()
var timeDiff3 = thousand.getTime() - now.getTime();
var day3 = Math.floor(timeDiff3 / (1000 * 60 * 60 * 24) + 1);
$('#thousand').text(day3 + '일 남음');get3일 연짱 진짜 강의만 듣는데도 진이 빠진다. 재미는 있는데 뭔가 부족한 내 자신에게 더 채찍질을 하긴 하지만, 막막하긴 하다. 아 진짜 전공을 바꿀 생각을 한다면, 어마무시한 노력이 필요할 것 같다.
multiplayer