PROGRAM JAVASCRIPT ON IPAD
Tap the button "Shuffle" to listen to music continuosly (song after song)
LET'S PROGRAM JAVASCRIPT ON IPAD
Dear visitors!The year 2022 is coming to an end, we are looking forward to the year-end holidays. Hopefully after hours of fun with loved ones, going out, shopping... you still have quiet and private moments with your hobby.
Compact size is the advantage of tablets, ipads compared to laptops. But to program the web on the ipad, you have to use apps and these apps don't have as many functions as the software on the laptop.
So the number of web developers on the ipad is not much. There is little sharing of experience on specialized programming on ipads online. That is the difficulty we will face.
However, programming on the ipad has the advantage that the generated web pages look great on the ipad. On PC, laptop can also see, but the text is larger than usual. It can also be viewed on mobile phones if the viewer does not set the font too large.
In short, you don't have to study too much and still create a website that can be viewed when the screen is small.
First of all you need to update your iPad to the version 13 or 14 of iOS (I use 5th generation iPad with 14.7.1 iOS).
I assume you already know how to select a section or all of the text, to copy, paste, you can take screen shot and save the image to Photos app.
3 ways to work with html, css and javascript file
1- Use only Documents app
Some people are afraid to learn more because it takes time, they don't want to install an app to create html files. This is the worst way you should not follow.
Now, when users see an html file online, they download it to the Download folder and then tap "Share", "Copy to Documents". In the Documents folder they can run html.
But they will be in big trouble when they want to edit the content of the html file. They must rename from filename.html to filename.txt. Open the txt file to edit the content. To see the results of the modification, they must rename again the file from .txt to .html.
In the Documents app you can only create new txt files. So if you want to create an html file, do the following
Tap “Documents” then the “Files” folder is opened. Tap the circle button with the plus sign, select “Text file”. Type
<html>
<h2>Hello</h2>
</html>
Tap the "<" button to see the list of files. Among them you can find txt file you just created, it's named year-month-day-hour-minute-second.txt. Let's rename that to test-hello.html. Then tap on this html file name to view this file.
2- Install the Koder code editor app (using App store to search for it)
You can use Koder not for programming but just to create a new html (or javascript) file. Copy the code from the net, paste it into a new file. That's it. You don't need to save the file, Koder will do this.
In addition to the Koder app, you should install also Webplayground app for the following 2 reasons.
a-It is a better substitute for Documents app to do the job of selecting files, copying or moving files.
b- When Koder is broken and you must reinstall it, without Webplayground you will lose all files created in Koder. Once you have a Webplayground, you can use it to open the broken Koder, copy the files from Koder, and put it into the Webplayground (or some other html editor). Then delete Koder and reinstall it.
3-Install Koder app and use it to create files and learn web program
Using Koder editor you not only can can create and edit txt files but you can work with all files of text type, for example html, css, javascript (.js), json, subtitle files (srt, vtt), …Koder and Webplayground both have Syntax highlighting feature. But in Koder the highlighting is better. That's why I use Koder a lot. However, with Koder ipad is often frozen or crashes when you open large files (> 100 Kb). So let use Webplayground instead of Koder whenever the file size is big.
Recently I have publisded a serie of three posts "Make subtitle file by yourself"
FILE a1-capture-sub.html
FILE a2-make-vtt-file.html
FILE a3-play-sub.html
At this time all of them are under contruction. I will improve the coding and presentation more.
Working with ipad
On ipad you should use the app “Notes”. When you want to save some text, images or links from a web on internet just select them, tap Copy, open Notes and paste the contain there. What you see now in this page of Notes is look like a new web page: links are of yellow color. Tap on a link the linked web page will be opened. If you somtimes want to save Notes page as PDF file then you need to set font size of your ipad to small size. To save as PDF you take screen shot of the Notes page, then choose “Full page”. Save this new to Adobe Acrobat app.
We know that chinese (zh) is one of the most used and important languages. Others are english (en), spanish (es), french(fr), german (de), russian (ru), japanese (ja), hindi, arabic …
Do you know what is Lian huan hua? To get info about it you can use Google search. Lian huan hua is the phonetic transcription for chinese words
连环画
Lian Huan Hua 连环画 means picture storybook, literally means "linked serial pictures." They are pocket sized picture-story books first published by a Shanghai publisher in the 1920s. Lian huan hua is also commonly known as Xiao ren shu (小人书), children's book for their simplicity and heraldic subjects. They combined pictures with text. Unlike the western comic books, the text is usually placed either at the bottom or on the right side of the picture, rather than issuing from the characters' mouth in balloons.
Nowadays it’s dificult to find paper Lian huan hua even in China. Luckily there are some youtubers who have turned story books into video clips.
You can find the chinese story books by opening Safari browser, open youtube.com. In the youtube page you need to search in Chinese. This is difficult, so you can copy one of the lines below to find it at first (You should copy those lines and paste to a page in your Notes app)
三国演义连环画 (The Novel Of The Three Kingdoms (Sānguó Yǎnyì))
西汉演义连环画 (Journey To The West)
水浒传连环画 (Water Margin)
Here is an example of the search results
Tap the playlist that includes 64 clips. Tap clip 43. The name of the clip is 刘备征吴 (Liu Bei attack Wu).
Its link is:
https://www.youtube.com/watch?v=6jdNQ8R-P6E&list=PLiVZnzywidXobNwkRooFYbQTHz4gg0QL_&index=44
When watching this clip, you will see the Chinese words appear in turn under the image. They are similar to movie subtitles
But you don't understand anything because you don't know a single Chinese character at all, or only know a few words (like me). The task is to translate those subtitles into another language for viewers to understand. For example translated into English.
Each story book can consist of about 100 pages. Text on a page can be broken into two parts. So you have to do 200 actions of capture subtitle, 200 actions of crop captured image, 200 actions of scan to convert image to text. 200 actions of Chinese-English translation. Each action consists of from several to dozen acts of tap or drag.
You can't do all that manually because it's a very tedious and time consuming job.
For example, let see only one action of capture subtitle: when you see a subtitle just appear, you have to tap to pause the video, you must read the time point xx.yy seconds to record (eg 9.56 ), have to tap 4 times to make sreen shot, have to use index finger to drag image borders 4 times to crop image then 2 more taps to save to Photos app. But if you use javascript, you will have a button called "Capture sub" and tap it just one time plus 2 taps for saving image to Photos.
It should be noted that when you create a subtitle file manually, you just need to embed the youtube video in an iframe (Practically You won't have enough time and patience to manually complete the subtitles for a clip). If you use javascript you must use the html5 video tag and so you must use y2mate.com to download the required video to your ipad. After completing the subtitle file (.vtt), if you don't want to waste ROM memory, you can delete the downloaded video.
When playing videos with VTT subtitles, just use the video embedded in the iframe only.
We can also reduce more the number of actions. Instead of cropping and scanning any entire screen shot, each time when the "Capture sub" button is taped, we use the drawImage function to create a small canvas just enough to contain the timeline and subtitle lines. The ipad screen can hold up to 14 lines of subtitles. Then we will scan and translate 14 lines at a time. The number of actions will be reduced from 400 to 28 actions (Math.round(200/14) = 14).
But a lot of ipad users don't have a mouse, so how to determine the coordinates of the vertices of the rectangular frame surrounding the subtitle? The solution is implement draggable and resizable rectangular frame for user to control. For more details please see the post “FILE a1-capture-sub.html”.
