JavaScript基础

2022-11-25 09:47:23

JavaScript

JavaScript（简称“JS”） 是一种具有函数优先的轻量级，解释型或即时编译型的编程语言。作为开发Web页面的脚本语言而出名，也被用到了很多非浏览器环境中，JavaScript 基于原型编程、多范式的动态脚本语言，并且支持面向对象、命令式、声明式、函数式编程范式

  • 功能

    嵌入动态文本于HTML页面

    对浏览器文件做出响应

    读写HTML元素

    在数据被提交服务器前验证数据

    检测访客的浏览器信息，控制cookies

    基于Node.js技术进行服务器编程

  • 运行模式

    广泛用于Web应用开发,常用来为网页添加各式各样的动态功能 ，

    通常JavaScript脚本是通过嵌入在HTML中来实现自身的功能的

  • 特点

    脚本语言

    基于对象

    简单

    动态性

    跨平台性

第一个JavaScript

首先 建立一个html页面

其次 在head或者head部分插入JavaScript代码

（ 在HTML body部分中的JavaScript会在页面加载的时候被执行。 在HTML head部分中的JavaScript会在被调用的时候才执行 ）

或者单独编写JavaScript，在导入

<script src="myScript.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">    
    <title>baidu.com</title>    
    <script>        
        document.write("Hello World");        
        document.writeln("3Year1Class");        
        document.write("death death");  
        //write与writeln的区别，后者输出字符串后还会输出换行符，页面显示为空格
        //真正要想在显示的时候换行，请使用<br>或<br/>。
        //<pre>和<code>内的元素在显示的时候会保留源码中的空格或换行符。
    </script>
    </head>
    <body>
        <script>    
            document.write("<h1>一级标题</h1>");    
            document.write("<p>换行</p>");    
            document.write("<strong>加粗</strong>");
        </script>
    </body>
</html>

JavaScript方法

HTML DOM alert()方法

（ DOM (Document Object Model)（文档对象模型） ）

alert() 方法用于显示带有一条指定消息和一个 OK 按钮的警告框。 

<button type="button" onclick="alert('hello world')"></button>
<!-- alert()方法>
修改HTML的内容

使用该方法来“查找” id="demo" 的 HTML 元素，并把元素内容（innerHTML）更改为 "Hello JavaScript"：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">    
    <title>baidu.com</title>    
    <script> 
        function myFunction()
        {            
            x = document.getElementById("demo");            
            x.innerHTML = "good bye!!!";        
        }    
    </script>
    </head>
    <body>
        <p id="demo">Hello My Dear</p>
        <button type="button" onclick="myFunction()"></button>
    </body>
</html>
修改HTML的图片
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>picture</title>
  <script>
    function imageChange()
    {
        element=document.getElementById(`myImage`);
        if(element.src.match("button"))
        {
            element.src = "../picture/1.png";
        }else
        {
            element.src = "../picture/2_button.png";
        }
    }
  </script>
</head>
<body>
<img loading="lazy" id = "myImage" onclick="imageChange()" src="../picture/1.png" height="180" width="100">
<p>点击改变图片</p>
​
</body>
</html>

  • 修改HTML样式

    onclick="document.getElementById('demo').style.fontSize='35px'"

  • 隐藏HTML元素

    document.getElementById("demo").style.display="none";

  • 显示HTML元素

    document.getElementById("demo").style.display="block";

注意

HTML 输出流中使用 document.write，相当于添加在原有html代码中添加一串html代码。而如果在文档加载后使用（如使用函数），会覆盖整个文档。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        function myfunction(){
            document.write("使用函数来执行doucment.write，即在文档加载后再执行这个操作，会实现文档覆盖");
        }
        document.write("<h1>这是一个标题</h1>");
        document.write("<p>这是一个段落。</p>");
    </script>
    <script src="js/demo.js"></script>
</head>
<body>
<p >
    您只能在 HTML 输出流中使用 <strong>document.write</strong>。
    如果您在文档已加载后使用它（比如在函数中），会覆盖整个文档。
</p>
<button type="button" onclick="myfunction()">点击这里</button>
</body>
</html>
​
 
​

JavaScript的输出

JavaScript 没有任何打印或者输出的函数

显示数据

  • 使用 window.alert() 弹出警告框。

  • 使用 document.write() 方法将内容写到 HTML 文档中。

  • 使用 innerHTML 写入到 HTML 元素。

  • 使用 console.log() 写入到浏览器的控制台。

window.alert("Hello World");
document.write("这是一场试炼");
console.log("准备好了吗");
function myfunction()
{
    element = document.getElementById("test");
    element.innerHTML = "bye bye";
}
// 主要是方便你调式javascript用的, 你可以看到你在页面中输出的内容。

//相比alert他的优点是：


//他能看到结构化的东西，如果是alert，弹出一个对象就是[object object],但是console能看到对象的内容。


//console不会打断你页面的操作，如果用alert弹出来内容，那么页面就死了，但是console输出内容后你页面还可以正常操作。


//console里面的内容非常丰富，你可以在控制台输入 console，然后就可看到：

console.log脚本

(function() {
    var _log = console.log;
    console.log = function() {
        if (typeof(arguments[0]) != 'object' && typeof(arguments[0]) != 'function' && arguments.length == 1) {
            _log.call(console, '%c' + arguments[0], "text-shadow: 0 1px 0 #ccc,0 2px 0 #c9c9c9,0 3px 0 #bbb,0 4px 0 #b9b9b9,0 5px 0 #aaa,0 6px 1px rgba(0,0,0,.1),0 0 5px rgba(0,0,0,.1),0 1px 3px rgba(0,0,0,.3),0 3px 5px rgba(0,0,0,.2),0 5px 10px rgba(0,0,0,.25),0 10px 10px rgba(0,0,0,.2),0 20px 20px rgba(0,0,0,.15);font-size:5em")
        } else {
            _log.call(console, ...arguments)
        }
    }
})()
//改变console.log输出的文本样式

语法

JavaScript 语句定义两种类型的值：混合值和变量值。

混合值被称为字面量（literal）。变量值被称为变量。

固定值为字面量

JavaScript基础

var 定义变量

JavaScript基础

注释

JavaScript基础

变量

变量是用于存储信息的"容器"

JavaScript基础

JavaScript基础

'use strict';
var num = 1;
var num1 = "string";
var num2 = 3,num4 = 4,num5 = 5;
var num = true;
var student = {
    name : "张三",
    age  : 18,
    shout : function ()
    {
        return "你好";
    }
}

=== 为绝对相等，即数据类型与值都必须相等。

函数

函数是由事件驱动的或者当它被调用时执行的可重复使用的代码块

JavaScript基础

事件

  • onchange

    HTML元素改变

  • onclick

    点击

  • onmouseover

    移动鼠标

  • onmouseout

    移开鼠标

  • onkeydown

    按下键盘

  • onload

    完成页面加载

表单

JavaScript基础

JavaScript基础




上一篇：学习python的心酸历程----文件


下一篇：python记录实验数据的方法之保存日志