Visual Basic.NET
PROJECT 1.5.2
Change colors
Web App (Java Script)
Part 1
For our projects we will use Microsoft Visual Studio 2019. It allows to create projects in different programming languages and on different platforms.
At the time of creating our resource, the functionality of New Visual Web Developer in Visual Studio 2022 has not been fully developed by the Microsoft team, so we will use Visual Studio 2019.
Download and install Visual Studio 2019 on your Personal Compiuter.
Download Visual Studio 2019 >>>
Open Visual Studio. Click Create a new project
From The first Lists choose Visual Basic. From the second Windows, from the third Web. Click ASP.NET Web Application (.NET Framework)
Give the name of the Project MyFirstJavaScriptWebPage (or other name you want) click Next. In the net wihdow Choose Empty and click Add.
Our Empty Web App was created. Now we have to add the web page to it. In the Solution Explorer panel right click on the file with the project name (in our case MyFirstJavaScriptWebPage). Choose Add and after New Item.
In the Add New Item Window choose Web Form. Give the name of your web page (in our case Default.aspx)
In the Solution Explorer Panel You will see our new Web page (Default.aspx). Select it and Click Design (see red arrow)
Initially we have to create web app interface and add programming code to it.
We will use HTML elements for this project. From the Toolbox panel (if you don't see the Toolbox panel click View on Meniu panel and find it there). exmpand HTML and choose Input (Text), click on it, hold the mouse button in the click position, and drag-and-drop button on the form.
We can not change the button position using the mouse as you did in the case of the Desktop App. To do this we have to change something. Select Input (Text) Click Format in the menu panel. After click Position. In the position Window select Absolute and click OK.
Now select the Input (Text), Click and hold on its name and move to set position on the web page. Add on the web form one more Input (Text) an 3 Input (Button) as in the nexr image.
Now let's change the text on the buttons. We can not use in this case Properties Window as we have done before.
Select Button, Click Source and in the html code change Value (Value="red"). Do the same for other buttons. Cbange Values to the "blue" and "black"
Now the interface is ready. Let's start coding.
To do this in the Source (Click source to move to coding window and Design to move to design view) we have to copy and paste the next code somewhere after buttons html code. See the next image.
Java Script Code
<script>
document.getElementById("Button1").onclick = function () {
document.getElementById("Text1").style.backgroundColor = "red";
}
document.getElementById("Button2").onclick = function () {
document.getElementById("Text1").style.backgroundColor = "blue";
}
document.getElementById("Button3").onclick = function () {
document.getElementById("Text1").style.backgroundColor = "black";
}
</script>
Java Script script always starts with the <script> and ends with the </script>
We have used the next code document.getElementById("Button1") to assess Button1 and document.getElementById("Text1") to access Text1. The same we did with other buttons.
Run the application using the green triangle button on the menu panel.
The web browser will open with our web page. Click the buttons to test our page. WOW! it works. TextBox color was changed to red, blue, and black!.
Click the red square button on the meniu pane, we will return to the programming space.
Part 2
Now let's make our app more diinamic. We want to change the screen color based on text we will write in the textbox. If we will write "Red" Color must change to the red, If the "Blue" color must be blue and if "black" the screen must became black.
For this we will use the if operator we learned in previous lessons.
if opeartor
Here is the Java Script syntax for the if operator:
--------------------------
if ( condition) {
operation(s)
}
--------------------------
Looks like C#. Isn't it?
Javascript script always starts with the <script> and ends with the </script>
Example:
<script>
if (document.getElementById("Text2").value == "red") {
document.getElementById("Text1").style.backgroundColor = "red";
}
</script>
Please use the Simulator to continue the tutorial...
Conclusion:
We have created a web application in the Visual Studio environment. First, we worked on the program interface (visual side), then we wrote the programming code in Java Script.
A web page of course needs an address for the world to see. To do this, the web application must be uploaded to a remote server and a domain name must be chosen. Believe me, this is not difficult either, and we will do it many times in the next web projects.
What is difference beetween VB.net and C# web application we created before and the Java Script application?
Using Java Script we created Client-side app. Client-side apps are designed to run directly on the user's device. They are built using front-end technologies like HTML, CSS, and JavaScript. Since the code runs on our device, the app can respond quickly to user actions (works faster then Server-side app). Example: online games.
With the VB.NET and C# we can create Server-side apps. Aas the name suggests, run on a remote server. They handle the processing and logic on remote server and after send results to our device for rendering. The main advantage of server-side apps is their ability to work with a big data bases and manage large amounts of data. Example: Social media websites.
You can see that our Java Script App works faster than VB.NET and C# app.
And one more: in the Java Script App we used text changing events to change the color like in Desktop applications. Our web page changes the colors of the textbox when we are changing text in another textbox and it happens without clicking the button.
But in our VB.NET and C# application, we use the button click event after changing the text in the secund textbox. Why?
Becouse VB.NET and C# apps are Server-side apps and it is not possible to organize text changing ivent, becouse each time we enter the new simbol webpage will send this to the remote server and will wait for responce.
Java script app works locally, in our Browser so it can henndle text change event as desktop app.
In fact, in complex applications, we have to use both: Server-side and Client-side approaches.