The user doesn’t know how to program in Dart. How can we adapt our application with custom logic? So, we will start teaching them the basics with the creation of a function and reacting upon some actions that a user does in the HTML page.
- View Offline
- [Instructor] Hi, and welcome to section two, Basics of Our Dart application. In this section you will know how to start programming in Dart. This will be our first step of programming in Dart. We will start working on our sample application in Dart, and also how to interact with the DOM. We will add some styles to our application and start implementing a navigation system in our sample application. Now we move onto the first video of this section that deals with interacting with the DOM.
In this video we're going to take a look at creating a function in Dart and see what happens when a user clicks on a button and how to capture that, how to get on the value of an input field and how to set some content on the web page with the Dart code. First, we're going to add a text input field and a Submit button on the page. The output will be our div, where the content will be submitted in. Now we can run our application and you will see that the input box and the button are added to our page.
Pub serve will listen to the changes and will update the outcome right away. Isn't that great? When we serve now to local host port 7777, we will see our changes. When you click on the Submit button, then nothing happens. That is what we will change now. First we open the kind.dart file.
This is the starting point of our application. In this Dart file, we see a main method. This will be called when the page is loaded. With the query selector we can get access to our Enter button, and on this button we can put an on-click event. So whenever a user clicks on a button, the function ClickedOnEnter will execute. For now, we will print the text yes in the console of our browser.
When we clicked on the Submit button, we will see yes in the console. Now we will extend our method clickedOnEnter. First we need to query our input field. We need to do that by using querySelector. And then we need to append our input value to our output div.
This results in the following outcome. Now we can add our input values into another section of the page. This looks terrible, right? In the next video I will show you how to add some styling in our application. In this video we have learned how to create some basic interactions with our web page, how to anticipate a click on a button, how we can get the value out of our input field. We also saw how to append the text to a div.
In the next video we will cover how to handle styles in our Dart application.
Dart is a new open-source programming language for the web. It is a single language for both client and server that can be used to build large-scale web, server, and mobile applications. Stop solving new challenges with the same old tools—let Dart show you a whole new way! In this course, author Joris Hermans guides you into the wonderful world of web development with the dartlang programming language. By following along, you get a more mature sense of how to build a great application and see all the facets needed to reach that goal.
Learn the important language features of Dart, along with some advanced features such as mixins and null-aware operators. Later on, see how to use unit tests, work with browser APIs, and set up of a web server. Finally, take a look at Angular 2, a great front-end framework also built by Google.
This course provides you with everything you need to know to start or enhance your career in web development with Dart.
- Installing Dart
- Creating a basic web application with Dart
- Creating DOM interactions
- Creating classes and objects
- Implementing a library
- Using parameters, null-aware operators, and mixins
- Testing your code
- Setting up APIs
- Using Dart localStorage
- Working with AngularJS
- Troubleshooting Dart applications