See the Pen JavaScriptBasic2 by DevYJShin (@devyjshin) on CodePen.

 

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>

<script type="text/javascript">
	window.onload=function(){
		console.log("head 태그 안에서 p태그: ", document.getElementById("userid")); // 접근하는 방법
	};
</script>

</head>
<body>
	<script type="text/javascript">
		// 자바 스크립트 코드 작성 
		// 인터 프리터 - 순차적 실행 
		// DOM 생성 후 접근 가능
		console.log("body 태그 안에서 p태그 위: ", document.getElementById("userid")); // 접근하는 방법
	</script>

	<p id="userid">홍길동</p>


	<script type="text/javascript">
		// 자바 스크립트 코드 작성
		console.log("body 태그 안에서 p태그 밑: ", document.getElementById("userid")); // 접근하는 방법
	</script>
</body>
</html>

 

window.onload = 함수 
→ 실행 시점은 HTML DOM TREE가 모두 실행된 후에 실행된다.
HTML DOM TREE가 모두 실행 : body 안의 모든 태그가 실행

See the Pen JavaScript_Basic by DevYJShin (@devyjshin) on CodePen.

 

 

 

script 작성은 <head></head>에서 작성하는 것을 많이 사용한다.

 

<html>
<head>

	<script></script>	<!-- 1. 가장 많이 사용 -->
    
    <script src = "scripttest.js"></script> <!-- 2. 외부에서 가져올 경우 -->
</head>
<body>


	<script></script>   <!-- 3.  body 안에서 scipt 작성할 경우 하단 </body> 전에 작성  
    					페이지 로딩을 더 빠르게 하기 위해 어중간한 위치면 
                        		Java Script 때문에 페이지 열리는 속도가 느려짐 -->
</body>
</html>

Consecutive Numbers

 

 문제 설명

 

Table: Logs

+-------------+---------+
| Column Name | Type    |
+-------------+---------+
| id          | int     |
| num         | varchar |
+-------------+---------+
id is the primary key for this table.

 

Write an SQL query to find all numbers that appear at least three times consecutively.

Return the result table in any order.

The query result format is in the following example.

 

 입출력 예

 

Example 1:

Input: 
Logs table:
+----+-----+
| id | num |
+----+-----+
| 1  | 1   |
| 2  | 1   |
| 3  | 1   |
| 4  | 2   |
| 5  | 1   |
| 6  | 2   |
| 7  | 2   |
+----+-----+
Output: 
+-----------------+
| ConsecutiveNums |
+-----------------+
| 1               |
+-----------------+
Explanation: 1 is the only number that appears consecutively for at least three times.

 

 Oracle Query

 

SELECT DISTINCT 
	l1.Num As ConsecutiveNums
FROM Logs l1
JOIN Logs l2 ON l1.Id = l2.Id-1
JOIN Logs l3 ON l2.Id = l3.Id-1
WHERE l1.Num = l2.Num
	AND l2.Num = l3.Num;

* 참고 링크 : https://leetcode.com/problems/consecutive-numbers/discuss/185886/Self-Join-Twice-(681-ms-faster-than-100.00-of-Oracle-online-submissions-for-Consecutive-Numbers.)

 

 출처

 

https://leetcode.com/problems/consecutive-numbers/

Valid Triangle Number

 

 문제 설명

 

Given an integer array nums, return the number of triplets chosen from the array that can make triangles if we take them as side lengths of a triangle.

 

 제한 사항

 

  • 1 <= nums.length <= 1000
  • 0 <= nums[i] <= 1000

 

 입출력 예

 

Example 1:

Input: nums = [2,2,3,4]
Output: 3
Explanation: Valid combinations are: 
2,3,4 (using the first 2)
2,3,4 (using the second 2)
2,2,3

Example 2:

Input: nums = [4,2,3,4]
Output: 4

 

 Python 코드

 

Python code 

class Solution(object):
    def triangleNumber(self, nums):

        nums, count, n = sorted(nums, reverse=1), 0, len(nums)
        for i in range(n):
            j, k = i + 1, n - 1
            while j < k:
                if nums[j] + nums[k] > nums[i]:
                    count += k - j
                    j += 1
                else:
                    k -= 1
        return count

* 참고 링크 : https://leetcode.com/problems/valid-triangle-number/discuss/104177/O(N2)-solution-for-C%2B%2B-and-Python

 

 C++ 코드

 

C ++ code

class Solution {
public:
    int triangleNumber(vector<int>& nums) {
        if(nums.size() < 3) return 0;
        sort(nums.begin(), nums.end(), greater<int>());
        int res = 0;
        int n = nums.size();
        for(int a = 0; a < n-2; ++a){
            int b = a+1;
            int c = n-1;
            while(b < c){
                if(nums[b] + nums[c] > nums[a]){
                    res = res + c - b;
                    ++b;
                }
                else
                    --c;
            }
        }
        return res;
    }
};

* 참고 링크 : https://www.programmerall.com/article/1415760413/

 

 출처

 

https://leetcode.com/problems/valid-triangle-number/

Find Peak Element

 

 문제 설명

 

A peak element is an element that is strictly greater than its neighbors.

Given an integer array nums, find a peak element, and return its index. If the array contains multiple peaks, return the index to any of the peaks.

You may imagine that nums[-1] = nums[n] = -∞.

You must write an algorithm that runs in O(log n) time.

 

 제한 사항

 

  • 1 <= nums.length <= 1000
  • -231 <= nums[i] <= 231 - 1
  • nums[i] != nums[i + 1] for all valid i.

 

 입출력 예

 

Example 1:

Input: nums = [1,2,3,1]
Output: 2
Explanation: 3 is a peak element and your function should return the index number 2.

Example 2:

Input: nums = [1,2,1,3,5,6,4]
Output: 5
Explanation: Your function can return either index number 1 where the peak element is 2, or index number 5 where the peak element is 6.

 

 Python 코드

 

Python code 

class Solution:
    def findPeakElement(self, nums: List[int]) -> int:
        left = 0
        right = len(nums)-1
				# left가 커지고 right가 작아지는 경우 left와 right가 같아질 수 있다.
        # 그 때 원한느 값을 찾은 경우이므로 left와 right가 같아지면 반복문 종료
        while left < right:
            mid = (left + right) // 2      # 가운데 지점
            if nums[mid] < nums[mid+1]:    # 현재 값이 오른쪽 값보다 작다면
                left = mid+1
            else:                          # 현재 값이 오른쪽 값보다 크다면
                right = mid
        return left                        # 반복문이 종료되면 left가 정답

* 참고 링크 : https://velog.io/@hrpp1300/LeetCode-162.-Find-Peak-Element

 

 C++ 코드

 

C ++ code

class Solution {
public:
    int findPeakElement(vector<int>& nums) {
        int left = 0;
        int right = nums.size() - 1;
        while (left < right) {
            int mid = left + (right - left) / 2;
            if (nums[mid] > nums[mid + 1]) {
                right = mid;
            }
            else {
                left = mid + 1;
            }
        }
        return left; 
    }
};

* 참고 링크 : https://myeongcs.tistory.com/80

 

 출처

 

https://leetcode.com/problems/find-peak-element/submissions/

Same Tree

 

 문제 설명

 

We are playing the Guess Game. The game is as follows:

I pick a number from 1 to n. You have to guess which number I picked.

Every time you guess wrong, I will tell you whether the number I picked is higher or lower than your guess.

You call a pre-defined API int guess(int num), which returns three possible results:

  • -1: Your guess is higher than the number I picked (i.e. num > pick).
  • 1: Your guess is lower than the number I picked (i.e. num < pick).
  • 0: your guess is equal to the number I picked (i.e. num == pick).

Return the number that I picked.

 

 제한 사항

 

  • 1 <= n <= 231 - 1
  • 1 <= pick <= n

 

 입출력 예

 

Example 1:

Input: n = 10, pick = 6
Output: 6

Example 2:

Input: n = 1, pick = 1
Output: 1

Example 3:

Input: n = 2, pick = 1
Output: 1

 

 

 Python 코드

 

Python code 

# The guess API is already defined for you.
# @param num, your guess
# @return -1 if my number is lower, 1 if my number is higher, otherwise return 0
# def guess(num: int) -> int:

class Solution: 
    def guessNumber(self, n: int) -> int: 
        left, right = 1, n 
        
        while True: 
            middle_num = int((left + right) / 2) 
            if guess(middle_num) == 1: 
                left = middle_num + 1 
            elif guess(middle_num) == -1: 
                right = middle_num - 1 
            else: 
                return middle_num

* 참고 링크 : https://somjang.tistory.com/entry/leetCode-374-Guess-Number-Higher-or-Lower-Python

 

 C++ 코드

 

C ++ code

//Runtime: 0 ms, faster than 100.00% of C++ online submissions for Guess Number Higher or Lower.
//Memory Usage: 7.3 MB, less than 100.00% of C++ online submissions for Guess Number Higher or Lower.

// Forward declaration of guess API.
// @param num, your guess
// @return -1 if my number is lower, 1 if my number is higher, otherwise return 0
int guess(int num);

class Solution {
public:
    int guessNumber(int n) {
        int left = 1, right = n, cur = left+(right-left)/2;

        while(true){
            switch(guess(cur)){
                case -1:
                    right = cur-1;
                    cur = left+(right-left)/2;
                    break;
                case 1:
                    left = cur+1;
                    cur = left+(right-left)/2;
                    break;
                case 0:
                    return cur;
            }
        }
        return 0;
    }
};

* 참고 링크 : https://github.com/keineahnung2345/leetcode-cpp-practices/blob/master/374.%20Guess%20Number%20Higher%20or%20Lower.cpp

 

 출처

 

https://leetcode.com/problems/guess-number-higher-or-lower/

DOM(Document Object Model) ?

DOM(Document Object Model)은 문서 객체 모델로 XML, HTML 문서의 각 항목을 계층으로 표현하여 생성, 변형, 삭제할 수 있도록 돕는 인터페이스이다. W3C의 표준이다.

 

 DOM TREE

 

<html>
	<head>
    	<title>Hello</title>
    </head>
    <body>
    	<p>aaa</p>
        <p>bbb</p>
        <span id="x">ccc</span>
        <span id="y">ddd</span>
        <a href="https://www.naver.com">네이버</a>
    </body>
</html>

 출처

 

DOM 정의 -  https://ko.wikipedia.org/wiki/%EB%AC%B8%EC%84%9C_%EA%B0%9D%EC%B2%B4_%EB%AA%A8%EB%8D%B8

https://post.naver.com/viewer/postView.nhn?volumeNo=25195764 

 

+ 강의 교재

'AI Bootcamp > HTML' 카테고리의 다른 글

[HTML] Eclipse에서 HTML 시작  (0) 2022.01.25
[HTML] Eclipse Apache Tomcat 연동  (0) 2022.01.24

Eclipse에서 HTML 시작

 

HTML 실습

 

1. Eclipse 실행

2. [File] → [New] → [Dynamic Web Project]

- HTML Project 생성

3. [New Dynamic Web Project] Project name & Target runtime 설정 → Next

Project name : html_css

Target runtime : Apache Tomcat v8.5

4. [Next] 버튼 마우스로 클릭

5. [Finish] 버튼 마우스로 클릭

6. [WebContent] 선택 후 마우스 우클릭 → [New] → [HTML File]

- HTML 파일 생성

7. [New HTML File] → File name 입력 → [Finish] 버튼 마우스로 클릭

ex) File name : home.html

8. Templates : New HTML File (5) 선택 → [Finish] 버튼 마우스로 클릭

9. HTML File이 생성이 되면 아래와 같이 Missing node.js 팝업창이 발생 → 무시하고 OK 버튼 마우스로 클릭

10 . [Windows] → [Preferences] 

- UTF-8로 변경 설정

11. [Preferences] → [Web]

12.  [Web] → [CSS Files] → Encoding : ISO 10646/Unicode(UTF-8)로 변경

13.  [Web] → [HTML Files] → Encoding : ISO 10646/Unicode(UTF-8)로 변경

14. [Web] → [JSP Files] → Encoding : ISO 10646/Unicode(UTF-8)로 변경 → [Apply and Close] 버튼 마우스로 클릭

15. 생성한 HTML File 마우스로 우클릭 → Run As → 1 Run On Server 

16. [Run On Server] → [Finish] 버튼 마우스로 클릭 

17. Server 팝업창 열리면 OK 버튼 마우스로 클릭

The server may need be restarted. Do you want to restart the server? 

Restart server 체크

18. 

19.

20.

21. 

22.

23.

 

 

 출처

 

 

+ 강의 교재

'AI Bootcamp > HTML' 카테고리의 다른 글

[HTML] DOM TREE  (0) 2022.01.26
[HTML] Eclipse Apache Tomcat 연동  (0) 2022.01.24

숫자 카드 2

 

 문제 설명

 

숫자 카드는 정수 하나가 적혀져 있는 카드이다. 상근이는 숫자 카드 N개를 가지고 있다. 정수 M개가 주어졌을 때, 이 수가 적혀있는 숫자 카드를 상근이가 몇 개 가지고 있는지 구하는 프로그램을 작성하시오.

 

 입력

 

첫째 줄에 상근이가 가지고 있는 숫자 카드의 개수 N(1 ≤ N ≤ 500,000)이 주어진다. 둘째 줄에는 숫자 카드에 적혀있는 정수가 주어진다. 숫자 카드에 적혀있는 수는 -10,000,000보다 크거나 같고, 10,000,000보다 작거나 같다.

셋째 줄에는 M(1 ≤ M ≤ 500,000)이 주어진다. 넷째 줄에는 상근이가 몇 개 가지고 있는 숫자 카드인지 구해야 할 M개의 정수가 주어지며, 이 수는 공백으로 구분되어져 있다. 이 수도 -10,000,000보다 크거나 같고, 10,000,000보다 작거나 같다.

 출력

 

첫째 줄에 입력으로 주어진 M개의 수에 대해서, 각 수가 적힌 숫자 카드를 상근이가 몇 개 가지고 있는지를 공백으로 구분해 출력한다.

 예제 입출력

 

 Python 코드

 

from sys import stdin
from collections import Counter

# 1. n 입력
n = int(stdin.readline())

# 2. n개의 정수
arr = list(map(int, stdin.readline().split()))

# 3. m 입력
m = int(stdin.readline())

# 4. m개의 정수
find = list(map(int, stdin.readline().split())) 

# 5. counter 함수 활용
count = Counter(arr)

# print(count)
print(' '.join(str(count[x])   if x in count else '0' for x in find ))

* 참고 링크 : https://0equal2.tistory.com/62

 

 C++ 코드

 

#include <iostream> 
#include <vector> 
#include <algorithm> 

using namespace std; 

int n,m; 
vector<int> arr; 
vector<int> target; 

int main() { 
	ios_base :: sync_with_stdio(false); 
	cin.tie(NULL); cout.tie(NULL); 
	cin >> n; 
	
	int count[n]={0,}; 
	for(auto i = 0;i<n;i++) { 
		int x; 
		cin >> x; 
		arr.push_back(x); 
	} 
	
	sort(arr.begin(),arr.end()); 
	
	cin >> m; 
	for(auto i =0; i<m;i++) { 
		int x; 
		cin >> x; 
		
		cout << upper_bound(arr.begin(),arr.end(),x) - lower_bound(arr.begin(),arr.end(),x)<< " "; 
	} 
}

* 참고 링크 : https://tooo1.tistory.com/126

 출처

 

https://www.acmicpc.net/problem/10816

+ Recent posts