JavaScript Basics: Fundamental Syntax, Part 1

Loading...

University of California, Davis의 강좌에서

Introduction to Web Development

416개의 평가

University of California, Davis

Introduction to Web Development

416개의 평가

This course is designed to start you on a path toward future studies in web development and design, no matter how little experience or technical knowledge you currently have. The web is a very big place, and if you are the typical internet user, you probably visit several websites every day, whether for business, entertainment or education. But have you ever wondered how these websites actually work? How are they built? How do browsers, computers, and mobile devices interact with the web? What skills are necessary to build a website? With almost 1 billion websites now on the internet, the answers to these questions could be your first step toward a better understanding of the internet and developing a new set of internet skills. By the end of this course you’ll be able to describe the structure and functionality of the world wide web, create dynamic web pages using a combination of HTML, CSS, and JavaScript, apply essential programming language concepts when creating HTML forms, select an appropriate web hosting service, and publish your webpages for the world to see. Finally, you’ll be able to develop a working model for creating your own personal or business websites in the future and be fully prepared to take the next step in a more advanced web development or design course or specialization.

수업에서

Introduction to Programming Using JavaScript

Now that you know some basic HTML, it's time to turn our attention to another common scripting language used to make websites dynamic - that is allowing users to interact with your webpages - JavaScript. While learning about JavaScript, you'll also gain some foundational knowledge common to all programming languages. By the end of this module, you'll be able to: discuss what is meant by dynamic content; perform essential programming language tasks; create simple JavaScript programs; use JavaScript to set up alerts and respond to events, to read input, and to change HTML; and conduct basic JavaScript testing.

Module 3 Introduction1:26

Static vs. Dynamic Webpages5:37

The Value of JavaScript to Our Websites3:30

JavaScript Basics: Fundamental Syntax, Part 15:54

JavaScript Basics: Fundamental Syntax, Part 210:01

Putting JavaScript to Work: Using Alerts and Prompts9:41

Putting Javascript to Work: Events7:19

Putting JavaScript to Work: Gathering Additional User Input and Dynamically Modifying HTML6:29

Testing JavaScript8:36

강사 만나기

Daniel Randall
Senior Architect at Composer Solutions and Instructor
UC Davis Division of Continuing and Professional Education

[MUSIC]

Hi and welcome to the lesson.

In our last lesson, we talked about how HTML is actually a markup language

rather than a programming language.

And that we actually need the power of a programming language like

JavaScript to accomplish some of our more complex features.

So in this lesson we'll talk a little bit about some of JavaScript's

fundamental syntax.

So here we're looking at a JavaScript program similar to the one we saw

due the end of last week.

On line 7 we have something called a script tag.

It looks like an HTML tag but it will not be displayed to users.

So it starts with the word script, it has a type which is text/javascript,

the script tag is closed, and then there's a matching script tag after.

At the bottom with the traditional slash before the script.

And you see in my editor, that it shows matching script tags beginning and end.

Anything between the script tags is considered to be JavaScript rather

than HMTL, so your browser will evaluate this as JavaScript programming code

rather than HTML code.

So whenever we use JavaScript, especially JavaScript document link,

we will need to use script tags.

The exception of this is as we saw in the previous video.

If we have an onclick event here or

some other event, we can give a snip it of JavaScript here without the text.

So when we're using it for an event.

Like in this case, we can do so without the tags.

But normally, we'll need the script tags to do JavaScript.

Particularly, JavaScript of any particular link.

So, let's talk about some of the other elements of syntax here.

One is that this symbol that I've just highlighted,

the equals sign, is JavaScript's assignment operator.

So what this says when we read it is that we're assigning this text, Thanks for

adding text to the innerHTML.

So, it's similar to how we might have experienced it in math

when we're trying to say x equals five.

But in this case, we're not stating it,

we're giving this value on the right to the thing on the left.

Another element here that you want to be aware are these docs.

So, I'm going to read this as document.getElementById and

then there's an ID here .innerHTML.

And we use this dot to separate aspects of what are called JavaScript objects.

Now, we move in detail about the objects themselves.

But get used to seeing this .notation, and

this so-called .operator when we're writing JavaScript code.

Another element that I want to discuss is that JavaScript is case sensitive.

So, for instance, addParagraphText() is one function name.

If I were to do this and

capitalize the a that is considered a different name all together.

So the same thing goes here.

If I were to change getElementByID to

getElementById with a capitalized e after the g.

This would no longer be recognized as a feature I want from JavaScript so

we need to get the case correct.

Okay, so let's look at this example.

And this is a review from before.

Okay, I've opened it in my browser.

And we'll click the button, and we'll see the text and let's go.

We'll view that again briefly.

This is the button we clicked.

It have a text Click Me.

It acts as this function addParagraphText().

And it finds the function here to find with the keyword function.

And the only thing this function is doing is using getElementById at

assigning the inner HTML this value.

Now you may remember that the element was looking for

is the element here on line 26 with the ID name para.

And this ID name could be anything you'd like, I chose para because it's paragraph.

And then if we want to change the HTML of the element like, wait,

we do in this paragraph tag.

We can use .innerHTML that's the HTML inside the paragraph tag and

we give it it's new value.

So the last thing I want to mention as far as syntax in JavaScript for

this lesson is that JavaScript statements, that is one line of code,

are terminated with a semi colon and that's this character right here.

Without that some JavaScript statements will not execute correctly so

it's a good practice to use a semi colon at the end of statements.

There are some occasional exceptions for

instance this function doesn't have a semi colon here or here.

And after practicing for a while you'll get use of these little details.

So in our next lesson we'll continue talking about JavaScript syntax and

I'll see you then.

Coursera 카탈로그 살펴보기

무료로 참여해 맞춤화된 추천, 업데이트 및 제안을 받아보세요.

Coursera는 세계 최고의 교육에 대한 보편적인 접근 기회를 제공하며, 최고의 대학 및 기관들과 제휴하여 온라인 강좌를 제공합니다.

© 2019 Coursera Inc. All rights reserved.

앱스토어에서 다운로드하기

구글 플레이에서 받기