042-JavaScript基础&BOM
目录
-
-
- 1.js引入三种方式
-
- js引入方式
- 2.基本语法
-
- 1.定义变量
- 2.运算符
- 3.流程控制语句
- 4.定义函数
- 5.局部变量和全局变量
- 6.日期对象
- 7.字符串对象
- 8.Global
- 9.Math
- 10.自定义对象
- 11.prototype
- 12.定时器
- 13.href
-
1.js引入三种方式
js引入方式
<html>
<head>
<meta charset="UTF-8">
<title>title>
head>
<body>
<a href="JavaScript:alert('点我出来了')">点我a>
<script type="text/javascript">
alert("第二种内部引用")
script>
<script type="text/javascript" src="../js/new_file.js" >script>
body>
html>
new_file.js
alert("第三种外部引用方式")
2.基本语法
1.定义变量
<html>
<head>
<meta charset="UTF-8">
<title>title>
head>
<body>
<script type="text/javascript">
var num=123;
var str="王天霸";
var flag = 0; //(false,0、NaN、Undefined、空字符串、null都代表false)
var aa=null;
var bb;
alert(typeof num); //number
alert(typeof str); //string
alert(typeof flag); //number
alert(typeof aa); //object
alert(typeof bb); //undefined
console.debug(num,str,flag,aa,bb) //在浏览器控制台看，123 "王天霸" 0 null undefined
if(false){
alert(".....")
}
script>
body>
html>
2.运算符
<html>
<head>
<meta charset="UTF-8">
<title>title>
head>
<body>
<script type="text/javascript">
var a = 10;
var b = 20;
var c = a + b;
var d = a - b;
var e = a * b;
var f = a / b;
console.debug(c,d,e,f)
var g = true;
var h = false;
if(!(g&&h)){
alert("...")
}
script>
body>
html>
3.流程控制语句
<html>
<head>
<meta charset="UTF-8">
<title>title>
<script type="text/javascript">
var a = 10
var b = 20
alert(a > b ? a : b)
if(a > b) {
alert(a)
} else {
alert(b)
}
for(var i = 0; i < 10; i++) {
console.debug("aaa")
}
var arr = ["王天霸", "阮经天", "力很弱"]
for(i in arr) {
console.debug(i);
console.debug(arr[i]);
}
script>
head>
<body>
body>
html>
4.定义函数
<html>
<head>
<meta charset="UTF-8">
<title>title>
<script type="text/javascript">
function add(a,b){
return(a+b);
}
var num = add(10,11)
alert("num: "+num)
function add2(){ // 尽量不要定义相同的函数名
}
var num2 = add2(20)
alert("num2: "+num2); //undefined
add2(); //null
//匿名函数可以直接用变量来接收和使用
var abc = function(){
alert("我是没有名字的，匿名函数")
}
abc();
script>
head>
<body>
body>
html>
5.局部变量和全局变量
<html>
<head>
<meta charset="UTF-8">
<title>title>
<script type="text/javascript">
var abc = "王天霸" // 全局变量
function add(){
var abc = "力很弱";//加var是局部变量,不加var是重新赋值
alert(abc);
}
add();
alert(abc);
script>
head>
<body>
body>
html>
6.日期对象
<html>
<head>
<meta charset="UTF-8">
<title>title>
<script type="text/javascript">
var date = new Date();
var year = date.getFullYear();
var month = date.getMonth()+1;//国外用法差一个月
var day = date.getDate();
var hours = date.getHours();
var minute = date.getMinutes();
alert(year+"-"+month+"-"+day+" "+hours+":"+minute)
script>
head>
<body>
body>
html>
7.字符串对象
<html>
<head>
<meta charset="UTF-8">
<title>title>
<script type="text/javascript">
var str = "abcdefg";
var i = str.indexOf("abc");
alert("i:"+i); //0
var a = str.substring(2,5);//两个索引位置
alert(a); //cde
var b = str.substr(2,5);//后面是长度
alert(b); //cdefg
var str2 = "ab,cd,ef,g";
var arr = str2.split(","); // 分隔
for(x in arr){
console.debug(arr[x]);
}
var c = str.lastIndexOf("b");//最后一位数的索引位置
alert(c); // 1
script>
head>
<body>
body>
html>
8.Global
<html>
<head>
<meta charset="UTF-8">
<title>title>
<script type="text/javascript">
eval("alert('eval3')")
var str="我是中国人"
var enStr=encodeURI(str)
alert(enStr)
var deStr=decodeURI(enStr)
alert(deStr)
var aa="234234hsdfgjhs"
var b=parseInt(aa);
alert(b)
console.debug(b)
script>
head>
<body>
body>
html>
9.Math
<html>
<head>
<meta charset="UTF-8">
<title>title>
<script type="text/javascript">
var num=12.6;
var i=-667;
var b=Math.abs(i);
alert(b);
alert(Math.ceil(num)); // 向上取整
alert(Math.floor(num)); // 向下取整
alert(Math.random()); // 随机数
alert(Math.max(3,6)); // 最大数
alert(Math.round(num)) // 四舍五入
script>
head>
<body>
body>
html>
10.自定义对象
<html>
<head>
<meta charset="UTF-8">
<title>title>
<script type="text/javascript">
function Foo(){} // 函数与对象语法一模一样，首字母可换为大写
var f1 = new Foo();
f1.name = "张三";
//添加方法
f1.say = function(){
alert(11);
}
console.debug(f1);
//调用方法
f1.say();
// 使用this添加
function Person(name, age) {
this.name = name;
this.age = age;
this.eat = function(){
console.debug("吃鸭腿");
}
}
var p1=new Person('zs',21);
p1.eat();
var p2=new Person();
p2.eat();
script>
head>
<body>
body>
html>
11.prototype
<html>
<head>
<meta charset="UTF-8">
<title>title>
<script type="text/javascript">
//prototype：可以对类添加自定义方法
Date.prototype.hehe=function(){
alert("哈哈");
}
var aa=new Date ();
aa.hehe();
script>
head>
<body>
body>
html>
12.定时器
<html>
<head>
<meta charset="UTF-8">
<title>title>
<script type="text/javascript">
var a = confirm("确定要删除吗")
alert(a)
function setFun(){
console.debug("java是最好的语言")
}
var time =setInterval(setFun,3000);
console.debug("time: "+time)
function clrbtn(){
clearInterval(time)
}
script>
head>
<body>
<button onclick="clrbtn()">清除定时器按钮button>
body>
html>
13.href
<html>
<head>
<meta charset="UTF-8">
<title>title>
head>
<body>
<script type="text/javascript">
// location.href = "https://www.fu365.com/"
var address = location.href
address = decodeURI(address)
alert(address)
script>
body>
html>