当前位置：首页 > JavaScript > 正文内容

js编程代码大全及例子

代码学堂2023-08-07 10:44:36JavaScript88

JavaScript是一种功能强大的脚本语言，用于在Web浏览器中增加动态功能和交互性。以下是一些常用的JavaScript代码：

1.弹出警告框

javascript

alert("这是一个警告框！");

2.处理表单提交

javascript

document.getElementById("myForm").submit();

3.创建并插入新的HTML元素

javascript

var newElement = document.createElement("p");   // 创建一个新的<p>元素  
newElement.innerHTML = "这是一个新的段落。";      // 设置新元素的内容  
document.body.appendChild(newElement);           // 将新元素添加到<body>中

4.使用循环来迭代数组

javascript

var array = ["苹果", "香蕉", "橙子"];  
for (var i = 0; i < array.length; i++) {  
    console.log(array[i]);  
}

5.使用事件处理器

javascript

document.getElementById("myButton").onclick = function() {  
    alert("按钮被点击了！");  
};

下面是一个简单的HTML、JavaScript和CSS的示例，该示例在页面加载时弹出一个欢迎消息。

html

<!DOCTYPE html>  
<html>  
<head>  
    <title>简单的欢迎页面</title>  
    <link rel="stylesheet" type="text/css" href="styles.css">  
</head>  
<body>  
    <h1 id="welcome">欢迎来到我的网站!</h1>  
    <button onclick="showGreeting()">点击这里</button>  
    <script src="script.js"></script>  
</body>  
</html>

JavaScript (在script.js文件中)

javascript
function showGreeting() {  
    alert("你好!");  // 当点击按钮时，将显示一个包含"你好!"的警告框。  
}

CSS (在styles.css文件中)

这部分代码是用来定义页面的样式的，例如字体、颜色、布局等。为了简单起见，这个例子中的CSS代码比较简单。你可以根据需要添加更多的样式。

现在，让我们来看看这个示例代码是如何工作的。当用户打开这个HTML页面时，他们将看到一个标题（“欢迎来到我的网站!”）和一个按钮。当他们点击这个按钮时，将触发showGreeting函数，该函数将弹出一个包含“你好!”的警告框。这个警告框是通过JavaScript中的alert函数创建的，它将弹出一个包含给定消息的模态窗口。

<!DOCTYPE html>  
<html>  
<head>  
    <title>简单的欢迎页面</title>  
    <link rel="stylesheet" type="text/css" href="styles.css">  
</head>  
<body>  
    <h1 id="welcome">欢迎来到我的网站!</h1>  
    <button onclick="showGreeting()">点击这里</button>  
<script>
function showGreeting() {  
    alert("你好!");  // 当点击按钮时，将显示一个包含"你好!"的警告框。  
}
</script>  
</body>  
</html>