1 of 18

JavaScript

Primer Workshop for Planetarians and

Informal Educators

Download the reference files in the presenter notes.

Comments, suggestions, and feedback are welcome!

1

bit.ly/ppaJSprimerSlides

(case sensitive)

2 of 18

Why JavaScript?

2

Interactive Websites

Advanced dome controls

Autonomous Variables and Math

Inputs, Loops, and Conditions

3 of 18

PSA - don’t run other people’s code blindly!

Also, 2026 PSA: RESPONSIBLY use AI!

​

AI Dos and Don’ts

3

https://www.wizer-training.com/blog/copy-paste

4 of 18

Hello, World!

4

<html>

<head>

<meta charset="utf-8">

</head>

<h1></h1>

<script>

var myHeading = document.querySelector('h1');

myHeading.textContent='Hello, World!';

</script>

</html>

Red = HTML structure to help run the JavaScript

​

Yellow = JavaScript

​

Blue = your own naming/text choices/parameters

​

White = punctuation to make JavaScript work.

​

note: spacing is ALMOST all optional, e.g. this one line of code works just as well:

<html><head><meta charset="utf-8"></head><h1></h1><script>var myHeading=document.querySelector('h1');myHeading.textContent='Hello, World!';</script></html>

5 of 18

Hello, World! – Bug Hunting – Right click > “Inspect”

5

6 of 18

Variables and Math – Predict the Output

6

<html>

<head>

<meta charset="utf-8">

</head>

<h1></h1>

<script>

var myHeading = document.querySelector('h1');

myHeading.textContent = 'Hello, World!';

var myNumber = 12;

var myProduct = myNumber * 3;

var myString = ' My product is ' + myProduct + '.';

myHeading.textContent += myString;

</script>

</html>

7 of 18

Variables and Math – Output

7

<html>

<head>

<meta charset="utf-8">

</head>

<h1></h1>

<script>

var myHeading = document.querySelector('h1');

myHeading.textContent = 'Hello, World!';

var myNumber = 12;

var myProduct = myNumber * 3;

var myString = ' My product is ' + myProduct + '.';

myHeading.textContent += myString;

</script>

</html>

8 of 18

Comments! – // and /**...**/

8

//Declare a variable and set it to the first instance (in this case, the only instance) of "h1" in the above HTML.

var myHeading = document.querySelector('h1’);

//Set the value of this property "textContent" to a string of our choosing.

myHeading.textContent = 'Hello, World!’;

//Declare a variable and set it to a number of our choosing.

var myNumber = 12;

//Declare a variable and set it to a number value of our choosing that depends on a previous variable.

var myProduct = myNumber * 3;

//Declare a variable and set it to a string of our choosing that includes a previous variable.

var myString = ' My product is ' + myProduct + '.’;

//Add a previous variable (in this case a string) to the value of an existing property.

myHeading.textContent += myString;

//Note the += is just shorthand. The long form is myHeading.textContent = myHeading.textContent + myString;

//Also note -= can work for numbers, but strings can only add

​

/**

You can comment out multiple lines

using this method.

**/

​

9 of 18

Free Exploration!

9

<html>

<head>

<meta charset="utf-8">

</head>

<h1></h1>

<p></p>

<p class="secondParagraph"></p>

<script>

var myHeading = document.querySelector('h1');

myHeading.textContent = 'Hello, World!';

var myNumber = 12;

var myProduct = myNumber**2 * Math.PI;

var myString = '<br>I said, \"My product is ' + myProduct + '.\"';

myHeading.innerHTML += myString;

var firstParagraph = document.querySelector('p');

firstParagraph.textContent = 'This is my first paragraph.’;

var secondParagraph = document.querySelector('p.secondParagraph');

secondParagraph.textContent = 'This is my second paragraph.';

</script>

</html>

10 of 18

Arrays and Objects

10

var myHeading = document.querySelector('h1’);

myHeading.textContent = 'Hello, World!’;

Index

Array

0

Value 1

1

Value 2

2

Value 3

3

Value 4

4

Value 5

Property

Object

Label 1

Value 1

Label 2

Value 2

Label 3

Value 3

Label 4

Value 4

Label 5

Value 5

Index

textContent

0

H

1

e

2

l

3

l

4

o

Property

myHeading

textContent

Hello, World!

Property

Camera

Xpos

1

Ypos

1

Zpos

1

Xrot

45

Yrot

0

Zrot

-135

11 of 18

Inputs

11

<html>

<head>

<meta charset="utf-8">

</head>

<h1></h1>

<label for="nameField">Enter your name: </label><input type="text" id="nameField" class="nameField"><br>

<input type="submit" value="Submit name" class="nameSubmit">

<script>

var myHeading = document.querySelector('h1');

myHeading.textContent = 'Hello, World!';

var nameSubmit = document.querySelector('.nameSubmit');

var nameField = document.querySelector('.nameField');

function clicked()

{

var userName = nameField.value;

myHeading.textContent = 'Hello, ' + userName + '!';

nameField.value = '';

nameField.focus();

}

nameSubmit.addEventListener('click', clicked);

</script>

</html>

12 of 18

Loops and Conditions

12

var myHeading = document.querySelector('h1');

myHeading.textContent = 'Hello, World!’;

var firstParagraph = document.querySelector('p');

var nameSubmit = document.querySelector('.nameSubmit');

var nameField = document.querySelector('.nameField');

function clicked() {

var userName = nameField.value;

myHeading.textContent = 'Hello, ' + userName + '!';

nameField.value = '';

nameField.focus();

for ( i = 0; i < userName.length; i++) {

if (userName[i] == "e") {

firstParagraph.textContent = "You have an \"e\" at position " + (i+1) + " in your name!";

break;

} if (userName[i] == "E") {

firstParagraph.textContent = "You have an \"E\" at position " + (i+1) + " in your name!";

break;

} else {

firstParagraph.textContent = "You have no \"e\"s in your name.";

}

}

}

nameSubmit.addEventListener('click', clicked);

13 of 18

Free exploration – Choose your adventure

13

14 of 18

Website examples – interactive tables and calendars

14

15 of 18

Planetarium Examples - Digital Sky Dark Matter

15

JS Add(JSSaveDateTime)

JS JSSaveDateTime.Execute(@” …Your JavaScript code goes here… @”)

JS Remove(JSSaveDateTime)

​

Excerpt, Beam Me Back Scotty:

theScene= DigitalSky.GetAssetInstance("Scene");

sceneDateTime = theScene.GetPropertyInstance("DateTime");

julianDate = sceneDateTime.Value;

​

Excerpt, Fly:

var script = `Scene Camera { Orient=Free ${latString} ${lonString} ${altString} } ${timing}

Scene Camera { ${XrotString} ${YrotString} ${ZrotString} } ${timing}`;

DigitalSky.SendScript(script);

if(debugMode) DigitalSky.LogMessage(script);

​

JS Fly.To(SouthAndDown, 34, 118, 1e6, [3:3:3])

​

Purple = DM Script

Yellow = DM custom JavaScript functions

16 of 18

What’s next for you? Further resources/reading

16

17 of 18

What’s next for you? Try it and reach out with questions!

17

18 of 18

Thanks for joining us!

Q&A and future workshop topics

18