Home Notices Documents Classes Download Others Rice
Documents  >  tutorial  >  Basic usage  >  Execution
Execution of JavaScript code

Purpose of this page

In the previous page, we succeeded to display the target web page. In this page, we will learn how to execute JavaScript code on the web page.

jsexecutor class

The browser class that came out in the previous page was a class that grouped the functions to operate the browser component of CookerGX.

CookerGX is an application for operating web pages, and the operation is performed using JavaScript. Therefore, CookerGX has a class that groups JavaScript related functions. That is the jsexecutor class.


Followings are examples of the functions of the jsexecutor class.

We can call a JavaScript function in a web page and receive the return value from the JavaScript function.

We can embed new JavaScript functions in a web page.

We can execute arbitrary JavaScript code directly.





In the following chapters, we execute the loaded JavaScript code directly.

JavaScript sample code

First of all, we need to prepare JavaScript code to be executed by the sample script. In the sample archive, the file sample_001.js for that is prepared.

sample_001.js is shown below.

1:

(function(){

2:

let q_elements = document.getElementsByName("q"); // Get all tags whose name attribute is q as an array.

3:

let q_element = q_elements[0]; // The desired input tag is the only element of the array. Takes out it.

4:

q_element.value = ""; // Removes the value of the input tag.

5:

let inpVal = window.prompt("Please enter a search word.", "");

6:

// Do nothing if empty or canceled.

7:

if(inpVal == "null"){

8:

return;

9:

}

10:

q_element.value = inpVal; // Sets the value of input tag.

11:

alert("Start search.");

12:

let btnk_elements = document.getElementsByName("btnK");// Get all tags whose name attribute is btnK as an array.

13:

let btnk_element = btnk_elements[0]; // The desired input tag is the only element of the array. Takes out it.

14:

btnk_element.click(); // Click.

15:

return;

16:

}());

Notice that the JavaScript code is written as an IIFE (Immediately Invoked Function Expression).

Execution

sample_004.cgx is shown below. This is a script to enter the search word in the input field of Google search page.

1:

class main

2:

// getter

3:

closed getter directory _baseDir

4:

// Returns the directory where this script - sample_004.cgx - is located.

5:

rice riceEnv;

6:

file source = new file(riceEnv.SourceFileName);

7:

return source.Directory;

8:

endgetter

9:
10:

// method

11:

open method void start()

12:

// Loads JavaScript code from sample_001.js .

13:

reader red = new reader(this._baseDir.FullName + "\sample_001.js");

14:

string jsCode = red.ReadToEnd();

15:

red.Release();

16:
17:

// Executes the JavaScript code.

18:

jsexecutor jse; // Declaration statement. Creates variable - jse - of jsexeutor class.

19:

jse.Execute(jsCode); // Calling the Execute method.

20:

endmethod

21:
22:

open method void end()

23:

endmethod

24:

endclass

The third to eighth lines are the definition of the constituent element - member - of the class named getter. For more information about getter, please refer to the manual.


The point is the thirteenth to fifteenth lines. The JavaScript code to be executed on the Google search page is loaded from a file into a variable of string class.

The variable of reader class that provides access to text files has been used. For more information about the reader class, please refer to the manual.

Please look at the fourteenth line.


string jsCode = red.ReadToEnd();


Statement of this form is called definition statement. The first is the same word sequence as the declaration statement, but after the equal sign differs.





As shown in the figure, it is the definition statement that determines the variable declaration and initial value in one statement. The part after this equal sign is called the expression.

This expression is similar to the call statement. Both is calling a member - method - with the dot operator.

One is a sentence, the other is an expression. The difference between the two is whether to use the return value of the method.

As mentioned earlier, methods can return values.





A script component is an expression If the return value is used. Otherwise, it is a statement.

At the fourteenth line, the string returned by red.ReadToEnd () is assigned to the variable jsCode. That is, the call of this ReadToEnd () method is an expression because the return value has been used.

On the other hand, if red.ReadToEnd () is used as a statement, the return value is discarded and not used.



jsexecutor.Execute

The eighteenth to nineteenth lines are the part actually executing the JavaScript code.


The variable jse of the jsexecutor class is declared in the eighteenth line.

The nineteenth line is the part executing the JavaScript. The Execute() method is called for executing JavaScript. A JavaScript code that is executed is passed as an argument.


In this example, the return value from the Execute() method is not used, but it can also be used. In that case, you need to implement JavaScript that returns a value.

For more information about the jsexecutor class and Execute() method, please refer to the manual.


JavaScript executed by the Execute () method should be in the form of IIFE like the sample_001.js.

The reason is shown below.

A return statement is required to return a value from JavaScript, but a return statement that is put outside of the function definition occurs an error.

Variables not included in the function definition may become global variables. Namespace pollution with unnecessary global variables is very dangerous. IIFE reduces the risk of pollution.

Next
Previous
Copyright © CookerGX All rights reserved.