Startseite Beiträge veröffentlicht von admin (Seite 68)

[JavaScript] Übersicht HTML DOM Objekte

console

document

location

navigator

screen

window

[JavaScript] DOM-Elemente lesen 

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>DOM Read</title>
</head>
<body>
  <div id="bodytext">Hallo Welt!</div>
</body>
</html>

// Zugriff über ID, einzelnes Element
let h = document.getElementById("bodytext");
console.log(h.innerHTML);

// Zugriff über CSS-Ausdruck, erstes Element
let h = document.querySelector("#bodytext");
console.log(h.innerHTML);

// Zugriff über Tag, Liste
let arr = document.getElementsByTagName("div");
for (let e in arr)
{
  console.log(arr[e].innerHTML);
}

// Zugriff über CSS-Ausdruck, Liste
let arr = document.querySelectorAll("div");
for (let e in arr)
{
  console.log(arr[e].innerHTML);
}

[JavaScript] DOM-Elemente ändern 

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>DOM Change</title>
</head>
<body>
  <div id="bodytext">Hallo Welt!</div>
</body>
</html>

// Zugriff über ID, einzelnes Element
let h = document.getElementById("bodytext");
// Text setzen
h.innerHTML = "Testtext";
// Schrift setzen
h.setAttribute("style", "color:green; font-size:20px;");

[JavaScript] DOM-Elemente erzeugen 

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>DOM Create</title>
</head>
<body>
  <div id="bodytext">Hallo Welt!</div>
</body>
</html>

// Zugriff über ID, einzelnes Element
// div-Tag erstellen
let d = document.createElement("div");
d.style.color = "red";

// Text im div erzeugen
let t = document.createTextNode("Testtext2");

// Text an div anhängen
d.appendChild(t);

// Element an body anhängen
document.body.appendChild(d);

[JavaScript] DOM-Elemente löschen 

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>DOM Delete</title>
</head>
<body>
  <div id="bodytext">Hallo Welt!</div>
  <ul id="persons">
    <li id="p1">Udo</li>
    <li id="p2">Ede</li>
    <li id="p3">Heinz</li>
  </ul>
</body>
</html>

// ul ID="persons"
let persons = document.getElementById("persons");
// li ID="p2"
let p2 = document.getElementById("p2");
// Element entfernen
persons.removeChild(p2);

[JavaScript] Eventhandling

  • sich überlagernde Events werden vom innersten zum äußersten Element verarbeitet

Variante 1 (Funktionszuweisung im HTML)

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Buttonclick</title>
</head>
<body>
  <button onclick="btnClick();">Klick</button>
</body>
</html>

// Funktionsdefinition
function btnClick(){
  alert("Test");
}

Variante 2 (Registrierung des Listeners im JS)

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Buttonclick</title>
</head>
<body>
  <button id="btn1">Klick</button>
</body>
</html>

// Button mit ID="btn1" holen
let b = document.getElementById("btn1");

// Funktionsdefinition
let btnClick = function(){
  alert("Test");
}

// Funktionszuweisung
b.onClick = btnClick;
// Listener hinzufügen
b.addEventListener("click", btnClick);
// Listener wieder entfernen
b.removeEventListener("click", btnClick);

[JavaScript] Prototyping 

function Person(name) {
  this.Vorname = name;
}

// p1 -> Attribut "Alter" für nur dieses Objekt
let p1 = new Person("Ede");
p1.Alter = 60;
console.log(p1.Vorname + " " + p1.Alter);

// p2 -> hat keinen Attribut "Alter"
let p2 = new Person("Horst");
console.log(p2.Vorname + " " + p2.Alter);

// neue Eigenschaft im Prototyp ("Basisklasse") für alle Personen hinzufügen
Person.prototype.Alter = 70;

// p2 hat nun auch ein Attribut "Alter"
console.log(p2.Vorname + " " + p2.Alter);

[ABAP] MIME-Repository: Verzeichnis lesen 

DATA: it_file_list TYPE string_table.

* MIME-API holen
DATA(o_mime_rep) = cl_mime_repository_api=>get_api( ).

TRY.
* Bild aus dem MIME-Repository laden
    o_mime_rep->file_list( EXPORTING
                             i_url             = '/SAP/BC/BSP'
                             i_recursive_call  = abap_true
*                             i_check_authority = abap_false
                           IMPORTING
                             e_files           = it_file_list ).

    cl_demo_output=>display( it_file_list ).
  CATCH cx_root INTO DATA(e).
    WRITE : / e->get_text( ).
ENDTRY.

[ABAP] MIME-Repository: Objekt-ID, Pfad, Attribute, Berechtigungen 

DATA: lv_io    TYPE skwf_io.
DATA: lv_error TYPE skwf_error.

* Repository-Objekt (MIME) über Pfad suchen
CALL FUNCTION 'SKWF_NMSPC_IO_FIND_BY_ADDRESS'
  EXPORTING
    url   = '/SAP/PUBLIC/xyz.jpg'
    appl  = wbmr_c_skwf_appl_name " 'MIME'
  IMPORTING
    io    = lv_io
    error = lv_error.

IF lv_error-type = 'E'.
ELSE.
  WRITE: / lv_io-objid, lv_io-objtype, lv_io-object, lv_io-class.

* Objekttyp
  CASE lv_io-objtype.
    WHEN skwfc_obtype_folder.
      WRITE: / 'Folder'.
    WHEN skwfc_obtype_any.
      WRITE: / 'Any'.
    WHEN skwfc_obtype_loio.
      WRITE: / 'Logical object'.
    WHEN skwfc_obtype_phio.
      WRITE: / 'Physical object'.
    WHEN skwfc_obtype_rela.
      WRITE: / 'Relation'.
  ENDCASE.

  TRY.
* Zugriff prüfen
      cl_mime_services=>mime_check_authority( i_operation = 'SHOW' " Aktion ('INSERT','MODIFY','SHOW','DELETE')
                                              i_object_io = lv_io ).

      DATA: lv_url TYPE skwf_url.
      DATA: lv_relative_url TYPE skwf_descr.

      DATA: lv_error2 TYPE skwf_error.

* Pfad zum Repository-Objekt (MIME) suchen
      CALL FUNCTION 'SKWF_NMSPC_IO_ADDRESS_GET'
        EXPORTING
          io           = lv_io
        IMPORTING
          url          = lv_url
          relative_url = lv_relative_url
          error        = lv_error2.

      IF lv_error2-type = 'E'.
      ELSE.
        WRITE: / lv_url.
        WRITE: / lv_relative_url.
      ENDIF.

    CATCH cx_root INTO DATA(e).
  ENDTRY.
ENDIF.

[ABAP] Content-Repositorys auslesen

Variante 1 (CREP)

SELECT c~crep_id,
       c~crep_type,
       c~crep_stype,
       c~crea_user,
       c~crea_time,
       c~chng_user,
       c~chng_time,
       t~descript,
       h~archivpath,
       r~r3db_tab
INTO TABLE @DATA(it_crep)
FROM crep AS c                                              " CREP: KPRO CMS: Content-Repositories"
INNER JOIN crepdescr AS t ON ( c~crep_id = t~crep_id )      " CREPDESCR: KPRO CMS: Beschreibungen der Content-Repositories"
LEFT OUTER JOIN crep_http AS h ON ( c~crep_id = h~crep_id ) " CREP_HTTP: KPRO CMS: Content-Repositories (HTTP)"
LEFT OUTER JOIN crep_r3db AS r ON ( c~crep_id = r~crep_id ) " CREP_R3DB: KPRO CMS: Content-Repositories (R3DB)"
WHERE t~langu = @sy-langu.

cl_demo_output=>display( it_crep ).

Variante 2 (SCMS_SDOKSTRE_LIST)

DATA: it_sdokstre TYPE STANDARD TABLE OF sdokstre WITH DEFAULT KEY.

CALL FUNCTION 'SCMS_SDOKSTRE_LIST'
  TABLES
    i_sdokstre = it_sdokstre
  EXCEPTIONS
    not_found  = 1
    OTHERS     = 2.

cl_demo_output=>display( it_sdokstre ).