js引入方式
1. 内部脚本
内部脚本:将JS代码定义在HTML页面中
- JavaScript代码必须位于<script></script>标签之间
- 在HTML文档中,可以在任意地方,放置任意数量的<script>
- 一般会把脚本置于<body>元素的底部,可改善显示速度
弹出一个警告窗口
<script>
alert("Hello JavaScript")
</script>
2. 外部脚本
将JS代码定义在外部JS文件中,然后引入到HTML页面中
外部JS文件中,只包含JS代码,不包含<script>标签
????<script>标签不能自闭合
<script src="01.js"></script>
js基础语法
1. 输出语句
//输出语句
//方式一 弹出警告框
window.alert("hello");
//方式二 写入HTML中
document.write("world");
//方式三 输出在控制台
console.log("yeyeye");
html文件:
<script src="01.js"></script>
【运行结果】
2. 变量
//var是全局变量、可以重复定义
var a = 1;
var b = '1';
var c = "aaa";
console.log(a); console.log(b); console.log(c);
a = 3.14;
console.log(a);
【运行结果】
//const常量
const $dollar = 666;
$dollar = 66;
alert(dollar);
var a;
alert(typeof(a)); //undefined
alert(typeof(null)); //object
【运行结果】
常量不可被修改
3. 数据类型
注意与其他语言不同的是:有==和===
== 只比较值,=== 既比较值又比较类型
//== 只比较值,=== 既比较值又比较类型
var a;
a = 10;
alert(a === "10"); //false
alert(a == "10"); //true 发生类型转换
alert(typeof(a));
js函数
//定义一个函数 不需要写返回类型
function sum(a, b){
return a+b;
}
alert(sum(1, 2.5)); //result = 3.5
alert(sum(1, "1")); //result = 11
alert(sum(NaN, 2)); //result = NaN
alert(sum(undefined, 2)); //result = NaN
js对象
Array对象
//定义数组,中括号
var arr = [1, 2, 3, 4];
arr[10] = 50;
for(let i=0; i<arr.length; i++)
{
console.log(arr[i]); //打印到控制台
}
【运行结果】
forEach方法:仅遍历有值的元素
//forEach: 遍历数组中有值的元素
arr.forEach(function (e) {
console.log(e);
});
arr.forEach(element => {
console.log(element);
});
两种效果一样
【运行结果】
push添加 & splice删除
var arr = [1, 2, 3, 4];
arr.push(6, 7, 8);
console.log(arr);
arr.splice(0, 3); //删除1,2,3
console.log(arr);
【运行结果】
String字符串 思春
//创建字符串
var str = "hello world";
console.log(str.length); //length
console.log(str.charAt(1)); //charAt()是函数用()
console.log(str.indexOf("wo")); //indexOf返回"wo"位置index=6
var str1 = str.trim(); //trim
console.log(str1);
console.log(str.substring(0,5)); //substring截取子串
【运行结果】
JSON对象
自定义对象:
//json对象
var student = {
name: "Bob",
age: 18,
gender: "male",
eat(){
alert("吃饭");
}
}
//调用
console.log(student.name);
student.eat();
【运行结果】
JSON字符串对象:
//创建JSON字符串对象
var jsonStr = '{"name": "Marry", "age": 18}';
var object = JSON.parse(jsonStr); //JSON字符串对象转js对象
alert(object.age);
alert(JSON.stringify(object)); //js对象转JSON字符串对象
【运行结果】
BOM对象:
警告框和对话框
//BOM
window.alert(111); //弹出警告框
alert(111);
var flag = confirm("吃饭了吗"); //弹出对话框
alert(flag);
【运行结果】
点确定=true,取消=false
两个定时器:
//定时器
var i = 0;
setInterval(function(){
i++;
console.log("执行" + i + "次");
}, 2000) //每2秒执行1次
【运行结果】周期性执行
var i = 0;
//仅执行一次的定时器
setTimeout(() => {
i++;
console.log("执行" + i + "次");
}, 2000);
【运行结果】
location地址栏对象
//location地址栏对象
location.href = "https://www.baidu.com"; //点确定跳转百度
alert(location.href);
【运行结果】