├── README.md
├── alerts
├── __javascript__
│ ├── alerts2.js
│ ├── alerts2.min.js
│ ├── alerts2.mod.js
│ ├── alerts3.js
│ ├── alerts3.min.js
│ ├── alerts3.mod.js
│ ├── check_name_age.js
│ ├── check_name_age.min.js
│ ├── check_name_age.mod.js
│ ├── check_name_age2.js
│ ├── check_name_age2.min.js
│ ├── check_name_age2.mod.js
│ ├── check_name_age3.js
│ ├── check_name_age3.min.js
│ ├── check_name_age3.mod.js
│ ├── check_name_age4.js
│ ├── check_name_age4.min.js
│ ├── check_name_age4.mod.js
│ ├── prompt1.js
│ ├── prompt1.min.js
│ └── prompt1.mod.js
├── alerts.html
├── alerts.rst
├── alerts2.html
├── alerts2.py
├── alerts3.html
├── alerts3.py
├── check_name_age.html
├── check_name_age.py
├── check_name_age2.html
├── check_name_age2.py
├── check_name_age3.html
├── check_name_age3.py
├── check_name_age4.html
├── check_name_age4.py
├── desc.txt
├── prompt1.html
└── prompt1.py
├── canvas
├── Canvas_picture_frame.png
├── __javascript__
│ ├── canvas_01.js
│ ├── canvas_01.min.js
│ ├── canvas_01.mod.js
│ ├── canvas_02.js
│ ├── canvas_02.min.js
│ ├── canvas_02.mod.js
│ ├── canvas_03.js
│ ├── canvas_03.min.js
│ ├── canvas_03.mod.js
│ ├── canvas_04.js
│ ├── canvas_04.min.js
│ ├── canvas_04.mod.js
│ ├── canvas_04a.js
│ ├── canvas_04a.min.js
│ ├── canvas_04a.mod.js
│ ├── canvas_05.js
│ ├── canvas_05.min.js
│ ├── canvas_05.mod.js
│ ├── canvas_05b.js
│ ├── canvas_05b.min.js
│ ├── canvas_05b.mod.js
│ ├── canvas_05b_tf.js
│ ├── canvas_05b_tf.min.js
│ ├── canvas_05b_tf.mod.js
│ ├── canvas_06.js
│ ├── canvas_06.min.js
│ ├── canvas_06.mod.js
│ ├── canvas_10.js
│ ├── canvas_10.min.js
│ ├── canvas_10.mod.js
│ ├── canvas_11.js
│ ├── canvas_11.min.js
│ ├── canvas_11.mod.js
│ ├── canvas_12.js
│ ├── canvas_12.min.js
│ ├── canvas_12.mod.js
│ ├── gallery.js
│ ├── gallery.min.js
│ └── gallery.mod.js
├── backdrop.png
├── bg_gallery.png
├── canvas_01.html
├── canvas_01.py
├── canvas_02.html
├── canvas_02.py
├── canvas_03.html
├── canvas_03.py
├── canvas_04.html
├── canvas_04.py
├── canvas_04a.html
├── canvas_04a.py
├── canvas_05.html
├── canvas_05.py
├── canvas_05b.html
├── canvas_05b.py
├── canvas_05b_tf.html
├── canvas_05b_tf.py
├── canvas_06.html
├── canvas_06.py
├── canvas_10.html
├── canvas_10.py
├── canvas_11.html
├── canvas_11.py
├── canvas_12.css
├── canvas_12.html
├── canvas_12.py
├── chrome_clock.png
├── gallery.html
├── gallery.py
├── gallery_1.jpg
├── gallery_2.jpg
├── gallery_3.jpg
├── gallery_4.jpg
├── gallery_5.jpg
├── gallery_6.jpg
├── gallery_7.jpg
├── gallery_8.jpg
└── smiley.jpg
├── cookies
├── 01_cookies1.html
├── __javascript__
│ ├── cookies1.js
│ ├── cookies1.min.js
│ └── cookies1.mod.js
├── cookies.html
├── cookies.rst
├── cookies1.py
└── desc.txt
├── document_write
├── __javascript__
│ ├── doc_html.js
│ ├── doc_html.min.js
│ ├── doc_html.mod.js
│ ├── doc_write.js
│ ├── doc_write.min.js
│ ├── doc_write.mod.js
│ ├── doc_write0.js
│ ├── doc_write0.min.js
│ ├── doc_write0.mod.js
│ ├── doc_write1.js
│ ├── doc_write1.min.js
│ ├── doc_write1.mod.js
│ ├── doc_write2.js
│ ├── doc_write2.min.js
│ └── doc_write2.mod.js
├── desc.txt
├── doc_html.html
├── doc_html.py
├── doc_write.html
├── doc_write.py
├── doc_write0.html
├── doc_write0.py
├── doc_write1.html
├── doc_write1.py
├── doc_write2.html
├── doc_write2.py
├── document_write.html
└── document_write.rst
├── dom
├── 01_a1_insert_text.html
├── 01_a_insert_text.html
├── 01_b_insert_text.html
├── 01_c_insert_text.html
├── 01_d_insert_text.html
├── 01_e_insert_text.html
├── 01_f_insert_text.html
├── 01a_date_time2.html
├── 01a_date_time2a.html
├── 01a_doc_objects.html
├── 01a_doc_properties.html
├── 01b_date_time.html
├── 01b_doc_properties.html
├── 01c_doc_properties.html
├── 02_change_text.html
├── 02_change_text_all.html
├── 02a_change_text2.html
├── 02b_change_text.html
├── 02b_change_text_alter.html
├── 02c_change_text.html
├── 02c_change_text_alter.html
├── 02d_change_text.html
├── 02e_change_text.html
├── 03_change_text_attributes.html
├── 03_display_text_attributes.html
├── 03a_change_css_attributes.html
├── 03b_change_css_attributes_debug.html
├── 03c_change_css_attributes.html
├── 03c_display_css_attributes.html
├── 03d_append_links.html
├── 03d_change_text.html
├── 03e_append_items.html
├── 04_get_lose_focus.html
├── 05_add_paragraph.html
├── 06_delete_text.html
├── 06a_hide_show_text.html
├── 07_addEventListener_example.html
├── 07a_addEventListener_example.html
├── 07b_addEventListener_example.html
├── 08_read_selectionvalue.html
├── 08a_read_formvalues.html
├── 09_mouse_over_out.html
├── 10_immediate_input_values.html
├── 11_event_handling1.html
├── 11_event_keys.html
├── 12_change_backgroundcolor.html
├── 13_button_disable_enable.html
├── 14_change_imagesize.html
├── 14a_change_image.html
├── 15_access_key.html
├── 15_load_file.html
├── 16_animate.html
├── 17_set_clear_timeout.html
├── 18_set_clear_interval.html
├── TranscryptFrame.py
├── __javascript__
│ ├── TranscryptFrame.js
│ ├── TranscryptFrame.min.js
│ ├── TranscryptFrame.mod.js
│ ├── access_key.js
│ ├── access_key.min.js
│ ├── access_key.mod.js
│ ├── add_paragraph.js
│ ├── add_paragraph.min.js
│ ├── add_paragraph.mod.js
│ ├── animat.js
│ ├── animat.min.js
│ ├── animat.mod.js
│ ├── animate.mod.js
│ ├── anonymous_function.js
│ ├── anonymous_function.min.js
│ ├── anonymous_function.mod.js
│ ├── append_items.js
│ ├── append_items.min.js
│ ├── append_items.mod.js
│ ├── append_links.js
│ ├── append_links.min.js
│ ├── append_links.mod.js
│ ├── button_disable_enable.js
│ ├── button_disable_enable.min.js
│ ├── button_disable_enable.mod.js
│ ├── change_backgroundcolor.js
│ ├── change_backgroundcolor.min.js
│ ├── change_backgroundcolor.mod.js
│ ├── change_css_attributes.js
│ ├── change_css_attributes.min.js
│ ├── change_css_attributes.mod.js
│ ├── change_css_attributes2.js
│ ├── change_css_attributes2.min.js
│ ├── change_css_attributes2.mod.js
│ ├── change_css_attributes_debug.js
│ ├── change_css_attributes_debug.min.js
│ ├── change_css_attributes_debug.mod.js
│ ├── change_image.js
│ ├── change_image.min.js
│ ├── change_image.mod.js
│ ├── change_imagesize.js
│ ├── change_imagesize.min.js
│ ├── change_imagesize.mod.js
│ ├── change_text.js
│ ├── change_text.min.js
│ ├── change_text.mod.js
│ ├── change_text2b.js
│ ├── change_text2b.min.js
│ ├── change_text2b.mod.js
│ ├── change_text2b_alter.js
│ ├── change_text2b_alter.min.js
│ ├── change_text2b_alter.mod.js
│ ├── change_text2c_alter.js
│ ├── change_text2c_alter.min.js
│ ├── change_text2c_alter.mod.js
│ ├── change_text2d.js
│ ├── change_text2d.min.js
│ ├── change_text2d.mod.js
│ ├── change_text2e.js
│ ├── change_text2e.min.js
│ ├── change_text2e.mod.js
│ ├── change_text3.js
│ ├── change_text3.min.js
│ ├── change_text3.mod.js
│ ├── change_text_all.js
│ ├── change_text_all.min.js
│ ├── change_text_all.mod.js
│ ├── change_text_attributes.js
│ ├── display_text_attributes.js
│ ├── display_text_attributes.min.js
│ ├── display_text_attributes.mod.js
│ ├── doc_objects.js
│ ├── doc_objects.min.js
│ ├── doc_objects.mod.js
│ ├── doc_props.js
│ ├── doc_props.min.js
│ ├── doc_props.mod.js
│ ├── doc_props1.js
│ ├── doc_props1.min.js
│ ├── doc_props1.mod.js
│ ├── doc_props2.js
│ ├── doc_props2.min.js
│ ├── doc_props2.mod.js
│ ├── get_lose_focus.js
│ ├── get_lose_focus.min.js
│ ├── get_lose_focus.mod.js
│ ├── insert_text.js
│ ├── insert_text.min.js
│ ├── insert_text.mod.js
│ ├── insert_text2.js
│ ├── insert_text2.min.js
│ ├── insert_text2.mod.js
│ ├── insert_text3.js
│ ├── insert_text3.min.js
│ ├── insert_text3.mod.js
│ ├── insert_text4.js
│ ├── insert_text4.min.js
│ ├── insert_text4.mod.js
│ ├── insert_text5.js
│ ├── insert_text5.min.js
│ ├── insert_text5.mod.js
│ ├── read_forms.js
│ ├── read_forms.min.js
│ ├── read_forms.mod.js
│ ├── showdatetime.js
│ ├── showdatetime.min.js
│ ├── showdatetime.mod.js
│ ├── showdatetime2.js
│ ├── showdatetime2.min.js
│ ├── showdatetime2.mod.js
│ ├── showdatetime3.js
│ ├── showdatetime3.min.js
│ ├── showdatetime3.mod.js
│ ├── window_height.js
│ ├── window_height.min.js
│ ├── window_height.mod.js
│ ├── window_open_close.js
│ ├── window_open_close.min.js
│ └── window_open_close.mod.js
├── access_key.py
├── addEventListener_example.py
├── addEventListener_example1.py
├── add_paragraph.py
├── animat.py
├── anonymous_function.html
├── anonymous_function.py
├── append_items.py
├── append_links.py
├── button_disable_enable.py
├── change_backgroundcolor.py
├── change_css_attributes.py
├── change_css_attributes2.py
├── change_css_attributes_debug.py
├── change_image.py
├── change_imagesize.py
├── change_text.py
├── change_text2.py
├── change_text2b.py
├── change_text2b_alter.py
├── change_text2c_alter.py
├── change_text2d.py
├── change_text2e.py
├── change_text3.py
├── change_text3d.py
├── change_text_all.py
├── change_text_attributes.py
├── changing_texts.html
├── changing_texts.rst
├── delete_text.py
├── desc.txt
├── display_css_attributes.py
├── display_text_attributes.py
├── doc_objects.py
├── doc_props.py
├── doc_props1.py
├── doc_props2.py
├── document_properties.html
├── document_properties.rst
├── dom1a.html
├── dom1a.txt
├── event_handling1.py
├── event_keys.py
├── get_lose_focus.py
├── hide_show_text.py
├── immediate_input_values.py
├── insert_text.html
├── insert_text.py
├── insert_text.rst
├── insert_text2.py
├── insert_text3.py
├── insert_text4.py
├── insert_text5.py
├── load_file.py
├── mouse_over_out.py
├── pic_bulboff.gif
├── pic_bulbon.gif
├── read_forms.py
├── read_selectionvalue.py
├── set_clear_interval.py
├── set_clear_timeout.py
├── showdatetime.py
├── showdatetime2.py
└── showdatetime3.py
├── files
├── 01_readfile.html
├── 02_readfile.html
├── 03_readfile.html
├── 04_readfile.html
├── __javascript__
│ ├── read_file.js
│ ├── read_file.min.js
│ ├── read_file.mod.js
│ ├── read_file2.js
│ ├── read_file2.min.js
│ ├── read_file2.mod.js
│ ├── read_file3.js
│ ├── read_file3.min.js
│ ├── read_file3.mod.js
│ ├── read_file4.js
│ ├── read_file4.min.js
│ └── read_file4.mod.js
├── desc.txt
├── read_file.py
├── read_file2.py
├── read_file3.py
└── read_file4.py
├── games
├── 01_canvas.html
├── 02_canvas.html
├── 02a_canvas.html
├── 03_canvas.html
├── 03a_canvas.html
├── 04_canvas.html
├── 04a_canvas.html
├── 04b_canvas.html
├── 05_canvas.html
├── 06_2048_game.html
├── Canvas_earth.png
├── Canvas_moon.png
├── Canvas_sun.png
├── Widgets.css
├── Widgets.html
├── __javascript__
│ ├── game_2048_dom.js
│ ├── game_2048_dom.min.js
│ ├── game_2048_dom.mod.js
│ ├── solar_system01.js
│ ├── solar_system01.min.js
│ ├── solar_system01.mod.js
│ ├── solar_system02.js
│ ├── solar_system02.min.js
│ ├── solar_system02.mod.js
│ ├── solar_system02a.js
│ ├── solar_system02a.min.js
│ ├── solar_system02a.mod.js
│ ├── solar_system03.js
│ ├── solar_system03.min.js
│ ├── solar_system03.mod.js
│ ├── solar_system03a.js
│ ├── solar_system03a.min.js
│ ├── solar_system03a.mod.js
│ ├── solar_system04.js
│ ├── solar_system04.min.js
│ ├── solar_system04.mod.js
│ ├── solar_system04a.js
│ ├── solar_system04a.min.js
│ ├── solar_system04a.mod.js
│ ├── solar_system04b.js
│ ├── solar_system04b.min.js
│ ├── solar_system04b.mod.js
│ ├── solar_system05.js
│ ├── solar_system05.min.js
│ ├── solar_system05.mod.js
│ ├── solar_system05a.js
│ ├── solar_system05a.min.js
│ ├── solar_system05a.mod.js
│ ├── widgets.js
│ ├── widgets.min.js
│ └── widgets.mod.js
├── chrome_clock.png
├── desc.txt
├── game_2048_dom.py
├── games.html
├── games.rst
├── solar_system01.py
├── solar_system02.py
├── solar_system02a.py
├── solar_system03.py
├── solar_system03a.py
├── solar_system04.py
├── solar_system04a.py
├── solar_system04b.py
├── solar_system05.py
└── widgets.py
├── grid
├── GridGame.html
├── GridTest.html
├── GridTest2.html
├── __javascript__
│ ├── gridgame.js
│ ├── gridgame.min.js
│ ├── gridgame.mod.js
│ ├── gridtest.js
│ ├── gridtest.min.js
│ ├── gridtest.mod.js
│ ├── gridtest2.js
│ ├── gridtest2.min.js
│ └── gridtest2.mod.js
├── gridgame.py
├── gridtest.py
└── gridtest2.py
├── hello
├── README.md
├── __javascript__
│ ├── hello.js
│ ├── hello.min.js
│ └── hello.mod.js
├── desc.txt
├── hello.html
└── hello.py
├── jquery
├── __javascript__
│ ├── change_text.js
│ ├── change_text.min.js
│ ├── change_text.mod.js
│ ├── click1.js
│ ├── click1.min.js
│ ├── click1.mod.js
│ ├── hide1.js
│ ├── hide1.min.js
│ ├── hide1.mod.js
│ ├── hide_show.js
│ ├── hide_show.min.js
│ ├── hide_show.mod.js
│ ├── insert_text.js
│ ├── insert_text.min.js
│ ├── insert_text.mod.js
│ ├── insert_text1.js
│ ├── insert_text1.min.js
│ ├── insert_text1.mod.js
│ ├── insert_text2.js
│ ├── insert_text2.min.js
│ ├── insert_text2.mod.js
│ ├── install_hide.js
│ ├── install_hide.min.js
│ └── install_hide.mod.js
├── change_text.html
├── change_text.py
├── click.html
├── click1.py
├── hide1.html
├── hide1.py
├── hide_show.html
├── hide_show.py
├── hiding.html
├── insert_text.html
├── insert_text.py
├── insert_text1.html
├── insert_text1.py
├── insert_text2.html
├── insert_text2.py
└── install_hide.py
├── location
├── 01_location.html
├── 01_location_frame.html
├── 02_location_elements.html
├── __javascript__
│ ├── location_change.js
│ ├── location_change.min.js
│ ├── location_change.mod.js
│ ├── location_elements.js
│ ├── location_elements.min.js
│ └── location_elements.mod.js
├── desc.txt
├── location.html
├── location.rst
├── location_change.py
└── location_elements.py
├── login
├── __javascript__
│ ├── login.js
│ ├── login.min.js
│ ├── login.mod.js
│ ├── login2.js
│ ├── login2.min.js
│ └── login2.mod.js
├── img_avatar2.png
├── login.html
├── login.py
├── login2.html
├── login2.py
└── main.html
├── navigator
├── 01_navigator_properties.html
├── __javascript__
│ ├── navigator_properties.js
│ ├── navigator_properties.min.js
│ └── navigator_properties.mod.js
├── desc.txt
├── navigator.html
├── navigator.rst
└── navigator_properties.py
├── screen
├── 01_screen_prop.html
├── __javascript__
│ ├── screen_prop.js
│ └── screen_prop.mod.js
└── screen_prop.py
├── sounds
├── 01_play_sounds.html
├── 02_play_sounds_external.html
├── Klick.wav
├── Right.wav
├── Wrong.wav
├── __javascript__
│ ├── play_sounds.js
│ ├── play_sounds.min.js
│ ├── play_sounds.mod.js
│ ├── play_sounds_external.js
│ ├── play_sounds_external.min.js
│ └── play_sounds_external.mod.js
├── desc.txt
├── play_sounds.py
└── play_sounds_external.py
├── svg
├── __javascript__
│ ├── svg_01.js
│ ├── svg_01.min.js
│ ├── svg_01.mod.js
│ ├── svg_02.js
│ ├── svg_02.min.js
│ ├── svg_02.mod.js
│ ├── svg_03.js
│ ├── svg_03.min.js
│ ├── svg_03.mod.js
│ ├── svg_04.js
│ ├── svg_04.min.js
│ ├── svg_04.mod.js
│ ├── svg_05.js
│ ├── svg_05.min.js
│ ├── svg_05.mod.js
│ ├── svg_06.js
│ ├── svg_06.min.js
│ ├── svg_06.mod.js
│ ├── svg_07.js
│ ├── svg_07.min.js
│ ├── svg_07.mod.js
│ ├── svg_08.js
│ ├── svg_08.min.js
│ ├── svg_08.mod.js
│ ├── svg_09.js
│ ├── svg_09.min.js
│ ├── svg_09.mod.js
│ ├── svg_10.js
│ ├── svg_10.min.js
│ ├── svg_10.mod.js
│ ├── svg_11.js
│ ├── svg_11.min.js
│ ├── svg_11.mod.js
│ ├── svg_12.js
│ ├── svg_12.min.js
│ ├── svg_12.mod.js
│ ├── svg_13.js
│ ├── svg_13.min.js
│ ├── svg_13.mod.js
│ ├── svg_14.js
│ ├── svg_14.min.js
│ ├── svg_14.mod.js
│ ├── svg_15.js
│ ├── svg_15.min.js
│ └── svg_15.mod.js
├── svg_01.html
├── svg_01.py
├── svg_02.html
├── svg_02.py
├── svg_03.html
├── svg_03.py
├── svg_04.html
├── svg_04.py
├── svg_05.html
├── svg_05.py
├── svg_06.html
├── svg_06.py
├── svg_07.html
├── svg_07.py
├── svg_08.html
├── svg_08.py
├── svg_09.html
├── svg_09.py
├── svg_10.html
├── svg_10.py
├── svg_11.html
├── svg_11.py
├── svg_12.html
├── svg_12.py
├── svg_13.html
├── svg_13.py
├── svg_14.html
├── svg_14.py
├── svg_15.html
├── svg_15.py
└── svg_examples
│ ├── Andy_Warhol.jpg
│ ├── Market.jpg
│ ├── Mars.png
│ ├── Venus.png
│ ├── animation.svg
│ ├── animation2.svg
│ ├── clip_path.svg
│ ├── collision.html
│ ├── collision2.html
│ ├── donut.svg
│ ├── filter1.svg
│ ├── filter2.svg
│ ├── filter3.svg
│ ├── filter4.svg
│ ├── filter5.svg
│ ├── filter6.svg
│ ├── filter7.svg
│ ├── filter8.svg
│ ├── filter9.svg
│ ├── hello_world.svg
│ ├── hello_world2.svg
│ ├── images.svg
│ ├── images2.svg
│ ├── js_graphical-plotter.js
│ ├── linerargradient.svg
│ ├── lines.svg
│ ├── lines1.svg
│ ├── lines2.svg
│ ├── maske.svg
│ ├── maske1.svg
│ ├── maske2.svg
│ ├── maske3.svg
│ ├── maske4.svg
│ ├── maske5.svg
│ ├── radialgradient.svg
│ ├── schalter.svg
│ ├── schrift1.svg
│ ├── ship.jpg
│ ├── viewbox.svg
│ └── zodiac.jpg
├── tetris
├── README.md
├── __javascript__
│ ├── tetris_dom.js
│ ├── tetris_dom.min.js
│ └── tetris_dom.mod.js
├── index.html
├── tetris.py
├── tetris_dom.py
└── tetris_minimal.py
├── turtle
├── __javascript__
│ ├── turtle_tree.js
│ ├── turtle_tree.min.js
│ └── turtle_tree.mod.js
├── desc.txt
├── turtle_tree.html
└── turtle_tree.py
├── user-interface
├── Javascript_Python.png
├── Pixabay.mp4
├── __javascript__
│ ├── button_change.js
│ ├── button_change.min.js
│ ├── button_change.mod.js
│ ├── dropdown.js
│ ├── dropdown.min.js
│ ├── dropdown.mod.js
│ ├── magnifier.js
│ ├── magnifier.min.js
│ ├── magnifier.mod.js
│ ├── menu.js
│ ├── menu.min.js
│ ├── menu.mod.js
│ ├── menu2.js
│ ├── menu2.min.js
│ ├── menu2.mod.js
│ ├── modal_box.js
│ ├── modal_box.min.js
│ ├── modal_box.mod.js
│ ├── modal_image.js
│ ├── modal_image.min.js
│ ├── modal_image.mod.js
│ ├── progress_bar.js
│ ├── progress_bar.min.js
│ ├── progress_bar.mod.js
│ ├── sidebar.js
│ ├── sidebar.min.js
│ ├── sidebar.mod.js
│ ├── slideshow.js
│ ├── slideshow.min.js
│ ├── slideshow.mod.js
│ ├── tabs.js
│ ├── tabs.min.js
│ ├── tabs.mod.js
│ ├── video_background.js
│ ├── video_background.min.js
│ └── video_background.mod.js
├── button_change.html
├── button_change.py
├── classes.png
├── computer-desktop.jpg
├── dropdown.html
├── dropdown.py
├── gfk.png
├── magnifier.html
├── magnifier.py
├── menu.html
├── menu.py
├── menu2.html
├── menu2.py
├── modal_box.html
├── modal_box.py
├── modal_image.html
├── modal_image.py
├── mouse_tracking.html
├── mouse_tracking1.html
├── mouseposition.py
├── parallax.html
├── programming-languages.jpg
├── progress_bar.html
├── progress_bar.py
├── sidebar.html
├── sidebar.py
├── slideshow.html
├── slideshow.py
├── tabs.html
├── tabs.py
├── video_background.html
└── video_background.py
└── window
├── 01_window_open_close.html
├── 02_window_height.html
├── 03_get_url_parameters.html
├── 03a_get_url_parameters.html
├── 04_window_back_forward.html
├── 04_window_frame.html
├── __javascript__
├── get_url_parameters.js
├── get_url_parameters.min.js
├── get_url_parameters.mod.js
├── get_url_parameters2.js
├── get_url_parameters2.min.js
├── get_url_parameters2.mod.js
├── window_height.js
├── window_height.min.js
├── window_height.mod.js
├── window_navigation.js
├── window_navigation.min.js
├── window_navigation.mod.js
├── window_open_close.js
├── window_open_close.min.js
└── window_open_close.mod.js
├── desc.txt
├── get_url_parameters.py
├── get_url_parameters2.py
├── window_height.py
├── window_navigation.py
└── window_open_close.py
/alerts/__javascript__/alerts2.mod.js:
--------------------------------------------------------------------------------
1 | (function () {
2 | var __name__ = '__main__';
3 | var alert_standard = function () {
4 | var testMessage = 'TestMessage';
5 | alert (testMessage);
6 | };
7 | var alert_text = function (text) {
8 | alert (text);
9 | };
10 | __pragma__ ('')
11 | __all__.__name__ = __name__;
12 | __all__.alert_standard = alert_standard;
13 | __all__.alert_text = alert_text;
14 | __pragma__ (' ')
15 | }) ();
16 |
--------------------------------------------------------------------------------
/alerts/alerts2.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Alert Demo
8 |
9 |
10 | Hello Alert Demo
11 | Click on the buttons to see alerts coming up!
12 |
13 | Standard Test Message!
14 |
15 |
16 | Message defined in the HTML code
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
--------------------------------------------------------------------------------
/alerts/alerts2.py:
--------------------------------------------------------------------------------
1 | def alert_standard():
2 | testMessage = 'TestMessage'
3 | alert(testMessage)
4 |
5 | def alert_text(text):
6 | alert(text)
--------------------------------------------------------------------------------
/alerts/alerts3.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Alerts and Prompts
8 |
9 |
10 | Alerts and Prompts
11 | Click on the buttons to see alerts coming up!
12 |
13 | Standard Test Message!
14 |
15 |
16 |
17 | Message defined in the HTML code
18 |
19 |
20 |
21 | Get a prompt and display text entry
22 |
23 |
24 |
25 | Ask your name
26 |
27 |
28 |
29 |
30 |
31 |
32 |
33 |
34 |
--------------------------------------------------------------------------------
/alerts/alerts3.py:
--------------------------------------------------------------------------------
1 | class TestSystem:
2 |
3 | def __init__ (self):
4 | self.testMessage = 'TestMessage'
5 |
6 | def alert_standard(self):
7 | alert(self.testMessage)
8 |
9 | def alert_text(self, text):
10 | alert(text)
11 |
12 | def prompt_text(self):
13 | entry = prompt('Please enter any text','')
14 | alert(entry)
15 |
16 | def greet_name(self):
17 | name = prompt('What is your name?','Transcrypt-User');
18 | alert('Hallo, ' + name);
19 |
20 | testSystem = TestSystem()
21 |
--------------------------------------------------------------------------------
/alerts/check_name_age.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Check Name and Age
8 |
9 |
10 | Check Name and Age
11 | To proceed click the button below
12 |
13 |
...
14 | Start query
15 |
16 |
17 |
18 |
--------------------------------------------------------------------------------
/alerts/check_name_age.py:
--------------------------------------------------------------------------------
1 | #!/usr/bin/env python
2 | # -*- coding: utf-8 -*-
3 |
4 | class TestSystem:
5 |
6 | def __init__ (self):
7 | self.askname = 'What is your name, dear?'
8 | self.askage = 'And what is your age?'
9 |
10 | def questions(self):
11 | confirm("Are you ready?")
12 | self.ask_name()
13 | self.ask_age()
14 | if int(self.age)<21:
15 | alert('Sorry, ' + self.name + ", you're too young to enter with " + self.age)
16 | else:
17 | alert('Welcome, ' + self.name)
18 |
19 | def ask_name(self):
20 | self.name = prompt(self.askname,'')
21 |
22 | def ask_age(self):
23 | self.age = prompt("Hello, "+self.name+". "+self.askage,'')
24 |
25 | testSystem = TestSystem()
26 |
--------------------------------------------------------------------------------
/alerts/check_name_age2.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Check Name and Age and Mind
8 |
9 |
10 | Check Name and Age and Mind
11 | To proceed click the button below
12 |
13 | Start query
14 |
15 |
16 |
17 |
--------------------------------------------------------------------------------
/alerts/check_name_age3.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Check Name and Age and Mind
8 |
9 |
10 | Check Name and Age and Mind
11 | To proceed click the button below
12 |
13 | Start query
14 |
15 |
16 |
17 |
--------------------------------------------------------------------------------
/alerts/check_name_age4.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Check Name and Age and Mind
8 |
9 |
10 | Check Name and Age and Mind
11 | Testing
12 |
13 |
Immediate Test without button
14 |
15 |
16 |
17 |
--------------------------------------------------------------------------------
/alerts/desc.txt:
--------------------------------------------------------------------------------
1 | Examples for alert boxes and prompts
2 |
--------------------------------------------------------------------------------
/alerts/prompt1.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Prompts
8 |
9 |
10 | Prompt demo
11 | Click on the buttons to see prompts coming up!
12 |
13 | Get a prompt and display text entry
14 |
15 |
16 | Ask your name
17 |
18 | Result of entry:
19 |
20 |
--------------------------------------------------------------------------------
/alerts/prompt1.py:
--------------------------------------------------------------------------------
1 | class TestSystem:
2 |
3 | def __init__ (self):
4 | self.testMessage = 'TestMessage'
5 |
6 | def prompt_text(self):
7 | entry = prompt('Please enter any text','')
8 | if entry == "":
9 | alert("Nothing has been entered")
10 | if entry is None:
11 | alert("None - Cancel has been pressed")
12 | alert("Entry was:"+entry)
13 | return entry
14 |
15 | def prompt_test(self):
16 | ret = self.prompt_text()
17 | document.getElementById("result").innerHTML = "Result of entry:"+ret
18 |
19 | def greet_name(self):
20 | name = prompt('What is your name?','Transcrypt-User')
21 | alert('Hallo, ' + name)
22 |
23 | testSystem = TestSystem()
24 |
--------------------------------------------------------------------------------
/canvas/Canvas_picture_frame.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/bunkahle/Transcrypt-Examples/17d6460f3b532bb8258170a31875e4e26a977839/canvas/Canvas_picture_frame.png
--------------------------------------------------------------------------------
/canvas/__javascript__/gallery.mod.js:
--------------------------------------------------------------------------------
1 | (function () {
2 | var __name__ = '__main__';
3 | var draw = function () {
4 | for (var i = 0; i < document.images.length; i++) {
5 | if (document.images [i].getAttribute ('id') != 'frame') {
6 | var canvas = document.createElement ('canvas');
7 | canvas.setAttribute ('width', 132);
8 | canvas.setAttribute ('height', 150);
9 | document.images [i].parentNode.insertBefore (canvas, document.images [i]);
10 | var ctx = canvas.getContext ('2d');
11 | ctx.drawImage (document.images [i], 15, 20);
12 | ctx.drawImage (document.getElementById ('frame'), 0, 0);
13 | }
14 | }
15 | };
16 | __pragma__ ('')
17 | __all__.__name__ = __name__;
18 | __all__.draw = draw;
19 | __pragma__ (' ')
20 | }) ();
21 |
--------------------------------------------------------------------------------
/canvas/backdrop.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/bunkahle/Transcrypt-Examples/17d6460f3b532bb8258170a31875e4e26a977839/canvas/backdrop.png
--------------------------------------------------------------------------------
/canvas/bg_gallery.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/bunkahle/Transcrypt-Examples/17d6460f3b532bb8258170a31875e4e26a977839/canvas/bg_gallery.png
--------------------------------------------------------------------------------
/canvas/canvas_01.html:
--------------------------------------------------------------------------------
1 |
2 |
3 | Canvas
7 |
8 |
9 | Canvas
7 |
8 |
9 | Canvas
7 |
8 |
9 | Draw on Canvas
6 |
7 |
8 | Draw on Canvas
6 |
7 |
8 | Rotate Canvas
6 |
7 |
8 | Turn me!
11 |
12 |
13 |
14 |
--------------------------------------------------------------------------------
/canvas/canvas_05.py:
--------------------------------------------------------------------------------
1 | #!/usr/bin/env python
2 | # -*- coding: utf-8 -*-
3 |
4 | import math
5 |
6 | class Graphics:
7 |
8 | def __init__(self, canvas_id):
9 | self.canvas_id = canvas_id
10 | self.ctx = document.getElementById(self.canvas_id).getContext('2d')
11 | self.img = __new__(Image())
12 | self.img.src = 'smiley.jpg'
13 | self.img.onload = self.turn
14 |
15 | def turn(self):
16 | self.ctx.translate(200, 0)
17 | self.ctx.rotate(90 * math.pi/180)
18 | self.ctx.drawImage(self.img, 0, 0, 200, 200)
19 |
20 | graphic = Graphics('graphics')
--------------------------------------------------------------------------------
/canvas/canvas_05b.html:
--------------------------------------------------------------------------------
1 |
2 |
3 | Rotate Canvas
6 |
7 |
8 | Toggle Turn on/off
11 | Reverse direction
12 |
13 |
14 |
15 |
--------------------------------------------------------------------------------
/canvas/canvas_05b_tf.html:
--------------------------------------------------------------------------------
1 |
2 |
3 | Rotate Canvas
6 |
7 |
8 | Toggle Turn on/off
11 | Reverse direction
12 |
13 |
14 |
15 |
--------------------------------------------------------------------------------
/canvas/canvas_05b_tf.py:
--------------------------------------------------------------------------------
1 | #!/usr/bin/env python
2 | # -*- coding: utf-8 -*-
3 |
4 | import TranscryptFrame as tf
5 |
6 | class RotateImage:
7 |
8 | def __init__(self, canvas_id, src):
9 | self.img = tf.CanvasImage(src, canvas_id, 200, 200)
10 | self.turning = True
11 | self.reverse = 1
12 | print("Attributes of self.img", dir(self.img))
13 | self.animate = setInterval(self.turn, 50)
14 |
15 | def turn(self):
16 | self.img.rotate(1*self.reverse)
17 |
18 | def toggle(self):
19 | self.turning = not self.turning
20 | if self.turning:
21 | self.animate = setInterval(self.turn, 50)
22 | else:
23 | clearInterval(self.animate)
24 |
25 | def reverse_move(self):
26 | self.reverse = - self.reverse
27 |
28 | graphic = RotateImage('graphics', 'smiley.jpg')
--------------------------------------------------------------------------------
/canvas/canvas_06.html:
--------------------------------------------------------------------------------
1 |
2 |
3 | Save Restore Canvas
6 |
7 |
8 | Animate Canvas
6 |
7 |
8 | Widgets
7 |
8 |
9 | Stop Clock Start Clock
12 |
13 |
14 |
15 |
--------------------------------------------------------------------------------
/canvas/chrome_clock.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/bunkahle/Transcrypt-Examples/17d6460f3b532bb8258170a31875e4e26a977839/canvas/chrome_clock.png
--------------------------------------------------------------------------------
/canvas/gallery.py:
--------------------------------------------------------------------------------
1 | #!/usr/bin/env python
2 | # -*- coding: utf-8 -*-
3 |
4 | def draw():
5 | # Loop through all images
6 | for i in range(document.images.length):
7 | # Don't add a canvas for the frame image
8 | if (document.images[i].getAttribute('id') != 'frame'):
9 | # Create canvas element
10 | canvas = document.createElement('canvas')
11 | canvas.setAttribute('width', 132)
12 | canvas.setAttribute('height', 150)
13 | # Insert before the image
14 | document.images[i].parentNode.insertBefore(canvas, document.images[i])
15 | ctx = canvas.getContext('2d')
16 | # Draw image to canvas
17 | ctx.drawImage(document.images[i], 15, 20)
18 | # Add frame
19 | ctx.drawImage(document.getElementById('frame'), 0, 0)
--------------------------------------------------------------------------------
/canvas/gallery_1.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/bunkahle/Transcrypt-Examples/17d6460f3b532bb8258170a31875e4e26a977839/canvas/gallery_1.jpg
--------------------------------------------------------------------------------
/canvas/gallery_2.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/bunkahle/Transcrypt-Examples/17d6460f3b532bb8258170a31875e4e26a977839/canvas/gallery_2.jpg
--------------------------------------------------------------------------------
/canvas/gallery_3.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/bunkahle/Transcrypt-Examples/17d6460f3b532bb8258170a31875e4e26a977839/canvas/gallery_3.jpg
--------------------------------------------------------------------------------
/canvas/gallery_4.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/bunkahle/Transcrypt-Examples/17d6460f3b532bb8258170a31875e4e26a977839/canvas/gallery_4.jpg
--------------------------------------------------------------------------------
/canvas/gallery_5.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/bunkahle/Transcrypt-Examples/17d6460f3b532bb8258170a31875e4e26a977839/canvas/gallery_5.jpg
--------------------------------------------------------------------------------
/canvas/gallery_6.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/bunkahle/Transcrypt-Examples/17d6460f3b532bb8258170a31875e4e26a977839/canvas/gallery_6.jpg
--------------------------------------------------------------------------------
/canvas/gallery_7.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/bunkahle/Transcrypt-Examples/17d6460f3b532bb8258170a31875e4e26a977839/canvas/gallery_7.jpg
--------------------------------------------------------------------------------
/canvas/gallery_8.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/bunkahle/Transcrypt-Examples/17d6460f3b532bb8258170a31875e4e26a977839/canvas/gallery_8.jpg
--------------------------------------------------------------------------------
/canvas/smiley.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/bunkahle/Transcrypt-Examples/17d6460f3b532bb8258170a31875e4e26a977839/canvas/smiley.jpg
--------------------------------------------------------------------------------
/cookies/desc.txt:
--------------------------------------------------------------------------------
1 | Cookie examples with Transcrypt
2 |
--------------------------------------------------------------------------------
/document_write/__javascript__/doc_write0.mod.js:
--------------------------------------------------------------------------------
1 | (function () {
2 | var __name__ = '__main__';
3 | var write_text = function () {
4 | var html_text = '\n\n \n DocWrite \n \n \n Header \n any information in the body part
\n Go Back \n \n';
5 | document.open ();
6 | document.write (html_text);
7 | document.close ();
8 | };
9 | __pragma__ ('')
10 | __all__.__name__ = __name__;
11 | __all__.write_text = write_text;
12 | __pragma__ (' ')
13 | }) ();
14 |
--------------------------------------------------------------------------------
/document_write/desc.txt:
--------------------------------------------------------------------------------
1 | Document Write function in Transcrypt
2 |
--------------------------------------------------------------------------------
/document_write/doc_write.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Document Write
8 |
9 |
10 | Write into html document
11 | To proceed click the button below
12 |
13 |
write a loop of a mathematical function
Start looping
15 |
16 |
17 |
18 |
--------------------------------------------------------------------------------
/document_write/doc_write0.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Document Write
8 |
9 |
10 | Write into html document
11 | To proceed click the button below
12 |
13 |
Write a static html text
Write HTML text
15 |
16 |
17 |
--------------------------------------------------------------------------------
/document_write/doc_write0.py:
--------------------------------------------------------------------------------
1 | #!/usr/bin/env python
2 | # -*- coding: utf-8 -*-
3 |
4 | def write_text():
5 | html_text = """
6 |
7 |
8 | DocWrite
10 |
11 |
12 | Header
13 | any information in the body part
14 | Go Back
15 | \n"""
16 | document.open()
17 | document.write(html_text)
18 | document.close()
--------------------------------------------------------------------------------
/document_write/doc_write1.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Document Write
8 |
9 |
10 | Write into html document
11 | To proceed click the button below
12 |
13 |
Write html
Start writing
15 |
16 |
17 |
18 |
--------------------------------------------------------------------------------
/document_write/doc_write2.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Document Write
8 |
9 |
10 | Write into html document
11 | To proceed click the button below
12 |
13 |
computing square root
Compute Square root
15 |
16 |
17 |
18 |
--------------------------------------------------------------------------------
/dom/01_a_insert_text.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Insert Text
8 |
9 |
10 | DOM examples
11 | Testing DOM
12 |
13 |
14 |
15 |
16 |
17 |
18 |
--------------------------------------------------------------------------------
/dom/01_b_insert_text.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Insert Text
8 |
9 |
10 | DOM examples
11 | Testing DOM
12 |
13 |
14 |
15 |
16 |
--------------------------------------------------------------------------------
/dom/01_c_insert_text.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Insert Text
8 |
9 |
10 | DOM examples
11 | Testing DOM
12 |
13 |
14 |
15 |
16 |
17 |
--------------------------------------------------------------------------------
/dom/01_d_insert_text.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Insert Text
8 |
9 |
10 | A demonstration of how to access a PRE element
11 |
12 |
13 | Text in a pre element
14 | is displayed in a fixed-width
15 | font, and it preserves
16 | both spaces and
17 | line breaks
18 |
19 |
20 | Click the button to get the innerHTML of the pre element.
21 | Try it
22 |
23 |
24 |
25 |
26 |
--------------------------------------------------------------------------------
/dom/01_e_insert_text.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Insert Text
7 |
8 |
9 | DOM examples
10 | Testing DOM
11 |
12 |
13 |
14 |
15 |
16 |
--------------------------------------------------------------------------------
/dom/01_f_insert_text.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Insert Text
7 |
8 |
9 | DOM examples
10 | Testing DOM
11 |
12 |
13 |
14 |
15 |
16 |
--------------------------------------------------------------------------------
/dom/01a_date_time2.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Date and Time
8 |
9 |
10 | Greeting!
11 |
12 | Date and Time
7 |
8 |
9 |
10 | Greeting!
11 |
12 |
13 |
14 |
15 | Date and Time
8 |
9 |
10 |
11 |
12 |
Date and Time
13 |
Show Date and Time information
14 |
17 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
--------------------------------------------------------------------------------
/dom/01b_doc_properties.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Document activeElement
8 |
9 |
10 | Click anywhere in the document to display the active element.
11 | A Button
13 |
14 |
15 |
--------------------------------------------------------------------------------
/dom/01c_doc_properties.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Document character set
8 |
9 |
10 | Check charset
11 | The character set of this document is
12 |
13 |
14 |
--------------------------------------------------------------------------------
/dom/02_change_text.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | QuerySelector
8 |
9 |
10 |
11 | Testing DOM
12 |
13 |
15 | Click me
16 | Please click repeatedly on the button to see changes in the text and in the style
17 |
18 |
19 |
20 |
21 |
22 |
23 |
--------------------------------------------------------------------------------
/dom/02a_change_text2.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Changing texts
8 |
9 |
10 | DOM examples
11 | Testing DOM
12 |
13 |
15 |
16 | Test String:
17 |
18 | Click me Reset counter getElementById
8 |
9 |
10 | Hello World!
11 | This example demonstrates the getElementById method!
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
--------------------------------------------------------------------------------
/dom/02b_change_text_alter.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | TranscryptFrame
8 |
9 |
10 | Hello World!
11 | This example demonstrates the getElementById method!
12 |
13 |
14 |
--------------------------------------------------------------------------------
/dom/02c_change_text.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | getElementsByTagName
8 |
9 |
10 | getElementsByTagName
11 |
12 |
The first paragraph
13 |
The 2nd paragraph for the getElementsByTagName method
14 |
The 3rd paragraph for the method
15 |
Another paragraph outside main
17 |
18 |
19 |
--------------------------------------------------------------------------------
/dom/02c_change_text_alter.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Change Text with TranscryptFrame
8 |
9 |
10 | Hello World!
11 | This example demonstrates the getElementById method!
12 |
13 |
14 |
--------------------------------------------------------------------------------
/dom/02d_change_text.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | getElementsByClassName
8 |
9 |
10 | getElementsByClassName
11 |
12 |
The first paragraph
13 |
The 2nd paragraph for the getElementsByClassName method
14 |
The 3rd paragraph for the method
15 |
Another paragraph outside main
17 |
18 |
19 |
--------------------------------------------------------------------------------
/dom/03_change_text_attributes.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Change attributes
8 |
9 |
10 | Change attributes
11 | Testing DOM
12 |
13 |
15 |
16 | Test String:
17 |
18 | Change text Change attributes
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
--------------------------------------------------------------------------------
/dom/03_display_text_attributes.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Display attributes
8 |
9 |
10 | Display attributes
11 | Testing DOM
12 |
13 | Try it
14 |
15 |
16 |
Attributes:
17 |
18 |
19 |
--------------------------------------------------------------------------------
/dom/03a_change_css_attributes.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Titel
8 |
9 |
10 |
11 | DOM examples
12 | Testing DOM
13 |
14 |
16 |
17 | Test String:
18 |
19 | Click for changing style attributes
21 |
This is an changeable text block.
22 |
24 |
25 |
26 |
27 |
28 |
29 |
30 |
--------------------------------------------------------------------------------
/dom/03b_change_css_attributes_debug.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Titel
8 |
9 |
10 |
11 | DOM examples
12 | Activate debugging with F12
13 |
14 |
16 |
17 | Select "Console" in the debugger menu. Then click Reload again.
18 |
19 | Click for changing style attributes
21 |
This is an changeable text block.
22 |
24 |
25 |
26 |
27 |
28 |
29 |
30 |
--------------------------------------------------------------------------------
/dom/03c_change_css_attributes.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Titel
8 |
9 |
10 |
11 | Changing CSS
12 | Hello World!
13 | Hello World!
14 | Click for changing style attributes
16 |
17 |
18 |
19 |
20 |
21 |
22 |
--------------------------------------------------------------------------------
/dom/03d_append_links.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Append Links to the document
8 |
9 |
10 |
11 | Append Links to the document
12 |
13 | Click the button to append a random link to the end of the list.
14 |
15 | Append random link Countdown
8 |
9 |
10 |
11 | setTimeout
12 |
13 |
14 |
Start the Countdown by clicking the button.
15 |
Start Countdown Stop Countdown
16 |
Append Items to a list
8 |
9 |
10 |
11 | Append Items to a list
12 |
13 | Click the button to append an item to the end of the list.
14 |
15 | Append random item
16 |
17 | Note:
18 | List:
19 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
--------------------------------------------------------------------------------
/dom/04_get_lose_focus.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Display attributes
8 |
9 |
14 |
15 | Visit www.transcrypt.org
16 |
17 | Click the buttons to give focus and/or remove focus from the link above.
18 |
19 | Titel
8 |
9 |
10 |
11 | DOM examples
12 | Testing DOM
13 |
14 |
16 |
17 | Test String:
18 |
19 | Click me Reset text block
22 |
This is an expandable text block.
23 |
25 |
26 |
27 |
28 |
29 |
30 |
31 |
--------------------------------------------------------------------------------
/dom/06_delete_text.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Titel
8 |
9 |
10 |
11 |
12 | DOM examples
13 | Testing DOM
14 |
15 |
17 |
18 | Test String:
19 |
20 | Click me
22 |
This is an expandable text block.
23 |
25 |
26 |
27 |
28 |
29 |
30 |
31 |
--------------------------------------------------------------------------------
/dom/06a_hide_show_text.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Titel
8 |
9 |
10 |
11 |
12 | DOM examples
13 | Testing DOM
14 |
15 |
17 |
18 |
Test String can disapper and come back again by clicking
19 |
20 | Click me
22 |
23 |
24 |
25 |
26 |
27 |
28 |
--------------------------------------------------------------------------------
/dom/07_addEventListener_example.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | addEventListener
10 |
11 |
12 | Click me
14 | DOM examples
15 |
16 | Testing DOM
17 |
18 |
19 |
21 |
22 | Test String:
23 |
24 |
25 |
This is an expandable text block.
26 |
28 |
29 |
--------------------------------------------------------------------------------
/dom/07b_addEventListener_example.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | addEventListener
8 |
9 |
10 | Click me
12 | DOM examples
13 |
14 | Testing DOM
15 |
16 |
17 |
19 |
20 | Test String:
21 |
22 |
23 |
This is an expandable text block.
24 |
26 |
27 |
28 |
--------------------------------------------------------------------------------
/dom/08_read_selectionvalue.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Titel
8 |
9 |
10 | Dwarfs
11 | The
12 |
13 | 1st
14 | 2nd
15 | 3rd
16 | 4th
17 | 5th
18 | 6th
19 | 7th
20 |
21 |
22 | Dwarf is Doc .
23 |
24 |
25 |
26 |
27 |
28 |
29 |
30 |
--------------------------------------------------------------------------------
/dom/09_mouse_over_out.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Titel
8 |
9 |
10 | Mouse over
11 |
12 | Mouse over this block.
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
--------------------------------------------------------------------------------
/dom/10_immediate_input_values.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Titel
8 |
9 |
10 | Typing
11 | Titel
8 |
15 |
16 |
17 | Start
18 | testing
19 | test
20 |
21 |
--------------------------------------------------------------------------------
/dom/11_event_keys.html:
--------------------------------------------------------------------------------
1 |
2 |
3 | Key Events
7 |
8 |
9 | Start
10 | testing keys
11 |
12 | Keycode:
13 | Charcode
14 |
15 |
--------------------------------------------------------------------------------
/dom/12_change_backgroundcolor.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Titel
8 |
9 |
10 | Click me DOM examples
12 | Testing DOM
13 |
14 |
16 |
17 | Test String:
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
--------------------------------------------------------------------------------
/dom/13_button_disable_enable.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Titel
8 |
9 |
10 | DOM examples
11 | Button to enable/disable ToggleButton Testing DOM
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
--------------------------------------------------------------------------------
/dom/14_change_imagesize.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Titel
8 |
9 |
10 | DOM examples
11 | Find out more about Transcrypt Testing DOM
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
--------------------------------------------------------------------------------
/dom/14a_change_image.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Titel
8 |
9 |
10 | DOM examples
11 | Click the bulb to toggle it on and off!
12 | Find out more about Transcrypt Testing DOM
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
--------------------------------------------------------------------------------
/dom/15_load_file.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Titel
9 |
10 |
11 | DOM examples
12 | Load an external html file and display it Testing DOM - does not work with local files
14 |
21 | Reload Page
22 |
23 |
24 |
25 |
26 |
27 |
28 |
--------------------------------------------------------------------------------
/dom/16_animate.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Animate example
8 |
22 |
23 |
24 | Animate example
25 |
26 | Click Me
27 |
28 |
31 |
32 |
--------------------------------------------------------------------------------
/dom/17_set_clear_timeout.html:
--------------------------------------------------------------------------------
1 |
2 |
3 | Set and Clear Timeout
7 |
8 |
9 | This toggles a counting on and off
10 | Counting is at:
11 | Toggle counting on/off
12 | Reset count
13 |
14 |
--------------------------------------------------------------------------------
/dom/18_set_clear_interval.html:
--------------------------------------------------------------------------------
1 |
2 |
3 | Clock
7 |
8 |
9 | This toggles a clock on and off
10 | The time is:
11 | Toggle clock on/off
12 |
13 |
--------------------------------------------------------------------------------
/dom/__javascript__/access_key.mod.js:
--------------------------------------------------------------------------------
1 | (function () {
2 | var __name__ = '__main__';
3 | var set_key = function () {
4 | console.log ('document loading has finished');
5 | document.getElementById ('tra').accessKey = 't';
6 | console.log (document.getElementById ('tra').innerHTML);
7 | };
8 | __pragma__ ('')
9 | __all__.__name__ = __name__;
10 | __all__.set_key = set_key;
11 | __pragma__ (' ')
12 | }) ();
13 |
--------------------------------------------------------------------------------
/dom/__javascript__/anonymous_function.mod.js:
--------------------------------------------------------------------------------
1 | (function () {
2 | var __name__ = '__main__';
3 | var x = (function __lambda__ (a, b) {
4 | return a * b;
5 | });
6 | document.getElementById ('demo').innerHTML = x (4, 3);
7 | __pragma__ ('')
8 | __all__.__name__ = __name__;
9 | __all__.x = x;
10 | __pragma__ (' ')
11 | }) ();
12 |
--------------------------------------------------------------------------------
/dom/__javascript__/append_items.mod.js:
--------------------------------------------------------------------------------
1 | (function () {
2 | var random = {};
3 | var __name__ = '__main__';
4 | __nest__ (random, '', __init__ (__world__.random));
5 | var append_item = function (self) {
6 | var new_items = list (['Fire', 'Water', 'Earth', 'Air', 'Ether', 'Wood', 'Metal']);
7 | var node = document.createElement ('LI');
8 | var rnd = random.randint (0, len (new_items) - 1);
9 | var textnode = document.createTextNode (new_items [rnd]);
10 | node.appendChild (textnode);
11 | document.getElementById ('myList').appendChild (node);
12 | };
13 | __pragma__ ('' +
14 | 'random' +
15 | ' ')
16 | __pragma__ ('')
17 | __all__.__name__ = __name__;
18 | __all__.append_item = append_item;
19 | __pragma__ (' ')
20 | }) ();
21 |
--------------------------------------------------------------------------------
/dom/__javascript__/button_disable_enable.mod.js:
--------------------------------------------------------------------------------
1 | (function () {
2 | var __name__ = '__main__';
3 | var disable_button = function (butt) {
4 | document.getElementById (butt).disabled = true;
5 | };
6 | var enable_button = function (butt) {
7 | document.getElementById (butt).disabled = false;
8 | };
9 | var button_alert = function () {
10 | alert ('Button can be clicked again.');
11 | };
12 | var change_button = function () {
13 | if (document.getElementById ('myBtn').disabled) {
14 | enable_button ('myBtn');
15 | }
16 | else {
17 | disable_button ('myBtn');
18 | }
19 | };
20 | __pragma__ ('')
21 | __all__.__name__ = __name__;
22 | __all__.button_alert = button_alert;
23 | __all__.change_button = change_button;
24 | __all__.disable_button = disable_button;
25 | __all__.enable_button = enable_button;
26 | __pragma__ (' ')
27 | }) ();
28 |
--------------------------------------------------------------------------------
/dom/__javascript__/change_backgroundcolor.mod.js:
--------------------------------------------------------------------------------
1 | (function () {
2 | var __name__ = '__main__';
3 | var change_background = function () {
4 | document.body.style.background = 'red';
5 | var col = prompt ('Which background color do you like?', '');
6 | document.body.style.background = col;
7 | };
8 | __pragma__ ('')
9 | __all__.__name__ = __name__;
10 | __all__.change_background = change_background;
11 | __pragma__ (' ')
12 | }) ();
13 |
--------------------------------------------------------------------------------
/dom/__javascript__/change_css_attributes2.mod.js:
--------------------------------------------------------------------------------
1 | (function () {
2 | var __name__ = '__main__';
3 | var change_css = function () {
4 | if (document.getElementById ('p2').style.fontFamily == 'Arial') {
5 | document.getElementById ('p2').style.color = 'black';
6 | document.getElementById ('p2').style.fontFamily = 'Times';
7 | document.getElementById ('p2').style.fontSize = 'smaller';
8 | }
9 | else {
10 | document.getElementById ('p2').style.color = 'blue';
11 | document.getElementById ('p2').style.fontFamily = 'Arial';
12 | document.getElementById ('p2').style.fontSize = 'larger';
13 | }
14 | };
15 | __pragma__ ('')
16 | __all__.__name__ = __name__;
17 | __all__.change_css = change_css;
18 | __pragma__ (' ')
19 | }) ();
20 |
--------------------------------------------------------------------------------
/dom/__javascript__/change_imagesize.mod.js:
--------------------------------------------------------------------------------
1 | (function () {
2 | var __name__ = '__main__';
3 | var button_alert = function () {
4 | var answer = prompt ('Do you want to go to the Transcrypt site?', 'Y');
5 | if (answer == 'Y' || answer == 'y') {
6 | location.href = 'https://www.transcrypt.org/';
7 | }
8 | };
9 | var change_button = function () {
10 | var butt = document.getElementById ('myBtn');
11 | if (__in__ ('200', butt.innerHTML)) {
12 | butt.innerHTML = '')
19 | __all__.__name__ = __name__;
20 | __all__.button_alert = button_alert;
21 | __all__.change_button = change_button;
22 | __pragma__ (' ')
23 | }) ();
24 |
--------------------------------------------------------------------------------
/dom/__javascript__/change_text2b.mod.js:
--------------------------------------------------------------------------------
1 | (function () {
2 | var __name__ = '__main__';
3 | var insert = function () {
4 | var myElement = document.getElementById ('intro');
5 | document.getElementById ('demo').innerHTML = 'The text from the intro paragraph is ' + myElement.innerHTML;
6 | };
7 | __pragma__ ('')
8 | __all__.__name__ = __name__;
9 | __all__.insert = insert;
10 | __pragma__ (' ')
11 | }) ();
12 |
--------------------------------------------------------------------------------
/dom/__javascript__/change_text2b_alter.mod.js:
--------------------------------------------------------------------------------
1 | (function () {
2 | var __name__ = '__main__';
3 | var tf = __init__ (__world__.TranscryptFrame);
4 | var insert = function () {
5 | var myElement = tf.doc_id ('intro');
6 | tf.doc_id ('demo').innerHTML = 'The text from the intro paragraph is ' + myElement.innerHTML;
7 | };
8 | __pragma__ ('' +
9 | 'TranscryptFrame' +
10 | ' ')
11 | __pragma__ ('')
12 | __all__.__name__ = __name__;
13 | __all__.insert = insert;
14 | __pragma__ (' ')
15 | }) ();
16 |
--------------------------------------------------------------------------------
/dom/__javascript__/change_text2c_alter.mod.js:
--------------------------------------------------------------------------------
1 | (function () {
2 | var __name__ = '__main__';
3 | var tf = __init__ (__world__.TranscryptFrame);
4 | var insert = function () {
5 | tf.S ('#demo').innerHTML = 'The text from the intro paragraph is ' + tf.S ('#intro', 'htm');
6 | };
7 | __pragma__ ('' +
8 | 'TranscryptFrame' +
9 | ' ')
10 | __pragma__ ('')
11 | __all__.__name__ = __name__;
12 | __all__.insert = insert;
13 | __pragma__ (' ')
14 | }) ();
15 |
--------------------------------------------------------------------------------
/dom/__javascript__/change_text2d.mod.js:
--------------------------------------------------------------------------------
1 | (function () {
2 | var __name__ = '__main__';
3 | var read = function () {
4 | var x = document.getElementById ('main');
5 | var y = x.getElementsByClassName ('para');
6 | var __iterable0__ = y;
7 | for (var __index0__ = 0; __index0__ < len (__iterable0__); __index0__++) {
8 | var i = __iterable0__ [__index0__];
9 | document.getElementById ('demo').innerHTML = (document.getElementById ('demo').innerHTML + '')
13 | __all__.__name__ = __name__;
14 | __all__.read = read;
15 | __pragma__ (' ')
16 | }) ();
17 |
--------------------------------------------------------------------------------
/dom/__javascript__/change_text3.mod.js:
--------------------------------------------------------------------------------
1 | (function () {
2 | var __name__ = '__main__';
3 | var read = function () {
4 | var x = document.getElementById ('main');
5 | var y = x.getElementsByTagName ('p');
6 | var __iterable0__ = y;
7 | for (var __index0__ = 0; __index0__ < len (__iterable0__); __index0__++) {
8 | var i = __iterable0__ [__index0__];
9 | document.getElementById ('demo').innerHTML = (document.getElementById ('demo').innerHTML + '')
13 | __all__.__name__ = __name__;
14 | __all__.read = read;
15 | __pragma__ (' ')
16 | }) ();
17 |
--------------------------------------------------------------------------------
/dom/__javascript__/display_text_attributes.mod.js:
--------------------------------------------------------------------------------
1 | (function () {
2 | var __name__ = '__main__';
3 | var display = function (element) {
4 | var att_len = document.getElementById (element).attributes.length;
5 | var x = ((('Attribute length of element ' + element) + ': ') + str (att_len)) + ' and their Values =>';
6 | for (var i = 0; i < att_len; i++) {
7 | x += ' ' + document.getElementById (element).attributes [i].localName;
8 | x += '=' + document.getElementById (element).attributes [i].value;
9 | }
10 | document.getElementById ('test').innerHTML = x;
11 | };
12 | __pragma__ ('')
13 | __all__.__name__ = __name__;
14 | __all__.display = display;
15 | __pragma__ (' ')
16 | }) ();
17 |
--------------------------------------------------------------------------------
/dom/__javascript__/doc_props1.mod.js:
--------------------------------------------------------------------------------
1 | (function () {
2 | var __name__ = '__main__';
3 | var active_element = function () {
4 | var x = (document.activeElement.tagName + ', ') + document.activeElement.id;
5 | document.getElementById ('demo').innerHTML = x;
6 | };
7 | __pragma__ ('')
8 | __all__.__name__ = __name__;
9 | __all__.active_element = active_element;
10 | __pragma__ (' ')
11 | }) ();
12 |
--------------------------------------------------------------------------------
/dom/__javascript__/doc_props2.mod.js:
--------------------------------------------------------------------------------
1 | (function () {
2 | var __name__ = '__main__';
3 | var character_set = function () {
4 | document.getElementById ('demo').innerHTML = ((('Character set: ' + document.characterSet) + '')
7 | __all__.__name__ = __name__;
8 | __all__.character_set = character_set;
9 | __pragma__ (' ')
10 | }) ();
11 |
--------------------------------------------------------------------------------
/dom/__javascript__/get_lose_focus.mod.js:
--------------------------------------------------------------------------------
1 | (function () {
2 | var __name__ = '__main__';
3 | var getfocus = function () {
4 | document.getElementById ('myAnchor').focus ();
5 | };
6 | var losefocus = function () {
7 | document.getElementById ('myAnchor').blur ();
8 | };
9 | __pragma__ ('')
10 | __all__.__name__ = __name__;
11 | __all__.getfocus = getfocus;
12 | __all__.losefocus = losefocus;
13 | __pragma__ (' ')
14 | }) ();
15 |
--------------------------------------------------------------------------------
/dom/__javascript__/insert_text.mod.js:
--------------------------------------------------------------------------------
1 | (function () {
2 | var __name__ = '__main__';
3 | var TestSystem = __class__ ('TestSystem', [object], {
4 | __module__: __name__,
5 | get __init__ () {return __get__ (this, function (self) {
6 | self.text = 'Hello, DOM!';
7 | });},
8 | get insert () {return __get__ (this, function (self) {
9 | document.getElementById ('output').innerText = self.text;
10 | });}
11 | });
12 | var testSystem = TestSystem ();
13 | __pragma__ ('')
14 | __all__.TestSystem = TestSystem;
15 | __all__.__name__ = __name__;
16 | __all__.testSystem = testSystem;
17 | __pragma__ (' ')
18 | }) ();
19 |
--------------------------------------------------------------------------------
/dom/__javascript__/insert_text2.mod.js:
--------------------------------------------------------------------------------
1 | (function () {
2 | var __name__ = '__main__';
3 | var insert = function () {
4 | var text = 'Hello, DOM!';
5 | document.getElementById ('output').innerText = text;
6 | };
7 | __pragma__ ('')
8 | __all__.__name__ = __name__;
9 | __all__.insert = insert;
10 | __pragma__ (' ')
11 | }) ();
12 |
--------------------------------------------------------------------------------
/dom/__javascript__/insert_text3.mod.js:
--------------------------------------------------------------------------------
1 | (function () {
2 | var __name__ = '__main__';
3 | var insert = function () {
4 | var x = document.getElementById ('myPre').innerHTML;
5 | document.getElementById ('demo').innerHTML = x;
6 | console.log ('This message can only be seen in the console window - hit F12 to view it in the browser');
7 | console.log ('Console.log can be used for debugging, especially for variables like x.');
8 | console.log (('x has the value:' + x) + ': end of var');
9 | };
10 | __pragma__ ('')
11 | __all__.__name__ = __name__;
12 | __all__.insert = insert;
13 | __pragma__ (' ')
14 | }) ();
15 |
--------------------------------------------------------------------------------
/dom/__javascript__/insert_text4.mod.js:
--------------------------------------------------------------------------------
1 | (function () {
2 | var __name__ = '__main__';
3 | var insert = function (text) {
4 | document.getElementById ('output').innerText = text;
5 | };
6 | __pragma__ ('')
7 | __all__.__name__ = __name__;
8 | __all__.insert = insert;
9 | __pragma__ (' ')
10 | }) ();
11 |
--------------------------------------------------------------------------------
/dom/__javascript__/insert_text5.mod.js:
--------------------------------------------------------------------------------
1 | (function () {
2 | var __name__ = '__main__';
3 | var text = 'Hello, DOM!';
4 | document.getElementById ('output').innerText = text;
5 | __pragma__ ('')
6 | __all__.__name__ = __name__;
7 | __all__.text = text;
8 | __pragma__ (' ')
9 | }) ();
10 |
--------------------------------------------------------------------------------
/dom/__javascript__/showdatetime.mod.js:
--------------------------------------------------------------------------------
1 | (function () {
2 | var __name__ = '__main__';
3 | var show_date_time = function () {
4 | document.getElementById ('info').innerHTML = Date ();
5 | };
6 | __pragma__ ('')
7 | __all__.__name__ = __name__;
8 | __all__.show_date_time = show_date_time;
9 | __pragma__ (' ')
10 | }) ();
11 |
--------------------------------------------------------------------------------
/dom/__javascript__/showdatetime2.mod.js:
--------------------------------------------------------------------------------
1 | (function () {
2 | var __name__ = '__main__';
3 | var show_date_time = function () {
4 | var text = 'It is ';
5 | var date_time = Date ();
6 | var elements = date_time.py_split (' ');
7 | var time = elements [4].py_split (':');
8 | var hour = int (time [0]);
9 | text += elements [4] + '')
28 | __all__.__name__ = __name__;
29 | __all__.show_date_time = show_date_time;
30 | __pragma__ (' ')
31 | }) ();
32 |
--------------------------------------------------------------------------------
/dom/__javascript__/window_height.mod.js:
--------------------------------------------------------------------------------
1 | (function () {
2 | var __name__ = '__main__';
3 | var show_height = function () {
4 | alert ('Window height is: ' + window.innerHeight);
5 | };
6 | var say_hi = function () {
7 | alert ('hi');
8 | };
9 | __pragma__ ('')
10 | __all__.__name__ = __name__;
11 | __all__.say_hi = say_hi;
12 | __all__.show_height = show_height;
13 | __pragma__ (' ')
14 | }) ();
15 |
--------------------------------------------------------------------------------
/dom/access_key.py:
--------------------------------------------------------------------------------
1 | #!/usr/bin/env python
2 | # -*- coding: utf-8 -*-
3 |
4 | def set_key():
5 | console.log("document loading has finished")
6 | document.getElementById("tra").accessKey = "t"
7 | console.log(document.getElementById("tra").innerHTML)
8 |
--------------------------------------------------------------------------------
/dom/addEventListener_example.py:
--------------------------------------------------------------------------------
1 | #!/usr/bin/env python
2 | # -*- coding: utf-8 -*-
3 | class TestSystem:
4 |
5 | def __init__ (self):
6 | self.text = 'Hello, DOM!'
7 | self.para = 'A new paragraph'
8 | self.textblock = 'This is an expandable text block.'
9 | self.button1 = document.getElementById("button1")
10 | self.button1.addEventListener('mousedown', self.pressed)
11 |
12 | def insert(self):
13 | document.querySelector('output').innerHTML = self.text
14 | # document.querySelector('test').innerText = "Test"+self.button1+":"
15 |
16 | def pressed(self):
17 | container = document.getElementById('textblock')
18 | newElm = document.createElement('p')
19 | newElm.innerText = self.para
20 | container.appendChild(newElm)
21 |
22 | def init ():
23 | testSystem = TestSystem()
24 | testSystem.insert ()
--------------------------------------------------------------------------------
/dom/addEventListener_example1.py:
--------------------------------------------------------------------------------
1 | #!/usr/bin/env python
2 | # -*- coding: utf-8 -*-
3 |
4 | def init():
5 | insert()
6 |
7 | def insert():
8 | document.querySelector('output').innerHTML = 'Hello, DOM!'
9 | button1 = document.getElementById("button1")
10 | button1.addEventListener('mousedown', pressed)
11 |
12 | def pressed():
13 | para = 'A new paragraph'
14 | container = document.getElementById('textblock')
15 | newElm = document.createElement('p')
16 | newElm.innerText = para
17 | container.appendChild(newElm)
--------------------------------------------------------------------------------
/dom/animat.py:
--------------------------------------------------------------------------------
1 | #!/usr/bin/env python
2 | # -*- coding: utf-8 -*-
3 |
4 | class TestSystem:
5 |
6 | def __init__ (self):
7 | pass
8 |
9 | def myMove(self):
10 | self.elem = document.getElementById("animate")
11 | self.pos = 0
12 | self.id = setInterval(self.frame, 5)
13 |
14 | def frame(self):
15 | if (self.pos == 350):
16 | clearInterval(self.id)
17 | else:
18 | self.pos = self.pos + 1
19 | self.elem.style.top = self.pos + 'px'
20 | self.elem.style.left = self.pos + 'px'
21 |
22 | testSystem = TestSystem()
23 |
--------------------------------------------------------------------------------
/dom/anonymous_function.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | After a function has been stored in a variable,
5 | the variable can be used as a function:
6 |
7 |
8 |
9 |
10 |
--------------------------------------------------------------------------------
/dom/anonymous_function.py:
--------------------------------------------------------------------------------
1 | x = lambda a, b: a * b
2 | document.getElementById("demo").innerHTML = x(4, 3);
3 |
4 | """ original Javascript:
5 |
9 | """
10 |
--------------------------------------------------------------------------------
/dom/append_items.py:
--------------------------------------------------------------------------------
1 | #!/usr/bin/env python
2 | # -*- coding: utf-8 -*-
3 |
4 | import random
5 |
6 | def append_item(self):
7 | new_items = ["Fire", "Water", "Earth", "Air", "Ether", "Wood", "Metal"]
8 | node = document.createElement("LI")
9 | rnd = random.randint(0, len(new_items)-1)
10 | textnode = document.createTextNode(new_items[rnd])
11 | # textnode = document.createTextNode("Water")
12 | node.appendChild(textnode)
13 | document.getElementById("myList").appendChild(node)
14 |
--------------------------------------------------------------------------------
/dom/append_links.py:
--------------------------------------------------------------------------------
1 | #!/usr/bin/env python
2 | # -*- coding: utf-8 -*-
3 |
4 | import random
5 |
6 | def append_link():
7 | new_links = ["https://github.com/bunkahle/Transcrypt-Examples", "https://www.transcrypt.org/", "https://www.javascript.com/", "https://www.w3schools.com/js/"]
8 | new_links_desc = ["Transcrypt-Examples", "Transcrypt Website", "Javascript", "Javascript Tutorials"]
9 | nl = dict(zip(new_links_desc, new_links))
10 | element = document.createElement("A")
11 | rnd = random.randint(0, len(new_links)-1)
12 | # e. g. for rnd = 1 -> new_links_desc[rnd] = "Transcrypt Website"
13 | t = document.createTextNode(new_links_desc[rnd])
14 | # e. g. nl["Transcrypt Website"] = "https://www.transcrypt.org/"
15 | element.setAttribute("href", nl[new_links_desc[rnd]])
16 | element.appendChild(t)
17 | document.body.appendChild(element)
18 | bre = document.createElement("BR")
19 | document.body.appendChild(bre)
20 |
--------------------------------------------------------------------------------
/dom/button_disable_enable.py:
--------------------------------------------------------------------------------
1 | #!/usr/bin/env python
2 | # -*- coding: utf-8 -*-
3 |
4 | def disable_button(butt):
5 | document.getElementById(butt).disabled = True
6 |
7 | def enable_button(butt):
8 | document.getElementById(butt).disabled = False
9 |
10 | def button_alert():
11 | alert("Button can be clicked again.")
12 |
13 | def change_button():
14 | if document.getElementById("myBtn").disabled:
15 | enable_button("myBtn")
16 | else:
17 | disable_button("myBtn")
--------------------------------------------------------------------------------
/dom/change_backgroundcolor.py:
--------------------------------------------------------------------------------
1 | #!/usr/bin/env python
2 | # -*- coding: utf-8 -*-
3 |
4 | def change_background():
5 | # change the background color to red
6 | document.body.style.background = "red"
7 | col = prompt("Which background color do you like?", "")
8 | document.body.style.background = col
9 |
--------------------------------------------------------------------------------
/dom/change_css_attributes.py:
--------------------------------------------------------------------------------
1 | #!/usr/bin/env python
2 | # -*- coding: utf-8 -*-
3 |
4 | window = document
5 |
6 | class TestSystem:
7 |
8 | def __init__ (self):
9 | self.text = 'Hello, DOM!'
10 | self.size = 12
11 | self.mult = 1
12 | # window.addEventListener('click', self.rest)
13 | # self.button2.addEventListener('click', self.rest)
14 |
15 | def insert(self):
16 | document.querySelector('output').innerText = self.text
17 |
18 | def pressed(self):
19 | self.size = self.size + 2 * self.mult
20 | document.getElementById('textblock').style.fontSize=str(self.size)+'px'
21 | if self.size == 36:
22 | self.mult = -1
23 | elif self.size == 10:
24 | self.mult = 1
25 |
26 | testSystem = TestSystem()
27 |
--------------------------------------------------------------------------------
/dom/change_css_attributes2.py:
--------------------------------------------------------------------------------
1 | #!/usr/bin/env python
2 | # -*- coding: utf-8 -*-
3 |
4 | def change_css():
5 | if document.getElementById("p2").style.fontFamily == "Arial":
6 | document.getElementById("p2").style.color = "black"
7 | document.getElementById("p2").style.fontFamily = "Times"
8 | document.getElementById("p2").style.fontSize = "smaller"
9 | else:
10 | document.getElementById("p2").style.color = "blue"
11 | document.getElementById("p2").style.fontFamily = "Arial"
12 | document.getElementById("p2").style.fontSize = "larger"
13 |
--------------------------------------------------------------------------------
/dom/change_css_attributes_debug.py:
--------------------------------------------------------------------------------
1 | #!/usr/bin/env python
2 | # -*- coding: utf-8 -*-
3 |
4 | window = document
5 |
6 | class TestSystem:
7 |
8 | def __init__ (self):
9 | self.text = 'Hello, DOM!'
10 | self.size = 12
11 | self.mult = 1
12 |
13 | def insert(self):
14 | document.querySelector('output').innerText = self.text
15 |
16 | def pressed(self):
17 | self.size = self.size + 2 * self.mult
18 | document.getElementById('textblock').style.fontSize=str(self.size)+'px'
19 | if self.size == 36:
20 | self.mult = -1
21 | elif self.size == 10:
22 | self.mult = 1
23 | debugstring = "self.size "+str(self.size)+" self.mult "+str(self.mult)
24 | console.log(debugstring)
25 |
26 | testSystem = TestSystem()
27 |
--------------------------------------------------------------------------------
/dom/change_image.py:
--------------------------------------------------------------------------------
1 | #!/usr/bin/env python
2 | # -*- coding: utf-8 -*-
3 |
4 | class TestSystem:
5 |
6 | def __init__ (self):
7 | self.on = False
8 |
9 | def button_alert(self):
10 | answer = prompt("Do you want to go to the Transcrypt site?", "Y")
11 | if answer == "Y" or answer == "y":
12 | location.href = "https://www.transcrypt.org/"
13 |
14 | def change_button(self):
15 | if not self.on:
16 | document.getElementById("bulb").src = 'pic_bulbon.gif'
17 | else:
18 | document.getElementById("bulb").src = 'pic_bulboff.gif'
19 | self.on = not self.on
20 |
21 | testSystem = TestSystem()
--------------------------------------------------------------------------------
/dom/change_imagesize.py:
--------------------------------------------------------------------------------
1 | #!/usr/bin/env python
2 | # -*- coding: utf-8 -*-
3 |
4 | def button_alert():
5 | answer = prompt("Do you want to go to the Transcrypt site?", "Y")
6 | if answer == "Y" or answer == "y":
7 | location.href = "https://www.transcrypt.org/"
8 |
9 | def change_button():
10 | butt = document.getElementById("myBtn")
11 | # alert("innerHTML"+butt.innerHTML+":")
12 | if "200" in butt.innerHTML:
13 | butt.innerHTML = 'Titel
8 |
9 |
10 | DOM examples
11 | InnerHTML has been completely rewritten, but url does not change, works only with external files with http://...
12 |
13 |
14 |
15 |
16 | Reload Page
17 |
18 |
19 |
20 |
21 |
22 |
23 |
--------------------------------------------------------------------------------
/dom/dom1a.txt:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Titel
8 |
9 |
10 | DOM examples
11 | InnerHTML has been completely rewritten, but url does not change, works only with external files with http://...
12 |
13 |
14 |
15 |
16 | Reload Page
17 |
18 |
19 |
20 |
21 |
22 |
23 |
--------------------------------------------------------------------------------
/dom/get_lose_focus.py:
--------------------------------------------------------------------------------
1 | #!/usr/bin/env python
2 | # -*- coding: utf-8 -*-
3 |
4 | def getfocus():
5 | document.getElementById("myAnchor").focus()
6 |
7 | def losefocus():
8 | document.getElementById("myAnchor").blur()
9 |
--------------------------------------------------------------------------------
/dom/hide_show_text.py:
--------------------------------------------------------------------------------
1 | #!/usr/bin/env python
2 | # -*- coding: utf-8 -*-
3 |
4 | window = document
5 |
6 | class TestSystem:
7 |
8 | def __init__ (self):
9 | self.hide = False
10 |
11 | def pressed(self):
12 | if self.hide:
13 | document.getElementById('test').style.display='block'
14 | else:
15 | document.getElementById('test').style.display='none'
16 | self.hide = not self.hide
17 |
18 | testSystem = TestSystem()
19 |
--------------------------------------------------------------------------------
/dom/immediate_input_values.py:
--------------------------------------------------------------------------------
1 | #!/usr/bin/env python
2 | # -*- coding: utf-8 -*-
3 |
4 |
5 | def Update():
6 | document.getElementById("typed").innerHTML = document.getElementById("input-text").value
7 |
--------------------------------------------------------------------------------
/dom/insert_text.py:
--------------------------------------------------------------------------------
1 | #!/usr/bin/env python
2 | # -*- coding: utf-8 -*-
3 |
4 | class TestSystem:
5 |
6 | def __init__ (self):
7 | self.text = 'Hello, DOM!'
8 |
9 | def insert(self):
10 | document.getElementById('output').innerText = self.text
11 |
12 | testSystem = TestSystem()
13 |
--------------------------------------------------------------------------------
/dom/insert_text2.py:
--------------------------------------------------------------------------------
1 | #!/usr/bin/env python
2 | # -*- coding: utf-8 -*-
3 |
4 | def insert():
5 | text = 'Hello, DOM!'
6 | document.getElementById('output').innerText = text
--------------------------------------------------------------------------------
/dom/insert_text3.py:
--------------------------------------------------------------------------------
1 | #!/usr/bin/env python
2 | # -*- coding: utf-8 -*-
3 |
4 | def insert():
5 | x = document.getElementById("myPre").innerHTML
6 | document.getElementById("demo").innerHTML = x
7 | console.log("This message can only be seen in the console window - hit F12 to view it in the browser")
8 | console.log("Console.log can be used for debugging, especially for variables like x.")
9 | console.log("x has the value:"+x+": end of var")
10 |
--------------------------------------------------------------------------------
/dom/insert_text4.py:
--------------------------------------------------------------------------------
1 | #!/usr/bin/env python
2 | # -*- coding: utf-8 -*-
3 |
4 | def insert(text):
5 | document.getElementById('output').innerText = text
--------------------------------------------------------------------------------
/dom/insert_text5.py:
--------------------------------------------------------------------------------
1 | #!/usr/bin/env python
2 | # -*- coding: utf-8 -*-
3 |
4 | text = 'Hello, DOM!'
5 | document.getElementById('output').innerText = text
--------------------------------------------------------------------------------
/dom/load_file.py:
--------------------------------------------------------------------------------
1 | #!/usr/bin/env python
2 | # -*- coding: utf-8 -*-
3 |
4 | def process_Text(data):
5 | document.body.innerHTML = ''
6 | document.body.innerHTML = data
7 |
--------------------------------------------------------------------------------
/dom/mouse_over_out.py:
--------------------------------------------------------------------------------
1 | #!/usr/bin/env python
2 | # -*- coding: utf-8 -*-
3 |
4 |
5 | def main():
6 | document.getElementById("target-area").onmouseover = MouseOver
7 | document.getElementById("target-area").onmouseout = MouseOut
8 |
9 | def MouseOver():
10 | document.getElementById("target-area").style.backgroundColor = "red"
11 |
12 | def MouseOut():
13 | document.getElementById("target-area").style.backgroundColor = "white"
14 |
--------------------------------------------------------------------------------
/dom/pic_bulboff.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/bunkahle/Transcrypt-Examples/17d6460f3b532bb8258170a31875e4e26a977839/dom/pic_bulboff.gif
--------------------------------------------------------------------------------
/dom/pic_bulbon.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/bunkahle/Transcrypt-Examples/17d6460f3b532bb8258170a31875e4e26a977839/dom/pic_bulbon.gif
--------------------------------------------------------------------------------
/dom/read_selectionvalue.py:
--------------------------------------------------------------------------------
1 | #!/usr/bin/env python
2 | # -*- coding: utf-8 -*-
3 |
4 |
5 | def main():
6 | document.getElementById("dwarves-numbers").onclick = SetDwarf
7 |
8 | def SetDwarf():
9 | Dwarves = ["Doc","Grumpy","Happy","Sleepy","Bashful","Sneezy","Dopey"]
10 | dwarfNumber = document.getElementById("dwarves-numbers").value
11 | dwarf = Dwarves[dwarfNumber]
12 | document.getElementById("dwarf-name").innerHTML = dwarf
13 |
14 |
--------------------------------------------------------------------------------
/dom/set_clear_interval.py:
--------------------------------------------------------------------------------
1 | #!/usr/bin/env python
2 | # -*- coding: utf-8 -*-
3 |
4 | class Clock:
5 |
6 | def __init__(self):
7 | self.paused = False
8 | self.start_clock()
9 |
10 | def start_clock(self):
11 | self.clock = setInterval(self.timer, 1000)
12 |
13 | def timer(self):
14 | d = __new__(Date())
15 | t = d.toLocaleTimeString()
16 | document.getElementById("demo").innerHTML = "The time is: "+t
17 |
18 | def pause_clock(self):
19 | clearInterval(self.clock)
20 |
21 | def toggle_clock(self):
22 | self.paused = not self.paused
23 | if self.paused:
24 | self.pause_clock()
25 | else:
26 | self.start_clock()
27 |
28 | runningclock = Clock()
--------------------------------------------------------------------------------
/dom/showdatetime.py:
--------------------------------------------------------------------------------
1 | #!/usr/bin/env python
2 | # -*- coding: utf-8 -*-
3 |
4 | def show_date_time():
5 | document.getElementById('info').innerHTML = Date()
6 |
--------------------------------------------------------------------------------
/dom/showdatetime2.py:
--------------------------------------------------------------------------------
1 | #!/usr/bin/env python
2 | # -*- coding: utf-8 -*-
3 |
4 | def show_date_time():
5 | text = "It is "
6 | date_time = Date()
7 | elements = date_time.split(" ")
8 | time = elements[4].split(":")
9 | hour = int(time[0])
10 | text += elements[4] + ""
10 | if (6
2 |
3 |
4 | Read File
8 |
9 |
10 |
11 | Read a file!
12 | Read a file!
13 | Click for retrieving remote text file Click for retrieving local text file
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
--------------------------------------------------------------------------------
/files/02_readfile.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Read File
9 |
10 |
11 |
12 | Read a file!
13 | Read a file!
14 | Click for retrieving text file Click for retrieving text file into var
17 |
18 |
19 |
20 |
--------------------------------------------------------------------------------
/files/03_readfile.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Read local text File
8 |
9 |
10 |
11 | Read a local text file!
12 | Read a local text file!
13 |
15 |
16 |
17 |
18 |
--------------------------------------------------------------------------------
/files/04_readfile.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Read local image File
8 |
9 |
10 |
11 | Read a local image file!
12 | Read a local image file!
13 |
16 |
17 |
18 |
--------------------------------------------------------------------------------
/files/__javascript__/read_file.mod.js:
--------------------------------------------------------------------------------
1 | (function () {
2 | var __name__ = '__main__';
3 | var read_file = function () {
4 | var xmlhttp = new XMLHttpRequest ();
5 | xmlhttp.open ('GET', 'https://raw.githubusercontent.com/bunkahle/Transcrypt-Examples/master/README.md', false);
6 | xmlhttp.send ();
7 | var response = xmlhttp.responseText;
8 | console.log (response);
9 | alert (response);
10 | };
11 | var read_file_local = function () {
12 | var xmlhttp = new XMLHttpRequest ();
13 | xmlhttp.open ('GET', '01_readfile.html', false);
14 | xmlhttp.send ();
15 | var response = xmlhttp.responseText;
16 | console.log (response);
17 | alert (response);
18 | };
19 | __pragma__ ('')
20 | __all__.__name__ = __name__;
21 | __all__.read_file = read_file;
22 | __all__.read_file_local = read_file_local;
23 | __pragma__ (' ')
24 | }) ();
25 |
--------------------------------------------------------------------------------
/files/__javascript__/read_file2.mod.js:
--------------------------------------------------------------------------------
1 | (function () {
2 | var __name__ = '__main__';
3 | var TestSystem = __class__ ('TestSystem', [object], {
4 | __module__: __name__,
5 | get read_file () {return __get__ (this, function (self) {
6 | $ ('#demo').load ('https://raw.githubusercontent.com/bunkahle/Transcrypt-Examples/master/README.md');
7 | });},
8 | get read_file_var () {return __get__ (this, function (self) {
9 | $.get ('https://raw.githubusercontent.com/bunkahle/Transcrypt-Examples/master/README.md', self.get_filecontent);
10 | });},
11 | get get_filecontent () {return __get__ (this, function (self, response) {
12 | self.file_content = response;
13 | alert (self.file_content);
14 | });}
15 | });
16 | var testSystem = TestSystem ();
17 | __pragma__ ('')
18 | __all__.TestSystem = TestSystem;
19 | __all__.__name__ = __name__;
20 | __all__.testSystem = testSystem;
21 | __pragma__ (' ')
22 | }) ();
23 |
--------------------------------------------------------------------------------
/files/__javascript__/read_file3.mod.js:
--------------------------------------------------------------------------------
1 | (function () {
2 | var __name__ = '__main__';
3 | var TestSystem = __class__ ('TestSystem', [object], {
4 | __module__: __name__,
5 | get __init__ () {return __get__ (this, function (self) {
6 | self.textType = 'text.*';
7 | });},
8 | get openFile () {return __get__ (this, function (self, event) {
9 | self.inputvar = event.target;
10 | self.freader = new FileReader ();
11 | self.freader.onload = self.processInput;
12 | self.freader.readAsText (self.inputvar.files [0]);
13 | });},
14 | get processInput () {return __get__ (this, function (self) {
15 | self.text = self.freader.result;
16 | document.getElementById ('fileDisplayArea').innerText = self.text;
17 | });}
18 | });
19 | var testSystem = TestSystem ();
20 | __pragma__ ('')
21 | __all__.TestSystem = TestSystem;
22 | __all__.__name__ = __name__;
23 | __all__.testSystem = testSystem;
24 | __pragma__ (' ')
25 | }) ();
26 |
--------------------------------------------------------------------------------
/files/__javascript__/read_file4.mod.js:
--------------------------------------------------------------------------------
1 | (function () {
2 | var __name__ = '__main__';
3 | var TestSystem = __class__ ('TestSystem', [object], {
4 | __module__: __name__,
5 | get openFile () {return __get__ (this, function (self, event) {
6 | self.inputvar = event.target;
7 | self.freader = new FileReader ();
8 | self.freader.onload = self.processInput;
9 | self.freader.readAsDataURL (self.inputvar.files [0]);
10 | });},
11 | get processInput () {return __get__ (this, function (self) {
12 | var dataURL = self.freader.result;
13 | document.getElementById ('output').src = dataURL;
14 | });}
15 | });
16 | var testSystem = TestSystem ();
17 | __pragma__ ('')
18 | __all__.TestSystem = TestSystem;
19 | __all__.__name__ = __name__;
20 | __all__.testSystem = testSystem;
21 | __pragma__ (' ')
22 | }) ();
23 |
--------------------------------------------------------------------------------
/files/desc.txt:
--------------------------------------------------------------------------------
1 | Examples of file operations
2 |
--------------------------------------------------------------------------------
/files/read_file.py:
--------------------------------------------------------------------------------
1 | #!/usr/bin/env python
2 | # -*- coding: utf-8 -*-
3 |
4 | def read_file():
5 | xmlhttp=__new__(XMLHttpRequest())
6 | xmlhttp.open('GET', "https://raw.githubusercontent.com/bunkahle/Transcrypt-Examples/master/README.md", False)
7 | xmlhttp.send()
8 | response = xmlhttp.responseText
9 | console.log(response)
10 | alert(response)
11 |
12 | def read_file_local():
13 | xmlhttp=__new__(XMLHttpRequest())
14 | xmlhttp.open('GET', "01_readfile.html", False)
15 | xmlhttp.send()
16 | response = xmlhttp.responseText
17 | console.log(response)
18 | alert(response)
19 |
--------------------------------------------------------------------------------
/files/read_file2.py:
--------------------------------------------------------------------------------
1 | #!/usr/bin/env python
2 | # -*- coding: utf-8 -*-
3 |
4 | __pragma__ ('alias', 'S', '$')
5 |
6 | class TestSystem:
7 |
8 | def read_file(self):
9 | S("#demo").load("https://raw.githubusercontent.com/bunkahle/Transcrypt-Examples/master/README.md")
10 |
11 | def read_file_var(self):
12 | # !!! Using js_get solves the first problem
13 | S.js_get("https://raw.githubusercontent.com/bunkahle/Transcrypt-Examples/master/README.md", self.get_filecontent)
14 |
15 | def get_filecontent(self, response):
16 | self.file_content = response
17 | alert(self.file_content)
18 |
19 | testSystem = TestSystem()
--------------------------------------------------------------------------------
/files/read_file3.py:
--------------------------------------------------------------------------------
1 | #!/usr/bin/env python
2 | # -*- coding: utf-8 -*-
3 |
4 | class TestSystem:
5 |
6 | def __init__(self):
7 | self.textType = 'text.*'
8 |
9 | def openFile(self, event):
10 | self.inputvar = event.target
11 | self.freader = __new__(FileReader())
12 | self.freader.onload = self.processInput
13 | self.freader.readAsText(self.inputvar.files[0])
14 |
15 | def processInput(self):
16 | self.text = self.freader.result
17 | document.getElementById('fileDisplayArea').innerText = self.text
18 |
19 | testSystem = TestSystem()
20 |
21 |
--------------------------------------------------------------------------------
/files/read_file4.py:
--------------------------------------------------------------------------------
1 | #!/usr/bin/env python
2 | # -*- coding: utf-8 -*-
3 |
4 | class TestSystem:
5 |
6 | def openFile(self, event):
7 | self.inputvar = event.target
8 | self.freader = __new__(FileReader())
9 | self.freader.onload = self.processInput
10 | # No braces, since you don't want to call this function
11 | # but just pass its address...
12 |
13 | self.freader.readAsDataURL(self.inputvar.files[0])
14 |
15 | def processInput(self):
16 | dataURL = self.freader.result
17 | # console.log("dataURL type:"+type(dataURL))
18 | document.getElementById('output').src = dataURL
19 |
20 | testSystem = TestSystem()
21 |
22 |
--------------------------------------------------------------------------------
/games/01_canvas.html:
--------------------------------------------------------------------------------
1 |
2 |
3 | Solar System Animation
7 |
8 |
9 | This example does not work, it is just for showing how not to do it.
10 | When running in the browser, all transcrypt/javascript code is executed in a single thread, the UI thread. Which means we can’t run a naive infinite game loop:
11 |
12 | while True:
13 | render()
14 |
15 | This would block the UI thread, making the browser unresponsive.
16 | See example 02 , 03 and 04 how to create a game loop or constant update for the canvas
17 | Solar System Animation
7 |
8 |
9 | Here we work with window.setTimeout(self.render, 50) which is called every time self.render is reached at the end.
10 | Solar System Animation
7 |
8 |
9 | Here we work with window.setTimeout(self.render, 50) which is called once at the beginning of the animation. window.clearTimeout stops the execution of the settings of setTimeout.
10 | Toggle Pause Animation
12 |
13 |
14 |
--------------------------------------------------------------------------------
/games/03_canvas.html:
--------------------------------------------------------------------------------
1 |
2 |
3 | Solar System Animation
7 |
8 |
9 | Here we work with window.setInterval(self.render, 50) which is called once at the beginning of the animation.
10 | Solar System Animation
7 |
8 |
9 | Here we work with window.setInterval(self.render, 50) and window.clearInterval which is called once at the beginning of the animation and which can be stopped and reactivated anytime with the help of these both commands.
10 | Toggle Pause Animation
12 |
13 |
14 |
--------------------------------------------------------------------------------
/games/04_canvas.html:
--------------------------------------------------------------------------------
1 |
2 |
3 | Solar System Animation
7 |
8 |
9 | Here we work with window.requestAnimationFrame(self.render) which hooks automatically without specifying any react times into the browser’s native refresh loop.
10 | Solar System Animation
7 |
8 |
9 | Here we work with window.requestAnimationFrame(self.render) which hooks automatically without specifying any react times into the browser’s native refresh loop. We can switch off the animation frame by using window.cancelAnimationFrame.
10 | Toggle Pause Animation
12 |
13 |
14 |
--------------------------------------------------------------------------------
/games/04b_canvas.html:
--------------------------------------------------------------------------------
1 |
2 |
3 | Solar System Animation
7 |
8 |
9 | Here we work with window.requestAnimationFrame(self.render) which hooks automatically without specifying any react times into the browser’s native refresh loop. We can switch off the animation frame by checking the pause flag also.
10 | Use the cursor keys for right and left or the buttons below to accelerate or slow down the animation.
12 | Toggle Pause Animation
13 |
14 |
15 |
--------------------------------------------------------------------------------
/games/05_canvas.html:
--------------------------------------------------------------------------------
1 |
2 |
3 | Solar System Animation
7 |
8 |
9 | Now a game loop also waits for user input otherwise it is no game.
10 | Game running
11 | Use the cursor keys for right and left or the buttons below to accelerate or slow down the animation.
13 | Accelerate Animation Slow down Animation Toggle Pause Animation
14 |
15 |
16 |
--------------------------------------------------------------------------------
/games/Canvas_earth.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/bunkahle/Transcrypt-Examples/17d6460f3b532bb8258170a31875e4e26a977839/games/Canvas_earth.png
--------------------------------------------------------------------------------
/games/Canvas_moon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/bunkahle/Transcrypt-Examples/17d6460f3b532bb8258170a31875e4e26a977839/games/Canvas_moon.png
--------------------------------------------------------------------------------
/games/Canvas_sun.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/bunkahle/Transcrypt-Examples/17d6460f3b532bb8258170a31875e4e26a977839/games/Canvas_sun.png
--------------------------------------------------------------------------------
/games/Widgets.css:
--------------------------------------------------------------------------------
1 | .teststyle {
2 | font-size: 200%;
3 | margin: 20px;
4 | padding: 20px;
5 |
6 | }
7 |
8 |
--------------------------------------------------------------------------------
/games/Widgets.html:
--------------------------------------------------------------------------------
1 |
2 |
3 | Widgets
7 |
8 |
9 | Stop Clock Start Clock
12 |
13 |
14 |
15 |
--------------------------------------------------------------------------------
/games/chrome_clock.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/bunkahle/Transcrypt-Examples/17d6460f3b532bb8258170a31875e4e26a977839/games/chrome_clock.png
--------------------------------------------------------------------------------
/games/desc.txt:
--------------------------------------------------------------------------------
1 | Examples for basic HTML canvas and its animation, rendering and updating the contents for games
2 |
--------------------------------------------------------------------------------
/grid/GridGame.html:
--------------------------------------------------------------------------------
1 |
2 |
3 | Grid Game
11 |
12 |
13 | Grid Game - Baby switch me on...
14 | Try to switch on the light in all table cells by clicking single cells.
16 | Moves: 0
17 |
18 |
19 |
20 |
21 | Restart
22 |
23 |
24 |
25 |
--------------------------------------------------------------------------------
/grid/GridTest.html:
--------------------------------------------------------------------------------
1 |
2 |
3 | Grid Test
11 |
12 |
13 | Create and modify table
14 |
15 |
16 |
17 |
18 |
19 | < Prev Next > Clear
20 |
21 |
22 |
23 |
--------------------------------------------------------------------------------
/grid/GridTest2.html:
--------------------------------------------------------------------------------
1 |
2 |
3 | Grid Test 2
11 |
12 |
13 | Click on each td element to alert its indices as table col/row and its id.
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
--------------------------------------------------------------------------------
/grid/gridtest2.py:
--------------------------------------------------------------------------------
1 | def createTable():
2 | document.writeln('')
3 | for i in range(3):
4 | document.writeln(' ')
5 | for j in range(3):
6 | document.write(' ')
7 | document.writeln('Cell ID:'+str(i)+str(j)+' ')
8 | document.writeln(' ')
9 | document.writeln('
')
10 |
11 | def getPosition(pos):
12 | pos.bgColor="#ff0000"
13 | alert("Cell index is: " + pos.cellIndex + " and ID is " + pos.id + " and text is " + pos.innerText)
14 | x = int(pos.id[1])
15 | y = int(pos.id[0])
16 | cell = document.getElementById(pos.id)
17 | cell.bgColor="#ffffff"
18 | alert("row " + pos.parentNode.rowIndex + " - column " + pos.cellIndex);
19 |
20 |
--------------------------------------------------------------------------------
/hello/__javascript__/hello.mod.js:
--------------------------------------------------------------------------------
1 | (function () {
2 | var __name__ = '__main__';
3 | var greet = function () {
4 | var py_name = document.getElementById ('Name').value;
5 | if (py_name == '' || py_name.length == 0 || py_name == null) {
6 | document.getElementById ('groet').innerHTML = 'Hello Anonymous, may I know yor name? Please insert it below:
';
7 | }
8 | else {
9 | document.getElementById ('groet').innerHTML = ('Hello, ' + py_name) + ', thank you for introducing you
';
10 | }
11 | };
12 | __pragma__ ('')
13 | __all__.__name__ = __name__;
14 | __all__.greet = greet;
15 | __pragma__ (' ')
16 | }) ();
17 |
--------------------------------------------------------------------------------
/hello/desc.txt:
--------------------------------------------------------------------------------
1 | Standard Basic example
2 |
3 | You need to have Python 3 installed.
4 |
5 | Install Transcrypt with pip install transcrypt==3.6 or create a virtual environment by
6 | creating a new directory like mkdir hello
7 | and create a new virtual environment by:
8 |
9 | virtualenv -p C:\Python36\python.exe hello
10 | (the flag p specifies the python interpreter to use for the new virtualenv)
11 |
12 | Activate the virtual environment by activating it by:
13 | hello\Scripts\activate (Windows)
14 | or
15 | source my_project/bin/activate (Other)
16 |
17 | You can deactivate the virtualenv afterwards by the command deactivate
18 |
19 | Create a directory like hello with two files names hello.py and hello.html
20 |
21 | Run transcrypt.exe to compile the example file hello.py to Javascript files:
22 | transcrypt.exe hello.py
23 |
24 | You get a extra directory named __javascript__ where the javascript files are located.
25 |
26 | Start hello.html in your browser and test the code.
27 |
--------------------------------------------------------------------------------
/hello/hello.html:
--------------------------------------------------------------------------------
1 |
2 |
3 | Insert Text
8 |
9 |
10 | Hello Demo Name
11 |
12 |
13 |
...
14 |
15 | Your Name: Refresh the greeting!
17 |
18 |
19 |
20 |
--------------------------------------------------------------------------------
/hello/hello.py:
--------------------------------------------------------------------------------
1 | def greet():
2 | name = document.getElementById("Name").value
3 | if name == "" or name.length == 0 or name == null:
4 | document.getElementById("groet").innerHTML = 'Hello Anonymous, may I know yor name? Please insert it below:
'
5 | else:
6 | document.getElementById("groet").innerHTML = 'Hello, '+name+', thank you for introducing you
'
7 |
8 |
--------------------------------------------------------------------------------
/jquery/__javascript__/change_text.mod.js:
--------------------------------------------------------------------------------
1 | (function () {
2 | var __name__ = '__main__';
3 | var insert = function () {
4 | var text = 'The text from the intro paragraph is ';
5 | $ ('#demo').html (text + $ ('#intro').html ());
6 | };
7 | $ (document).ready (insert);
8 | __pragma__ ('')
9 | __all__.__name__ = __name__;
10 | __all__.insert = insert;
11 | __pragma__ (' ')
12 | }) ();
13 |
--------------------------------------------------------------------------------
/jquery/__javascript__/click1.mod.js:
--------------------------------------------------------------------------------
1 | (function () {
2 | var __name__ = '__main__';
3 | var clicked = function () {
4 | print ('hallo');
5 | print (dir ($ ('#test')));
6 | $ ('#test').hide ();
7 | };
8 | __pragma__ ('')
9 | __all__.__name__ = __name__;
10 | __all__.clicked = clicked;
11 | __pragma__ (' ')
12 | }) ();
13 |
--------------------------------------------------------------------------------
/jquery/__javascript__/hide1.mod.js:
--------------------------------------------------------------------------------
1 | (function () {
2 | var __name__ = '__main__';
3 | var showagain = function () {
4 | $ ('#test').show ();
5 | $ ('#dclick').show ();
6 | };
7 | var install_hide = function () {
8 | $ ('#test').click ((function __lambda__ () {
9 | return $ ('#test').hide ();
10 | }));
11 | $ ('#dclick').dblclick ((function __lambda__ () {
12 | return $ ('#dclick').hide ();
13 | }));
14 | $ ('#show').click (showagain);
15 | };
16 | $ (document).ready (install_hide);
17 | __pragma__ ('')
18 | __all__.__name__ = __name__;
19 | __all__.install_hide = install_hide;
20 | __all__.showagain = showagain;
21 | __pragma__ (' ')
22 | }) ();
23 |
--------------------------------------------------------------------------------
/jquery/__javascript__/hide_show.mod.js:
--------------------------------------------------------------------------------
1 | (function () {
2 | var __name__ = '__main__';
3 | var install_hide_show = function () {
4 | $ ('#hide').click ((function __lambda__ () {
5 | return $ ('p').hide ();
6 | }));
7 | $ ('#show').click ((function __lambda__ () {
8 | return $ ('p').show ();
9 | }));
10 | };
11 | $ (document).ready (install_hide_show);
12 | __pragma__ ('')
13 | __all__.__name__ = __name__;
14 | __all__.install_hide_show = install_hide_show;
15 | __pragma__ (' ')
16 | }) ();
17 |
--------------------------------------------------------------------------------
/jquery/__javascript__/insert_text.mod.js:
--------------------------------------------------------------------------------
1 | (function () {
2 | var __name__ = '__main__';
3 | var text = 'Hello, DOM!';
4 | $ ('#output').text (text);
5 | __pragma__ ('')
6 | __all__.__name__ = __name__;
7 | __all__.text = text;
8 | __pragma__ (' ')
9 | }) ();
10 |
--------------------------------------------------------------------------------
/jquery/__javascript__/insert_text1.mod.js:
--------------------------------------------------------------------------------
1 | (function () {
2 | var __name__ = '__main__';
3 | var action = function () {
4 | var text = 'Hello, DOM!';
5 | $ ('#output').text (text);
6 | };
7 | $ (document).ready (action);
8 | __pragma__ ('')
9 | __all__.__name__ = __name__;
10 | __all__.action = action;
11 | __pragma__ (' ')
12 | }) ();
13 |
--------------------------------------------------------------------------------
/jquery/__javascript__/insert_text2.mod.js:
--------------------------------------------------------------------------------
1 | (function () {
2 | var __name__ = '__main__';
3 | var insert = function () {
4 | var text = 'Hello, DOM!';
5 | $ ('#output').text (text);
6 | };
7 | __pragma__ ('')
8 | __all__.__name__ = __name__;
9 | __all__.insert = insert;
10 | __pragma__ (' ')
11 | }) ();
12 |
--------------------------------------------------------------------------------
/jquery/__javascript__/install_hide.mod.js:
--------------------------------------------------------------------------------
1 | (function () {
2 | var __name__ = '__main__';
3 | var install_hide = function () {
4 | $ ('p').click ((function __lambda__ () {
5 | return $ (this).hide ();
6 | }));
7 | };
8 | $ (document).ready (install_hide);
9 | __pragma__ ('')
10 | __all__.__name__ = __name__;
11 | __all__.install_hide = install_hide;
12 | __pragma__ (' ')
13 | }) ();
14 |
--------------------------------------------------------------------------------
/jquery/change_text.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | getElementById
8 |
9 |
10 | Hello World!
11 | This example demonstrates the getElementById method!
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
--------------------------------------------------------------------------------
/jquery/change_text.py:
--------------------------------------------------------------------------------
1 | #!/usr/bin/env python
2 | # -*- coding: utf-8 -*-
3 |
4 | __pragma__ ('alias', 'S', '$')
5 |
6 | def insert():
7 | text = "The text from the intro paragraph is "
8 | S("#demo").html(text+S("#intro").html())
9 | # instead of:
10 | # myElement = document.getElementById("intro")
11 | # document.getElementById("demo").innerHTML = "The text from the intro paragraph is " + myElement.innerHTML
12 |
13 | S(document).ready(insert)
--------------------------------------------------------------------------------
/jquery/click.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Test paragraph.
10 | Click me away!
11 | Click me too!
12 | click me
13 |
14 |
--------------------------------------------------------------------------------
/jquery/click1.py:
--------------------------------------------------------------------------------
1 | #!/usr/bin/env python
2 | # -*- coding: utf-8 -*-
3 |
4 | __pragma__ ('alias', 'S', '$')
5 |
6 | def clicked():
7 | print (dir(S("#test")))
8 | S("#test").hide()
9 |
10 |
11 |
12 |
--------------------------------------------------------------------------------
/jquery/hide1.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | If you click on me, I will disappear.
10 | Click me away by doubleclick!
11 | Click me too! But I can't be clicked away! I bring back the hidden!
12 |
13 |
--------------------------------------------------------------------------------
/jquery/hide1.py:
--------------------------------------------------------------------------------
1 | #!/usr/bin/env python
2 | # -*- coding: utf-8 -*-
3 |
4 | __pragma__ ('alias', 'S', '$')
5 |
6 | def showagain():
7 | S("#test").show()
8 | S("#dclick").show()
9 |
10 | def install_hide():
11 | S("#test").click(lambda: S("#test").hide())
12 | S("#dclick").dblclick(lambda: S("#dclick").hide())
13 | S("#show").click(showagain)
14 |
15 | S(document).ready(install_hide)
16 |
17 |
18 |
--------------------------------------------------------------------------------
/jquery/hide_show.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | If you click on the "Hide" button, I will disappear. But I come back with "Show".
10 | Hide
11 | Show
12 |
13 |
--------------------------------------------------------------------------------
/jquery/hide_show.py:
--------------------------------------------------------------------------------
1 | #!/usr/bin/env python
2 | # -*- coding: utf-8 -*-
3 |
4 | __pragma__ ('alias', 'S', '$')
5 |
6 | def install_hide_show():
7 | S("#hide").click(lambda:
8 | S("p").hide()
9 | )
10 | S("#show").click(lambda:
11 | S("p").show()
12 | )
13 |
14 | """ original Javascript:
15 | $(document).ready(function(){
16 | $("#hide").click(function(){
17 | $("p").hide();
18 | });
19 | $("#show").click(function(){
20 | $("p").show();
21 | });
22 | });
23 | """
24 | S(document).ready(install_hide_show)
25 |
26 |
27 |
--------------------------------------------------------------------------------
/jquery/hiding.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | If you click on me, I will disappear.
10 | Click me away!
11 | Click me too!
12 |
13 |
--------------------------------------------------------------------------------
/jquery/insert_text.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Insert Text
7 |
8 |
9 | DOM examples
10 | Testing DOM
11 |
12 |
13 |
14 |
15 |
16 |
--------------------------------------------------------------------------------
/jquery/insert_text.py:
--------------------------------------------------------------------------------
1 | #!/usr/bin/env python
2 | # -*- coding: utf-8 -*-
3 |
4 | __pragma__ ('alias', 'S', '$')
5 |
6 | text = 'Hello, DOM!'
7 | # instead of : document.getElementById('output').innerText = text
8 | S("#output").text(text)
9 |
10 |
11 |
--------------------------------------------------------------------------------
/jquery/insert_text1.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Insert Text
8 |
9 |
10 | DOM examples
11 | Testing DOM
12 |
13 |
14 |
15 |
16 |
--------------------------------------------------------------------------------
/jquery/insert_text1.py:
--------------------------------------------------------------------------------
1 | #!/usr/bin/env python
2 | # -*- coding: utf-8 -*-
3 |
4 | __pragma__ ('alias', 'S', '$')
5 |
6 | # instead of : document.getElementById('output').innerText = text
7 |
8 | def action():
9 | text = 'Hello, DOM!';
10 | S("#output").text(text)
11 |
12 | S(document).ready(action)
13 |
14 |
15 |
--------------------------------------------------------------------------------
/jquery/insert_text2.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Insert Text
9 |
10 |
11 | DOM examples
12 | Testing DOM
13 |
14 |
15 |
16 |
17 |
--------------------------------------------------------------------------------
/jquery/insert_text2.py:
--------------------------------------------------------------------------------
1 | #!/usr/bin/env python
2 | # -*- coding: utf-8 -*-
3 |
4 | __pragma__ ('alias', 'S', '$')
5 |
6 | def insert():
7 | text = 'Hello, DOM!'
8 | S("#output").text(text)
--------------------------------------------------------------------------------
/jquery/install_hide.py:
--------------------------------------------------------------------------------
1 | #!/usr/bin/env python
2 | # -*- coding: utf-8 -*-
3 |
4 | __pragma__ ('alias', 'S', '$')
5 |
6 | def install_hide():
7 | S("p").click(lambda: S(this).hide())
8 |
9 | S(document).ready(install_hide)
10 |
11 |
12 |
--------------------------------------------------------------------------------
/location/01_location_frame.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Changing the location of the doc
8 |
9 |
10 | Iframe Contents
11 | Go Try to insert urls in the text entry field like:
16 |
17 |
18 |
--------------------------------------------------------------------------------
/location/desc.txt:
--------------------------------------------------------------------------------
1 | Examples for location function
2 |
--------------------------------------------------------------------------------
/login/__javascript__/login.mod.js:
--------------------------------------------------------------------------------
1 | (function () {
2 | var __name__ = '__main__';
3 | var check = function () {
4 | var username = document.log.uname.value;
5 | var password = document.log.psw.value;
6 | if (username == 'admin' && password == 'test') {
7 | alert ('User and Password is correct');
8 | }
9 | else {
10 | alert ('User and Password is wrong');
11 | }
12 | };
13 | __pragma__ ('')
14 | __all__.__name__ = __name__;
15 | __all__.check = check;
16 | __pragma__ (' ')
17 | }) ();
18 |
--------------------------------------------------------------------------------
/login/__javascript__/login2.mod.js:
--------------------------------------------------------------------------------
1 | (function () {
2 | var __name__ = '__main__';
3 | var validateForm = function () {
4 | var un = document.loginform.usr.value;
5 | var pw = document.loginform.pword.value;
6 | var username = 'admin';
7 | var password = 'test';
8 | if (un == username && pw == password) {
9 | return true;
10 | }
11 | else {
12 | alert ('Login was unsuccessful, please check your username and password');
13 | return false;
14 | }
15 | };
16 | __pragma__ ('')
17 | __all__.__name__ = __name__;
18 | __all__.validateForm = validateForm;
19 | __pragma__ (' ')
20 | }) ();
21 |
--------------------------------------------------------------------------------
/login/img_avatar2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/bunkahle/Transcrypt-Examples/17d6460f3b532bb8258170a31875e4e26a977839/login/img_avatar2.png
--------------------------------------------------------------------------------
/login/login.py:
--------------------------------------------------------------------------------
1 | def check():
2 | username = document.log.uname.value
3 | password = document.log.psw.value
4 | if username == "admin" and password == "test":
5 | alert("User and Password is correct")
6 | else:
7 | alert("User and Password is wrong")
8 |
9 |
--------------------------------------------------------------------------------
/login/login2.py:
--------------------------------------------------------------------------------
1 | def validateForm():
2 | un = document.loginform.usr.value
3 | pw = document.loginform.pword.value
4 | username = "admin"
5 | password = "test"
6 | if un == username and pw == password:
7 | return True
8 | else:
9 | alert("Login was unsuccessful, please check your username and password")
10 | return False
11 |
--------------------------------------------------------------------------------
/login/main.html:
--------------------------------------------------------------------------------
1 |
2 |
3 | Login was sucessful!
4 |
5 |
--------------------------------------------------------------------------------
/navigator/01_navigator_properties.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Navigator infos and location
8 |
9 |
10 |
11 | Get Navigator infos
12 | Get Location info
13 |
15 |
17 |
18 |
19 |
--------------------------------------------------------------------------------
/navigator/desc.txt:
--------------------------------------------------------------------------------
1 | navigator properties with Transcrypt
2 |
--------------------------------------------------------------------------------
/screen/01_screen_prop.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Titel
8 |
9 |
10 | Screen properties!
11 |
12 | This example demonstrates the screen properties !
13 |
14 | Please click the button to start!
15 |
16 | Try it
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
--------------------------------------------------------------------------------
/screen/__javascript__/screen_prop.mod.js:
--------------------------------------------------------------------------------
1 | (function () {
2 | var info = function () {
3 | var x = ('Available Height: ' + screen.availHeight) + 'px')
12 | __all__.info = info;
13 | __pragma__ (' ')
14 | }) ();
15 |
--------------------------------------------------------------------------------
/screen/screen_prop.py:
--------------------------------------------------------------------------------
1 | #!/usr/bin/env python
2 | # -*- coding: utf-8 -*-
3 |
4 | def info():
5 | x = "Available Height: " + screen.availHeight + "pxTitel
8 |
9 |
10 |
11 | Click
15 | Wrong"
16 | Right"
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
--------------------------------------------------------------------------------
/sounds/02_play_sounds_external.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Play external audio
8 |
9 |
10 | Transcrypt playing:....
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
--------------------------------------------------------------------------------
/sounds/Klick.wav:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/bunkahle/Transcrypt-Examples/17d6460f3b532bb8258170a31875e4e26a977839/sounds/Klick.wav
--------------------------------------------------------------------------------
/sounds/Right.wav:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/bunkahle/Transcrypt-Examples/17d6460f3b532bb8258170a31875e4e26a977839/sounds/Right.wav
--------------------------------------------------------------------------------
/sounds/Wrong.wav:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/bunkahle/Transcrypt-Examples/17d6460f3b532bb8258170a31875e4e26a977839/sounds/Wrong.wav
--------------------------------------------------------------------------------
/sounds/__javascript__/play_sounds.mod.js:
--------------------------------------------------------------------------------
1 | (function () {
2 | var __name__ = '__main__';
3 | var play = function (id) {
4 | document.getElementById ('audio_' + id).play ();
5 | };
6 | __pragma__ ('')
7 | __all__.__name__ = __name__;
8 | __all__.play = play;
9 | __pragma__ (' ')
10 | }) ();
11 |
--------------------------------------------------------------------------------
/sounds/__javascript__/play_sounds_external.mod.js:
--------------------------------------------------------------------------------
1 | (function () {
2 | var __name__ = '__main__';
3 | var play = function (id) {
4 | document.getElementById ('playing').innerText = 'playing:' + id;
5 | document.getElementById ('audio_file').play ();
6 | };
7 | __pragma__ ('')
8 | __all__.__name__ = __name__;
9 | __all__.play = play;
10 | __pragma__ (' ')
11 | }) ();
12 |
--------------------------------------------------------------------------------
/sounds/desc.txt:
--------------------------------------------------------------------------------
1 | Test sound playing with Transcrypt
2 |
--------------------------------------------------------------------------------
/sounds/play_sounds.py:
--------------------------------------------------------------------------------
1 | #!/usr/bin/env python
2 | # -*- coding: utf-8 -*-
3 |
4 |
5 | def play(id):
6 | document.getElementById('audio_'+id).play()
--------------------------------------------------------------------------------
/sounds/play_sounds_external.py:
--------------------------------------------------------------------------------
1 | #!/usr/bin/env python
2 | # -*- coding: utf-8 -*-
3 |
4 |
5 | def play(id):
6 | document.getElementById("playing").innerText="playing:"+id
7 | document.getElementById("audio_file").play()
--------------------------------------------------------------------------------
/svg/__javascript__/svg_04.mod.js:
--------------------------------------------------------------------------------
1 | (function () {
2 | var SVG = __class__ ('SVG', [object], {
3 | get __init__ () {return __get__ (this, function (self) {
4 | self.svg = document.createElementNS ('http://www.w3.org/2000/svg', 'svg');
5 | self.svgNS = self.svg.namespaceURI;
6 | self.line = document.createElementNS (self.svgNS, 'line');
7 | self.svg.setAttribute ('height', 210);
8 | self.svg.setAttribute ('width', 500);
9 | self.line.setAttribute ('x1', 0);
10 | self.line.setAttribute ('y1', 0);
11 | self.line.setAttribute ('x2', 200);
12 | self.line.setAttribute ('y2', 50);
13 | self.line.setAttribute ('style', 'stroke:rgb(255,0,0);stroke-width:2');
14 | self.svg.appendChild (self.line);
15 | document.body.appendChild (self.svg);
16 | });}
17 | });
18 | var graphic = SVG ();
19 | __pragma__ ('')
20 | __all__.SVG = SVG;
21 | __all__.graphic = graphic;
22 | __pragma__ (' ')
23 | }) ();
24 |
--------------------------------------------------------------------------------
/svg/__javascript__/svg_05.mod.js:
--------------------------------------------------------------------------------
1 | (function () {
2 | var SVG = __class__ ('SVG', [object], {
3 | get __init__ () {return __get__ (this, function (self) {
4 | self.svg = document.createElementNS ('http://www.w3.org/2000/svg', 'svg');
5 | self.svgNS = self.svg.namespaceURI;
6 | self.polygon = document.createElementNS (self.svgNS, 'polygon');
7 | self.svg.setAttribute ('height', 280);
8 | self.svg.setAttribute ('width', 500);
9 | self.polygon.setAttribute ('points', '220,10 300,210 170,250 123,234');
10 | self.polygon.setAttribute ('style', 'fill:lime;stroke:purple;stroke-width:3');
11 | self.svg.appendChild (self.polygon);
12 | document.body.appendChild (self.svg);
13 | });}
14 | });
15 | var graphic = SVG ();
16 | __pragma__ ('')
17 | __all__.SVG = SVG;
18 | __all__.graphic = graphic;
19 | __pragma__ (' ')
20 | }) ();
21 |
--------------------------------------------------------------------------------
/svg/__javascript__/svg_06.mod.js:
--------------------------------------------------------------------------------
1 | (function () {
2 | var SVG = __class__ ('SVG', [object], {
3 | get __init__ () {return __get__ (this, function (self) {
4 | self.svg = document.createElementNS ('http://www.w3.org/2000/svg', 'svg');
5 | self.svgNS = self.svg.namespaceURI;
6 | self.polyline = document.createElementNS (self.svgNS, 'polyline');
7 | self.svg.setAttribute ('height', 200);
8 | self.svg.setAttribute ('width', 500);
9 | self.polyline.setAttribute ('points', '20, 20 40,25 60,40 80,120 120,140 200,180');
10 | self.polyline.setAttribute ('style', 'fill:none;stroke:black;stroke-width:3');
11 | self.svg.appendChild (self.polyline);
12 | document.body.appendChild (self.svg);
13 | });}
14 | });
15 | var graphic = SVG ();
16 | __pragma__ ('')
17 | __all__.SVG = SVG;
18 | __all__.graphic = graphic;
19 | __pragma__ (' ')
20 | }) ();
21 |
--------------------------------------------------------------------------------
/svg/__javascript__/svg_07.mod.js:
--------------------------------------------------------------------------------
1 | (function () {
2 | var SVG = __class__ ('SVG', [object], {
3 | get __init__ () {return __get__ (this, function (self) {
4 | self.svg = document.createElementNS ('http://www.w3.org/2000/svg', 'svg');
5 | self.svgNS = self.svg.namespaceURI;
6 | self.path = document.createElementNS (self.svgNS, 'path');
7 | self.svg.setAttribute ('height', 210);
8 | self.svg.setAttribute ('width', 400);
9 | self.path.setAttribute ('d', 'M150 0 L75 200 L225 200 Z');
10 | self.svg.appendChild (self.path);
11 | document.body.appendChild (self.svg);
12 | });}
13 | });
14 | var graphic = SVG ();
15 | __pragma__ ('')
16 | __all__.SVG = SVG;
17 | __all__.graphic = graphic;
18 | __pragma__ (' ')
19 | }) ();
20 |
--------------------------------------------------------------------------------
/svg/__javascript__/svg_15.mod.js:
--------------------------------------------------------------------------------
1 | (function () {
2 | var svg_def = '\n ';
3 | var SVG = __class__ ('SVG', [object], {
4 | get __init__ () {return __get__ (this, function (self) {
5 | document.getElementById ('canvas').innerHTML = svg_def;
6 | });}
7 | });
8 | var graphic = SVG ();
9 | __pragma__ ('')
10 | __all__.SVG = SVG;
11 | __all__.graphic = graphic;
12 | __all__.svg_def = svg_def;
13 | __pragma__ (' ')
14 | }) ();
15 |
--------------------------------------------------------------------------------
/svg/svg_01.html:
--------------------------------------------------------------------------------
1 |
2 |
3 | SVG
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
--------------------------------------------------------------------------------
/svg/svg_02.html:
--------------------------------------------------------------------------------
1 |
2 |
3 | SVG
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
--------------------------------------------------------------------------------
/svg/svg_03.html:
--------------------------------------------------------------------------------
1 |
2 |
3 | SVG
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
--------------------------------------------------------------------------------
/svg/svg_03.py:
--------------------------------------------------------------------------------
1 | #!/usr/bin/env python
2 | # -*- coding: utf-8 -*-
3 |
4 | class SVG:
5 |
6 | def __init__(self):
7 | self.svg = document.createElementNS("http://www.w3.org/2000/svg", "svg")
8 | self.svgNS = self.svg.namespaceURI
9 | self.ellipse = document.createElementNS(self.svgNS,'ellipse')
10 | self.svg.setAttribute('height', 300)
11 | self.svg.setAttribute('width', 500)
12 | self.ellipse.setAttribute('cx', 200)
13 | self.ellipse.setAttribute('cy', 80)
14 | self.ellipse.setAttribute('rx', 100)
15 | self.ellipse.setAttribute('ry', 50)
16 | self.ellipse.setAttribute('fill', 'yellow')
17 | self.ellipse.setAttribute('stroke', 'purple')
18 | self.ellipse.setAttribute('stroke-width', 5)
19 | self.svg.appendChild(self.ellipse)
20 | document.body.appendChild(self.svg)
21 |
22 | graphic = SVG()
23 |
--------------------------------------------------------------------------------
/svg/svg_04.html:
--------------------------------------------------------------------------------
1 |
2 |
3 | SVG
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
--------------------------------------------------------------------------------
/svg/svg_04.py:
--------------------------------------------------------------------------------
1 | #!/usr/bin/env python
2 | # -*- coding: utf-8 -*-
3 |
4 | class SVG:
5 |
6 | def __init__(self):
7 | self.svg = document.createElementNS("http://www.w3.org/2000/svg", "svg")
8 | self.svgNS = self.svg.namespaceURI
9 | self.line = document.createElementNS(self.svgNS,'line')
10 | self.svg.setAttribute('height', 210)
11 | self.svg.setAttribute('width', 500)
12 | self.line.setAttribute('x1', 0)
13 | self.line.setAttribute('y1', 0)
14 | self.line.setAttribute('x2', 200)
15 | self.line.setAttribute('y2', 50)
16 | self.line.setAttribute('style', 'stroke:rgb(255,0,0);stroke-width:2')
17 | self.svg.appendChild(self.line)
18 | document.body.appendChild(self.svg)
19 |
20 | graphic = SVG()
21 |
--------------------------------------------------------------------------------
/svg/svg_05.html:
--------------------------------------------------------------------------------
1 |
2 |
3 | SVG
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
--------------------------------------------------------------------------------
/svg/svg_05.py:
--------------------------------------------------------------------------------
1 | #!/usr/bin/env python
2 | # -*- coding: utf-8 -*-
3 |
4 | class SVG:
5 |
6 | def __init__(self):
7 | self.svg = document.createElementNS("http://www.w3.org/2000/svg", "svg")
8 | self.svgNS = self.svg.namespaceURI
9 | self.polygon = document.createElementNS(self.svgNS,'polygon')
10 | self.svg.setAttribute('height', 280)
11 | self.svg.setAttribute('width', 500)
12 | self.polygon.setAttribute('points', "220,10 300,210 170,250 123,234")
13 | self.polygon.setAttribute('style', 'fill:lime;stroke:purple;stroke-width:3')
14 | self.svg.appendChild(self.polygon)
15 | document.body.appendChild(self.svg)
16 |
17 | graphic = SVG()
18 |
--------------------------------------------------------------------------------
/svg/svg_06.html:
--------------------------------------------------------------------------------
1 |
2 |
3 | SVG
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
--------------------------------------------------------------------------------
/svg/svg_06.py:
--------------------------------------------------------------------------------
1 | #!/usr/bin/env python
2 | # -*- coding: utf-8 -*-
3 |
4 | class SVG:
5 |
6 | def __init__(self):
7 | self.svg = document.createElementNS("http://www.w3.org/2000/svg", "svg")
8 | self.svgNS = self.svg.namespaceURI
9 | self.polyline = document.createElementNS(self.svgNS,'polyline')
10 | self.svg.setAttribute('height', 200)
11 | self.svg.setAttribute('width', 500)
12 | self.polyline.setAttribute('points', "20, 20 40,25 60,40 80,120 120,140 200,180")
13 | self.polyline.setAttribute('style', "fill:none;stroke:black;stroke-width:3")
14 | self.svg.appendChild(self.polyline)
15 | document.body.appendChild(self.svg)
16 |
17 | graphic = SVG()
18 |
--------------------------------------------------------------------------------
/svg/svg_07.html:
--------------------------------------------------------------------------------
1 |
2 |
3 | SVG
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
--------------------------------------------------------------------------------
/svg/svg_07.py:
--------------------------------------------------------------------------------
1 | #!/usr/bin/env python
2 | # -*- coding: utf-8 -*-
3 |
4 | class SVG:
5 |
6 | def __init__(self):
7 | self.svg = document.createElementNS("http://www.w3.org/2000/svg", "svg")
8 | self.svgNS = self.svg.namespaceURI
9 | self.path = document.createElementNS(self.svgNS,'path')
10 | self.svg.setAttribute('height', 210)
11 | self.svg.setAttribute('width', 400)
12 | self.path.setAttribute('d', "M150 0 L75 200 L225 200 Z")
13 | self.svg.appendChild(self.path)
14 | document.body.appendChild(self.svg)
15 |
16 | graphic = SVG()
17 |
--------------------------------------------------------------------------------
/svg/svg_08.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | SVG
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
--------------------------------------------------------------------------------
/svg/svg_08.py:
--------------------------------------------------------------------------------
1 | #!/usr/bin/env python
2 | # -*- coding: utf-8 -*-
3 |
4 | class SVG:
5 |
6 | def __init__(self):
7 | self.svg = document.createElementNS("http://www.w3.org/2000/svg", "svg")
8 | self.svgNS = self.svg.namespaceURI
9 | self.text = document.createElementNS(self.svgNS,'text')
10 | self.svg.setAttribute('height', 100)
11 | self.svg.setAttribute('width', 200)
12 | self.text.setAttribute('x', 20)
13 | self.text.setAttribute('y', 35)
14 | self.text.setAttribute('fill', 'red')
15 | self.text.setAttribute('transform', 'rotate(30 20,40)')
16 | self.text.setAttribute('font-family', "Verdana")
17 | self.text.setAttribute('font-size', 20)
18 | self.text.textContent = 'I love SVG'
19 | self.svg.appendChild(self.text)
20 | document.body.appendChild(self.svg)
21 |
22 | graphic = SVG()
23 |
--------------------------------------------------------------------------------
/svg/svg_09.html:
--------------------------------------------------------------------------------
1 |
2 |
3 | SVG
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
--------------------------------------------------------------------------------
/svg/svg_10.html:
--------------------------------------------------------------------------------
1 |
2 |
3 | SVG
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
--------------------------------------------------------------------------------
/svg/svg_11.html:
--------------------------------------------------------------------------------
1 |
2 |
3 | SVG
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
--------------------------------------------------------------------------------
/svg/svg_12.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | SVG
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
--------------------------------------------------------------------------------
/svg/svg_13.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | SVG
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
--------------------------------------------------------------------------------
/svg/svg_14.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | SVG
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
--------------------------------------------------------------------------------
/svg/svg_15.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | SVG
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
--------------------------------------------------------------------------------
/svg/svg_15.py:
--------------------------------------------------------------------------------
1 | #!/usr/bin/env python
2 | # -*- coding: utf-8 -*-
3 |
4 | svg_def = """
5 | """
10 |
11 | class SVG:
12 | def __init__(self):
13 | document.getElementById("canvas").innerHTML = svg_def
14 |
15 | graphic = SVG()
--------------------------------------------------------------------------------
/svg/svg_examples/Andy_Warhol.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/bunkahle/Transcrypt-Examples/17d6460f3b532bb8258170a31875e4e26a977839/svg/svg_examples/Andy_Warhol.jpg
--------------------------------------------------------------------------------
/svg/svg_examples/Market.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/bunkahle/Transcrypt-Examples/17d6460f3b532bb8258170a31875e4e26a977839/svg/svg_examples/Market.jpg
--------------------------------------------------------------------------------
/svg/svg_examples/Mars.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/bunkahle/Transcrypt-Examples/17d6460f3b532bb8258170a31875e4e26a977839/svg/svg_examples/Mars.png
--------------------------------------------------------------------------------
/svg/svg_examples/Venus.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/bunkahle/Transcrypt-Examples/17d6460f3b532bb8258170a31875e4e26a977839/svg/svg_examples/Venus.png
--------------------------------------------------------------------------------
/svg/svg_examples/animation.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
14 |
--------------------------------------------------------------------------------
/svg/svg_examples/animation2.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
13 |
--------------------------------------------------------------------------------
/svg/svg_examples/clip_path.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
6 |
7 |
--------------------------------------------------------------------------------
/svg/svg_examples/filter1.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
6 |
7 |
8 |
--------------------------------------------------------------------------------
/svg/svg_examples/filter2.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
10 |
11 |
12 |
--------------------------------------------------------------------------------
/svg/svg_examples/filter3.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
9 |
10 |
11 |
12 |
--------------------------------------------------------------------------------
/svg/svg_examples/filter5.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
10 |
11 |
12 |
--------------------------------------------------------------------------------
/svg/svg_examples/filter7.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
9 |
10 |
11 | SVG Filters
12 |
--------------------------------------------------------------------------------
/svg/svg_examples/filter8.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
9 |
12 |
13 |
14 |
15 | SVG Filters
16 |
17 |
--------------------------------------------------------------------------------
/svg/svg_examples/filter9.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
6 |
7 | SVG Filters
8 | SVG Filters
9 |
10 |
--------------------------------------------------------------------------------
/svg/svg_examples/hello_world.svg:
--------------------------------------------------------------------------------
1 |
2 | Hello world with Several lines:
3 | First line.
4 | Second line.
5 |
6 |
--------------------------------------------------------------------------------
/svg/svg_examples/hello_world2.svg:
--------------------------------------------------------------------------------
1 |
2 | Hello World!
4 |
--------------------------------------------------------------------------------
/svg/svg_examples/images.svg:
--------------------------------------------------------------------------------
1 |
2 |
5 |
--------------------------------------------------------------------------------
/svg/svg_examples/images2.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
7 |
11 |
12 |
13 |
--------------------------------------------------------------------------------
/svg/svg_examples/linerargradient.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
7 |
8 |
--------------------------------------------------------------------------------
/svg/svg_examples/lines.svg:
--------------------------------------------------------------------------------
1 |
2 |
--------------------------------------------------------------------------------
/svg/svg_examples/lines2.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 | stroke-linecap="butt" (default)
5 | stroke-linecap="round"
7 | stroke-linecap="square"
9 |
--------------------------------------------------------------------------------
/svg/svg_examples/maske.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
6 |
--------------------------------------------------------------------------------
/svg/svg_examples/maske1.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
5 |
6 | Mask
8 | Mask
10 |
11 |
--------------------------------------------------------------------------------
/svg/svg_examples/maske2.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
9 |
--------------------------------------------------------------------------------
/svg/svg_examples/maske3.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
6 |
7 |
10 |
--------------------------------------------------------------------------------
/svg/svg_examples/radialgradient.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
7 |
8 |
10 |
11 |
--------------------------------------------------------------------------------
/svg/svg_examples/schalter.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 | Deutsch
4 | UK English
5 | Français
6 | Русский
7 | English
8 |
9 |
--------------------------------------------------------------------------------
/svg/svg_examples/ship.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/bunkahle/Transcrypt-Examples/17d6460f3b532bb8258170a31875e4e26a977839/svg/svg_examples/ship.jpg
--------------------------------------------------------------------------------
/svg/svg_examples/viewbox.svg:
--------------------------------------------------------------------------------
1 |
2 |
--------------------------------------------------------------------------------
/svg/svg_examples/zodiac.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/bunkahle/Transcrypt-Examples/17d6460f3b532bb8258170a31875e4e26a977839/svg/svg_examples/zodiac.jpg
--------------------------------------------------------------------------------
/tetris/README.md:
--------------------------------------------------------------------------------
1 | Python game programming compiled to Javascript
2 |
3 | This directory contains a project of the game tetris programmed originally in pure Python. I tried to convert it to
4 | Javascript via transcrypt but it turned out to be not so trivial as I thought before.
5 |
6 | Reason for this is a different programming logic in Javascript. It is also harder to debug than programming it directly in Python.
7 | So I had to go through some efforts to get at least a part of the original Python program to work. Finally I managed to port it to DOM but it took hard efforts to achieve this.
8 |
9 | Also if it comes to game programming it is good to know about callbacks, setTimeout and other stuff to get the game engine working.
10 |
11 | A kind of introduction can be found on this at
12 | https://github.com/bunkahle/Transcrypt-Examples/blob/master/games/games.rst
13 |
14 | Andreas Bunkahle (andreas.bunkahle@debitel.net)
15 |
--------------------------------------------------------------------------------
/turtle/desc.txt:
--------------------------------------------------------------------------------
1 | Examples for the turtle module in transcrypt
2 |
--------------------------------------------------------------------------------
/turtle/turtle_tree.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | Turtle Tree
8 |
9 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
--------------------------------------------------------------------------------
/user-interface/Javascript_Python.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/bunkahle/Transcrypt-Examples/17d6460f3b532bb8258170a31875e4e26a977839/user-interface/Javascript_Python.png
--------------------------------------------------------------------------------
/user-interface/Pixabay.mp4:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/bunkahle/Transcrypt-Examples/17d6460f3b532bb8258170a31875e4e26a977839/user-interface/Pixabay.mp4
--------------------------------------------------------------------------------
/user-interface/__javascript__/button_change.mod.js:
--------------------------------------------------------------------------------
1 | (function () {
2 | var __name__ = '__main__';
3 | var toggle = function (evt) {
4 | var button1 = document.getElementById ('button1');
5 | var button_class = document.getElementsByClassName ('button');
6 | if (button1.innerText == 'Click Me' || button1.innerText == 'Deactivated') {
7 | button1.innerText = 'Activated';
8 | button_class [0].style.backgroundColor = '#ff0000';
9 | }
10 | else {
11 | button1.innerText = 'Deactivated';
12 | button_class [0].style.backgroundColor = '#4CAF50';
13 | }
14 | };
15 | __pragma__ ('')
16 | __all__.__name__ = __name__;
17 | __all__.toggle = toggle;
18 | __pragma__ (' ')
19 | }) ();
20 |
--------------------------------------------------------------------------------
/user-interface/__javascript__/dropdown.mod.js:
--------------------------------------------------------------------------------
1 | (function () {
2 | var __name__ = '__main__';
3 | var links = function (event) {
4 | if (event.target.id == 1) {
5 | alert ('You clicked 1');
6 | }
7 | else if (event.target.id == 2) {
8 | alert ('You clicked 2');
9 | }
10 | else if (event.target.id == 3) {
11 | alert ('You clicked 3');
12 | }
13 | document.getElementById ('link_clicked').innerHTML = document.getElementById (event.target.id).innerHTML;
14 | };
15 | __pragma__ ('')
16 | __all__.__name__ = __name__;
17 | __all__.links = links;
18 | __pragma__ (' ')
19 | }) ();
20 |
--------------------------------------------------------------------------------
/user-interface/__javascript__/menu.mod.js:
--------------------------------------------------------------------------------
1 | (function () {
2 | var __name__ = '__main__';
3 | var getclick = function (event) {
4 | document.getElementById ('info').innerHTML = 'Locally clicked: ' + event.target.id;
5 | };
6 | __pragma__ ('')
7 | __all__.__name__ = __name__;
8 | __all__.getclick = getclick;
9 | __pragma__ (' ')
10 | }) ();
11 |
--------------------------------------------------------------------------------
/user-interface/__javascript__/menu2.mod.js:
--------------------------------------------------------------------------------
1 | (function () {
2 | var __name__ = '__main__';
3 | var getclick = function (event) {
4 | var targetid = event.target.id;
5 | var target = event.target;
6 | print ('clicked:', targetid, target);
7 | document.getElementById ('info').innerHTML = (('Locally clicked: id=' + targetid) + ' target=') + target;
8 | $ ('#test_c').slideUp ('slow');
9 | $ ('#test_b').slideUp ('slow');
10 | $ ('#test_a').slideUp ('slow');
11 | };
12 | __pragma__ ('')
13 | __all__.__name__ = __name__;
14 | __all__.getclick = getclick;
15 | __pragma__ (' ')
16 | }) ();
17 |
--------------------------------------------------------------------------------
/user-interface/__javascript__/tabs.mod.js:
--------------------------------------------------------------------------------
1 | (function () {
2 | var __name__ = '__main__';
3 | var openLang = function (evt, langName) {
4 | var tabcontent = document.getElementsByClassName ('tabcontent');
5 | for (var i = 0; i < tabcontent.length; i++) {
6 | tabcontent [i].style.display = 'none';
7 | }
8 | var tablinks = document.getElementsByClassName ('tablinks');
9 | for (var i = 0; i < tablinks.length; i++) {
10 | tablinks [i].className = tablinks [i].className.py_replace (' active', '');
11 | }
12 | document.getElementById (langName).style.display = 'block';
13 | evt.currentTarget.className += ' active';
14 | };
15 | __pragma__ ('')
16 | __all__.__name__ = __name__;
17 | __all__.openLang = openLang;
18 | __pragma__ (' ')
19 | }) ();
20 |
--------------------------------------------------------------------------------
/user-interface/__javascript__/video_background.mod.js:
--------------------------------------------------------------------------------
1 | (function () {
2 | var __name__ = '__main__';
3 | var pause = function () {
4 | var video = document.getElementById ('myVideo');
5 | var btn = document.getElementById ('myBtn');
6 | if (video.paused) {
7 | video.play ();
8 | btn.innerHTML = 'Pause';
9 | }
10 | else {
11 | video.pause ();
12 | btn.innerHTML = 'Play';
13 | }
14 | };
15 | __pragma__ ('')
16 | __all__.__name__ = __name__;
17 | __all__.pause = pause;
18 | __pragma__ (' ')
19 | }) ();
20 |
--------------------------------------------------------------------------------
/user-interface/button_change.py:
--------------------------------------------------------------------------------
1 | #!/usr/bin/env python
2 | # -*- coding: utf-8 -*-
3 |
4 | def toggle(evt):
5 | button1 = document.getElementById("button1")
6 | button_class = document.getElementsByClassName("button")
7 | if button1.innerText == "Click Me" or button1.innerText == "Deactivated":
8 | button1.innerText = "Activated"
9 | button_class[0].style.backgroundColor="#ff0000"
10 | else:
11 | button1.innerText = "Deactivated"
12 | button_class[0].style.backgroundColor="#4CAF50"
--------------------------------------------------------------------------------
/user-interface/classes.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/bunkahle/Transcrypt-Examples/17d6460f3b532bb8258170a31875e4e26a977839/user-interface/classes.png
--------------------------------------------------------------------------------
/user-interface/computer-desktop.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/bunkahle/Transcrypt-Examples/17d6460f3b532bb8258170a31875e4e26a977839/user-interface/computer-desktop.jpg
--------------------------------------------------------------------------------
/user-interface/dropdown.py:
--------------------------------------------------------------------------------
1 | #!/usr/bin/env python
2 | # -*- coding: utf-8 -*-
3 |
4 | def links(event):
5 | if event.target.id == 1:
6 | alert("You clicked 1")
7 | elif event.target.id == 2:
8 | alert("You clicked 2")
9 | elif event.target.id == 3:
10 | alert("You clicked 3")
11 | document.getElementById("link_clicked").innerHTML = document.getElementById(event.target.id).innerHTML
--------------------------------------------------------------------------------
/user-interface/gfk.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/bunkahle/Transcrypt-Examples/17d6460f3b532bb8258170a31875e4e26a977839/user-interface/gfk.png
--------------------------------------------------------------------------------
/user-interface/menu.py:
--------------------------------------------------------------------------------
1 | #!/usr/bin/env python
2 | # -*- coding: utf-8 -*-
3 |
4 | def getclick(event):
5 | document.getElementById("info").innerHTML = "Locally clicked: "+event.target.id
6 |
--------------------------------------------------------------------------------
/user-interface/menu2.py:
--------------------------------------------------------------------------------
1 | #!/usr/bin/env python
2 | # -*- coding: utf-8 -*-
3 |
4 | __pragma__ ('alias', 'S', '$')
5 |
6 | def getclick(event):
7 | targetid = event.target.id
8 | target = event.target
9 | print ("clicked:", targetid, target)
10 | document.getElementById("info").innerHTML = "Locally clicked: id="+targetid+" target="+target
11 | S("#test_c").slideUp("slow")
12 | S("#test_b").slideUp("slow")
13 | S("#test_a").slideUp("slow")
14 |
--------------------------------------------------------------------------------
/user-interface/modal_image.py:
--------------------------------------------------------------------------------
1 | def modal_action():
2 | modal.style.display = "block"
3 | modalImg.src = img.src
4 | captionText.innerHTML = img.alt
5 |
6 | def modal_close():
7 | modal.style.display = "none"
8 |
9 | # Get the modal
10 | modal = document.getElementById('myModal')
11 |
12 | # Get the image and insert it inside the modal - use its "alt" text as a caption
13 | img = document.getElementById('myImg')
14 | modalImg = document.getElementById("img01")
15 | captionText = document.getElementById("caption")
16 | img.onclick = modal_action
17 |
18 | # Get the element that closes the modal
19 | span = document.getElementsByClassName("close")[0]
20 |
21 | # When the user clicks on (x), close the modal
22 | span.onclick = modal_close
--------------------------------------------------------------------------------
/user-interface/mouseposition.py:
--------------------------------------------------------------------------------
1 | def mouse_position(event):
2 | posX = event.clientX
3 | posY = event.clientY
4 | document.Form1.posx.value = posX
5 | document.Form1.posy.value = posY
6 |
--------------------------------------------------------------------------------
/user-interface/programming-languages.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/bunkahle/Transcrypt-Examples/17d6460f3b532bb8258170a31875e4e26a977839/user-interface/programming-languages.jpg
--------------------------------------------------------------------------------
/user-interface/progress_bar.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Start Progress
35 |
36 |
37 |
38 |
39 |
--------------------------------------------------------------------------------
/user-interface/tabs.py:
--------------------------------------------------------------------------------
1 | #!/usr/bin/env python
2 | # -*- coding: utf-8 -*-
3 |
4 | def openLang(evt, langName):
5 | # i, tabcontent, tablinks
6 | tabcontent = document.getElementsByClassName("tabcontent")
7 | for i in range(tabcontent.length):
8 | tabcontent[i].style.display = "none"
9 | tablinks = document.getElementsByClassName("tablinks")
10 | for i in range(tablinks.length):
11 | tablinks[i].className = tablinks[i].className.replace(" active", "")
12 | document.getElementById(langName).style.display = "block"
13 | evt.currentTarget.className += " active"
--------------------------------------------------------------------------------
/user-interface/video_background.py:
--------------------------------------------------------------------------------
1 | def pause():
2 | video = document.getElementById("myVideo")
3 | btn = document.getElementById("myBtn")
4 | if video.paused:
5 | video.play()
6 | btn.innerHTML = "Pause"
7 | else:
8 | video.pause()
9 | btn.innerHTML = "Play"
10 |
--------------------------------------------------------------------------------
/window/01_window_open_close.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Open and Close a window
8 |
9 |
10 |
11 | Open "myWindow"
12 | Close "myWindow"
13 | Has "myWindow" been closed?
15 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
--------------------------------------------------------------------------------
/window/02_window_height.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Sizes of Window
8 |
9 |
10 | Click me DOM examples
12 | Testing DOM
13 |
14 |
16 |
17 | Test String:
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
--------------------------------------------------------------------------------
/window/03_get_url_parameters.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Get url parameters in the url line
8 |
9 |
10 | Get url parameters from the url line.
11 | Try to insert something like ?os=Win&lang=Python&framework=transcrypt behind the html extension in the url line. Then press enter.
12 | Parameter:
13 |
14 |
--------------------------------------------------------------------------------
/window/03a_get_url_parameters.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Get url parameters in the url line
8 |
9 |
10 | Get url parameters from the url line.
11 | Insert parameters like os=Win&lang=Python&framework=transcrypt and then press Enter or Insert
12 | Insert
14 | Input:
15 | Parameter:
16 |
17 |
18 |
--------------------------------------------------------------------------------
/window/04_window_back_forward.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Window back and forward
8 |
9 |
10 | Window back and forward
11 |
12 | Go one page back
13 | Go one page forward
14 | Go two pages back
15 | Go two pages forward
16 | Changing the location of the doc
8 |
9 |
10 | Iframe Contents
11 | Go Try to insert urls in the text entry field like:
18 |
19 |
20 |
--------------------------------------------------------------------------------
/window/__javascript__/get_url_parameters.mod.js:
--------------------------------------------------------------------------------
1 | (function () {
2 | var __name__ = '__main__';
3 | var getParams = function () {
4 | var e = window.location.search.__getslice__ (1, null, 1).py_split ('&');
5 | for (var i = 0; i < len (e); i++) {
6 | console.log ((e [i].py_split ('=') [0] + ' => ') + e [i].py_split ('=') [1]);
7 | }
8 | console.log (window.location.hash.__getslice__ (1, null, 1));
9 | document.getElementById ('params').innerHTML = e;
10 | };
11 | __pragma__ ('')
12 | __all__.__name__ = __name__;
13 | __all__.getParams = getParams;
14 | __pragma__ (' ')
15 | }) ();
16 |
--------------------------------------------------------------------------------
/window/__javascript__/window_height.mod.js:
--------------------------------------------------------------------------------
1 | (function () {
2 | var __name__ = '__main__';
3 | var show_height = function () {
4 | alert ('Window height is: ' + window.innerHeight);
5 | };
6 | var say_hi = function () {
7 | alert ('hi');
8 | };
9 | __pragma__ ('')
10 | __all__.__name__ = __name__;
11 | __all__.say_hi = say_hi;
12 | __all__.show_height = show_height;
13 | __pragma__ (' ')
14 | }) ();
15 |
--------------------------------------------------------------------------------
/window/desc.txt:
--------------------------------------------------------------------------------
1 | window functionality with Transcrypt
2 |
--------------------------------------------------------------------------------
/window/get_url_parameters.py:
--------------------------------------------------------------------------------
1 | #!/usr/bin/env python
2 | # -*- coding: utf-8 -*-
3 |
4 | def getParams():
5 | e = window.location.search[1:].split("&")
6 | for i in range(len(e)):
7 | console.log(e[i].split('=')[0] + " => " + e[i].split('=')[1])
8 | console.log(window.location.hash[1:])
9 | document.getElementById("params").innerHTML = e
10 |
11 |
12 |
--------------------------------------------------------------------------------
/window/window_height.py:
--------------------------------------------------------------------------------
1 | #!/usr/bin/env python
2 | # -*- coding: utf-8 -*-
3 |
4 |
5 | def show_height():
6 | alert("Window height is: "+str(window.innerHeight)+" and Window width is: "+str(window.innerWidth))
7 |
8 | def say_hi():
9 | alert("hi")
10 |
--------------------------------------------------------------------------------
/window/window_open_close.py:
--------------------------------------------------------------------------------
1 | #!/usr/bin/env python
2 | # -*- coding: utf-8 -*-
3 |
4 | class TestSystem:
5 |
6 | def __init__(self):
7 | self.myWindow = False
8 |
9 | def openWin(self):
10 | self.myWindow = window.open("", "myWindow", "width=400, height=200")
11 |
12 | def closeWin(self):
13 | if (self.myWindow):
14 | self.myWindow.close();
15 |
16 | def checkWin(self):
17 | if (not self.myWindow):
18 | document.getElementById("msg").innerHTML = "'myWindow' has never been opened!"
19 | else:
20 | if (self.myWindow.closed):
21 | document.getElementById("msg").innerHTML = "'myWindow' has been closed!"
22 | else:
23 | document.getElementById("msg").innerHTML = "'myWindow' has not been closed!"
24 |
25 | testSystem = TestSystem()
--------------------------------------------------------------------------------
';
13 | }
14 | else {
15 | butt.innerHTML = '