javascript从入门到入土

Javascript是web编程语言

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

所有html页面都使用javascript页面

javascript非常容易学

html定义网页内容
css描述网页布局
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>

posted @ 2022-04-24 20:54 鱼子酱caviar 阅读(80) 评论(0) 编辑收藏举报

刷新页面返回顶部

登录后才能查看或发表评论，立即登录或者逛逛博客园首页

相关博文：

· HTML 5 入门

· 前端三剑客 html css js

· JS-JavaScript初识

· 【学习笔记】JS

· Javascript基础入门

阅读排行：
· 分享 3 个 .NET 开源的文件压缩处理库，助力快速实现文件压缩解压功能！
· Ollama——大语言模型本地部署的极速利器
· 使用C#创建一个MCP客户端
· 分享一个免费、快速、无限量使用的满血 DeepSeek R1 模型，支持深度思考和联网搜索！
· Windows编程----内核对象竟然如此简单？

公告

昵称：鱼子酱caviar
园龄： 4年
粉丝： 2
关注： 0

+加关注

2025年3月

日

一

二

三

四

五

六

鱼子酱

javascript从入门到入土

输出

js语法

语句

变量

数据类型

对象

函数

作用域

事件

type of

正则表达式

表单

公告

搜索

常用链接

随笔分类

随笔档案

阅读排行榜

推荐排行榜

	<!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>
	<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>