<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=<device-width>, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<input type="button" value="唐伯虎" onclick="alert('秋香')">
</body>
</html>
image.png
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=<device-width>, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
alert('hello world');
</script>
</body>
</html>
image.png
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=<device-width>, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script src="my.js"></script>
</body>
</html>
alert('hello world');
image.png
image.png
注释：
1.单行注释 // ctrl+shift+/
2.多行注释 /* */ shift + alt + a
alert();浏览器弹出警示框
console.log();控制台打印输出信息(用于测试，console控制台log日志)
prompt();浏览器弹出输入框，用户可以输入
第一个案例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<!--JS代码需要编写到script标签中-->
<script type="text/javascript">
/*
* 控制浏览器弹出一个警告框
* alert("哥，你真帅啊！！");
*/
/*
* 让计算机在页面中输出一个内容
* document.write()可以向body中输出一个内容
* document.write("看我出不出来~~~");
*/
/*
* 向控制台输出一个内容
* console.log()的作用是向控制台输出一个内容
* console.log("你猜我在哪出来呢？");
*/
alert("哥，你真帅啊！！");
document.write("看我出不出来~~~");
console.log("你猜我在哪出来呢？");
</script>
</head>
<body>
</body>
</html>
image.png
image.png
alert('sad'); 控制浏览器弹出一个警告框
document.write("asdasd"); 向body中写入内容
console.log("asdasd"); 向F12控制台输出一个内容
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=<device-width>, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
//这是一个输入框
prompt('请输入年龄');
</script>
</body>
</html>
image.png
按代码书写顺序依次执行
JS编写位置
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<!--
可以将js代码编写到外部js文件中，然后通过script标签引入
写到外部文件中可以在不同的页面中同时引用，也可以利用到浏览器的缓存机制
推荐使用的方式
-->
<!--
script标签一旦用于引入外部文件了，就不能在编写代码了，即使编写了浏览器也会忽略
如果需要则可以在创建一个新的script标签用于编写内部代码
-->
<script type="text/javascript" src="js/script.js"></script>
<script type="text/javascript">
alert("我是内部的JS代码");
</script>
<!-- JS代码跟css一样，从上到下一行一行执行 -->
<!--
可以将js代码编写到script标签
<script type="text/javascript">
alert("我是script标签中的代码！！");
</script>
-->
</head>
<body>
<!--
可以将js代码编写到标签的onclick属性中
当我们点击按钮时，js代码才会执行
虽然可以写在标签的属性中，但是他们属于结构与行为耦合，不方便维护，不推荐使用
-->
<button onclick="alert('讨厌，你点我干嘛~~');">点我一下</button>
<!--
可以将js代码写在超链接的href属性中，这样当点击超链接时，会执行js代码
-->
<a href="javascript:alert('让你点你就点！！');">你也点我一下</a>
<a href="javascript:;">你也点我一下</a><!--也可以这样写，占位-->
</body>
</html>
<button onclick="alert('讨厌，你点我干嘛~~');">点我一下</button>当点击按钮时，弹出警告框
image.png
<a href="javascript:alert('让你点你就点！！');">你也点我一下</a>点击超链接后 ，显示弹出警告框：
image.png
网友评论