JavaScript基础

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）。变量值被称为变量。

固定值为字面量

1638436669773

var 定义变量

1638436744051

注释

1638437155451

变量

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

1638530315417

1638530460583

'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 "你好";
    }
}

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

函数

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

1638530810623

事件

onchange

HTML元素改变
onclick

点击
onmouseover

移动鼠标
onmouseout

移开鼠标
onkeydown

按下键盘
onload

完成页面加载

表单

1638532549584

1638532591549

posted @ 2021-12-08 20:54 残梦196 阅读(49) 评论(0) 收藏举报

刷新页面返回顶部