JavaScript
一.输出
1.在浏览器的控制台输出:console.log("要输出的内容")
2.直接输出在页面中:document.write("要输出的内容")
二.函数
1.语法:function 方法名(参数列表){方法体}
2.js可以有返回值,也可以没有返回值,返回值为任意类型
3.调用函数式,传入的参数可以与函数参数列表中参数个数不同,如果传的参数多,多余的则会被舍弃,如果传的参数少,那么未给定的参数是undefined类型
4.方法中定义变量如果没有写var那么直接定义的是全局变量,可以在直接其他方法中使用
二.提示框
1.允许输入内容的提示框:
var content = prompt('提示内容')
document.write(content)
2.确定/取消提示框:
var flag = confirm('确认删除?')
3.确认提示框:
alert('成功')
三.时间对象,示例代码:
<script type="text/javascript">
var date = new Date()
document.write(date)
</script>
四.焦点对象,示例代码:
<script type="text/javascript">
var userInput = document.getElementById('username')
userInput.onfocus = function () { //获取焦点
userInput.style.backgroundColor = '#f00'}
userInput.onblur = function () { //失去焦点
userInput.style.backgroundColor = '#0f0'}
</script>
五.点击事件
<button id="btn_1" onclick="fun1()">click me</button> //单击
<input type="submit" onclick="fun1()">
<input type="button" id="double" value="double click"> //双击
<script type="text/javascript">
function fun1() {
alert("You have clicked")}
var doubleInput = document.getElementById("double") //获取js对象
doubleInput.ondblclick=function () {
alert('666')}
</script>
六.鼠标事件
<script>
var circle = docment.getElementById("id") //获取js对象
circle.onmousedown = function(){ //获取点击事件
circle.style.backgroundColor = 'blue'} //点击时背景颜色会改变
</script>
七.键盘事件
<div id="down"></div>
<script>
window.onkeydown = function(ev){ //键盘事件
var down = document.getElementById('down') //获取js对象
down.innerText += ev.key //捕获键盘输入,纯文本
console.log(ev) //输出到页面
}
window.onkeypress = function(ev){ //键盘事件
var down = document.getElementById('down') //获取js对象
down.innerText += String.fromCharCode(ev.charCode) //
}
onkeydown和onkeyPress的区别:
1.onkeydown会先于onkeypress得到通知
2.onkeypress无法捕获系统按键,如ctrl,shift等
3.onkeydown捕获的keycode是不区分大小写的
八.DOM:文档对象模型,浏览器获取dom去渲染页面,原本的html是不会改变的,如查看源码一直不变
<input value="ccc"> //设置初始值
<button id = "aaa">click</button> //触发点击事件
<script>
var input = document.getElementByTagName("input")[0] //通过标签获取js对象
input.value = 'zzzz' //设置input标签显示的值,即dom属性
document.getElementById('aaa').onclick = function(){ //点击事件
var htmlValue = input.getAttribute('value') //获取html初始值
}