<!--
js一般是写在head标签里面
-->
<script>
document.write("我是天才！！");
document.write("我是废才!!");
</script><script>
document.write("我是天才<br/>");
document.write("我是废才<hr/>");
document.write("我是鬼才 ");
document.write("我是人才");
</script><!--
1，书写位置：js是一种弱类型的语言，所以语法不是特别的严格，但是一般js代码是写在head标签里面
2， 执行顺序：js的解释执行是从上往下进行的。
-->
<script>
alert("哈哈");
alert("哼哼");
alert("嘎嘎");
</script><!--
使用src属性导入外部的js文件
引入js文件需要占用一个script标签，执行代码时需要另取一个script标签
-->
<script src="../js/mylove.js"></script>
<script>
var sum = getSum(2, 3);
alert(sum);
alert("我是来自于内部的js");
</script>
mylove.js:
alert("我是来自于外部的js文件代码");
function getSum(a,b){
return a + b;
}<script> // 由于javascript是一种弱类型语言，所以定义变量都是使用一个关键字var // 定义一个数字类型 var number = 10; // 定义一个字符串 var str = "aaabbb"; // 定义一个数组 var arr = [1,2,3,"haha","yue"]; </script>
<script>
// 输入1-10之间的数字，如果大了则提示输入过大，如果小了则提示输入小了，在1-10之间则把输入的数字打印出来！
var number= prompt("输入一个1-10之间的数字");
if(number > 10){
alert("你输入的数字大了！");
}else if(number < 1){
alert("你输入的数字小了！");
}else{
alert("你输入的数字为：" + number);
}
</script><script>
// 1 警告框
alert("我是天才");
// 2 确认框,返回值为true则表示确认，false表示取消
var result = confirm("欲练此功必须自宫，你还练吗？");
if(result){
alert("自宫成功！");
}else{
alert("怂了吧!~?");
}
// 3 提示框输入框
var name = prompt("请输入名字","王八");
if(name!=""&& name!=null){
alert("您输入的名字为：" + name);
}
</script><script>
// 求和函数
function getSum(a, b) {
return a + b;
}
var sum = getSum(3, 6);
alert("和为：" + sum);
// 定义重载函数
function add(){
alert("我是无参函数！");
}
function add(i,j){
alert("我是有参函数!");
var sum = i + j;
alert("有参函数和为：" + sum);
}
add();
// 调用无参的函数时，结果却是弹出有参的提示
// 这是因为js中的函数不能重载，只可以有一个同名函数，多了的会被最后的一个覆盖掉
add(2,4); // 正常输出
add(2,4,6); // 输出和仍为6，因为函数只有两个参数，多传入的值是无效的
</script>
<script>
// 使用for循环求1-100的和
var sum = 0;
for (var i = 1; i <= 100; i++) {
sum += i;
}
alert("1-100的和是：" + sum);
// 使用for循环打印九九乘法表
for (var i = 1; i <= 9; i++) {
for (var j = 1; j <= i; j++) {
document.write(j + "*" + i + "=" + j * i + " ");
}
document.write("<br/>");
}
// for循环打印标题
for(var i = 1; i <=7;i ++){
document.write("<h"+i+">" +"我是"+ i + "级标题"+"<h"+i+">");
}
// for循环遍历月份
document.write("<br>"+"<select>");
for(var i = 1; i <=12;i ++){
document.write("<option>");
document.write(i);
document.write("</option>");
}
document.write("</select>");
// 高级for,x是角标
var str = ["haha","hdhd",99,10,'ooo'];
for(x in str){
alert(str[x]);
}
</script>
14. 시간과 배열
<script>
/**
* js中处理异常有两种方式，第一种是用try{} catch(){}语句块处理
* 还有就是你认为代码会出错时用throw关键字把错误跑出去，然后用catch里进行捕获
*/
var count = 3 * 8;
haha 让你输出不了;
alert(count);
function add(a, b) {
try {
hahahaha
return a + b;
} catch (err) {
alert("出错了吧");
}
}
add(1,4);
function value(){
var sum = prompt("输入1-100的数字：");
if(sum == "" || sum==null){
alert("输入为空啊");
return;
}
try{
if(sum > 100){
throw "e1";
}else if( sum < 1){
throw "e2";
}else{
alert("你输入的数字是：" + sum);
}
}catch(e){
if(e == "e1"){
alert("输入过大了");
}else if(e == "e2"){
alert("输入过小了");
}
}
}
value();
</script>
16. 돔과 함께<script>
/**
* window对面表示打开的浏览器对象，主要包括了五个子对象
* 1. Navigator 导航器对象
* 2. History 浏览器历史纪录
* 3. Screen 屏幕
* 4. Document 文档
* 5. Location 位置
*/
</script>
<script>
function me_Navigator(){
document.write(navigator.appCodeName + "<br/>");
document.write(navigator.appVersion + "<br/>");
document.write(navigator.appName + "<br/>");
document.write(navigator.geolocation + "<br/>");
}
me_Navigator();
// 上一步
function clickme(){
history.back();
}
// 跳转
function tiancai(){
var result = confirm("要去百度官网吗？");
if(result){
location.href="index.html";
}
}
</script>
17 . html 태그를 얻으려면<html>
<head>
<meta charset="utf-8">
<title></title>
<script>
// 电子显示时钟
function showTime(){
var date = new Date();
var canvas = document.getElementById("showcanvas");
var hours = date.getHours();
var min = date.getMinutes();
var sec = date.getSeconds();
canvas.innerHTML = "<h3>" + hours + ":" + min + ":" + sec + "</h3>";
}
setInterval("showTime()",1000);
// 倒计时显示器
var i = 0;
var t = 0;
function backTime(){
var date = new Date();
var canvas = document.getElementById("showcanvas");
var hours = date.getHours();
var min = date.getMinutes();
var sec = date.getSeconds();
canvas.innerHTML = "<h3>" + hours + ":" + min + ":" + sec + "</h3>";
i ++ ;
if(i == 5){
clearInterval(t);
}
}
t = setInterval("backTime()",1000);
</script>
</head>
<body onload="backTime()">
<div id="showcanvas"></div>
</body>
</html>
18. Jquery의 우아한 강과 호수
렌더링은 다음과 같습니다데이터 파일은 다음과 같습니다
{"picpath":"http://127.0.0.1:8020/Day03_javascript_%E4%BD%9C%E4%B8%9A/img/food/food5.jpg",
“설명”:”KFC” 
},
{"picpath":"http://127.0.0.1:8020/Day03_javascript_%E4%BD%9C%E4%B8%9A/img/food/food7.jpg",
"desc":"홍리 마을"
사진 자료는 다음과 같습니다
코드는 다음과 같습니다. 다음과 같습니다
<script>
var i = 0;
var t;
function image(){
document.getElementById("img").src="../img/"+ i +".png";
i ++;
if(i == 7){
clearInterval(t);
alert("画完了，好玩吧！");
}
}
t = setInterval("image()",1000);
</script>
</head>
<body onload="image()">
<img id="img"/>
</body>위 내용은 JavaScript 빠른 시작 사례 튜토리얼의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
