https://github.com/codeadamca/javascript-output
A basic example of using JavaScript to create output.
https://github.com/codeadamca/javascript-output
javascript learning-code output
Last synced: 10 months ago
JSON representation
A basic example of using JavaScript to create output.
- Host: GitHub
- URL: https://github.com/codeadamca/javascript-output
- Owner: codeadamca
- Created: 2021-01-12T20:18:51.000Z (about 5 years ago)
- Default Branch: main
- Last Pushed: 2025-01-26T22:08:28.000Z (12 months ago)
- Last Synced: 2025-01-26T23:18:43.624Z (12 months ago)
- Topics: javascript, learning-code, output
- Language: HTML
- Homepage:
- Size: 243 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# A Basic Introduction to JavaScript and Output
JavaScript can be used to create output. This can be done many different ways:
- Using `document.write` to add content to the HTML webpage
- Use `alert()` to display a warning message in an alert popup
- Use `console.log()` to display a message in the developer tools of a browser
## Using `document.write`
The `document.write` command will add content to the document.
Open up a new HTML file, name it output.html, add the standard HTML elements, and then add the following code:
```html
document.write( "<h1>Creating Output</h1>" );
document.write( "<p>Quotes can cause conflicts with creating output." + " " +
"To resolve quote issues there are three solutions:</p>" );
document.write( "<ul>" +
"<li>Escape them with a slash</li>" +
"<li>Use alternating quotes</li>" +
"<li>Use special characters</li>" +
"</ul>" );
```
Test the file using a browser. The `body` section of the webpage should have some useful information regarding JavaScript, output, and quotations.
## Using `alert`
The `alert()` command will display a message using an alert style popup.
Open up the previous file, right before the closing `script` tag, add the following code:
```javascript
alert("This is an alert message");
```
## Using `console.log`
The `console.log()` command will display a message using the browser developer tools.
Open up the previous file, right before the closing `script` tag, add the following code:
```javascript
console.log( "This is a console log" );
```
To test the `console.log` line of code, follow these steps:
1. Open a browser
2. Right click on the web page and choose Inspect Element
3. From the developer tools, choose the Console tab
3. Open the `output.html` file
4. The message in the `console.log` command will be displayed
## Trying it Out
Create an HTML file and add the following code:
```html
Creating Output
W3Schools
W3Schools is a web developer information website, with tutorials
and references relating to web development topics such as HTML, CSS,
JavaScript and PHP.
```
Convert each line of HTML in the `body` section to use JavaScript and `document.write()`. For example, converting the `h1` element could look like this:
```html
Creating Output
document.write("<h1>W3Schools</h1>");
W3Schools is a web developer information website, with tutorials
and references relating to web development topics such as HTML, CSS,
JavaScript and PHP.
```
When you have completed the goal, the `body` tag will only include one `script` tag and a number of `document.write()` commands.
> Full tutorial URL:
> https://codeadam.ca/learning/javascript-output.html
***
## Repo Resourcecs
* [Visual Studio Code](https://code.visualstudio.com/)
