"I've heard of JavaScript, but what can it do?" "I don't know where to start learning..."
For beginners who have such concerns.
JavaScript isThe magical technology that makes web pages move and respond to button clicksis.
In this article,Easy to understand even for beginners,
The first 5 basic grammar points to rememberDetailed explanation with concrete examplesI will.
This is the perfect content for you if you want to take the first step with confidence.
- Learn how to write variables and constants
- Let's try using conditional branching (if statements)
- Understanding repetitive processing (for statement)
- Define and reuse functions
- Basics of event processing and HTML integration
- Common JavaScript errors and how to fix them
- Completed code: App that displays greetings when you enter a name
- Summary: 5 grammar points to improve your English
Learn how to write variables and constants
Conclusion: Save your data with let and const
In JavaScript, informationvariableorconstantSave it and reuse it.
Examples of variables (things that change):
1 |
|
Examples of constants (things that don't change):
1 |
|
Let allows reassignment,const is a fixed valueThere is a difference:
Common mistakes and solutions:
const
If you define it and then try to change the value later, an error occurs.
→ "If you think you might change it later, use let."
Let's try using conditional branching (if statements)
Conclusion: Use if to separate processing according to conditions
The if statement is used when you want something to happen only when a certain condition is met.
Example: Judging by test scores
1 |
); }
); }
); } |
Common mistakes:
=
(assignment) and==
or===
confuse (compare)
→===
determines whether the types and values are the same.
Understanding repetitive processing (for statement)
Conclusion: The for statement is useful when you want to perform the same process multiple times.
For example, to count from 1 to 5, you would write it like this:
1 | (
|
explanation:
i = 1
is the number of startsi <= 5
is the end conditioni++
is an operation that increases by 1
Common mistakes:
i++
If you forget, it will become an infinite loop.
→ Be sure to ensure that the termination condition is met.
Define and reuse functions
Conclusion: Putting it all together in a function makes it easier to use
A function is a set of operations that can be named and called multiple times.
example:
1 |
); |
Common uses:
- Display a message when the button is pressed
- Calculate and display the numbers
Basics of event processing and HTML integration
Conclusion: Combined with HTML, it can react to user actions.
The real strength of JavaScript is its ability to work in conjunction with web pages.
Example: Display a message when a button is pressed
1 | <
> |
Points to note:
onclick
specifies the event within the HTML tagalert()
is a function that will be displayed as a popup on the screen
Common JavaScript errors and how to fix them
Conclusion: Spelling and grammar mistakes make up the majority
Common stumbling points:
Uncaught Reference Error
: Use of undefined variableSyntaxError
Forgotten closing parentheses or semicolonsTypeError
: A function or value is used incorrectly
Solution:
- Check the error statement in Google Chrome's developer tools
- Use the completion feature of your code editor (such as VSCode)
- Try something small and see the results as you go
Completed code: App that displays greetings when you enter a name
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | <!
<
=
> <
> <
=
> <
> </
> <
> <
> <
=
=
=
> <
=
> <
=
></
> <
>
} </
> </
> </
> |
Summary: 5 grammar points to improve your English
Once you master the basics of JavaScript, the things you can do will expand dramatically.
- Variables and ConstantsSave data with
- If StatementBranch according to conditions
- for statementRepeat with
- functionSummarize the process with
- eventRespond to user actions with
By combining these,Learn the basics of all web applications.
Even if you don't understand it at first, the quickest way to learn it is to write it out and try it out!