okoze/03.Episode/03.Setting Up the Development Environment
をテンプレートにして作成
[
Front page
] [
New
|
Page list
|
Search
|
Recent changes
|
Help
]
Start:
*Setting Up the Development Environment [#nf6ca958]
Now that the development environment has been decided, le...
The goal of this episode is not to build okoze.
The goal is simply to create a minimal web application an...
**1. Create the Project Directory [#kc2f31d8]
First, create a directory for the project.
```text
okoze-pre/
````
Open this directory with Visual Studio Code.
At this point, there is no framework, build system, or ot...
**2. Create an HTML File [#q8ac7680]
Create a file named `index.html`.
The initial HTML is deliberately minimal.
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, ini...
<title>okoze</title>
</head>
<body>
<h1>okoze</h1>
</body>
</html>
```
**3. Run the Application [#jef2c2ee]
Install the '''Live Server''' extension for Visual Studio...
Open `index.html` and start Live Server.
The page should open in the browser.
At this point, we have a working web application.
It does not do anything useful yet, but that is enough fo...
**4. Check the Developer Tools [#nbf2db11]
Open the browser's Developer Tools.
The Console is particularly useful during development.
For example, add the following JavaScript:
```javascript
console.log("Hello, okoze!");
```
Reload the page and check that the message appears in the...
This confirms that we can use the browser's Developer Too...
**5. Add a Canvas [#t9d2b8b5]
Next, add a Canvas element to the page.
```html
<canvas id="canvas" width="800" height="600"></canvas>
```
We can then obtain the Canvas context with JavaScript.
```javascript
const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");
```
At this point, the application has a Canvas that we can d...
**6. Draw Something [#v9825379]
Let's draw a simple rectangle.
```javascript
ctx.strokeRect(10, 10, 100, 100);
```
If the rectangle appears in the browser, the basic graphi...
**What We Have Done [#n9dc8e84]
We now have a minimal development environment consisting ...
- Visual Studio Code
- Live Server
- a web browser
- HTML
- JavaScript
- Canvas API
- browser Developer Tools
There is still very little code.
That is intentional.
Before adding frameworks or libraries, I want to make sur...
The next step is to start implementing okoze.
End:
*Setting Up the Development Environment [#nf6ca958]
Now that the development environment has been decided, le...
The goal of this episode is not to build okoze.
The goal is simply to create a minimal web application an...
**1. Create the Project Directory [#kc2f31d8]
First, create a directory for the project.
```text
okoze-pre/
````
Open this directory with Visual Studio Code.
At this point, there is no framework, build system, or ot...
**2. Create an HTML File [#q8ac7680]
Create a file named `index.html`.
The initial HTML is deliberately minimal.
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, ini...
<title>okoze</title>
</head>
<body>
<h1>okoze</h1>
</body>
</html>
```
**3. Run the Application [#jef2c2ee]
Install the '''Live Server''' extension for Visual Studio...
Open `index.html` and start Live Server.
The page should open in the browser.
At this point, we have a working web application.
It does not do anything useful yet, but that is enough fo...
**4. Check the Developer Tools [#nbf2db11]
Open the browser's Developer Tools.
The Console is particularly useful during development.
For example, add the following JavaScript:
```javascript
console.log("Hello, okoze!");
```
Reload the page and check that the message appears in the...
This confirms that we can use the browser's Developer Too...
**5. Add a Canvas [#t9d2b8b5]
Next, add a Canvas element to the page.
```html
<canvas id="canvas" width="800" height="600"></canvas>
```
We can then obtain the Canvas context with JavaScript.
```javascript
const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");
```
At this point, the application has a Canvas that we can d...
**6. Draw Something [#v9825379]
Let's draw a simple rectangle.
```javascript
ctx.strokeRect(10, 10, 100, 100);
```
If the rectangle appears in the browser, the basic graphi...
**What We Have Done [#n9dc8e84]
We now have a minimal development environment consisting ...
- Visual Studio Code
- Live Server
- a web browser
- HTML
- JavaScript
- Canvas API
- browser Developer Tools
There is still very little code.
That is intentional.
Before adding frameworks or libraries, I want to make sur...
The next step is to start implementing okoze.
Page:
![[PukiWiki]](image/pukiwiki.png "[PukiWiki]")
