Mühendislik Notları: Javascript

Javascript etiketine sahip kayıtlar gösteriliyor. Tüm kayıtları göster

20 Ekim 2020 Salı

Hmtl

<!DOCTYPE html>

<html lang="en">

<head>

    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <title>Bayram</title>

</head>

<body onload="deger()">

    <div class="container">

        <form id="frm" method="POST" action="#">

            <label>Username</label>

            <input type="text" id="name" name="name" />

            <label>Lastname</label>

            <input type="text" id="lastName" name="lastName" /

            <label>Email box</label>

            <input type="email" id="email" name="email" />

            <label id="wrt">Write box</label>

            <textarea type="text" id="textArea" name="Text">Write...</textarea>

            <input type="submit" name="submit" id="btn" />

        </form>

    </div>

</body>

</html>

/* Css ayarları */

* {
    box-sizing: border-box;
}
body {
    background-image: url(canyon.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    font-family: "Times New Roman", Times, serif;
}
.container {
    position: absolute;
    top: 25%;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    text-align: center;
    justify-content: center;
}
#frm {
    border: 1px solid gray;
    box-shadow: 0 15px 15px 0 rgba(0, 0, 0, 0.6);
    background-color: #cc3000;
    width: 400px;
    height: 380px;
    padding-top: 8px;
}
label {
    color: white;
    font-size: 20px;
    display: block;
    margin-left: -290px;
    padding: 5px;
}
input[type="text"] {
    height: 30px;
    width: 370px;
    font-size: 15px;
}
input[type="text"]:focus {
    background-color: #66ccff;
    font-weight: bold;
    font-size: 25px;
}
input[type="email"] {
    height: 30px;
    width: 370px;
    font-size: 15px;
}
input[type="email"]:focus {
    background-color: #66ccff;
    font-weight: bold;
    font-size: 25px
}
#textArea {
    height: 90px;
    width: 370px;
}
#textArea:focus {
    font-weight: bold;
    font-size: 15px;
}
#btn {
    background-color: #999999;
    box-shadow: 0 15px 15px 0 rgba(0, 0, 0, 0.6);
    font-size: 20px;
    width: 150px;
    height: 30px;
    border: none;
    margin: 5px;
    box-shadow: 0 15px 15px 0 rgba(0, 0, 0, 0.3);

}
#btn:hover {
    background-color: white;
    font-weight: bold;
}

10 Eylül 2019 Salı

Javascript Dört İşlem

<!DOCTYPE html>

<html>

<head>

<title>Bayram Ekin</title>

</head>

<style>

.container {

position: absolute;

display: flex;

justify-content: center;

align-items: center;

top: 0;

left: 0;

right: 0;

bottom: 0;

background-image: linear-gradient(to right, #D7DBDD, #FDEBD0);

opacity: 0.7;

}

.calculate-number1{

position: absolute;

float: left;

}

.Number1, .Number2, .operator, .equal{

width: 40px;

text-align: center;

background-color: blue;

color: white;

border: 1px solid gray;

padding: 10px;

font-size: 30px;

}

span{

position: absolute;

margin-left: 4px;

background: #F9E79F;

color: black;

font-weight: bolder;

width: 45px;

height: 34px;

padding: 10px;

color: black;

font-size: 30px;

border: 1px solid gray;

text-align: center;

}

.btn{

margin-top: 10px;

background: #2E4053;

width: 126.5%;

height: 35px;

border-radius: 10px;

box-shadow: 0 5px 5px 0 rgba(0,0,0,0.6);

}

.btn:hover{

background-color: #85929E;

}

</style>

<body>

cal

</button>

</div>

function hesapla(num1, op, num2) {

var num1 = parseInt(document.querySelector("input.Number1").value);

var num2 = parseInt(document.querySelector("input.Number2").value);

var op = document.querySelector("input.operator").value;

let result;

var sonuc=document.getElementById("result");

switch (op) {

case "+":

result = num1 + num2;

break;

case "-":

result = num1 - num2;

break;

case "*":

result = num1 * num2;

break;

case "/":

result = num1 / num2;

break;

default:

alert("+, -, *, / dört işlem dışında değerler girdiniz.");

break;

}

sonuc.innerHTML = result;

}

</script>

</body>

</html>

2 Eylül 2019 Pazartesi

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div class="clock">
<div class="container">
<p id="day"></p>
<p id="hour"></p>
</div>
</div>
<script>
window.onload = function Time() {
var clock = new Date();
var d = clock.getDay();
var h = clock.getHours();
var m = clock.getMinutes();
var s = clock.getSeconds();

function setTime(x) {
if (x < 10) {
x = "0" + x;
}
return x;
}
m = setTime(m);
s = setTime(s);
var days = [
"Sunday",
"Monday",
"Tuesday",
"Wednesday",
"Thursday",
"Friday",
"Saturday"
];
setInterval(Time, 1000);
document.getElementById("day").innerHTML = "Today is: " + days[d];
document.getElementById("hour").innerHTML =
"Times is:" + h + ":" + m + ":" + s;
};

</script>
</body>
</html>

26 Ağustos 2019 Pazartesi

Javascript Asal Sayı Kontrolü

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="Test.css" type="text/css" />
<script type="text/javascript" src="Test.js"></script>
</head>
<style>
.container {
position: absolute;
display: flex;
justify-content: center;
align-items: center;
right: 0;
left: 0;
bottom: 0;
top: 0;
background-image: linear-gradient(
to right,
rgba(255, 0, 0, 0),
rgba(255, 0, 0, 1)
);
}
#val {
width: 25%;
height: 3%;
font-size: 15px;
box-shadow: 0 15px 15px 0 rgba(0, 0, 0, 0.5);
}
#val:hover {
background-color: aqua;
}
#val:focus {
background-color: yellow;
color: green;
}
#asal {
position: absolute;
left: 63.5%;
height: 4%;
box-shadow: 0 15px 15px 0 rgba(0, 0, 0, 0.5);
padding-left: 5px;
border-radius: 15px;
}
#AsalBas {
position: absolute;
display: flex;
justify-content: center;
align-items: center;
right: 0;
left: 0;
top: 30%;
font-family: sans-serif;
font-size: 30px;
}
</style>
<body>
<h2 id="AsalBas">Asal Sayı Kontrolü</h2>
<div class="container">
<input id="val" type="number" value="0" />
<button type="button" id="asal" onclick="asal(this.value)">
Click
</button>
</div>
<script type="text/javascript">
function asal() {
var sayac = 0;
var deger = document.getElementById("val").value;
var i, j;

for (i = 2; i < deger; i++) {
if (deger % i == 0) {
sayac++;
}
}
if (deger != 1 && deger != 0) {
if (sayac == 0 || deger == 2) {
alert("2Asaldır.");
} else {
alert("2Asal değildir.");
}
} else {
alert("Girilen parametre degeri 1 veya 0 olmamalıdır.");
}
}
</script>
</body>
</html>

2 Ocak 2019 Çarşamba

Javascript ile Resimlerde Slider

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
</head>
<style>

</style>
<body>

<div>
<button onclick="prev()"> Prev </button>
<img id="slider" src="a.jpg" width="200px" height="150px"/>
<button onclick="next()"> Next </button>
</div>
<script>
var images = [ "a.jpg", "b.jpg" ];
var sayi=0;
function next(){
var slider=document.getElementById("slider");
sayi++;
if(sayi>=images.length){
sayi=0;
}
slider.src=images[sayi];
}
function prev(){
var slider=document.getElementById("slider");
sayi--;
if(sayi<0){
sayi=images.length-1;
}
slider.src= images[sayi];
}
</script>
</body>
</html>

24 Aralık 2018 Pazartesi

Javascript Toplama İşlemi

<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
</head>
<style>
</style>
<body>

<p><input type="text" id="veri1" name="veri1"></p>
<p><input type="text" id="veri2" name="veri2"></p>
<p id="demo"></p>

<script type="text/javascript">
var result=document.getElementById("demo");
times=setInterval(toplam, 1000);
function toplam(){
var data1, data2,sonuc;
data1=Number(document.getElementById("veri1").value);
data2=Number(document.getElementById("veri2").value);
sonuc=data1+data2;
result.innerHTML=sonuc;
}
</script>
</body>
</html>

19 Aralık 2018 Çarşamba

Javascript ile Tek Sayıları Ekrana Yazdırma

<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
</head>
<style>
</style>
<body>
<input type="text" value="0" id="deger">
<button type="button" onclick="eylem()">Click Me</button>
<p id="result"></p>

<script type="text/javascript">

function eylem(){
var x= Number(document.getElementById("deger").value);
var text=" ";
var i;
for(i=0; i<=x; i++){
if(i%2==0){
continue;
}
text +=i+"<br>"
}
document.getElementById("result").innerHTML=text;
}
</script>
</body>
</html>

Javascript Yön Tuşları Kullanma

<!doctype html>
<html>
<head>
<meta charset="utf-8">
</head>
<body id="bdy">
<style>
#Container{
box-sizing: border-box;
width: 600px;
height: 600px;
border: 3px solid gray;
position: relative;
}
#Container #ContainerInside{
box-sizing: border-box;
width: 48px;
height: 48px;
background-color:yellow;
position: absolute;
}
</style>

Sonuc:
<input type="button" value="0" id="sonuc">
<input type="button" value="0" id="sonuc1">
<div id="Container">
<div id="ContainerInside"></div>
</div>

<script>

var pos1=0, pos2=0;
document.onkeydown=function keyKontrol(e){
var keyKod=e.which;

var box= document.getElementById("ContainerInside");
var tuval= document.getElementById("Container");
var sonuc= document.getElementById("sonuc");
var sonuc1= document.getElementById("sonuc1");

if(keyKod == 37){
if(pos1>0)
sonuc.value=Number(sonuc.value)-50;
pos1= sonuc.value;
box.style.left= pos1 + "px";
console.log("37: "+pos1);
}

if(keyKod == 38){
if(pos2>0)
sonuc1.value=Number(sonuc1.value)-50;
pos2= sonuc1.value;
box.style.top= pos2 + "px";
console.log("38: "+pos2);
}

if(keyKod == 39){
if(pos1<550)
sonuc.value=Number(sonuc.value)+50;
pos1= sonuc.value;
box.style.left= pos1 + "px";
console.log("39: "+pos1);
}

if(keyKod == 40){
if(pos2<550)
sonuc1.value=Number(sonuc1.value)+50;
pos2= sonuc1.value;
box.style.top= pos2 + "px";
console.log("40: "+pos2);
}
console.log("sonuc1: "+sonuc.value);
console.log("sonuc2: "+sonuc1.value);
}
</script>
</body>
</html>

Mühendislik Notları

Menü

Bu Blogda Ara

20 Ekim 2020 Salı

Hmtl

10 Eylül 2019 Salı

Javascript Dört İşlem

2 Eylül 2019 Pazartesi

Javascript Dijital Saat

26 Ağustos 2019 Pazartesi

Javascript Asal Sayı Kontrolü

2 Ocak 2019 Çarşamba

Javascript ile Resimlerde Slider

24 Aralık 2018 Pazartesi

Javascript Toplama İşlemi

19 Aralık 2018 Çarşamba

Javascript ile Tek Sayıları Ekrana Yazdırma

Javascript Yön Tuşları Kullanma