28:null 29:["$","title",null,{"children":"Learn JavaScript Basics | Shipeng Sun | Observable"}] 2f:[{"id":"087e4dc842635b0e52b7471aacec06ad985838312d41e937a2c074d07fd63295f58af39afd99c2e2511b6fa2663b1f4ef1b0a47cce7ceab3f601837102355503","href":"https://static.observableusercontent.com/files/087e4dc842635b0e52b7471aacec06ad985838312d41e937a2c074d07fd63295f58af39afd99c2e2511b6fa2663b1f4ef1b0a47cce7ceab3f601837102355503","name":"ny_ny_block_pop.geojson","type":"application/geo+json","lastModified":1678749459472.975,"size":2689578}] 2c:{"id":"06b1b41370b1c475","slug":null,"title":"Learn JavaScript Basics","thumbnail":"08880e462306423c2c6db28adcaabaea3958a284a0c667363df21c67035de3c2","access_level":"public","create_time":"$D2023-02-28T00:11:40.773Z","update_time":"$D2024-04-13T01:33:45.607Z","view_time":null,"first_public_time":"$D2023-02-28T00:11:40.773Z","fork":false,"stars":2,"starred":false,"owner":{"type":"team","id":"cbbecd563af3e09e","login":"suncodeearth","name":"Shipeng Sun","avatar_url":"https://avatars-next.observableusercontent.com/73e879a63c42c4f132b2f40c14c8d981c338f55575077f2a34fa26292dd07c9f","tier":"starter_2024"},"version":401,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"9bcb43658e33a71c","login":"suncodeearth","name":"Shipeng Sun","avatar_url":"https://avatars-next.observableusercontent.com/73e879a63c42c4f132b2f40c14c8d981c338f55575077f2a34fa26292dd07c9f","tier":null}],"members":[{"type":"individual","id":"9bcb43658e33a71c","login":"suncodeearth","name":"Shipeng Sun","avatar_url":"https://avatars-next.observableusercontent.com/73e879a63c42c4f132b2f40c14c8d981c338f55575077f2a34fa26292dd07c9f","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":1,"collection":{"id":"7cfd303a81cea969","slug":"web-basics","title":"Leaflet for WebGIS","owner":{"id":"cbbecd563af3e09e","login":"suncodeearth","name":"Shipeng Sun"}},"type":"notebook","body":{"title":"Learn JavaScript Basics","cells":[{"id":0,"value":"# Learn JavaScript Basics","pinned":false,"hidden":false,"mode":"md"},{"id":124,"value":"## Array and Loop","pinned":false,"hidden":false,"mode":"md"},{"id":36,"value":"Value is ${fruits.join(', ')}","pinned":false,"hidden":false,"mode":"md"},{"id":34,"value":"fruits = {\n const fruits = [\"Banana\", \"Orange\", \"Apple\", \"Mango\"];\n fruits.sort();\n return fruits; \n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":79,"value":"Print every element in an array.
${((iArray)=>{\n return iArray.join('
');\n }\n)(infoArray)}","pinned":true,"hidden":false,"mode":"md"},{"id":47,"value":"Loop through an Array Object.
${\ninfoArray.join('
')\n}.","pinned":true,"hidden":false,"mode":"md"},{"id":49,"value":"infoArray = {\n let fruitStrs = [];\n fruits.forEach( (fruit, i) => {\n fruitStrs.push(i + 'th element is ' + fruit);\n console.log(i + 'th element is ' + fruit);\n });\n return fruitStrs;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":13,"value":"{\n var hour = null;// = 1/4;\n return myData + ' is here at ' + hour; \n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":5,"value":"myData = {\n var f_Name = 'Dolly', lName = \"Adams\";\n\n return f_Name + ' ' + lName;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":27,"value":"{\n var person = {\"first Name\":\"John\", lastName:\"Doe\", age:50, eyeColor:\"blue\"};\n return person;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":375,"value":"## Editing a List or Array\nUsing the listInput, an array or list can be easily edited.\nImport the component. Then, set the initial values.","pinned":false,"hidden":false,"mode":"md"},{"id":366,"value":"import { listInput } from '@harrislapiroff/list-input'\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":370,"value":"viewof listItems = listInput({value:fruits})","pinned":true,"hidden":false,"mode":"ojs"},{"id":373,"value":"listItems","pinned":true,"hidden":false,"mode":"ojs"},{"id":243,"value":"## Functions\n\nWe create a function for [soundex algorithm](https://en.wikipedia.org/wiki/Soundex), which is a phonetic algorithm for indexing names by sound, as pronounced in English. The soundex rules are quite straightforward and have been encoded in many languages, including [JavaScript](https://www.codedrome.com/the-soundex-algorithm-in-javascript/).\n","pinned":false,"hidden":false,"mode":"md"},{"id":246,"value":"function soundex(name) {\n\n if(name == null || name == '') return '';\n \n let s = [];\n let si = 1;\n let c;\n\n // ABCDEFGHIJKLMNOPQRSTUVWXYZ\n let mappings = \"01230120022455012623010202\";\n\n s[0] = name[0].toUpperCase();\n\n for(let i = 1, l = name.length; i < l; i++)\n {\n c = (name[i].toUpperCase()).charCodeAt(0) - 65;\n\n if(c >= 0 && c <= 25)\n {\n if(mappings[c] != '0')\n {\n if(mappings[c] != s[si-1])\n {\n s[si] = mappings[c];\n si++;\n }\n\n if(si > 3)\n {\n break;\n }\n }\n }\n }\n\n if(si <= 3)\n {\n while(si <= 3)\n {\n s[si] = '0';\n si++;\n }\n }\n\n return s.join(\"\");\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":275,"value":"function soundexes(names) {\n return(names.trim().split(',').map(x => soundex(x.trim())));\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":253,"value":"To allow interactivity, I first create an Input to allow users typing in a name. Then, the function will produce the soundex for the name.","pinned":false,"hidden":false,"mode":"md"},{"id":255,"value":"viewof userTypedName = Inputs.text({label: \"Name\", placeholder:\"one name or multiple names separated by comma , \", width: 600})","pinned":false,"hidden":false,"mode":"ojs"},{"id":257,"value":"With this name, now I can call the function in JavaScript. Here we just embed a chunk of JavaScript code directly in Markdown.

\nThe Soundex of *${userTypedName}* ${userTypedName.includes(',')?' are':'is'} ***${soundexes(userTypedName).join(\", \")}***","pinned":false,"hidden":false,"mode":"md"},{"id":297,"value":"For a variant of Soundex called NYSIIS, see Wiki and [Rosettacode](https://rosettacode.org/wiki/NYSIIS#)\n","pinned":false,"hidden":false,"mode":"md"},{"id":389,"value":"## Function and IF Statement","pinned":false,"hidden":false,"mode":"md"},{"id":385,"value":"formatNameSeries = function (names) {\n if(names.length < 1) return '';\n if(names.length == 1) return names[0]; \n if(names.length == 2) return names[0] + ' and ' + names[1];\n let lName = names.pop();\n return names.join(', ') + ', and ' + lName; \n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":387,"value":"{\n let nm = ['apple', 'orange', 'banana'];\n return formatNameSeries(nm);\n //return nm.at(-1);\n}","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W2f","stdlib":"1","titling":"auto"}} 2d:"$2c:body"