javascript基本语法(一)

最新推荐文章于 2024-10-16 16:26:58 发布

SSS4362

最新推荐文章于 2024-10-16 16:26:58 发布

阅读量285

点赞数 2

分类专栏： javascript基础知识文章标签： javascript 前端 html JS ES

本文链接：https://blog.csdn.net/SSS4362/article/details/126725882

版权

javascript基础知识专栏收录该内容

6 篇文章 0 订阅

订阅专栏

javascript基本语法(一)

1.输出的三种形式

1.1 弹窗输出

a 语法

alert("弹窗显示信息");

b 示例html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>输出语句之弹窗测试</title>
</head>
<body>
   <button id="btn1" >点击我</button>  
</body>
<script>
   var ele=document.getElementById("btn1");
   ele.onclick=function(){
        alert("输出语句之弹窗测试")
   };
</script>
</html>

c 示例html运行截图

在这里插入图片描述

1.2 控制台打印输出

a 语法

console.log("输出之控制台打印输出")

b 示例html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>输出之控制台打印输出</title>
</head>
<body>
   <button id="btn1" >点击我</button>  
</body>
<script>
   var ele=document.getElementById("btn1");
   ele.onclick=function(){
      console.log("输出之控制台打印输出")
   };
</script>
</html>

c 示例html运行截图

在这里插入图片描述

1.3 网页标签显示输出

a 语法

document.write("网页标签内容")

b 示例html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>网页标签显示输出</title>
</head>
<body>
   <button id="btn1" >点击我</button>  
</body>
<script>
   var ele=document.getElementById("btn1");
   ele.onclick=function(){
      document.write("<h3>网页标签显示输出</h3>")
   };
</script>
</html>

c 示例html运行截图

在这里插入图片描述

2 输入的两种形式

2.1 弹窗输入

a 语法

prompt("弹窗提示输入内容");

b 示例html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>输出之弹窗输出</title>
</head>
<body>
</body>
<script>
   var name=prompt("请输入您的姓名");
   console.log(name);
</script>
</html>

c 示例html运行截图

c.1 点击确定按钮前

在这里插入图片描述

c.2 点击确定按钮后

在这里插入图片描述

2.2 文本框输入

a 思路

//先获取指定位置元素
var ele=document.getElementsByName("username")[0];
//通过某一事件得到对应位置元素的值
 console.log(ele.value);

b 示例html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>输出之弹窗输出</title>
</head>
<body>
    <input type="text" name="username" id="">
</body>
<script>
    // 通过name属性对应的值去找到对应的标签内容 
   var ele=document.getElementsByName("username")[0];
   console.log(ele);
   ele.onblur=function(){
    console.log(ele.value);
   }
  
</script>
</html>