Hello Berdo.
In order to develop JavaScript, you have to
build a development environment.
We currently use the WebStorm tool, but
since it is commercial, we recommend SublimeText3 or Visual Studio Code among
the free tools.
We look for additional convenience and
environment for development.
Setting up a basic development environment
will be explained using Visual Studio Code.
Download the latest version according to
the O / S that you use in the link path below.
https://code.visualstudio.com/download
If you execute after installation, you can
see the following execution screen.
It is not necessary to create an html file
or js file immediately after installation, but install vscode add-on and use
it.
(Use related html, javascript, jquery etc.
after installing add-on)
The basic thing is what you have installed,
and what you need is a browser installation for testing.
If you are currently using Windows, you
will have internet explorer installed. If you are running Windows 10 or later,
there will be two Edge.
Of course, it is not too bad to check the
development results by using two of them, but if you want to develop web, you
need to check the results in various web browsers.
FireFox Browser
https://www.mozilla.org/en/firefox/new/
Chrome Browser
https://www.google.com/chrome/index.html
Although there are advantages and
disadvantages of both browsers, it is the most faithful support for html5
function that is commonly supported in the latest.
I personally prefer FireFox, but during
development, I usually check the good and the result of Chrome Browser
debugging function there.
Screen to run in Chrome Browser and debug
in developer mode)
Run the Chrome Browser and press Ctrl +
Shift + I to see the Developer Mode window as shown above.
Now the basics are ready.
Let's create a simple html file and
javascript to create a web sample screen.
Let's create a "Hello World" that
does not lag behind in terms of legitimacy. ^^
In VSCode, create a blank editor window by
pressing Ctrl + N or File -> New from the menu.
Here's the code for a basic html page
template.
<! DOCTYPE html> <html lang = "kr"> <head> <meta charset = "UTF-8"> <title> </ title> </ head> <body> </ body> </ html>
If you are wondering about the above html
code, it is not difficult to find the basic html.
Type 'Hello World' inside <title>
Hello World </ title>.
The above content is what you see in the
browser caption area.
<body>
<label> Hello World </
label>
</ body>
<body> </ body> Create a label
area between the tags and type 'Hello World' as the content.
Then save the file as html and make sure
that the basic html file is working in your browser.
Press Ctrl + Shift + S or click File ->
Save As to save the file as 'helloworld.html'.
After
saving, you can see that VSCode's tab icon and code contents are highlighted
Just go to the file folder and run it with
your Chrome browser.
You can see that it works as above.
Now let's change the text in the label to
'Hello World With JavaScript' using basic JavaScript code.
To put javascript code in html
At the end of </ body>
<script type = "text /
javascript">
</ script>
Tag.
Since the html page is loading and I want
to change the sentence, change the <body> part as shown below.
<body onload = "InitPage
()">
If you change the above, the html page is
loaded in your browser, and it is a structure that calls InitPage () defined in
javascript with a function called onload.
Then declare the function because a
function called InitPage () must exist in the javascrpt tag.
<script type = "text / javascript"> function initPage () { } </ script>
In order to access the <label> in
JavaScript before creating the code that changes the contents of the
<label> tag inside the function declaration and the function that is
called at the beginning, it is necessary to specify a special name for
<label> .
<label id = "Hello"> Hello
World </ label>
function initPage()
{
var olabel = document.getElementById("Hello");
olabel.innerHTML = "Hello World With JavaScript";
}
An object called document points to the
current page. getElementById is a function to get the member to the current
page based on the Id. So if you call it like above, you can get the item
defined by label tag.
A property called innerHTML can directly
manipulate the content between <label> </ label>. So when you write
code like this, the <label> code on the page actually
<label id = "Hello"> Hello
World Width JavaScript </ label>
And the same effect.
Then we will simply change the application
to save the string "Hello World" and add it with "With
JavaScript".
function initPage ()
{
var olabel = document.getElementById ("Hello");
var sOrg = olabel.innerHTML;
sOrg + = "With JavaScript 2";
olabel.innerHTML = sOrg;
}
As you can see in the code above, innerHTML
can be used to get the existing values. The reason I put "2" after it
is added to show the difference.
I've seen how to use basic html pages as
JavaScript code by installing a basic tool, installing a browser, and creating
simple html code and adding a script in it.
Next, let's look at the JavaScript basic
types, basic grammar, and how to check basic types.
댓글 없음:
댓글 쓰기