javascript基本语法(一)

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运行截图

javascript基本语法(一)_第1张图片

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运行截图

javascript基本语法(一)_第2张图片

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("

网页标签显示输出

"
) };
script> html>

c 示例html运行截图

javascript基本语法(一)_第3张图片

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 点击确定按钮前

javascript基本语法(一)_第4张图片

c.2 点击确定按钮后

javascript基本语法(一)_第5张图片

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>

c 示例html运行截图

javascript基本语法(一)_第6张图片

你可能感兴趣的:(javascript基础知识,javascript,前端,html,JS,ES)