Javascript(一)-02-(Js和html相结合的方式一二)



JavaScript与Html的结合方式


想要将其他代码融入到Html中,都是以标签的形式。


方式一:JS代码存放在标签对<script>js code...</script>中。


示例程序:


<html>
<head>
</head>

<body>
<script type="text/javascript">
alert("hello javascript");
<% 这三行是在javascript中加入java代码的方式
int x = 3;
%>
</script>
</body>
</html>


=============================================================================================================


方式二:当有多个html页面使用到相同的JS脚本时,可以将js代码封装到一个文件中,只要在script标签的src属性因日一个js文件。
(方便后期维护,扩展)


注意:如果在script标签中定义了src属性,那么标签中的内容不会被执行。


例:
<script src="test.js" type="text/javascript">
alert("hello javascript");
</script>
会执行test.js内容,而不执行alert("hello javascript")。
【所以通常导入js文件都用单独的<script>标签来完成】所以代码修改如下:


<script src="test.js" type="text/javascript"></script> 这行是单独导入js文件
<script type="text/javascript"> 以下三行是封装javascript代码
alert("hello javascript");
</script>


注:规范中script标签早期有一个属性language,而现在使用type属性。





















































  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
当然可以!以下是一个使用 HTMLJavaScript 实现的简单登录页面的示例: ```html <!DOCTYPE html> <html> <head> <title>Login Page</title> <style> body { font-family: Arial, sans-serif; text-align: center; } .container { margin-top: 200px; } input { padding: 10px; margin: 5px; } button { padding: 10px 20px; background-color: #4CAF50; color: white; border: none; cursor: pointer; } </style> </head> <body> <div class="container"> <h2>Login Page</h2> <input type="text" id="username" placeholder="Username"><br> <input type="password" id="password" placeholder="Password"><br> <button onclick="login()">Login</button> </div> <script> function login() { var username = document.getElementById("username").value; var password = document.getElementById("password").value; // 在这里进行登录验证,可以使用AJAX发送登录请求到服务器进行验证 // 这里只是一个简单的示例,实际用中需要更加严密的验证机制 if (username === "admin" && password === "password") { alert("登录成功"); // 在这里跳转到登录成功后的页面 } else { alert("用户名或密码错误"); } } </script> </body> </html> ``` 上述示例创建了一个简单的登录页面,其中包含一个用户名输入框、一个密码输入框和一个登录按钮。当用户点击登录按钮时,会调用 `login()` 函数进行登录验证。在 `login()` 函数中,我们获取输入框中的用户名和密码,并进行简单的验证。如果用户名和密码与预期的值(在这个示例中是 "admin" 和 "password")相匹配,则弹出提示框显示登录成功;否则,弹出提示框显示用户名或密码错误。 需要注意的是,这只是一个简单的示例,实际用中需要结合后端服务器进行更复杂的验证和安全机制来保护用户信息。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值