Created
October 20, 2025 10:38
-
-
Save MuhammetOzturk/45f16d576a72dd1b10565b31ae6c690e to your computer and use it in GitHub Desktop.
Javascript-2.ipynb
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| { | |
| "nbformat": 4, | |
| "nbformat_minor": 0, | |
| "metadata": { | |
| "colab": { | |
| "provenance": [], | |
| "authorship_tag": "ABX9TyNp9B1vPV/yRr04b8al/z5y", | |
| "include_colab_link": true | |
| }, | |
| "kernelspec": { | |
| "name": "python3", | |
| "display_name": "Python 3" | |
| }, | |
| "language_info": { | |
| "name": "python" | |
| } | |
| }, | |
| "cells": [ | |
| { | |
| "cell_type": "markdown", | |
| "metadata": { | |
| "id": "view-in-github", | |
| "colab_type": "text" | |
| }, | |
| "source": [ | |
| "<a href=\"https://colab.research.google.com/gist/MuhammetOzturk/45f16d576a72dd1b10565b31ae6c690e/javascript-2.ipynb\" target=\"_parent\"><img src=\"https://colab.research.google.com/assets/colab-badge.svg\" alt=\"Open In Colab\"/></a>" | |
| ] | |
| }, | |
| { | |
| "cell_type": "markdown", | |
| "source": [ | |
| "## Neler Eklendi\n", | |
| "- JQuery ve Bootstrap eklendi.\n", | |
| "- JQuery ile olaylar yonetildi.\n", | |
| "- localStorage kullanim ornegi eklendi.\n", | |
| " - Dom'a ve localstorage'e veriler eklenip silinebiliyuor." | |
| ], | |
| "metadata": { | |
| "id": "yIj-h_BoQo9g" | |
| } | |
| }, | |
| { | |
| "cell_type": "code", | |
| "execution_count": 2, | |
| "metadata": { | |
| "id": "VSwxpf-xmfmw" | |
| }, | |
| "outputs": [], | |
| "source": [ | |
| "from IPython.display import Javascript\n", | |
| "from IPython.display import display, HTML" | |
| ] | |
| }, | |
| { | |
| "cell_type": "code", | |
| "source": [ | |
| "jscode = \"\"\"\n", | |
| "p=document.createElement(\"p\");\n", | |
| "p.innerHTML=\"Hello World\";\n", | |
| "document.body.appendChild(p);M\n", | |
| "\"\"\"\n", | |
| "print(\"Hello\")\n", | |
| "display(Javascript(jscode))\n", | |
| "print(\"World\")" | |
| ], | |
| "metadata": { | |
| "id": "B8cmPJmlms8X", | |
| "colab": { | |
| "base_uri": "https://localhost:8080/", | |
| "height": 81 | |
| }, | |
| "outputId": "e01359b9-8dc4-4227-e811-0368c1db35cb" | |
| }, | |
| "execution_count": 3, | |
| "outputs": [ | |
| { | |
| "output_type": "stream", | |
| "name": "stdout", | |
| "text": [ | |
| "Hello\n" | |
| ] | |
| }, | |
| { | |
| "output_type": "display_data", | |
| "data": { | |
| "text/plain": [ | |
| "<IPython.core.display.Javascript object>" | |
| ], | |
| "application/javascript": [ | |
| "\n", | |
| "p=document.createElement(\"p\");\n", | |
| "p.innerHTML=\"Hello World\";\n", | |
| "document.body.appendChild(p);M\n" | |
| ] | |
| }, | |
| "metadata": {} | |
| }, | |
| { | |
| "output_type": "stream", | |
| "name": "stdout", | |
| "text": [ | |
| "World\n" | |
| ] | |
| } | |
| ] | |
| }, | |
| { | |
| "cell_type": "code", | |
| "source": [ | |
| "jscode = \"\"\"\n", | |
| "input=document.createElement(\"input\");\n", | |
| "input.type=\"text\";\n", | |
| "input.placeHolder=\"Enter Text\";\n", | |
| "input.id=\"myText\";\n", | |
| "input.addEventListener(\"keydown\",function(event){\n", | |
| " if(event.key==\"Enter\"){\n", | |
| " p=document.createElement(\"p\");\n", | |
| " p.innerHTML=document.getElementById(\"myText\").value;\n", | |
| " document.body.appendChild(p);\n", | |
| " document.getElementById(\"myText\").value=\"\";\n", | |
| " }\n", | |
| "})\n", | |
| "document.body.appendChild(input);\n", | |
| "\n", | |
| "\"\"\"\n", | |
| "display(Javascript(jscode))" | |
| ], | |
| "metadata": { | |
| "id": "N4FDvwgQoS_H", | |
| "colab": { | |
| "base_uri": "https://localhost:8080/", | |
| "height": 36 | |
| }, | |
| "outputId": "fe057eeb-36ae-43a2-8ca8-8c8ca3d3254d" | |
| }, | |
| "execution_count": 4, | |
| "outputs": [ | |
| { | |
| "output_type": "display_data", | |
| "data": { | |
| "text/plain": [ | |
| "<IPython.core.display.Javascript object>" | |
| ], | |
| "application/javascript": [ | |
| "\n", | |
| "input=document.createElement(\"input\");\n", | |
| "input.type=\"text\";\n", | |
| "input.placeHolder=\"Enter Text\";\n", | |
| "input.id=\"myText\";\n", | |
| "input.addEventListener(\"keydown\",function(event){\n", | |
| " if(event.key==\"Enter\"){\n", | |
| " p=document.createElement(\"p\");\n", | |
| " p.innerHTML=document.getElementById(\"myText\").value;\n", | |
| " document.body.appendChild(p);\n", | |
| " document.getElementById(\"myText\").value=\"\";\n", | |
| " }\n", | |
| "})\n", | |
| "document.body.appendChild(input);\n", | |
| "\n" | |
| ] | |
| }, | |
| "metadata": {} | |
| } | |
| ] | |
| }, | |
| { | |
| "cell_type": "code", | |
| "source": [ | |
| "jscode = \"\"\"\n", | |
| "input=document.createElement(\"input\");\n", | |
| "input.type=\"text\";\n", | |
| "input.placeHolder=\"Enter Text\";\n", | |
| "input.id=\"myText\";\n", | |
| "input.addEventListener(\"keydown\",function(event){\n", | |
| " if(event.key==\"Enter\"){\n", | |
| " line = document.getElementById(\"line\");\n", | |
| " if(line){\n", | |
| " line.remove();\n", | |
| " }\n", | |
| " p=document.createElement(\"p\");\n", | |
| " p.id = \"line\";\n", | |
| " p.innerHTML=document.getElementById(\"myText\").value;\n", | |
| " document.body.appendChild(p);\n", | |
| " document.getElementById(\"myText\").value=\"\";\n", | |
| " }\n", | |
| "})\n", | |
| "document.body.appendChild(input);\n", | |
| "\n", | |
| "\"\"\"\n", | |
| "display(Javascript(jscode))" | |
| ], | |
| "metadata": { | |
| "id": "43nrg8wTpf9X", | |
| "colab": { | |
| "base_uri": "https://localhost:8080/", | |
| "height": 36 | |
| }, | |
| "outputId": "1e29b2d7-9d3e-472d-93c9-1d5939d6ff13" | |
| }, | |
| "execution_count": 5, | |
| "outputs": [ | |
| { | |
| "output_type": "display_data", | |
| "data": { | |
| "text/plain": [ | |
| "<IPython.core.display.Javascript object>" | |
| ], | |
| "application/javascript": [ | |
| "\n", | |
| "input=document.createElement(\"input\");\n", | |
| "input.type=\"text\";\n", | |
| "input.placeHolder=\"Enter Text\";\n", | |
| "input.id=\"myText\";\n", | |
| "input.addEventListener(\"keydown\",function(event){\n", | |
| " if(event.key==\"Enter\"){\n", | |
| " line = document.getElementById(\"line\");\n", | |
| " if(line){\n", | |
| " line.remove();\n", | |
| " }\n", | |
| " p=document.createElement(\"p\");\n", | |
| " p.id = \"line\";\n", | |
| " p.innerHTML=document.getElementById(\"myText\").value;\n", | |
| " document.body.appendChild(p);\n", | |
| " document.getElementById(\"myText\").value=\"\";\n", | |
| " }\n", | |
| "})\n", | |
| "document.body.appendChild(input);\n", | |
| "\n" | |
| ] | |
| }, | |
| "metadata": {} | |
| } | |
| ] | |
| }, | |
| { | |
| "cell_type": "code", | |
| "source": [ | |
| "#@title Hesap Makinesi\n", | |
| "\n", | |
| "jscode = \"\"\"\n", | |
| "// ilk sayi\n", | |
| "input = document.createElement(\"input\");\n", | |
| "input.type=\"text\";\n", | |
| "input.placeHolder=\"Enter Text\";\n", | |
| "input.id=\"sayi1\";\n", | |
| "input.style.width=\"50px\";\n", | |
| "input.style.height=\"30px\";\n", | |
| "input.style.textAlign=\"center\";\n", | |
| "input.style.margin=\"5px\";\n", | |
| "document.body.appendChild(input);\n", | |
| "\n", | |
| "// operator\n", | |
| "input = document.createElement(\"input\");\n", | |
| "input.type=\"text\";\n", | |
| "input.placeHolder=\"Islem\";\n", | |
| "input.id=\"islem\";\n", | |
| "input.style.width=\"50px\";\n", | |
| "input.style.height=\"30px\";\n", | |
| "input.style.textAlign=\"center\";\n", | |
| "input.style.margin=\"5px\";\n", | |
| "document.body.appendChild(input);\n", | |
| "\n", | |
| "//ikinci sayi\n", | |
| "input = document.createElement(\"input\");\n", | |
| "input.type=\"text\";\n", | |
| "input.placeHolder=\"Enter Text\";\n", | |
| "input.id=\"sayi2\";\n", | |
| "input.style.width=\"50px\";\n", | |
| "input.style.height=\"30px\";\n", | |
| "input.style.textAlign=\"center\";\n", | |
| "input.style.margin=\"5px\";\n", | |
| "document.body.appendChild(input);\n", | |
| "\n", | |
| "// span\n", | |
| "span = document.createElement(\"span\");\n", | |
| "span.innerHTML = \"=\";\n", | |
| "span.style.margin=\"5px\";\n", | |
| "document.body.appendChild(span);\n", | |
| "\n", | |
| "// sonuc\n", | |
| "span = document.createElement(\"span\");\n", | |
| "//span.id = \"sonuc\";\n", | |
| "span.innerHTML = \"\";\n", | |
| "span.style.margin=\"5px\";\n", | |
| "document.body.appendChild(span);\n", | |
| "\n", | |
| "let inputs = document.querySelectorAll(\"input\");\n", | |
| "inputs.forEach(input => {\n", | |
| " input.addEventListener(\"keydown\",function(event){\n", | |
| " if(event.key==\"Enter\"){\n", | |
| " let sayi1 = document.getElementById(\"sayi1\").value;\n", | |
| " let sayi2 = document.getElementById(\"sayi2\").value;\n", | |
| " let islem = document.getElementById(\"islem\").value;\n", | |
| " if(islem == \"+\"){\n", | |
| " span.innerHTML = parseInt(sayi1) + parseInt(sayi2);\n", | |
| " }\n", | |
| " if(islem == \"-\"){\n", | |
| " span.innerHTML = parseInt(sayi1) - parseInt(sayi2);\n", | |
| " }\n", | |
| " if(islem == \"*\"){\n", | |
| " span.innerHTML = parseInt(sayi1) * parseInt(sayi2);\n", | |
| " }\n", | |
| " if(islem == \"/\"){\n", | |
| " span.innerHTML = parseInt(sayi1) / parseInt(sayi2);\n", | |
| " }\n", | |
| "\n", | |
| " }\n", | |
| " })\n", | |
| "})\n", | |
| "\"\"\"\n", | |
| "\n", | |
| "display(Javascript(jscode))" | |
| ], | |
| "metadata": { | |
| "id": "kIqyX7dUn8BE", | |
| "colab": { | |
| "base_uri": "https://localhost:8080/", | |
| "height": 61 | |
| }, | |
| "outputId": "62e735bb-5877-4573-c047-23b2cd9e706a" | |
| }, | |
| "execution_count": 6, | |
| "outputs": [ | |
| { | |
| "output_type": "display_data", | |
| "data": { | |
| "text/plain": [ | |
| "<IPython.core.display.Javascript object>" | |
| ], | |
| "application/javascript": [ | |
| "\n", | |
| "// ilk sayi\n", | |
| "input = document.createElement(\"input\");\n", | |
| "input.type=\"text\";\n", | |
| "input.placeHolder=\"Enter Text\";\n", | |
| "input.id=\"sayi1\";\n", | |
| "input.style.width=\"50px\";\n", | |
| "input.style.height=\"30px\";\n", | |
| "input.style.textAlign=\"center\";\n", | |
| "input.style.margin=\"5px\";\n", | |
| "document.body.appendChild(input);\n", | |
| "\n", | |
| "// operator\n", | |
| "input = document.createElement(\"input\");\n", | |
| "input.type=\"text\";\n", | |
| "input.placeHolder=\"Islem\";\n", | |
| "input.id=\"islem\";\n", | |
| "input.style.width=\"50px\";\n", | |
| "input.style.height=\"30px\";\n", | |
| "input.style.textAlign=\"center\";\n", | |
| "input.style.margin=\"5px\";\n", | |
| "document.body.appendChild(input);\n", | |
| "\n", | |
| "//ikinci sayi\n", | |
| "input = document.createElement(\"input\");\n", | |
| "input.type=\"text\";\n", | |
| "input.placeHolder=\"Enter Text\";\n", | |
| "input.id=\"sayi2\";\n", | |
| "input.style.width=\"50px\";\n", | |
| "input.style.height=\"30px\";\n", | |
| "input.style.textAlign=\"center\";\n", | |
| "input.style.margin=\"5px\";\n", | |
| "document.body.appendChild(input);\n", | |
| "\n", | |
| "// span\n", | |
| "span = document.createElement(\"span\");\n", | |
| "span.innerHTML = \"=\";\n", | |
| "span.style.margin=\"5px\";\n", | |
| "document.body.appendChild(span);\n", | |
| "\n", | |
| "// sonuc\n", | |
| "span = document.createElement(\"span\");\n", | |
| "//span.id = \"sonuc\";\n", | |
| "span.innerHTML = \"\";\n", | |
| "span.style.margin=\"5px\";\n", | |
| "document.body.appendChild(span);\n", | |
| "\n", | |
| "let inputs = document.querySelectorAll(\"input\");\n", | |
| "inputs.forEach(input => {\n", | |
| " input.addEventListener(\"keydown\",function(event){\n", | |
| " if(event.key==\"Enter\"){\n", | |
| " let sayi1 = document.getElementById(\"sayi1\").value;\n", | |
| " let sayi2 = document.getElementById(\"sayi2\").value;\n", | |
| " let islem = document.getElementById(\"islem\").value;\n", | |
| " if(islem == \"+\"){\n", | |
| " span.innerHTML = parseInt(sayi1) + parseInt(sayi2);\n", | |
| " }\n", | |
| " if(islem == \"-\"){\n", | |
| " span.innerHTML = parseInt(sayi1) - parseInt(sayi2);\n", | |
| " }\n", | |
| " if(islem == \"*\"){\n", | |
| " span.innerHTML = parseInt(sayi1) * parseInt(sayi2);\n", | |
| " }\n", | |
| " if(islem == \"/\"){\n", | |
| " span.innerHTML = parseInt(sayi1) / parseInt(sayi2);\n", | |
| " }\n", | |
| "\n", | |
| " }\n", | |
| " })\n", | |
| "})\n" | |
| ] | |
| }, | |
| "metadata": {} | |
| } | |
| ] | |
| }, | |
| { | |
| "cell_type": "code", | |
| "source": [ | |
| "#@title JQuery Kullanimi\n", | |
| "jscode = \"\"\"\n", | |
| "sc = document.createElement(\"script\");\n", | |
| "sc.src = \"https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js\";\n", | |
| "document.head.appendChild(sc);\n", | |
| "\n", | |
| "btn = document.createElement(\"button\");\n", | |
| "btn.innerHTML = \"Click Me\";\n", | |
| "btn.id = \"myBtn\";\n", | |
| "btn.style.margin = \"10px\";\n", | |
| "document.body.appendChild(btn);\n", | |
| "\n", | |
| "btn2 = document.createElement(\"button\");\n", | |
| "btn2.innerHTML = \"Click Me 2\";\n", | |
| "btn2.id = \"myBtn2\";\n", | |
| "btn2.style.margin = \"10px\";\n", | |
| "document.body.appendChild(btn2);\n", | |
| "\n", | |
| "//betik yuklendikten sonra calistir\n", | |
| "sc.onload = function(){\n", | |
| " $(\"#myBtn\").click(function(){\n", | |
| " alert(\"JQuery Calisti.\");\n", | |
| " });\n", | |
| "\n", | |
| " $(\"#myBtn2\").click(function(){\n", | |
| " $(\"#myBtn2\").html(\"Tiklandi\");\n", | |
| " });\n", | |
| "}\n", | |
| "\"\"\"\n", | |
| "\n", | |
| "\n", | |
| "display(Javascript(jscode))" | |
| ], | |
| "metadata": { | |
| "id": "VNAesxXGQUtY", | |
| "colab": { | |
| "base_uri": "https://localhost:8080/", | |
| "height": 58 | |
| }, | |
| "outputId": "4790ed8c-fccc-4507-fc2d-51ac121781f3" | |
| }, | |
| "execution_count": 7, | |
| "outputs": [ | |
| { | |
| "output_type": "display_data", | |
| "data": { | |
| "text/plain": [ | |
| "<IPython.core.display.Javascript object>" | |
| ], | |
| "application/javascript": [ | |
| "\n", | |
| "sc = document.createElement(\"script\");\n", | |
| "sc.src = \"https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js\";\n", | |
| "document.head.appendChild(sc);\n", | |
| "\n", | |
| "btn = document.createElement(\"button\");\n", | |
| "btn.innerHTML = \"Click Me\";\n", | |
| "btn.id = \"myBtn\";\n", | |
| "btn.style.margin = \"10px\";\n", | |
| "document.body.appendChild(btn);\n", | |
| "\n", | |
| "btn2 = document.createElement(\"button\");\n", | |
| "btn2.innerHTML = \"Click Me 2\";\n", | |
| "btn2.id = \"myBtn2\";\n", | |
| "btn2.style.margin = \"10px\";\n", | |
| "document.body.appendChild(btn2);\n", | |
| "\n", | |
| "//betik yuklendikten sonra calistir\n", | |
| "sc.onload = function(){\n", | |
| " $(\"#myBtn\").click(function(){\n", | |
| " alert(\"JQuery Calisti.\");\n", | |
| " });\n", | |
| "\n", | |
| " $(\"#myBtn2\").click(function(){\n", | |
| " $(\"#myBtn2\").html(\"Tiklandi\");\n", | |
| " });\n", | |
| "}\n" | |
| ] | |
| }, | |
| "metadata": {} | |
| } | |
| ] | |
| }, | |
| { | |
| "cell_type": "code", | |
| "source": [ | |
| "#@title Bootstrap ve JQuery Ekle\n", | |
| "jscode = \"\"\"\n", | |
| "link = document.createElement(\"link\");\n", | |
| "link.rel = \"stylesheet\";\n", | |
| "link.href = \"https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css\";\n", | |
| "link.integrity = \"sha384-sRIl4kxILFvY47J16cr9ZwB07vP4J8+LH7qKQnuqkuIAvNWLzeN8tE5YBujZqJLB\"\n", | |
| "link.crossorigin = \"anonymous\";\n", | |
| "document.head.appendChild(link);\n", | |
| "\n", | |
| "//bootstrap javascript\n", | |
| "bs = document.createElement(\"script\");\n", | |
| "bs.src=\"https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js\" ;\n", | |
| "bs.integrity=\"sha384-FKyoEForCGlyvwx9Hj09JcYn3nv7wiPVlz7YYwJrWVcXK/BmnVDxM+D2scQbITxI\" ;\n", | |
| "bs.crossorigin=\"anonymous\";\n", | |
| "document.head.appendChild(bs);\n", | |
| "\n", | |
| "//jquery\n", | |
| "jq = document.createElement(\"script\");\n", | |
| "jq.src=\"https://code.jquery.com/jquery-3.7.1.min.js\"\n", | |
| "document.head.appendChild(jq)\n", | |
| "\n", | |
| "\n", | |
| "\n", | |
| "btn = document.createElement(\"button\");\n", | |
| "btn.innerHTML = \"Toggle Buton\";\n", | |
| "btn.id = \"myBtn\";\n", | |
| "btn.style.width = \"100px\";\n", | |
| "btn.style.margin = \"10px\";\n", | |
| "btn.className = \"btn btn-primary\";\n", | |
| "btn.style.width = \"100px\";\n", | |
| "document.body.appendChild(btn);\n", | |
| "\n", | |
| "let tiklandi = false;\n", | |
| "jq.onload = function(){\n", | |
| " $(\"#myBtn\").click(function(){\n", | |
| " //alert(\"OK\");\n", | |
| " if(tiklandi){\n", | |
| " $(\"#myBtn\").css(\"background-color\",\"white\");\n", | |
| " $(\"#myBtn\").html(\"Tikla\");\n", | |
| " tiklandi = false;\n", | |
| " }else{\n", | |
| " $(\"#myBtn\").css(\"background-color\",\"red\");\n", | |
| " $(\"#myBtn\").html(\"Tiklandi\");\n", | |
| " tiklandi = true;\n", | |
| " }\n", | |
| "\n", | |
| " });\n", | |
| "}\n", | |
| "\"\"\"\n", | |
| "\n", | |
| "# bootstrap calismadi ?\n", | |
| "\n", | |
| "display(Javascript(jscode))" | |
| ], | |
| "metadata": { | |
| "id": "NnRYLJhmaRIn", | |
| "colab": { | |
| "base_uri": "https://localhost:8080/", | |
| "height": 58 | |
| }, | |
| "outputId": "9c7a8080-f6b5-4136-84b1-cd232b2aed2b" | |
| }, | |
| "execution_count": 8, | |
| "outputs": [ | |
| { | |
| "output_type": "display_data", | |
| "data": { | |
| "text/plain": [ | |
| "<IPython.core.display.Javascript object>" | |
| ], | |
| "application/javascript": [ | |
| "\n", | |
| "link = document.createElement(\"link\");\n", | |
| "link.rel = \"stylesheet\";\n", | |
| "link.href = \"https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css\";\n", | |
| "link.integrity = \"sha384-sRIl4kxILFvY47J16cr9ZwB07vP4J8+LH7qKQnuqkuIAvNWLzeN8tE5YBujZqJLB\"\n", | |
| "link.crossorigin = \"anonymous\";\n", | |
| "document.head.appendChild(link);\n", | |
| "\n", | |
| "//bootstrap javascript\n", | |
| "bs = document.createElement(\"script\");\n", | |
| "bs.src=\"https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js\" ;\n", | |
| "bs.integrity=\"sha384-FKyoEForCGlyvwx9Hj09JcYn3nv7wiPVlz7YYwJrWVcXK/BmnVDxM+D2scQbITxI\" ;\n", | |
| "bs.crossorigin=\"anonymous\";\n", | |
| "document.head.appendChild(bs);\n", | |
| "\n", | |
| "//jquery\n", | |
| "jq = document.createElement(\"script\");\n", | |
| "jq.src=\"https://code.jquery.com/jquery-3.7.1.min.js\"\n", | |
| "document.head.appendChild(jq)\n", | |
| "\n", | |
| "\n", | |
| "\n", | |
| "btn = document.createElement(\"button\");\n", | |
| "btn.innerHTML = \"Toggle Buton\";\n", | |
| "btn.id = \"myBtn\";\n", | |
| "btn.style.width = \"100px\";\n", | |
| "btn.style.margin = \"10px\";\n", | |
| "btn.className = \"btn btn-primary\";\n", | |
| "btn.style.width = \"100px\";\n", | |
| "document.body.appendChild(btn);\n", | |
| "\n", | |
| "let tiklandi = false;\n", | |
| "jq.onload = function(){\n", | |
| " $(\"#myBtn\").click(function(){\n", | |
| " //alert(\"OK\");\n", | |
| " if(tiklandi){\n", | |
| " $(\"#myBtn\").css(\"background-color\",\"white\");\n", | |
| " $(\"#myBtn\").html(\"Tikla\");\n", | |
| " tiklandi = false;\n", | |
| " }else{\n", | |
| " $(\"#myBtn\").css(\"background-color\",\"red\");\n", | |
| " $(\"#myBtn\").html(\"Tiklandi\");\n", | |
| " tiklandi = true;\n", | |
| " }\n", | |
| "\n", | |
| " });\n", | |
| "}\n" | |
| ] | |
| }, | |
| "metadata": {} | |
| } | |
| ] | |
| }, | |
| { | |
| "cell_type": "markdown", | |
| "source": [ | |
| "## Neden Duzgun Goruntulenmedi ?\n", | |
| "**Scriptlerin yuklenmesi tamamlanmadan render islemi basladigi icin gorunum degismedi yani bootstrap duzgun yuklenmedi bu yuzden scriptler yuklendikten sonra islemleri tamamlamaliyim.**" | |
| ], | |
| "metadata": { | |
| "id": "VlxDxijb1WtU" | |
| } | |
| }, | |
| { | |
| "cell_type": "code", | |
| "source": [ | |
| "#@title Tekrar\n", | |
| "\n", | |
| "jscode = \"\"\"\n", | |
| "//bu fonksiyonla scriptleri veya yukleyecegiz\n", | |
| "function loadScript(url){\n", | |
| " return new Promise((resolve,reject)=>{\n", | |
| " let script = document.createElement(\"script\");\n", | |
| " script.src = url;\n", | |
| " script.onload = resolve(\"Script yuklendi.\");\n", | |
| " script.onerror = reject(\"Hata ile karsilasildi!\");\n", | |
| " document.head.appendChild(script);\n", | |
| " })\n", | |
| "}\n", | |
| "\n", | |
| "//bu fonksiyonla bootstrap styleleri yukleyecegiz\n", | |
| "function loadStyle(url){\n", | |
| " return new Promise((resolve,reject)=>{\n", | |
| " let link = document.createElement(\"link\");\n", | |
| " link.rel = \"stylesheet\";\n", | |
| " link.href = url;\n", | |
| " link.onload = resolve(\"Style yuklendi.\");\n", | |
| " link.onerror = reject(\"Hata ile karsilasildi!\");\n", | |
| " document.head.appendChild(link);\n", | |
| " });\n", | |
| "}\n", | |
| "\n", | |
| "bootstrap = \"https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css\";\n", | |
| "bootstrapJs = \"https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js\";\n", | |
| "\n", | |
| "jquery = \"https://code.jquery.com/jquery-3.7.1.min.js\";\n", | |
| "\n", | |
| "\n", | |
| "\n", | |
| "//Promise.all ile tum scriptleri yuklenmesini bekle ve then ile calistir\n", | |
| "Promise.all([\n", | |
| " loadStyle(bootstrap),\n", | |
| " loadScript(bootstrapJs),\n", | |
| " loadScript(jquery)\n", | |
| "]).then(function(){\n", | |
| " btn = document.createElement(\"button\");\n", | |
| " btn.innerHTML = \"Toggle Buton\";\n", | |
| " btn.id = \"myBtn\";\n", | |
| " btn.style.width = \"100px\";\n", | |
| " btn.style.margin = \"10px\";\n", | |
| " btn.className = \"btn btn-primary\";\n", | |
| " btn.style.width = \"100px\";\n", | |
| " document.body.appendChild(btn);\n", | |
| " let tiklandi = false;\n", | |
| " btn.addEventListener(\"click\",function(){\n", | |
| " if(tiklandi){\n", | |
| " $(\"#myBtn\").removeClass(\"btn-primary\").addClass(\"btn-danger\");\n", | |
| " $(\"#myBtn\").html(\"Tikla\");\n", | |
| " tiklandi = false;\n", | |
| " }else{\n", | |
| " $(\"#myBtn\").removeClass(\"btn-danger\").addClass(\"btn-primary\");\n", | |
| " $(\"#myBtn\").html(\"Tiklandi\");\n", | |
| " tiklandi = true;\n", | |
| " }\n", | |
| " });\n", | |
| "}).catch(function(err){\n", | |
| " console.log(err);\n", | |
| "})\n", | |
| "\n", | |
| "\"\"\"\n", | |
| "\n", | |
| "display(Javascript(jscode))" | |
| ], | |
| "metadata": { | |
| "id": "FUIRv6bIHiSd", | |
| "colab": { | |
| "base_uri": "https://localhost:8080/", | |
| "height": 99 | |
| }, | |
| "outputId": "80d798cc-45f3-4e7e-b5a3-0ac97495ffe6" | |
| }, | |
| "execution_count": 9, | |
| "outputs": [ | |
| { | |
| "output_type": "display_data", | |
| "data": { | |
| "text/plain": [ | |
| "<IPython.core.display.Javascript object>" | |
| ], | |
| "application/javascript": [ | |
| "\n", | |
| "//bu fonksiyonla scriptleri veya yukleyecegiz\n", | |
| "function loadScript(url){\n", | |
| " return new Promise((resolve,reject)=>{\n", | |
| " let script = document.createElement(\"script\");\n", | |
| " script.src = url;\n", | |
| " script.onload = resolve(\"Script yuklendi.\");\n", | |
| " script.onerror = reject(\"Hata ile karsilasildi!\");\n", | |
| " document.head.appendChild(script);\n", | |
| " })\n", | |
| "}\n", | |
| "\n", | |
| "//bu fonksiyonla bootstrap styleleri yukleyecegiz\n", | |
| "function loadStyle(url){\n", | |
| " return new Promise((resolve,reject)=>{\n", | |
| " let link = document.createElement(\"link\");\n", | |
| " link.rel = \"stylesheet\";\n", | |
| " link.href = url;\n", | |
| " link.onload = resolve(\"Style yuklendi.\");\n", | |
| " link.onerror = reject(\"Hata ile karsilasildi!\");\n", | |
| " document.head.appendChild(link);\n", | |
| " });\n", | |
| "}\n", | |
| "\n", | |
| "bootstrap = \"https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css\";\n", | |
| "bootstrapJs = \"https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js\";\n", | |
| "\n", | |
| "jquery = \"https://code.jquery.com/jquery-3.7.1.min.js\";\n", | |
| "\n", | |
| "\n", | |
| "\n", | |
| "//Promise.all ile tum scriptleri yuklenmesini bekle ve then ile calistir\n", | |
| "Promise.all([\n", | |
| " loadStyle(bootstrap),\n", | |
| " loadScript(bootstrapJs),\n", | |
| " loadScript(jquery)\n", | |
| "]).then(function(){\n", | |
| " btn = document.createElement(\"button\");\n", | |
| " btn.innerHTML = \"Toggle Buton\";\n", | |
| " btn.id = \"myBtn\";\n", | |
| " btn.style.width = \"100px\";\n", | |
| " btn.style.margin = \"10px\";\n", | |
| " btn.className = \"btn btn-primary\";\n", | |
| " btn.style.width = \"100px\";\n", | |
| " document.body.appendChild(btn);\n", | |
| " let tiklandi = false;\n", | |
| " btn.addEventListener(\"click\",function(){\n", | |
| " if(tiklandi){\n", | |
| " $(\"#myBtn\").removeClass(\"btn-primary\").addClass(\"btn-danger\");\n", | |
| " $(\"#myBtn\").html(\"Tikla\");\n", | |
| " tiklandi = false;\n", | |
| " }else{\n", | |
| " $(\"#myBtn\").removeClass(\"btn-danger\").addClass(\"btn-primary\");\n", | |
| " $(\"#myBtn\").html(\"Tiklandi\");\n", | |
| " tiklandi = true;\n", | |
| " }\n", | |
| " });\n", | |
| "}).catch(function(err){\n", | |
| " console.log(err);\n", | |
| "})\n", | |
| "\n" | |
| ] | |
| }, | |
| "metadata": {} | |
| } | |
| ] | |
| }, | |
| { | |
| "cell_type": "code", | |
| "source": [ | |
| "def initiliaze_environment():\n", | |
| " jscode = \"\"\"\n", | |
| " //bu fonksiyonla scriptleri veya yukleyecegiz\n", | |
| " function loadScript(url){\n", | |
| " return new Promise((resolve,reject)=>{\n", | |
| " let script = document.createElement(\"script\");\n", | |
| " script.src = url;\n", | |
| " script.onload = resolve(\"Script yuklendi.\");\n", | |
| " script.onerror = reject(\"Hata ile karsilasildi!\");\n", | |
| " document.head.appendChild(script);\n", | |
| " })\n", | |
| " }\n", | |
| "\n", | |
| " //bu fonksiyonla bootstrap styleleri yukleyecegiz\n", | |
| " function loadStyle(url){\n", | |
| " return new Promise((resolve,reject)=>{\n", | |
| " let link = document.createElement(\"link\");\n", | |
| " link.rel = \"stylesheet\";\n", | |
| " link.href = url;\n", | |
| " link.onload = resolve(\"Style yuklendi.\");\n", | |
| " link.onerror = reject(\"Hata ile karsilasildi!\");\n", | |
| " document.head.appendChild(link);\n", | |
| " });\n", | |
| " }\n", | |
| "\n", | |
| " bootstrap = \"https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css\";\n", | |
| " bootstrapJs = \"https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js\";\n", | |
| "\n", | |
| " jquery = \"https://code.jquery.com/jquery-3.7.1.min.js\";\n", | |
| "\n", | |
| "\n", | |
| "\n", | |
| " //Promise.all ile tum scriptleri yuklenmesini bekle ve then ile calistir\n", | |
| " Promise.all([\n", | |
| " loadStyle(bootstrap),\n", | |
| " loadScript(bootstrapJs),\n", | |
| " loadScript(jquery)\n", | |
| " ]).then(function(resolve){\n", | |
| " console.log(resolve);\n", | |
| " }).catch(function(err){\n", | |
| " console.log(err);\n", | |
| " })\n", | |
| "\n", | |
| " \"\"\"\n", | |
| "\n", | |
| " display(Javascript(jscode))\n", | |
| "\n", | |
| "initiliaze_environment()\n", | |
| "\n", | |
| "jscode = \"\"\"\n", | |
| " btn = document.createElement(\"button\");\n", | |
| " btn.innerHTML = \"Toggle Buton\";\n", | |
| " btn.id = \"myBtn\";\n", | |
| " btn.style.width = \"100px\";\n", | |
| " btn.style.margin = \"10px\";\n", | |
| " btn.className = \"btn btn-primary\";\n", | |
| " btn.style.width = \"100px\";\n", | |
| "\n", | |
| " let tiklandi = false;\n", | |
| " btn.addEventListener(\"click\",function(){\n", | |
| " if(tiklandi){\n", | |
| " $(\"#myBtn\").removeClass(\"btn-primary\").addClass(\"btn-danger\");\n", | |
| " $(\"#myBtn\").html(\"Tikla\");\n", | |
| " tiklandi = false;\n", | |
| " }else{\n", | |
| " $(\"#myBtn\").removeClass(\"btn-danger\").addClass(\"btn-primary\");\n", | |
| " $(\"#myBtn\").html(\"Tiklandi\");\n", | |
| " tiklandi = true;\n", | |
| " }\n", | |
| " });\n", | |
| "\n", | |
| " document.body.appendChild(btn);\n", | |
| "\"\"\"\n", | |
| "\n", | |
| "display(Javascript(jscode))" | |
| ], | |
| "metadata": { | |
| "id": "B5YwVBu0Rpbb", | |
| "colab": { | |
| "base_uri": "https://localhost:8080/", | |
| "height": 99 | |
| }, | |
| "outputId": "9651d9a3-d601-44ec-dab8-6e1f0fce88ee" | |
| }, | |
| "execution_count": 10, | |
| "outputs": [ | |
| { | |
| "output_type": "display_data", | |
| "data": { | |
| "text/plain": [ | |
| "<IPython.core.display.Javascript object>" | |
| ], | |
| "application/javascript": [ | |
| "\n", | |
| " //bu fonksiyonla scriptleri veya yukleyecegiz\n", | |
| " function loadScript(url){\n", | |
| " return new Promise((resolve,reject)=>{\n", | |
| " let script = document.createElement(\"script\");\n", | |
| " script.src = url;\n", | |
| " script.onload = resolve(\"Script yuklendi.\");\n", | |
| " script.onerror = reject(\"Hata ile karsilasildi!\");\n", | |
| " document.head.appendChild(script);\n", | |
| " })\n", | |
| " }\n", | |
| "\n", | |
| " //bu fonksiyonla bootstrap styleleri yukleyecegiz\n", | |
| " function loadStyle(url){\n", | |
| " return new Promise((resolve,reject)=>{\n", | |
| " let link = document.createElement(\"link\");\n", | |
| " link.rel = \"stylesheet\";\n", | |
| " link.href = url;\n", | |
| " link.onload = resolve(\"Style yuklendi.\");\n", | |
| " link.onerror = reject(\"Hata ile karsilasildi!\");\n", | |
| " document.head.appendChild(link);\n", | |
| " });\n", | |
| " }\n", | |
| "\n", | |
| " bootstrap = \"https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css\";\n", | |
| " bootstrapJs = \"https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js\";\n", | |
| "\n", | |
| " jquery = \"https://code.jquery.com/jquery-3.7.1.min.js\";\n", | |
| "\n", | |
| "\n", | |
| "\n", | |
| " //Promise.all ile tum scriptleri yuklenmesini bekle ve then ile calistir\n", | |
| " Promise.all([\n", | |
| " loadStyle(bootstrap),\n", | |
| " loadScript(bootstrapJs),\n", | |
| " loadScript(jquery)\n", | |
| " ]).then(function(resolve){\n", | |
| " console.log(resolve);\n", | |
| " }).catch(function(err){\n", | |
| " console.log(err);\n", | |
| " })\n", | |
| "\n", | |
| " " | |
| ] | |
| }, | |
| "metadata": {} | |
| }, | |
| { | |
| "output_type": "display_data", | |
| "data": { | |
| "text/plain": [ | |
| "<IPython.core.display.Javascript object>" | |
| ], | |
| "application/javascript": [ | |
| "\n", | |
| " btn = document.createElement(\"button\");\n", | |
| " btn.innerHTML = \"Toggle Buton\";\n", | |
| " btn.id = \"myBtn\";\n", | |
| " btn.style.width = \"100px\";\n", | |
| " btn.style.margin = \"10px\";\n", | |
| " btn.className = \"btn btn-primary\";\n", | |
| " btn.style.width = \"100px\";\n", | |
| "\n", | |
| " let tiklandi = false;\n", | |
| " btn.addEventListener(\"click\",function(){\n", | |
| " if(tiklandi){\n", | |
| " $(\"#myBtn\").removeClass(\"btn-primary\").addClass(\"btn-danger\");\n", | |
| " $(\"#myBtn\").html(\"Tikla\");\n", | |
| " tiklandi = false;\n", | |
| " }else{\n", | |
| " $(\"#myBtn\").removeClass(\"btn-danger\").addClass(\"btn-primary\");\n", | |
| " $(\"#myBtn\").html(\"Tiklandi\");\n", | |
| " tiklandi = true;\n", | |
| " }\n", | |
| " });\n", | |
| "\n", | |
| " document.body.appendChild(btn);\n" | |
| ] | |
| }, | |
| "metadata": {} | |
| } | |
| ] | |
| }, | |
| { | |
| "cell_type": "code", | |
| "source": [ | |
| "#@title Ekle ve Sil\n", | |
| "initiliaze_environment()\n", | |
| "\n", | |
| "html = \"\"\"\n", | |
| "<input type=\"text\" id=\"text\" style=\"width:200px;height:35px;margin:5px\"></input>\n", | |
| "<button class=\"btn btn-primary ekle\">Ekle</button>\n", | |
| "<button class=\"btn btn-primary sil\">Sil</button>\n", | |
| "\"\"\"\n", | |
| "\n", | |
| "jscode = \"\"\"\n", | |
| "async function waitJQueryAndBootstrap(){\n", | |
| " while (typeof window.jQuery == \"undefined\" || typeof window.bootstrap == \"undefined\"){\n", | |
| " await new Promise(resolve => setTimeout(resolve, 100));\n", | |
| " }\n", | |
| " return \"JQuery ve Bootstrap yuklendi.\";\n", | |
| "}\n", | |
| "\n", | |
| "waitJQueryAndBootstrap().then(result => {\n", | |
| " console.log(result);\n", | |
| " let counter = 1;\n", | |
| " $(\".ekle\").click(function(){\n", | |
| " const text = counter + \" - \" + $(\"#text\").val().trim();\n", | |
| " const div = `\n", | |
| " <div class=\"form-check my-2\" >\n", | |
| " <input class=\"form-check-input\" type=\"checkbox\" id=\"check${counter}\">\n", | |
| " <label class=\"form-check-label\" for=\"check${counter}\">\n", | |
| " ${text}\n", | |
| " </label>\n", | |
| " </div>\n", | |
| " `;\n", | |
| " $(document.body).append(div);\n", | |
| " counter++;\n", | |
| " $(\"#text\").val(\"\");\n", | |
| " });\n", | |
| "\n", | |
| " $(\"#text\").on(\"keydown\", function(event) {\n", | |
| " if (event.key === \"Enter\") {\n", | |
| " $(\".ekle\").click(); // Ekle butonunu tetikle\n", | |
| " }\n", | |
| " });\n", | |
| "\n", | |
| " //listele butonuna tiklandiginda\n", | |
| " $(\".sil\").click(function(){\n", | |
| " console.log($(\".form-check\"));\n", | |
| " let divs = $(\".form-check\");\n", | |
| " let checked = [];\n", | |
| " divs.each(function(){\n", | |
| " if($(this).find(\".form-check-input\").is(\":checked\")){\n", | |
| " checked.push($(this).find(\".form-check-label\").text().trim());\n", | |
| " $(this).remove();\n", | |
| " }\n", | |
| " });\n", | |
| " console.log(checked);\n", | |
| " });\n", | |
| "\n", | |
| "});\n", | |
| "\"\"\"\n", | |
| "\n", | |
| "display(HTML(html))\n", | |
| "display(Javascript(jscode))" | |
| ], | |
| "metadata": { | |
| "id": "BAHtERENUZB5", | |
| "colab": { | |
| "base_uri": "https://localhost:8080/", | |
| "height": 62 | |
| }, | |
| "outputId": "f431018c-85c8-46c8-a4f6-dda4a07039fa" | |
| }, | |
| "execution_count": 11, | |
| "outputs": [ | |
| { | |
| "output_type": "display_data", | |
| "data": { | |
| "text/plain": [ | |
| "<IPython.core.display.Javascript object>" | |
| ], | |
| "application/javascript": [ | |
| "\n", | |
| " //bu fonksiyonla scriptleri veya yukleyecegiz\n", | |
| " function loadScript(url){\n", | |
| " return new Promise((resolve,reject)=>{\n", | |
| " let script = document.createElement(\"script\");\n", | |
| " script.src = url;\n", | |
| " script.onload = resolve(\"Script yuklendi.\");\n", | |
| " script.onerror = reject(\"Hata ile karsilasildi!\");\n", | |
| " document.head.appendChild(script);\n", | |
| " })\n", | |
| " }\n", | |
| "\n", | |
| " //bu fonksiyonla bootstrap styleleri yukleyecegiz\n", | |
| " function loadStyle(url){\n", | |
| " return new Promise((resolve,reject)=>{\n", | |
| " let link = document.createElement(\"link\");\n", | |
| " link.rel = \"stylesheet\";\n", | |
| " link.href = url;\n", | |
| " link.onload = resolve(\"Style yuklendi.\");\n", | |
| " link.onerror = reject(\"Hata ile karsilasildi!\");\n", | |
| " document.head.appendChild(link);\n", | |
| " });\n", | |
| " }\n", | |
| "\n", | |
| " bootstrap = \"https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css\";\n", | |
| " bootstrapJs = \"https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js\";\n", | |
| "\n", | |
| " jquery = \"https://code.jquery.com/jquery-3.7.1.min.js\";\n", | |
| "\n", | |
| "\n", | |
| "\n", | |
| " //Promise.all ile tum scriptleri yuklenmesini bekle ve then ile calistir\n", | |
| " Promise.all([\n", | |
| " loadStyle(bootstrap),\n", | |
| " loadScript(bootstrapJs),\n", | |
| " loadScript(jquery)\n", | |
| " ]).then(function(resolve){\n", | |
| " console.log(resolve);\n", | |
| " }).catch(function(err){\n", | |
| " console.log(err);\n", | |
| " })\n", | |
| "\n", | |
| " " | |
| ] | |
| }, | |
| "metadata": {} | |
| }, | |
| { | |
| "output_type": "display_data", | |
| "data": { | |
| "text/plain": [ | |
| "<IPython.core.display.HTML object>" | |
| ], | |
| "text/html": [ | |
| "\n", | |
| "<input type=\"text\" id=\"text\" style=\"width:200px;height:35px;margin:5px\"></input>\n", | |
| "<button class=\"btn btn-primary ekle\">Ekle</button>\n", | |
| "<button class=\"btn btn-primary sil\">Sil</button>\n" | |
| ] | |
| }, | |
| "metadata": {} | |
| }, | |
| { | |
| "output_type": "display_data", | |
| "data": { | |
| "text/plain": [ | |
| "<IPython.core.display.Javascript object>" | |
| ], | |
| "application/javascript": [ | |
| "\n", | |
| "async function waitJQueryAndBootstrap(){\n", | |
| " while (typeof window.jQuery == \"undefined\" || typeof window.bootstrap == \"undefined\"){\n", | |
| " await new Promise(resolve => setTimeout(resolve, 100));\n", | |
| " }\n", | |
| " return \"JQuery ve Bootstrap yuklendi.\";\n", | |
| "}\n", | |
| "\n", | |
| "waitJQueryAndBootstrap().then(result => {\n", | |
| " console.log(result);\n", | |
| " let counter = 1;\n", | |
| " $(\".ekle\").click(function(){\n", | |
| " const text = counter + \" - \" + $(\"#text\").val().trim();\n", | |
| " const div = `\n", | |
| " <div class=\"form-check my-2\" >\n", | |
| " <input class=\"form-check-input\" type=\"checkbox\" id=\"check${counter}\">\n", | |
| " <label class=\"form-check-label\" for=\"check${counter}\">\n", | |
| " ${text}\n", | |
| " </label>\n", | |
| " </div>\n", | |
| " `;\n", | |
| " $(document.body).append(div);\n", | |
| " counter++;\n", | |
| " $(\"#text\").val(\"\");\n", | |
| " });\n", | |
| "\n", | |
| " $(\"#text\").on(\"keydown\", function(event) {\n", | |
| " if (event.key === \"Enter\") {\n", | |
| " $(\".ekle\").click(); // Ekle butonunu tetikle\n", | |
| " }\n", | |
| " });\n", | |
| "\n", | |
| " //listele butonuna tiklandiginda\n", | |
| " $(\".sil\").click(function(){\n", | |
| " console.log($(\".form-check\"));\n", | |
| " let divs = $(\".form-check\");\n", | |
| " let checked = [];\n", | |
| " divs.each(function(){\n", | |
| " if($(this).find(\".form-check-input\").is(\":checked\")){\n", | |
| " checked.push($(this).find(\".form-check-label\").text().trim());\n", | |
| " $(this).remove();\n", | |
| " }\n", | |
| " });\n", | |
| " console.log(checked);\n", | |
| " });\n", | |
| "\n", | |
| "});\n" | |
| ] | |
| }, | |
| "metadata": {} | |
| } | |
| ] | |
| }, | |
| { | |
| "cell_type": "code", | |
| "source": [ | |
| "#@title LocalStorage Destegi Eklendi\n", | |
| "\n", | |
| "initiliaze_environment()\n", | |
| "\n", | |
| "html = \"\"\"\n", | |
| "<input type=\"text\" id=\"text\" style=\"width:200px;height:35px;margin:5px\"></input>\n", | |
| "<button class=\"btn btn-primary ekle\">Ekle</button>\n", | |
| "<button class=\"btn btn-primary sil\">Sil</button>\n", | |
| "\"\"\"\n", | |
| "\n", | |
| "jscode = \"\"\"\n", | |
| "async function waitJQueryAndBootstrap(){\n", | |
| " while (typeof window.jQuery == \"undefined\" || typeof window.bootstrap == \"undefined\"){\n", | |
| " await new Promise(resolve => setTimeout(resolve, 300));\n", | |
| " }\n", | |
| " return \"JQuery ve Bootstrap yuklendi.\";\n", | |
| "}\n", | |
| "\n", | |
| "waitJQueryAndBootstrap().then(result => {\n", | |
| " //JQuery ve Bootstrap yuklendi.\n", | |
| " console.log(result);\n", | |
| " let counter = 1;\n", | |
| " $(\".ekle\").click(function(){\n", | |
| " const text = $(\"#text\").val().trim();\n", | |
| " const div = `\n", | |
| " <div class=\"form-check my-2\" >\n", | |
| " <input class=\"form-check-input\" type=\"checkbox\" id=\"check${counter}\">\n", | |
| " <label class=\"form-check-label\" for=\"check${counter}\">\n", | |
| " ${text}\n", | |
| " </label>\n", | |
| " </div>\n", | |
| " `;\n", | |
| " $(document.body).append(div);\n", | |
| " localStorage.setItem(counter,text);\n", | |
| " counter++;\n", | |
| " $(\"#text\").val(\"\");\n", | |
| " });\n", | |
| "\n", | |
| " $(\"#text\").on(\"keydown\", function(event) {\n", | |
| " if (event.key === \"Enter\") {\n", | |
| " $(\".ekle\").click(); // Ekle butonunu tetikle\n", | |
| " }\n", | |
| " });\n", | |
| "\n", | |
| " //listele butonuna tiklandiginda\n", | |
| " $(\".sil\").click(function(){\n", | |
| " console.log($(\".form-check\"));\n", | |
| " let divs = $(\".form-check\");\n", | |
| " let checked = [];\n", | |
| " divs.each(function(){\n", | |
| " if($(this).find(\".form-check-input\").is(\":checked\")){\n", | |
| " checked.push($(this).find(\".form-check-label\").text().trim());\n", | |
| " let checkId = $(this).find(\".form-check-input\").attr(\"id\");\n", | |
| " let key = checkId.split(\"check\")[1];\n", | |
| " localStorage.removeItem(key);\n", | |
| " $(this).remove();\n", | |
| " }\n", | |
| " });\n", | |
| " console.log(checked);\n", | |
| " });\n", | |
| "\n", | |
| "});\n", | |
| "\"\"\"\n", | |
| "\n", | |
| "display(HTML(html))\n", | |
| "display(Javascript(jscode))\n" | |
| ], | |
| "metadata": { | |
| "colab": { | |
| "base_uri": "https://localhost:8080/", | |
| "height": 102 | |
| }, | |
| "id": "3CXdBukRKZlz", | |
| "outputId": "f65cea27-f64b-408d-dd1f-41bbdf1583f7" | |
| }, | |
| "execution_count": 13, | |
| "outputs": [ | |
| { | |
| "output_type": "display_data", | |
| "data": { | |
| "text/plain": [ | |
| "<IPython.core.display.Javascript object>" | |
| ], | |
| "application/javascript": [ | |
| "\n", | |
| " //bu fonksiyonla scriptleri veya yukleyecegiz\n", | |
| " function loadScript(url){\n", | |
| " return new Promise((resolve,reject)=>{\n", | |
| " let script = document.createElement(\"script\");\n", | |
| " script.src = url;\n", | |
| " script.onload = resolve(\"Script yuklendi.\");\n", | |
| " script.onerror = reject(\"Hata ile karsilasildi!\");\n", | |
| " document.head.appendChild(script);\n", | |
| " })\n", | |
| " }\n", | |
| "\n", | |
| " //bu fonksiyonla bootstrap styleleri yukleyecegiz\n", | |
| " function loadStyle(url){\n", | |
| " return new Promise((resolve,reject)=>{\n", | |
| " let link = document.createElement(\"link\");\n", | |
| " link.rel = \"stylesheet\";\n", | |
| " link.href = url;\n", | |
| " link.onload = resolve(\"Style yuklendi.\");\n", | |
| " link.onerror = reject(\"Hata ile karsilasildi!\");\n", | |
| " document.head.appendChild(link);\n", | |
| " });\n", | |
| " }\n", | |
| "\n", | |
| " bootstrap = \"https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css\";\n", | |
| " bootstrapJs = \"https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js\";\n", | |
| "\n", | |
| " jquery = \"https://code.jquery.com/jquery-3.7.1.min.js\";\n", | |
| "\n", | |
| "\n", | |
| "\n", | |
| " //Promise.all ile tum scriptleri yuklenmesini bekle ve then ile calistir\n", | |
| " Promise.all([\n", | |
| " loadStyle(bootstrap),\n", | |
| " loadScript(bootstrapJs),\n", | |
| " loadScript(jquery)\n", | |
| " ]).then(function(resolve){\n", | |
| " console.log(resolve);\n", | |
| " }).catch(function(err){\n", | |
| " console.log(err);\n", | |
| " })\n", | |
| "\n", | |
| " " | |
| ] | |
| }, | |
| "metadata": {} | |
| }, | |
| { | |
| "output_type": "display_data", | |
| "data": { | |
| "text/plain": [ | |
| "<IPython.core.display.HTML object>" | |
| ], | |
| "text/html": [ | |
| "\n", | |
| "<input type=\"text\" id=\"text\" style=\"width:200px;height:35px;margin:5px\"></input>\n", | |
| "<button class=\"btn btn-primary ekle\">Ekle</button>\n", | |
| "<button class=\"btn btn-primary sil\">Sil</button>\n" | |
| ] | |
| }, | |
| "metadata": {} | |
| }, | |
| { | |
| "output_type": "display_data", | |
| "data": { | |
| "text/plain": [ | |
| "<IPython.core.display.Javascript object>" | |
| ], | |
| "application/javascript": [ | |
| "\n", | |
| "async function waitJQueryAndBootstrap(){\n", | |
| " while (typeof window.jQuery == \"undefined\" || typeof window.bootstrap == \"undefined\"){\n", | |
| " await new Promise(resolve => setTimeout(resolve, 300));\n", | |
| " }\n", | |
| " return \"JQuery ve Bootstrap yuklendi.\";\n", | |
| "}\n", | |
| "\n", | |
| "waitJQueryAndBootstrap().then(result => {\n", | |
| " //JQuery ve Bootstrap yuklendi.\n", | |
| " console.log(result);\n", | |
| " let counter = 1;\n", | |
| " $(\".ekle\").click(function(){\n", | |
| " const text = $(\"#text\").val().trim();\n", | |
| " const div = `\n", | |
| " <div class=\"form-check my-2\" >\n", | |
| " <input class=\"form-check-input\" type=\"checkbox\" id=\"check${counter}\">\n", | |
| " <label class=\"form-check-label\" for=\"check${counter}\">\n", | |
| " ${text}\n", | |
| " </label>\n", | |
| " </div>\n", | |
| " `;\n", | |
| " $(document.body).append(div);\n", | |
| " localStorage.setItem(counter,text);\n", | |
| " counter++;\n", | |
| " $(\"#text\").val(\"\");\n", | |
| " });\n", | |
| "\n", | |
| " $(\"#text\").on(\"keydown\", function(event) {\n", | |
| " if (event.key === \"Enter\") {\n", | |
| " $(\".ekle\").click(); // Ekle butonunu tetikle\n", | |
| " }\n", | |
| " });\n", | |
| "\n", | |
| " //listele butonuna tiklandiginda\n", | |
| " $(\".sil\").click(function(){\n", | |
| " console.log($(\".form-check\"));\n", | |
| " let divs = $(\".form-check\");\n", | |
| " let checked = [];\n", | |
| " divs.each(function(){\n", | |
| " if($(this).find(\".form-check-input\").is(\":checked\")){\n", | |
| " checked.push($(this).find(\".form-check-label\").text().trim());\n", | |
| " let checkId = $(this).find(\".form-check-input\").attr(\"id\");\n", | |
| " let key = checkId.split(\"check\")[1];\n", | |
| " localStorage.removeItem(key);\n", | |
| " $(this).remove();\n", | |
| " }\n", | |
| " });\n", | |
| " console.log(checked);\n", | |
| " });\n", | |
| "\n", | |
| "});\n" | |
| ] | |
| }, | |
| "metadata": {} | |
| } | |
| ] | |
| }, | |
| { | |
| "cell_type": "code", | |
| "source": [ | |
| "#@title Duzenleme Destegi Eklendi\n", | |
| "\n", | |
| "initiliaze_environment()\n", | |
| "\n", | |
| "html = \"\"\"\n", | |
| "<input type=\"text\" id=\"text\" style=\"width:200px;height:35px;margin:5px\"></input>\n", | |
| "<button class=\"btn btn-primary ekle\">Ekle</button>\n", | |
| "<button class=\"btn btn-primary duzenle\">Duzenle</button>\n", | |
| "<button class=\"btn btn-primary sil\">Sil</button>\n", | |
| "\"\"\"\n", | |
| "\n", | |
| "jscode = \"\"\"\n", | |
| "async function waitJQueryAndBootstrap(){\n", | |
| " while (typeof window.jQuery == \"undefined\" || typeof window.bootstrap == \"undefined\"){\n", | |
| " await new Promise(resolve => setTimeout(resolve, 300));\n", | |
| " }\n", | |
| " return \"JQuery ve Bootstrap yuklendi.\";\n", | |
| "}\n", | |
| "\n", | |
| "waitJQueryAndBootstrap().then(result => {\n", | |
| " //JQuery ve Bootstrap yuklendi.\n", | |
| " console.log(result);\n", | |
| " let counter = 1;\n", | |
| " $(\".ekle\").click(function(){\n", | |
| " const text = $(\"#text\").val().trim();\n", | |
| " if(text.length == 0 ){\n", | |
| " return;\n", | |
| " }\n", | |
| " const div = `\n", | |
| " <div class=\"form-check my-2\" >\n", | |
| " <input class=\"form-check-input\" type=\"checkbox\" id=\"check${counter}\">\n", | |
| " <label class=\"form-check-label\" for=\"check${counter}\">\n", | |
| " ${text}\n", | |
| " </label>\n", | |
| " </div>\n", | |
| " `;\n", | |
| " $(document.body).append(div);\n", | |
| " localStorage.setItem(counter,text);\n", | |
| " counter++;\n", | |
| " $(\"#text\").val(\"\");\n", | |
| " $(\"#text\").attr(\"placeholder\", \"\");\n", | |
| " });\n", | |
| "\n", | |
| " ////////////////////////////////////////\n", | |
| " $(\"#text\").on(\"keydown\", function(event) {\n", | |
| " if (event.key === \"Enter\") {\n", | |
| " $(\".ekle\").click(); // Ekle butonunu tetikle\n", | |
| " }\n", | |
| " });\n", | |
| "\n", | |
| " ///////////////////////////////////////\n", | |
| " //listele butonuna tiklandiginda\n", | |
| " $(\".sil\").click(function(){\n", | |
| " console.log($(\".form-check\"));\n", | |
| " let divs = $(\".form-check\");\n", | |
| " let checked = [];\n", | |
| " divs.each(function(){\n", | |
| " if($(this).find(\".form-check-input\").is(\":checked\")){\n", | |
| " checked.push($(this).find(\".form-check-label\").text().trim());\n", | |
| " let checkId = $(this).find(\".form-check-input\").attr(\"id\");\n", | |
| " let key = checkId.split(\"check\")[1];\n", | |
| " localStorage.removeItem(key);\n", | |
| " $(this).remove();\n", | |
| " }\n", | |
| " });\n", | |
| " console.log(checked);\n", | |
| " });\n", | |
| " ////////////////////////////////\n", | |
| "\n", | |
| " $(\".duzenle\").click(function(){\n", | |
| " let divs = $(\".form-check\");\n", | |
| " divs.each(function(){\n", | |
| " if($(this).find(\".form-check-input\").is(\":checked\")){\n", | |
| " let text = $(this).find(\".form-check-label\").text().trim();\n", | |
| " $(\"#text\").attr(\"placeholder\", text);\n", | |
| "\n", | |
| " $(\"#text\").on(\"keydown\", function(event) {\n", | |
| " if (event.key == \"Tab\") {\n", | |
| " event.preventDefault();\n", | |
| " $(\"#text\").val(text);\n", | |
| "\n", | |
| " }\n", | |
| " });\n", | |
| " $(this).remove();\n", | |
| " }\n", | |
| " });\n", | |
| " });\n", | |
| "\n", | |
| " /////////////////////////////\n", | |
| "});\n", | |
| "\"\"\"\n", | |
| "\n", | |
| "display(HTML(html))\n", | |
| "display(Javascript(jscode))\n" | |
| ], | |
| "metadata": { | |
| "colab": { | |
| "base_uri": "https://localhost:8080/", | |
| "height": 198 | |
| }, | |
| "id": "eOyi-ZHM4r2I", | |
| "outputId": "7b2540ec-efce-4939-bfac-b07261084c62" | |
| }, | |
| "execution_count": 45, | |
| "outputs": [ | |
| { | |
| "output_type": "display_data", | |
| "data": { | |
| "text/plain": [ | |
| "<IPython.core.display.Javascript object>" | |
| ], | |
| "application/javascript": [ | |
| "\n", | |
| " //bu fonksiyonla scriptleri veya yukleyecegiz\n", | |
| " function loadScript(url){\n", | |
| " return new Promise((resolve,reject)=>{\n", | |
| " let script = document.createElement(\"script\");\n", | |
| " script.src = url;\n", | |
| " script.onload = resolve(\"Script yuklendi.\");\n", | |
| " script.onerror = reject(\"Hata ile karsilasildi!\");\n", | |
| " document.head.appendChild(script);\n", | |
| " })\n", | |
| " }\n", | |
| "\n", | |
| " //bu fonksiyonla bootstrap styleleri yukleyecegiz\n", | |
| " function loadStyle(url){\n", | |
| " return new Promise((resolve,reject)=>{\n", | |
| " let link = document.createElement(\"link\");\n", | |
| " link.rel = \"stylesheet\";\n", | |
| " link.href = url;\n", | |
| " link.onload = resolve(\"Style yuklendi.\");\n", | |
| " link.onerror = reject(\"Hata ile karsilasildi!\");\n", | |
| " document.head.appendChild(link);\n", | |
| " });\n", | |
| " }\n", | |
| "\n", | |
| " bootstrap = \"https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css\";\n", | |
| " bootstrapJs = \"https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js\";\n", | |
| "\n", | |
| " jquery = \"https://code.jquery.com/jquery-3.7.1.min.js\";\n", | |
| "\n", | |
| "\n", | |
| "\n", | |
| " //Promise.all ile tum scriptleri yuklenmesini bekle ve then ile calistir\n", | |
| " Promise.all([\n", | |
| " loadStyle(bootstrap),\n", | |
| " loadScript(bootstrapJs),\n", | |
| " loadScript(jquery)\n", | |
| " ]).then(function(resolve){\n", | |
| " console.log(resolve);\n", | |
| " }).catch(function(err){\n", | |
| " console.log(err);\n", | |
| " })\n", | |
| "\n", | |
| " " | |
| ] | |
| }, | |
| "metadata": {} | |
| }, | |
| { | |
| "output_type": "display_data", | |
| "data": { | |
| "text/plain": [ | |
| "<IPython.core.display.HTML object>" | |
| ], | |
| "text/html": [ | |
| "\n", | |
| "<input type=\"text\" id=\"text\" style=\"width:200px;height:35px;margin:5px\"></input>\n", | |
| "<button class=\"btn btn-primary ekle\">Ekle</button>\n", | |
| "<button class=\"btn btn-primary duzenle\">Duzenle</button>\n", | |
| "<button class=\"btn btn-primary sil\">Sil</button>\n" | |
| ] | |
| }, | |
| "metadata": {} | |
| }, | |
| { | |
| "output_type": "display_data", | |
| "data": { | |
| "text/plain": [ | |
| "<IPython.core.display.Javascript object>" | |
| ], | |
| "application/javascript": [ | |
| "\n", | |
| "async function waitJQueryAndBootstrap(){\n", | |
| " while (typeof window.jQuery == \"undefined\" || typeof window.bootstrap == \"undefined\"){\n", | |
| " await new Promise(resolve => setTimeout(resolve, 300));\n", | |
| " }\n", | |
| " return \"JQuery ve Bootstrap yuklendi.\";\n", | |
| "}\n", | |
| "\n", | |
| "waitJQueryAndBootstrap().then(result => {\n", | |
| " //JQuery ve Bootstrap yuklendi.\n", | |
| " console.log(result);\n", | |
| " let counter = 1;\n", | |
| " $(\".ekle\").click(function(){\n", | |
| " const text = $(\"#text\").val().trim();\n", | |
| " if(text.length == 0 ){\n", | |
| " return;\n", | |
| " }\n", | |
| " const div = `\n", | |
| " <div class=\"form-check my-2\" >\n", | |
| " <input class=\"form-check-input\" type=\"checkbox\" id=\"check${counter}\">\n", | |
| " <label class=\"form-check-label\" for=\"check${counter}\">\n", | |
| " ${text}\n", | |
| " </label>\n", | |
| " </div>\n", | |
| " `;\n", | |
| " $(document.body).append(div);\n", | |
| " localStorage.setItem(counter,text);\n", | |
| " counter++;\n", | |
| " $(\"#text\").val(\"\");\n", | |
| " $(\"#text\").attr(\"placeholder\", \"\");\n", | |
| " });\n", | |
| "\n", | |
| " ////////////////////////////////////////\n", | |
| " $(\"#text\").on(\"keydown\", function(event) {\n", | |
| " if (event.key === \"Enter\") {\n", | |
| " $(\".ekle\").click(); // Ekle butonunu tetikle\n", | |
| " }\n", | |
| " });\n", | |
| "\n", | |
| " ///////////////////////////////////////\n", | |
| " //listele butonuna tiklandiginda\n", | |
| " $(\".sil\").click(function(){\n", | |
| " console.log($(\".form-check\"));\n", | |
| " let divs = $(\".form-check\");\n", | |
| " let checked = [];\n", | |
| " divs.each(function(){\n", | |
| " if($(this).find(\".form-check-input\").is(\":checked\")){\n", | |
| " checked.push($(this).find(\".form-check-label\").text().trim());\n", | |
| " let checkId = $(this).find(\".form-check-input\").attr(\"id\");\n", | |
| " let key = checkId.split(\"check\")[1];\n", | |
| " localStorage.removeItem(key);\n", | |
| " $(this).remove();\n", | |
| " }\n", | |
| " });\n", | |
| " console.log(checked);\n", | |
| " });\n", | |
| " ////////////////////////////////\n", | |
| "\n", | |
| " $(\".duzenle\").click(function(){\n", | |
| " let divs = $(\".form-check\");\n", | |
| " divs.each(function(){\n", | |
| " if($(this).find(\".form-check-input\").is(\":checked\")){\n", | |
| " let text = $(this).find(\".form-check-label\").text().trim();\n", | |
| " $(\"#text\").attr(\"placeholder\", text);\n", | |
| " \n", | |
| " $(\"#text\").on(\"keydown\", function(event) {\n", | |
| " if (event.key == \"Tab\") {\n", | |
| " event.preventDefault();\n", | |
| " $(\"#text\").val(text);\n", | |
| " \n", | |
| " }\n", | |
| " });\n", | |
| " $(this).remove();\n", | |
| " }\n", | |
| " });\n", | |
| " });\n", | |
| " \n", | |
| " /////////////////////////////\n", | |
| "});\n" | |
| ] | |
| }, | |
| "metadata": {} | |
| } | |
| ] | |
| } | |
| ] | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment