校园网站怎么做HTML建立网站软件
一 JavaScript 的书写形式
1.1 行内式
<input type="button" value="点我一下" onclick="alert('hello akai');" >注意,JS 中的字符串常量可以用单引号表示,也可以使用双引号表示.HTML 中推荐使用双引号,JS 中推荐使用单引号(使用双引号容易出现截断问题)
1.2 内嵌式
写到 script 标签中(建议写在</body>之前)
<script>alert('hello akai');</script>script 标签最好写在 </body> 前,需要根据场景需求放置标签位置,因为HTML 中的代码是根据顺序执行的,可能会出现变量为初始化的场景. 例:
<head><script>console.log(document.getElementById('but').val);</script> </head> <body><input id="but" type="button" value="点我一下" onclick="alert('hello akai');" > </body>
1.3 外部式
写到单独的 .js 文件中(建议写在</head> 之前)
<body><script src="tool.js"></script>
</body>注意, 这种情况下 script 中标签中间不能写代码, 必须空着(写了代码也不会执行)
二 输入输出
2.1 输入: prompt
弹出一个输入框
// 弹出一个输入框
<script>prompt('请输入你的名字:');
</script>可以使用变量来接收 prompt 返回值.
2.2 输出: alert
// 弹出一个输出框
<script>alert('hello');
</script>2.3 输出: console.log
// 在控制台打印
<script>console.log('这是一条测试');
</scipt>三 比较运算符
== 比较相等 , 会进行隐试的转换
=== 比较相等, 不会进行隐试类型的转换
四 数组
4.1 创建数组
<script>// 使用new 关键字创建var arr=new Array();// 使用字面常量方式创建var brr=[]var crr=[1,2,'haha',true];crr='hello';console.log(crr);console(crr[1])//此时控制台上是不会有打印结果的</script>js 中数组的元素下标可以不连续
注意:不要给数组名直接赋值,此时数组中的所有元素都没有了
4.2 新增数组元素
相当于在末尾新增元素,新增的元素默认值为 undefined
<script>var arr=[9,3,4,5];arr.length=5;console.log(arr);console.log(arr[4]);//控制台打印undefined</script>通过下标新增
<script>var arr=[9,3,4,5];arr[5]=5;console.log(arr[4]);</script>使用 push 进行追加元素
<script>var arr=[1,2,3,4,5,6];var newArr=[];for(var i=0;i<arr.length;i++){if(arr[i]%2==1)newArr.push(arr[i]);}</script>4.3 删除数组中的元素
<script>var arr=[1,2,3,4,5,6];//从下标为2 的元素开始,删除2个元素arr.splice(2,2);//slice 不会改变原数组的结构,获取下标2和3 的元素var lo=arr.slice(2,4);console.log(arr);</script>五 函数
5.1 语法格式
function 函数名(形参列表){
函数体
return 返回值
}
//函数调用
函数名 //不考虑返回值
返回值=函数名(实参列表) //考虑返回值
• 函数定义并不会执行函数体内容,必须要调用才会执行,调用几次就会执行几次
<script>hello();hello();hello();function hello(){console.log('hello');}</script>函数的定义和调用的先后顺序没有要求,且创建函数时形参可以不用声明类型
关于参数的个数
1)如果实参的个数比形参的个数多,则多出的参数不参与函数的运算
2)如果室参的个数比形参的个数少,则此时多出来的形参的是为 undefined
5.2 函数表达式
<script>var add=function(){var sum=0;for(var i=0;i<arguments.length;i++){sum+=arguments[i];}return sum;}console.log(add(10,20));//30console.log(add(1,2,3,4));//10console.log(typeof add);//function</script>此时形如 function(){} 这样的写法定义了一个匿名函数,然后将这个匿名函数用一个变量来表示,后面就可以通过这个 add 的变量来调用函数了
六 对象的使用
使用{} 创建对象
<script>var teacher={};//创建一个空对象var student={name: 'akai',height: 170,weight: 120,sayHello: function(){console.log('hello');}}student.sayHello();</script>• 可以直接使用 { } 创建一个空对象
• 属性和方法使用键值对的形式来组织(类似于HashMap)
• 键值对之间使用 , 分割. 最后一个属性后面的,可有可无
• 方法的值是一个匿名函数
使用对象的属性和方法:
<script> //使用 .成员 访问运算符来访问属性 console.log(student.name);// 使用 [ ] 访问属性,此时属性需要加上引号console.log(student['height']);// 调用方法,别忘记加(),student.sayHello();
</script>七. 猜数字
<h3>猜数字游戏</h3>
请输入要1-10的数字:
<input type="text" id="inputNum"><p></p>
<input type="button" value="查看结果" onclick="checkRight()"><br/>
<div id="print"></div><script>function checkRight(){var randNum=Math.floor(Math.random()*10+1);var inputNum=document.getElementById("inputNum").value;var mes;if(inputNum==randNum){mes="<h4>恭喜你猜对了</h4>";}else{mes="<h4>你猜错了,正确答案是:"+randNum+"</h4>";}document.getElementById("print").innerHTML=mes;}</script>
八 表白墙
<body><div style="width: 100%;text-align: center;"><h3>表白墙</h3>谁 :<input id="from"><p></p>对谁 :<input id="to"><p></p>说 :<input id="mes"><p></p><input type="button" value="提交" onclick="check()"><div id="wall"></div></div><script>function check(){var fromM=$("#from");var toM=$("#to");var mesM=$("#mes");if(fromM.val().trim()==""){alert("请先输入你的名字");fromM.focus();return;}if(toM.val().trim()==""){alert("请先输入对方的名字");toM.focus();return;}if(mesM.val().trim()==""){alert("请先输入要发送的信息");mesM.focus();return;}$("#wall").append(fromM.val()+"对"+toM.val()+"说"+mesM.val()+"<p></p>");// 将表格数据清空fromM.val("");toM.val("");mesM.val("");}</script></body>