javascript从入门到入土

2022/4/24 22:13:12

编程Tag： javascript innerHTML function var demo 入门 getElementById document 入土

本文主要是介绍javascript从入门到入土，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

Javascript是web编程语言

本身这个和java类似，有的地方就没做笔记了，以后再补充吧

所有html页面都使用javascript页面

javascript非常容易学

  1. html定义网页内容
  2. css描述网页布局
  3. javascript控制网页行为

javascript是网上最流行的脚本语言，可以用于html和web，广泛用于服务器，pc，手机

是一种轻量级编程语言

可以插入html页面的编程代码

插入html后，由现代浏览器执行

输出

JavaScript 可以通过不同的方式来输出数据：

  • 使用 window.alert() 弹出警告框。
  • 使用 document.write() 方法将内容写到 HTML 文档中。
  • 使用 innerHTML 写入到 HTML 元素。
  • 使用 console.log() 写入到浏览器的控制台。
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>弹出警告框来显示数据</title>
</head>
<body>

<script>
    window.alert(5 + 6);
</script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>操作 HTML 元素</title>
</head>
<body>
<p id="demo">我的第一个段落</p>
<script>
    document.getElementById("demo").innerHTML="段落已修改。";
</script>

</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>写到 HTML 文档</title>
</head>
<body>
<p> 我的第一个段落</p>
<script>
    document.write(Date());
</script>

</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>写到 HTML 文档 2</title>
</head>
<body>
<button onClick="myFunction()">点我</button>
<script>
    function myFunction(){
        document.write(Date());
    }
</script>

</body>
</html>







<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>写到控制台</title>
</head>
<body>
<h1>我的第一个web页面</h1>
<script>
    a = 5;
    b = 6;
    c = a + b;
    console.log(c);
</script>

</body>
</html>

js语法

js是一个轻量级，功能强大的编程语言。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>js字面量</title>
</head>
<body>
<p id="demo"></p>
<script>
    document.getElementById("demo").innerHTML = 123e5;
</script>

</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>字面量2</title>
</head>
<body>
<p id="demo"></p>
<script>
    document.getElementById("demo").innerHTML = "John Doe";
</script>

</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>字面量3</title>
</head>
<body>
<p id="demo"></p>
<script>
    document.getElementById("demo").innerHTML = 5 * 10;
</script>

</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>变量</title>
</head>
<body>
<p id="demo"></p>
<script>
    var length;
    length = 6;
    document.getElementById("demo").innerHTML=length;

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>操作符</title>
</head>
<body>
<p id="demo"></p>
<script>
    document.getElementById("demo").innerHTML = (5+6) * 10;
</script>

</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>操作符2</title>
</head>
<body>
<p id="demo"></p>
<script>
    var x,y,z;
    x = 5;
    y = 6;
    z = (x + y) * 10;
    document.getElementById("demo").innerHTML = z;
</script>
</body>
</html>

语句

告诉浏览器要做的事情

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<p id="demo">我的第一个段落。</p>
<script>

    document.getElementById("demo").innerHTML = "你好 Dolly";

</script>

</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>分号</title>
</head>
<body>
<h1>我的网页 </h1>
<p id="demo1"></p>
<p id="demo2"></p>
<script>
    a = 1;
    b = 2;
    c = a + b;
    document.getElementById("demo1").innerHTML = c;
    x = 1; y = 2; z = x + y;
    document.getElementById("demo2").innerHTML = z;
</script>
</body>
</html>



<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>代码块</title>
</head>
<body>
<p id="myPar">我是一个段落</p>
<div id="myDiv">我是一个div</div>
<p>
    <button type="button" onclick="myFunction()">点击这里</button>
</p>
<script>
    function myFunction(){
        document.getElementById("myPar").innerHTML="你好世界！";
        document.getElementById("myDiv").innerHTML="你最近过得怎么样？";
    }
</script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>代码折行</title>
</head>
<body>
<script>
    document.write("你好\
    世界!");
</script>
</body>
</html>

变量

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script>
    var pi = 3.14;
    var name = "Smith";
    var answer = "yes i am";
    document.write(pi + "<br>");
    document.write(name + "<br>");
    document.write(answer + "<br>");
</script>

</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<button onclick="myFunction()">点击这里</button>
<p id="demo"></p>
<script>
    function myFunction(){
        var carname="Volvo";
        document.getElementById("demo").innerHTML=carname;
    }
</script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<button onclick="myFunction()">点击这里</button>
<p id="demo"></p>
<script>
    function myFunction(){
        var y=5;
        var x=y+2;
        var demoP=document.getElementById("demo");
        demoP.innerHTML="x=" + x;
    }
</script>

</body>
</html>

数据类型

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>数组</title>
</head>
<body>
<script>
    var i;
    var cars = new Array();
    cars[0] = "Saab";
    cars[1] = "Volvo";
    cars[2] = "BMW";
    for ( i = 0; i < cars.length; i++) {
        document.write(cars[i] + "<br>");
    }
</script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>对象</title>
</head>
<body>
<script>
    var person = {
        firstname: "John",
        lastname: "Doe",
        id: 5566
    };
    document.write(person.lastname + "<br>");
    document.write(person["lastname"] + "<br>");
</script>


</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script>
    var person;
    var car="Volvo";
    document.write(person + "<br>");
    document.write(car + "<br>");
    var car = null
    document.write(car + "<br>");
</script>

</body>
</html>

对象

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>对象属性</title>
</head>
<body>
<p id="demo"></p>
<script>
    var person = {firstName:"John",lastname: "Doe",age:50, eyeColor:"blue"};
    document.getElementById("demo").innerHTML =
        person.firstName + "现在" + person.age + "岁.";
</script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>对象方法</title>
</head>
<body>
<p id="demo"></p>
<script>
    var person = {
        firstName: "John",
        lastName: "Doe",
        id : 5566,
        fullName : function (){
            return this.firstName + " " + this.lastName;
        }
    };
    document.getElementById("demo").innerHTML = person.fullName();
</script>


</body>
</html>

函数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>测试实例</title>
    <script>
        function myFunction(){
            alert("Hello World!");
        }
    </script>
</head>
<body>
<button onclick="myFunction()">点我</button>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>调用带参数的函数</title>
</head>
<body>
<button onclick="myFunction('Harry Potter','Wizard')">点击这里</button>
<script>
    function myFunction(name,job){
        alert("Welcome " + name + ", the " + job);
    }
</script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>调用带参数的函数2</title>
</head>
<body>

<p>请点击其中一个按钮，调用带参数的函数</p>
<button onclick="myFunction('Harry Potter','Wizard')">点击这里</button>
<button onclick="myFunction('Bob','Builder')">点击这里</button>

<script>
    function myFunction(name,job){
        alert("Welcome "+name+",the"+job);
    }
</script>

</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>带有返回值的函数</title>
</head>
<body>

<p>本例调用函数执行一个计算，然后返回结果</p>
<p id="demo"></p>
<script>
    function myFunction(a,b){
        return a*b;
    }
    document.getElementById("demo").innerHTML=myFunction(4,3);
</script>

</body>
</html>

作用域

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>局部作用域</title>

</head>
<body>
<p id="demo"></p>

<script>
    myFunction();
    document.getElementById("demo").innerHTML = "carName 的类型是：" + typeof carName;
    function myFunction(){
        var carName = "Volvo";
    }
</script>

</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JavaScript 全局变量</title>
</head>
<body>
<p id="demo"></p>
<script>
    myFunction();
        document.getElementById("demo").innerHTML =
            "我可以显示" + carName;
    function myFunction(){
        carName = "Volvo";
    }
</script>

</body>
</html>

事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>按钮元素中添加了 onclick 属性</title>

</head>
<body>

<button onclick="getElementById('demo').innerHTML=Date()">现在的时间是：</button>
<p id="demo"></p>


</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>修改自身元素的内容</title>
</head>
<body>

<button onclick="this.innerHTML=Date()">现在时间是？</button>

</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>通过事件属性来调用</title>
</head>
<body>
<p>点击按钮执行<em>displayDate()</em>函数.</p>
<button onclick="displayDate()">点这里</button>
<script>
    function displayDate(){
        document.getElementById("demo").innerHTML=Date();
    }
</script>
<p id="demo"></p>

</body>
</html>

type of

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title> typeof 操作符来检测变量的数据类型</title>
</head>
<body>
<p>typeof 操作符返回变量或表达式的类型</p>
<p id="demo"></p>
<script>
    document.getElementById("demo").innerHTML =
        typeof "John" + "<br>"+
        typeof 3.14 + "<br>"+
        typeof false + "<br>"+
        typeof [1,2,3,4] + "<br>"+
        typeof {name:'John',age:34};
</script>


</body>
</html>

正则表达式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>正则表达式</title>
</head>
<body>
<button onclick="myFunction()">点我</button>
<p id="demo"></p>
<script>
    function myFunction() {
        var str = "Visit Runoob";
        var n = str.search(/Runoob/i);
        document.getElementById("demo").innerHTML = n;
    }
</script>


</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>正则表达式</title>
</head>
<body>
<button onclick="myFunction()">点我</button>
<p id="demo"></p>
<script>
  function myFunction() {
    var str = "Visit Runoob";
    var n = str.search(/Runoob/i);
    document.getElementById("demo").innerHTML = n;
  }
</script>


</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>正则表达式</title>
</head>
<body>
<button onclick="myFunction()">点我</button>
<p id="demo">Visit Microsoft</p>
<script>
    function myFunction(){
        var str = document.getElementById("demo").innerHTML;
        var txt = str.replace(/microsoft/i,"Runoob");
        document.getElementById("demo").innerHTML = txt;
    }
</script>


</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>正则表达式</title>
</head>
<body>
<button onclick="myFunction()">点我</button>
<p id="demo">Visit Microsoft</p>
<script>
    function myFunction(){
        var str = document.getElementById("demo").innerHTML;
        var txt = str.replace("Microsoft","Runoob");
        document.getElementById("demo").innerHTML = txt;
    }
</script>

</body>
</html>

表单

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        function validateForm(){
            var x = document.forms["myForm"]["fname"].value;
            if (x == null||x == ""){
                alert("需要输入名字.");
                return false;
            }
        }
    </script>
</head>
<body>

<form name="myForm" action="demo_form.php" onsubmit="return validateForm()"
      method="post">
    名字：<input type="text" name="fname">
    <input type="submit" value="提交">
</form>

</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<p>请输入1到10之间的数字：</p>
<input id="numb">
<button type="button" onclick="myFunction()">提交</button>
<p id="demo"></p>
<script>
    function myFunction(){
        var x, text;
        x = document.getElementById("numb").value;
        if (isNaN(x)||x<1||x>10){
            text = "输入错误";
        }
        else{
            text = "输入正确";
        }
        document.getElementById("demo").innerHTML = text;
    }
</script>

</body>
</html>

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
</head>
<body>

<form action="demo_form.php" method="post">
    <input type="text" name="fname" required="required">
    <input type="submit" value="提交">
</form>

<p>点击提交按钮，如果输入框是空的，浏览器会提示错误信息。</p>

</body>
</html>

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>菜鸟教程(runoob.com)</title>
</head>
<head>
    <script>
        function validateForm(){
            var x=document.forms["myForm"]["fname"].value;
            if (x==null || x==""){
                alert("姓必须填写");
                return false;
            }
        }
    </script>
</head>
<body>

<form name="myForm" action="demo-form.php" onsubmit="return validateForm()" method="post">
    姓: <input type="text" name="fname">
    <input type="submit" value="提交">
</form>

</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<head>
    <script>
        function validateForm(){
            var x=document.forms["myForm"]["email"].value;
            var atpos=x.indexOf("@");
            var dotpos=x.lastIndexOf("@");
            var dotpos=x.lastIndexOf(".");
            if (atpos<1||dotpos<atpos+2||dotpos+2>=x.length){
                alert("不是一个有效的email地址");
                return false;
            }
        }
    </script>
</head>
<body>
<form name="myForm" action="demo-form.php" onsubmit="return validateForm();" method="post">
    Email:<input type="text" name="email">
    <input type="submit" value="提交">
</form>

</body>
</html>


这篇关于javascript从入门到入土的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！


相关编程文章

更多>
本站官方QQ
官方QQ:
23002807

沪ICP备2023033072号-1

     

扫一扫关注最新编程教程