1
可以在任何位置,一般在body后
<body onload="load()">
<input type="button" id="btn1" value="事件1" onclick="on()">
<input type="button" id="btn2" value="事件2">
<input type="text" name="username" onblur="bfn()" onfocus="ffn()" onkeydown="kfn()">
</body>
<script>
window.alert("JS"); //浏览器弹出警告框
document.write("Hello JS"); //写入html页面中
console.log("hello js") //控制台输出
var a = 20; //声明全局变量
var a = "HB" //可以重复定义
let b = 2; //定义局部变量,不可重复定义
const c = 3; //定义常量
alert(typeof a) //获取数据类型
alert(typeof null) //object
alert(parseInt("12")) //转换为整型数据12
alert(parseInt("12A45")) //12
alert(parseInt("A12")) //NAN
function add(a,b){
return a+b; //定义函数-1
}
var add = function(a,b){
return a+b; //定义函数-2
}
var result = add(1,2); //调用函数
var arr = new Array(1,2,3,4,5);
var arr = [1,2,3,4]; //创建数组,长度可变类型可变
console.log(arr[2]);
arr[9] = "a";
arr[8] = true;
for (let i = 0; i < arr.length; i++) {
console.log(arr[i]);
}
arr.forEach(function(e){
console.log(e); //遍历数组中有值的元素
})
arr.forEach((e) => {
console.log(e);
}) //方法二 箭头函数
arr.push(7,8,9); //添加元素到数组尾部
arr.splice(2,2); //删除元素
var str = new String("hello"); //定义字符串
var str = " hello aa ";
console.log(str);
console.log(arr.length);
console.log(str.charAt(2)); //返回指定位置字符
console.log(str.indexOf("lo")); //返回索引值
console.log(str.trim()); //去除首尾空格
console.log(str.substring(3,5));
var usr = {
name:"Tom",
age:18,
eat:function(){
alert("吃饭"); //方法一
},
eat(){
alert("吃饭"); //方法二
}
}
alert(usr.name);
usr.eat();
//JSON对象标记法 JavaScript Object Notation
var jsonstr = '{"name":"Tom","age":18,"gender":"male","addr":["北京","西安","上海"]}';
var obj = JSON.parse(jsonstr); //json字符串转为JS对象
alert(obj.name)
alert(JSON.stringify(obj)); //JS对象转为json字符串
//BOM Browser Object Model 浏览器对象模型,允许与浏览器对话
//window浏览器窗口对象 window.可省略
window.alert("hello"); //显示有一段消息和一个确认按钮的对话框
var flag = confirm("确认删除?"); //显示有一段消息和确认取消按钮的对话框
var i = 0;
setInterval(function(){
i++;
console.log("定时器执行了"+i+"次")
},2000); //按指定毫秒周期调用函数或计算表达式
setTimeout(function(){
alert("3s");
},3000); //延迟指定时间执行一次
alert(location.href); //返回浏览器地址
location.href="https://www.bilibili.com"; //点击确认自动跳转
//Document Object Model 文档对象模型,将标记语言的组成部分封装为对应的对象
//Core DOM: Document Element Attribute Text Comment
//XML DOM. HTML DOM: Image Button
var divs = document.getElementsByTagName('div');
for (let i = 0; i < divs.length; i++) {
alert(divs[i]);
}
var div1 = divs[0];
div1.innerHTML = "666";
//事件监听,onclick鼠标单击,onblur元素失去焦点,onfoucus元素获得焦点
//onload某个页面或图像被完成加载,onsubmit表单提交,onkeydown按下键盘,onmouseover onmouseout鼠标移开元素
function on(){
alert("事件1被点击了")
}
document.getElementById('btn2').onclick=function(){
alert("事件2被点击了")
}
function load(){
console.log("页面加载完成");
}
function bfn(){
console.log("失去焦点");
}
function ffn(){
console.log("获得焦点");
}
function kfn(){
console.log("按下键盘");
}
</script>
2. 数据类型
原始类型
number:数字(整数,小数,NAN),String:字符串,单双引均可,boolean:布尔,null:空对象,undefined:声明的变量未初始化的默认值
比较运算符 ===全等,不会进行类型转换
其他类型转为boolean
number:0和NAN为false
string:空字符串为false
NULL和undefined为false
JS对象
Array String JSON BOM浏览器对象 DOM文档对象