본문 바로가기

JavaScript

(10)
[JavaScript] 논리 연산자 (AND, OR, NOT) 자바스크립트에 그동안 너무 무관심했어서 요즘 자바스크립트 기초 강의 다시 시작했다..!! 기본 문법은 다 안다고 생각했는데 헷갈리는 부분이 생겨서 기록한당 나의 최종 목적 : 남자이고, 이름이 Mike 이거나 성인이면 통과시키고 싶음 const gender = 'F'; const name = 'Jane'; const isAdult = true; 수정 전 코드 if(gender === 'M' && name === 'Mike' || isAdult) { console.log('통과') } else { console.log('돌아가') } => 이렇게 하면 '통과'가 출력된다. AND(&&)가 OR( || ) 보다 우선순위가 높아서 (gender === 'M' && name === 'Mike') || isAdu..
[JavaScript] input 태그에 select 태그의 option value값 입력시키기 (select, option, querySelector, addEventListener, change, target, value) input 태그에 select 태그의 option value값 입력시키기 예를 들어 설명하자면, 회원가입 페이지에서 이메일 주소를 입력해야하는 경우가 있다. @ 뒤의 주소를 입력하지 않고 옵션에서 gmail.com을 선택하면 이메일 입력 칸에 gmail.com이 자동으로 입력되는! 이렇게 작동되게 코드를 작성해봅시당 직접입력 1번 2번 3번 먼저 class명이 choice인 값을 choice라는 새로운 변수에 대입시켜주기 새로운 변수 choice에 이벤트 함수를 적용해준다. 'click'을 사용 후 console에 찍어보면 console.log(e.target.value); 처음에 옵션값을 선택하기 위해 ▼을 '클릭'하면 첫번째 옵션값인 '직접입력'이 출력된다. 또한 '직접입력'을 '클릭'하면 value..
[JavaScript][jQuery] 로그인 시 공란으로 입력하면 경고 문구 보여지게 하기 로그인 시 공란으로 입력하면 경고 문구 보여지게 하기 아이디와 비밀번호에 입력하지 않고(공란) '로그인' 버튼을 클릭하면 빨간 글씨로 경고 문구가 나오는 코드를 작성했다. 현재는 p태그에 display : none을 주어서 보여지지 않고있다. 로그인 아이디 아이디를 입력하세요! 비밀번호 비밀번호를 입력하세요! 로그인 $(function() { $('#btn').click(function(e) { let userId = document.querySelector('#userid').value; let userPw = document.querySelector('#userpw').value; if(userId.length==0) { $('p.msg1').css('display','block'); } else {..
[JavaScript] for문 사용하여 별찍기 / 반복문 별찍기 (중첩for문) 2023.03.04 - [JavaScript] - [JavaScript] for문 사용하여 구구단 출력 (세로버전, 가로버전) 반복문 진도가 다 나갔다 생각하면 해보는 실습문제..거의 반복문의 정석 같은 느낌..일명 별찍기..!! 실습을 하면서 다른 분들은 공백을 하시지만 난 잘 보이게 하기 위해서 ☆과 ★ 사용! 별을 찍기 전에 별이 행과 열에 몇 개씩 출력되는지 부터 세어보자! 5행 6열이라면 바깥for문 i에 5, 안쪽for문 j에 6!문제1.★ ★★ ★★★ ★★★★ ★★★★★for(i=0;i
[JavaScript] 버튼 클릭해서 문장의 특정 단어 반복해서 출력하기 (span, querySelector, onclick, innerHTML) 버튼을 클릭해서 문장의 특정 단어 반복해서 출력하기 정말 버튼을 클릭하면 '정말'이라는 단어가 반복해서 나오는 코드를 짜봅시당 먼저 저 문장과 버튼을 출력해보자 딩딩쓰 정말 귀여워! 정말 버튼 정말 버튼을 클릭했을 경우에, // 버튼에 onclick함수 사용하기 '정말'이라는 문자열 반복해서 나와서 바로 옆에 출력되어야한다. // '정말' 단어 변수 만들어주기 (문자열 두개를 출력하면 띄어쓰기 없이 붙어서 출력된다) id가 true인 첫번째 요소를 반환해서 real 이라는 변수에 넣어주기 id가 btn인 첫번째 요소를 반환해서 click 이라는 변수에 넣어주기 let really = '정말 '; click.onclick = function () { relly += '정말 '; real.innerHTML ..
[JavaScript] 버튼 클릭해서 문장의 특정 단어 바꾸기 (span, querySelector, onclick, innerHTML) 버튼을 클릭해서 문장의 특정 단어 바꾸기 정말 버튼을 클릭하면 '짱'이라는 단어가 '정말'이라는 단어로 바뀌게 코드를 짜봅시당 먼저 저 문장과 버튼을 출력해보자 딩딩쓰 짱 귀여워! 정말 버튼 정말 버튼을 클릭했을 경우에, // 버튼에 onclick함수 사용하기 '짱'이라는 단어가 '정말'이라는 단어로 바뀌어야한다. // '짱' 단어 변수 만들어주기 id가 true인 첫번째 요소를 반환해서 real 이라는 변수에 넣어주기 id가 btn인 첫번째 요소를 반환해서 click 이라는 변수에 넣어주기 딩딩쓰 코드 리뷰 let count = 0; click.onclick = function () { count++; if(count%2) { real.innerHTML = '짱'; } else { real.innerH..
[JavaScript] 이벤트(event)란? 이벤트 특정의 DOM(Document Object Model)에 사용자가 마우스 또는 키보드 등의 행위가 일어났을 때 문서객체에 발생되는 일련의 동작(사건)을 말한다. 특정 이벤트가 발생하면 그 이벤트에 맞는 동작하는 기능을 수행할 수 있도록 하게되는데, 일반적으로 동작을 수행하는 것을 함수와 연결한다. 그 함수는 이벤트가 발생되기 전에는 실행되지 않다가 해당 이벤트가 발생되면 실행한다. 이 함수를 이벤트핸들러(Event Handler)라고 한다. 이벤트 등록하는 방법 1. inline 방식 : tag의 속성으로 지정하는 것 (예)
[JavaScript] BOM이란? BOM (Browser Object Model) BOM은 Browser Object Model의 약자로 브라우저에 내장된 객체를 "브라우저객체"라고 한다. 즉 브라우저와 관련된 객체의 집합 객체이다. window는 브라우저 객체의 최상위 객체가 된다. window객체에는 하위객체를 포함하고, 계층적 구조로 이루어져있다. BOM에는 window, screen, location, nagivator, history, document가 있다. window객체 자바스크립트를 배우면 초반에 쓰는 경고창함수 alert와 입력창함수 prompt도 window객체의 메서드 중 하나이다. alert( )가 window.alert( ), prompt( )가 window.prompt( ) 였다는 사실~ * window객체의 ..