JavaScript 是 Web 的编程语言。
所有现代的 HTML 页面都使用 JavaScript。
JavaScript 是脚本语言
JavaScript 是一种轻量级的编程语言。
JavaScript 是可插入 HTML 页面的编程代码。
JavaScript 插入 HTML 页面后,可由所有的现代浏览器执行。
HTML 页面引入JavaScript的三种方法:
1.写在页面中<head></head>标签或者<body></body>标签中,已<script></script>标签开头
2.直接在当前目录下新建一个.js的文件,在引入时<script src="xxx.js"></script>
注意:html文档的加载执行顺序,从上到下执行,建议js代码写在<body>部分
Js的输出语句:
1.console.log("hello world") //需要到浏览器的控制台查看 alert("hello world")//调用BOM对象下面的Window对象,弹出提示框
2.使用 innerHTML 写入到 HTML 元素。
<!DOCTYPE html>
<html>
<body>
<h1>我的第一个 Web 页面</h1>
<p id="demo">我的第一个段落</p>
<script>
document.getElementById("demo").innerHTML = "段落已修改。";
</script>
</body>
</html>
3.使用 document.write() 方法将内容写到 HTML 文档中。
<!DOCTYPE html> <html> <body> <h1>我的第一个 Web 页面</h1> <p>我的第一个段落。</p> <script> document.write(Date()); </script> </body> </html>
<--!请使用 document.write() 仅仅向文档输出写内容-->
<--!如果在文档已完成加载后执行 document.write,整个 HTML 页面将被覆盖-->
JS基础语法:
数据类型:Number(数字) 包含整数,小数,浮点数 ;String(字符串);Array(数组) ; Object(对象);Function(函数)
JS变量声明:ES5---var x,y=1,2;Es6-- let x 声明变量
/*
let允许你声明一个作用域被限制在块级中的变量、语句或者表达式。在Function中局部变量推荐使用let变量,避免变量名冲突。
作用域规则
let 声明的变量只在其声明的块或子块中可用,这一点,与var相似。二者之间最主要的区别在于var声明的变量的作用域是整个封闭函数。
*/
JS数据类型,对象:
值类型(基本类型):字符串(String)、数字(Number)、布尔(Boolean)、对空(Null)、未定义(Undefined)、Symbol。
引用数据类型:对象(Object)、数组(Array)、函数(Function)。
var a=123//数字 var a="hello world" //字符串 var a=true //布尔值 var a =Null //空值 var a;//Undefind
在 JavaScript中,几乎所有的事物都是对象,JavaScript 对象是拥有属性和方法的数据。声明对象的方法:
JS中使用{}来表示对象
//声明对象
<script>
//声明方法1
var obj={name:"tang","func":add,"age":"23"}
var obj={};
obj["name"]="alex"
console.log(obj)
//声明方法二
var objs=new Object()
objs[name]="alex";
objs["age"]=20;
console.log(objs)
</scrpit>
JS中访问对象属性和方法
访问对象属性:
var obj={name:"tang",age:"20"};
console.log(obj.name,obj.["age"]);//使用对象下标 或 对象.属性来访问
访问方法
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>菜鸟教程(runoob.com)</title> </head> <body> <p>创建和使用对象方法。</p> <p>对象方法作为一个函数定义存储在对象属性中。</p> <p id="demo1"></p> <p id="demo2"></p> <script> var person = { firstName: "John", lastName : "Doe", id : 5566, fullName : function() { return this.firstName + " " + this.lastName; } }; func=person["fullName"]
document.getElementById("demo1").innerHTML = "不加括号输出函数表达式:" + person.fullName;
/*
不加括号输出函数表达式:function() { return this.firstName + " " + this.lastName; }
*/ document.getElementById("demo").innerHTML = person.fullName(); </script> </body> </html>
JS的作用域
JavaScript 作用域
在 JavaScript 中, 对象和函数同样也是变量。
在 JavaScript 中, 作用域为可访问变量,对象,函数的集合。
JavaScript 函数作用域: 作用域在函数内修改。
javascript局部作用域:
变量在函数内声明,变量为局部作用域。
局部变量:只能在函数内部访问。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
<p>局部变量在声明的函数外不可以访问。</p>
<p id="demo"></p>
<script>
myFunction();
document.getElementById("demo").innerHTML = "carName 的类型是:" + typeof carName;
function myFunction()
{
var carName = "Volvo";
}
</script>
</body>
</html>
因为局部变量只作用于函数内,所以不同的函数可以使用相同名称的变量。
局部变量在函数开始执行时创建,函数执行完后局部变量会自动销毁。
javascript 全局变量
变量在函数外定义,即为全局变量。
全局变量有 全局作用域: 网页中所有脚本和函数均可使用。
如果变量在函数内没有声明(没有使用 var 关键字),该变量为全局变量。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
<p>
如果你的变量没有声明,它将自动成为全局变量:
</p>
<p id="demo"></p>
<script>
myFunction();
document.getElementById("demo").innerHTML =
"我可以显示 " + carName;
function myFunction()
{
carName = "Volvo";
}
</script>
</body>
</html>
变量的声明周期:
JavaScript 变量生命周期在它声明时初始化。
局部变量在函数执行完毕后销毁。
全局变量在页面关闭后销毁。
函数参数为局部变量,只对函数起作用
JS的判断语句及条件循环:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
//判断语句
var i=5
if (i<10)
{
console.log(i)
}
else{
alert("false")
}
//JS判断语句 if()---else if()--elseif()--else 注意:==是值想等 ===是全等及比较类型也想等
//JS循环 for while循环
for (var i=0;i<10;i++){
console.log(i)
}
var a=0
while (a>10){
console.log(a);
a++;
}
//a++是先执行代码在加一 ++a是先加1在执行代码 a--、--a同理
//例子:通过for循环遍历数组
var arr=[1,2,3,4,5]
for (i in arr ){
//将下标作遍历
console.log(arr[i])
}
//length JS里面的对象都具有的属性
for (var i=0;i<arr.length;i++){
console.log(arr[i])
}
</script>
</body>
</html>
、