JALT 2018 Technology in Teaching Workshop
Visualizing language: Using Regex and JavaScript
Learning outcomes
By the end of this workshop you should:
- have identified a language feature worthy of focus
- have analyzed the underlying patterns
- have identified rules that can be found
- understand the functions of html, css and JavaScript
- understand how regular expressions work
- be able to adapt simple match-and-replace JavaScript expression
Introductions
Activity 1
Work in pairs or small groups. Take it in turns to introduce yourselves by stating your name, teaching situation and reason for attending this workshop. Get to know each other by asking and answering questions.
Useful phrases
- I'm [name]. I know (nothing | a little | quite a bit) about regular expressions.
- In my (school | college | university ) we .....
- I ( have | have not) made a webpage before.
Remember the information for the next activity. Ask and answer questions. Get to know your classmates.
Website basics
Activity 2
Work in pairs or small groups. Discuss your answers to the following questions about websites.
- Which language is usually used for content?
- Which language is usually used to contol style?
- Which language usually controls behaviour?
- Which language is usually used to control interactions?
- What is server-side?
- What is client-side?
- What is a JavaScript library?
- What are regular expressions?
- hypertext mark-up language (.html)
- cascading styling sheets (.css)
- Javascript (.js)
- PHP (.php), Hypertext Preprocessor, a server-side scripting language.
- Server-side describes actions occuring on the web.
- Client-side describes actions on the user`s computer.
- A JavaScript library is a collection of pre-written JavaScript code. Common libraries include JQuery, Ajax, Angular
- Regular expressions (regex, regexp) are patterns that used to match character combinations in strings. Regex can search for particular combinations of words, prefixes, suffixes and letters within texts.
- Graduate students who have to have a research article (written in English) published in a scientific journal in order to graduate.
- Undergraduate students who need to describe a process in English in their laboratory report.
- Undergraduate English majors who overuse linking expressions in their narrative writing.
- High school students who need to understand complex grammar (e.g. conditionals) to pass the Center Shiken.
- Junior school students struggling with present perfect continous and present perfect simple.
- Elementary school students who have to describe common household items.
- Aim: help students pronounce "-ed" endings of regular verbs
- Actual pattern: final sound of base form of verb
- Findable Pattern: letters that realize the final sound, e.g. /f/ = f sound, but /gh/ = f sound (as in laugh)
- Potential problem: homographs, e.g. learned /d/ and learned /id/
- Either join, sign-in or log on as a guest user to CodePen.
- Explore these templates.
- Fork the template and rename it.
- Alter one item and immediately check the program still works. If you see a white exclamation mark in a red circle, press Ctrl + z to return to a working version.
- Keep changing the code incrementally until you finish.
- Can you explain the difference between html, css and js?
- Can you write a regular expression to find the word "help"?
- Can you use Ctrl + z if the code breaks?
- Can you use Google to search for regular expressions?.
Patterns and pedagogy
Activity 3
Work in pairs or small groups. Decide which language features you would focus on for the following groups of students.
Scenarios
Your tool
Activity 4
Decide which language features you want to focus on for your students. Identify which patterns you need to identify. Identify any potential problems.
Example
Regular expressions in action
Activity 5
This simple tool can provide simple positive and negative responses to closed questions.
Try out the Automatic responder.
More example of the power of regex
Activity 6
The links below are to two tools that visualize language features using regular expressions.
Try each tool out. Try to work out how each tool works.
Work in pairs. Explain how each tool works.
Regular expressions
Activity 7
Regular expressions can look daunting. However, most times simple regular expressions will suffice. There are many types of regular expressions and in each computer language, they work slightly differently. In this workshop, we focus on regular expressions used in JavaScript. This presentation aims to introduce you to the key details of regular expressions. The aim is for you to remember all the details, but to have a general overall. Mr Google is probably going to assit you in finding code that someone else has already written. Rather than great programming skills, you should initially focus on developing great search skills.
The url of the presentation embedded below is here.
Codepen
Activity 8
Coding Train: Introduction to Regex
Activity 9 (11 min video)
Put on your earphones and get ready to ride the coding train with its enthusiastic presenter.
Workshop review
Answer these questions.
Help line
Create your tool. If it does not work completely or properly, simply email the Codepen link to me, and I will try to solve the problem.