ICode9
精准搜索请尝试： 精确搜索
首页
编程语言>
数据库
系统相关
互联网
其他分享
Python
Java
JavaScript
android
PHP
首页 > 编程语言> 文章详细

javascript从入门到入土

2022-04-24 21:00:39  阅读：212  来源： 互联网

标签：function 入门 demo javascript getElementById innerHTML 入土 var document


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>

标签：function,入门,demo,javascript,getElementById,innerHTML,入土,var,document
来源： https://www.cnblogs.com/instore/p/16187512.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

关于我们 | 联系我们 | 留言反馈

专注分享技术，共同学习，共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有