Scribd
Upload
92 views

JavaScript 02 WebStorm

This document provides instructions for using the WebStorm IDE to create JavaScript programs for a computer programming course. It explains that the Khan Academy editor is not sufficient for homework assignments which require a full webpage. It then outlines how to download, install, and register for WebStorm, how to create and configure a WebStorm project, and how to set the default browser and create a zip file for assignments. The document provides step-by-step guidance for setting up the necessary files and environment for the course.

Uploaded by

heudjnm
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
92 views

JavaScript 02 WebStorm

This document provides instructions for using the WebStorm IDE to create JavaScript programs for a computer programming course. It explains that the Khan Academy editor is not sufficient for homework assignments which require a full webpage. It then outlines how to download, install, and register for WebStorm, how to create and configure a WebStorm project, and how to set the default browser and create a zip file for assignments. The document provides step-by-step guidance for setting up the necessary files and environment for the course.

Uploaded by

heudjnm
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 7

CS 105: Introduction to Computer Programming

Creating a JavaScript program


using WebStorm
Instructor: Joel Castellanos
e-mail: [email protected]

Web: http://cs.unm.edu/~joel/
Office:
Farris Engineering Center
Room 2110

2/6/2018

Khan Window  Complete Program


 The Khan Academy videos let you edit the JavaScript code
to create your own cool images, animations and more.
 However, the code in the Khan Academy window is NOT a
full program: it only works inside Khan Academy's window.
 For your homework assignments, you need to turn in a
complete webpage that does not use the Khan Academy
window.
 Khan Academy uses JavaScript together with a powerful
JavaScript library called "Processing".
 In order for your code to work, you will need to have a copy
of p5.js in the same directory as your .html file.
2

1
WebStorm IDE

 WebStorm an Integrated Development Environment


(IDE) for writing JavaScript and HTML programs.

Can I use a different IDE?


 Anyone who already knows Sublime,
or another IDE should skip CS-105
and take CS-152. CS-105 is for noobs.
 If you are not already an expert in another IDE, then NO.
 The reason is simply that I will be teaching WebStorm. I will
be showing how to create projects, use the debugger, set
formatting, use shortcuts, ......
 These skills can all be done in different IDEs, but the
procedures are different. I do not want the lab instructors nor
myself to answer questions to some students that are totally
pointless to other students.
 The course is a group learning experience so lets all use the
4 same IDE.

2
Download, Install, Register
 Download WebStorm:
https://www.jetbrains.com/webstorm/

 The above is a Free 30-day trial. Students can get a free


multi-year version by using an e-mail ending in .edu:
https://www.jetbrains.com/shop/eform/students

Starting and Configuring WebStorm

3
Set { } Format

Creating a Webstorm Project


If WebStorm already has an open project, close it.

4
Create a Project Directory

Note the path.

Your project folder

If you are in a lab, select


your USB drive.
9

Add an HTML File to Your Project

Double-click on the
project folder to open.

Right-click on the
project folder to
open the menu.

Create a new HTML file


in the project directory.
10

5
View of WebStorm With New .html File

HomePage.html where it
belongs: inside the
MyFirstProject folder.

Drive and folder path to


your project folder.
11

Creating a .zip Archive for Turn-in

Right-click on file or folder.

Select:
Send to → Compressed (zipped) folder

You can also zip a whole


project folder. Do this when
your project contains many
source, image and/or sound
files.
12

6
& &
If chrome is your system's
default browser, you can run a
.html file in chrome from
WebStorm, by right-clicking the
file and selecting

However, if you do NOT want


chrome as your system's
default browser, you can still
tell WebStorm to use
chrome...... (see next slide)
13

Setting Webstorm's Default Browser


You only need to do this if chrome is NOT your
system's default browser.
Expand "Tools". Then Select "Web Browsers"

Drag Chrome to the


top of the list.

Change "System
default" to "First listed"

14

You might also like