diff --git a/_notebooks/2023-05-21-javascript.ipynb b/_notebooks/2023-05-21-javascript.ipynb index b9066ec..4a4aa7f 100644 --- a/_notebooks/2023-05-21-javascript.ipynb +++ b/_notebooks/2023-05-21-javascript.ipynb @@ -73,6 +73,34 @@ "" ] }, + { + "cell_type": "code", + "execution_count": 11, + "metadata": {}, + "outputs": [ + { + "data": { + "application/javascript": "console.log(\"Variable Definition\");\n\nvar msg = \"Hello, World!\";\n\n// Use msg to output code to Console and Jupyter Notebook\nconsole.log(msg); //right click browser select Inspect, then select Console to view\n# element.text(msg);\n# alert(msg);\n", + "text/plain": [ + "" + ] + }, + "metadata": {}, + "output_type": "display_data" + } + ], + "source": [ + "%%js\n", + "console.log(\"Variable Definition\");\n", + "\n", + "var msg = \"Hello, World!\";\n", + "\n", + "// Use msg to output code to Console and Jupyter Notebook\n", + "console.log(msg); //right click browser select Inspect, then select Console to view\n", + "element.text(msg);\n", + "alert(msg);" + ] + }, { "cell_type": "code", "execution_count": 3, @@ -266,13 +294,14 @@ " $.ajax(starWarsAPI).done(function (response) {\n", " console.log(response);\n", " \n", - " # DataTable using the response data\n", + " # datatable using the response data\n", + " # datatable allows me to sort in each column\n", " var table = $('#starWarsTable').DataTable({\n", " data: response,\n", " columns: [\n", - " { data: 'name' }, // Column 1: Name\n", - " { data: 'homeworld' }, // Column 2: Planet\n", - " { data: 'species' } // Column 3: Species\n", + " { data: 'name' }, # Column 1: Name\n", + " { data: 'homeworld' }, # Column 2: Planet\n", + " { data: 'species' } # Column 3: Species\n", " ]\n", " });\n", "\n", @@ -301,6 +330,53 @@ " });\n", " \n" ] + }, + { + "cell_type": "code", + "execution_count": 19, + "metadata": {}, + "outputs": [ + { + "data": { + "application/javascript": "$(document).ready(function() {\n // Create an object for the Star Wars API request configuration\n var starWarsAPI = {\n \"async\": true,\n \"crossDomain\": true,\n \"url\": \"https://star-wars-characters.p.rapidapi.com/46DYBV/star_wars_characters\",\n \"method\": \"GET\",\n \"headers\": {\n \"X-RapidAPI-Key\": \"bf09b94566msh22c602dfe97bd97p19c2fajsn1d42e34f8724\",\n \"X-RapidAPI-Host\": \"star-wars-characters.p.rapidapi.com\"\n }\n };\n\n // Send request to the Star Wars API\n $.ajax(starWarsAPI).done(function (response) {\n element.text(JSON.stringify(response, null, 10)); // Print API information in JSON format\n\n var table = $('#starWarsTable').DataTable({\n data: response,\n columns: [\n { data: 'name' }, \n { data: 'homeworld' }, \n { data: 'species' } \n ]\n });\n });\n});\n", + "text/plain": [ + "" + ] + }, + "metadata": {}, + "output_type": "display_data" + } + ], + "source": [ + "%%javascript\n", + "$(document).ready(function() {\n", + " // Create an object for the Star Wars API request configuration\n", + " var starWarsAPI = {\n", + " \"async\": true,\n", + " \"crossDomain\": true,\n", + " \"url\": \"https://star-wars-characters.p.rapidapi.com/46DYBV/star_wars_characters\",\n", + " \"method\": \"GET\",\n", + " \"headers\": {\n", + " \"X-RapidAPI-Key\": \"bf09b94566msh22c602dfe97bd97p19c2fajsn1d42e34f8724\",\n", + " \"X-RapidAPI-Host\": \"star-wars-characters.p.rapidapi.com\"\n", + " }\n", + " };\n", + "\n", + " // Send request to the Star Wars API\n", + " $.ajax(starWarsAPI).done(function (response) {\n", + " element.text(JSON.stringify(response, null, 10)); // Print API information in JSON format\n", + "\n", + " var table = $('#starWarsTable').DataTable({\n", + " data: response,\n", + " columns: [\n", + " { data: 'name' }, \n", + " { data: 'homeworld' }, \n", + " { data: 'species' } \n", + " ]\n", + " });\n", + " });\n", + "});\n" + ] } ], "metadata": {