<!DOCTYPE HTML>
<HTML>
<head>
<!-- 1.在HTML中直接编写JS-->
<xmp>
1.在HTML中直接编写JS
在<head>标签内包含<script>标签，在其中编写JS代码.
<script text="text/javascript">
alert("hello world");
</script>
</xmp>
<script text="text/javascript">
alert("hello world");
</script>
<!--2.引入外部JS -->
<xmp>
2.引入外部JS
将JS代码提取到单独的js文件中。再在HTML中页面中通过标签引入.
<script text="text/javascript" src="js01.js">
</script>
注意：这种方式引入JS，标签不可以写成自闭标签。<script text="text/javascript" src="js01.js"/>错误，不能自闭标签
</xmp>
<script text="text/javascript" src="js01.js">
</script>
</head>
<body></body>
</HTML>
<!DOCTYPE HTML>
<HTML>
<head>
<!-- 1.在HTML中直接编写JS-->
<script text="text/javascript">
//JS基本类型一共有五种 Number、String、Boolean、undefined、null
//1.JS基本数据类型 Number
var num1=123
var num2=123.456
var num3=Infinity
var num4=-Infinity
console.log(num1)
console.log(num2)
console.log(num3) //输出Infinity, 无穷大
console.log(num4) //输出-Infinity， 无穷小
console.log(NaN==NaN) //输出false， NaN非数字，和任何值都不行等，包括本身
var str="str"
console.log(isNaN(str)) //输出true, isNaN()判断某值是否为NaN。
console.log(3/2) //注意：输出1.5不是1 JS不区分整形和浮点型，JS中的所有数值类型底层实现都是浮点型。
console.log(Number.MAX_VALUE) //输出1.7976931348623157e+308， Number.MAX_VALUE可表示的最大数字
console.log(Number.MIN_VALUE) //输出5e-324 Number.MIN_VALUE 可表示的最小数字
//2.JS基本数据类型 String
var str1="ab'c'd'e'" //定义时外面双引号 里面只能有单引号 只能外嵌内，不能互相写"ab“c'd'e'" 出错,双引号内嵌双引号，只能嵌单引号
var str2='"abc"' //定义时外面单引号，里面只能有双引号
console.log(str1) //输出ab'c'd'e'
console.log(str2) //输出"abc"
console.log(str1.length) //输出9 计算长度str.legnth
console.log(str1.toUpperCase()) //输出AB'C'D'E' 转换为大写str.toUpperCase()
console.log(str1.split("\'")) //输出["ab", "c", "d", "e", ""] 分隔 str.split("分隔符")
//3.JS基本数据类型 Boolean
var f1=true
var f2=false;
console.log(f1) //输出true
console.log(f2) //输出false
console.log(f1&&f2) //输出false
//4.JS基本数据类型 Undefined
//Undefined类型只有一个值就是undefined，表示变量未定义，当一个变量未初始化时，值为undefined。
var str3
//console.log(str3)
console.log(str3==undefined) //输出true，未定义
//5.null
//Null只有一个值就是null。null用来表示尚未存在的对象，常用来表示函数企图返回一个不存在的对象。
var str4=null;
console.log(str4) //输出null
//注意:undefined等于null
console.log(str3==str4) //注意：undefined等于null ,输出true
//6.JS中隐式类型转换
//Number非0就是true,0是false
//String总是true
//非null就是true,null是false
//Undefined是false
if("abc"){
console.log("哈哈") //输出"哈哈"
}else{
console.log("哭哭")
}
console.log("3"+2) //String+Number=拼接 输出32
console.log(parseInt("3")+2) //显示转换 输出5
console.log("3"-2) //String-Number=转换 输出1
console.log("abc"+true) //输出abctrue
/* 数字：可以转为对应字符串 0转为false其他数字转为true 转为对应的Number包装对象
字符串：空字符串转换为0，数字字符串转换为对应数字，其他字符串转换为NaN，空字符串转为false，其他字符串为true，转为对应的String包装对象。
布尔类型：转为对应字符串，ture转为1false转为0，转为对应的Boolean包装对象。
对象：转为字符串，如果为null则为“null”，如果对象为null则转为false，否则转为true，
*/
</script>
</head>
<body></body>
</HTML>
<!DOCTYPE HTML>
<HTML>
<head>
<script text="text/javascript">
//1.JS中有数据类型，但是JS的引用是不区分类型的，所以称JS为弱类型
// 同一个引用可以先指向数字类型，后再指向字符类型，还可以再指向对象类型
//写var，是局部变量,在当前范围内起作用
//不写var，是全局变量，无论定义在哪里都是一个全局变量，在其他位置中也可以访问到
//js中有数据类型的概念 但是引用是没有类型的 同一个引用可以先后等于不同类型的数值
var v1="abc"
v1=123;
v1=true;
console.log(v1) //输出true
v4="xyz" //不写var，是全局变量
console.log(v4) //输出xyz
function mx(){
var v2="xyz" //1.写var，是局部变量,在当前范围内起作用
}
console.log(mx()) //输出undefined
function mx2(){
v3=555 //2.不写var，是全局变量，在其他地方都能用
}
mx2()
console.log(v3) //输出555
//特殊运算符typeof : 返回一个操作表达式的数据类型的字符串。
var v5=123;
console.log(typeof(v5)) //输出numer
</script>
</head>
<body></body>
</HTML>
<!DOCTYPE HTML>
<HTML>
<head>
<script text="text/javascript">
//---------------------------语句-----------------------
//1.判断语句if 2.选择语句 switch 3.循环 while do..while for
//判断语句
var num1=3;
if(num1 ==4){ //输出呵呵
console.log("哈哈")
}else{
console.log("呵呵")
}
//如果只有一个=，是赋值，不报错。 赋值为true,输出哈哈
if(num1 =4){
console.log("哈哈")
}else{
console.log("呵呵")
}
//-------------------------------------------方法---------------------------------
/*js中函数有三种定义方式
普通函数定义：
function mx(n1,n2){return n1 + n2}
动态函数定义：
new Fuction("n1","n2","return n1 + n2")
函数直接量
function(n1,n2){return n1 + n2}
*/
/*
js中的函数本质上是一个对象 函数名只是指向这个函数的一个引用
和其他对象唯一的不同是可以通过指向函数的引用传入参数调用
所以
aaa:也可以用其他引用也指向这个函数 从而使用该引用调用函数 bbb:也可以将函数名指向其他内容 使函数名不再指向函数 失去调用的能力
可以像一个普通的对象一样 被赋值给其他变量
还可以像其他对象一样 ccc:当做另一个函数的参数传递 或 ddd:当做另一函数的返回值返回
*/
//------------------定义1.普通方法定义函数-------------------------------
/*
定义1.普通方法定义函数
function 函数名(形式参数...)
{
执行语句；
return 返回值；
}
*/
function print(){
return 5;
}
console.log(print()) //输出5
function sum(num1,num2){
return num1+num2;
}
//注意：不同参数不会报错
console.log(sum(1)) //输出NaN
console.log(sum(1,2)) //输出3
console.log(sum(1,2,3)) //输出3
//arguments是参数，是一个数组，这里可以随机给参数个数
function sum1(){
var sum=0;
for(var i=0;i<arguments.length;i++){
if(!isNaN(arguments[i])){ //如果是数字才相加
sum+=arguments[i];
}
}
return sum;
}
console.log(sum1(1,2,3,"dada")) //输出6
//------------------------定义2.动态函数-------------------------------------------------
/*
定义2.动态函数
通过Js的内置对象Function实现。
参数 , 函数体
例：var demo = new Function(“x,y”,”alert(x+y);”);
demo(4,6);
等价于：
function demo(x,y)
{
alert(x+y);
}
demo(4,6);
不同的是，动态函数，参数以及函数体都可以通过参数进行传递，可以动态指定
*/
// 方法参数 ,方法函数体
var demo1 = new Function("x,y","alert(x+y);");
demo1(4,6); //弹出10
function demo2(z){
return z;
}
demo1=demo2; // 注意：aaa方法，本质是对象，可以用其他引用demo1也指向这个函数demo2,从而使用该引用调用函数 现在demo1也可以调用demo2
console.log(demo1(8)) //输出8
demo1 = null //注意：bbb可以以将函数名指向其他内容 使函数名不再指向函数 失去调用的能力
demo2 = null
//----------------------定义3.匿名函数-----------------------------
/*
定义3.匿名函数
例：var demo = function(){...}
demo();
*/
var max=function(num1,num2){
return num1>num2?num1:num2;
}
console.log(max(1,255,789)) //注意：可以传入多个参数，但是只能根据参数个数来计算 这里输出1,255 参数789不参与运算
//注意ccc:函数作为另一个函数的参数
function eat(food,cook){
food=cook(food)
console.log("吃"+food)
}
function cookcook(food){
return "烤熟的"+food
}
eat("羊肉串",cookcook) //普通方法定义，输出吃烤熟的羊肉串
eat("玉米",new Function("food","return '烧熟的'+food"))//动态函数定义，输出吃烧熟的玉米
eat("狗不理",function(food){return "蒸熟的"+food}); //匿名函数定义，输出吃蒸熟的狗不理
//注意ddd:函数作为另一个函数的返回值返回 （返回函数）
function lookUpCookBook(food){
if("羊肉串" == food){
function cookYRC(food){
return "烤熟"+food
}
return cookYRC;
}else if("涮羊肉" == food){
return new Function("food","return '煮熟'+food")
}else if("狗不理" == food){
return function(food){return "蒸熟"+food }
}
}
var cfunc1 = lookUpCookBook("羊肉串") //cfunc1接受函数返回值，所以要cfunc1("")调用输出
console.log(cfunc1("羊肉串")) //输出 烤熟羊肉串
var cfunc1 = lookUpCookBook("涮羊肉")
console.log(cfunc1("涮羊肉")) //输出 煮熟涮羊肉
var cfunc1 = lookUpCookBook("狗不理")
console.log(cfunc1("狗不理")) //输出 蒸熟狗不理
</script>
</head>
<body></body>
</HTML>
<!DOCTYPE HTML>
<HTML>
<head>
<script text="text/javascript">
//Js中数组中的特点：可以存任意元素，长度是可变的。
//数组本身也是一个对象 同时还有直接量的定义方式
//而对应的数组对象Array上提供了数组具有的属性和方法
//1.定义数组
var arrayObj1 = new Array(); //1.1创建一个数组
var arrayObj2 = new Array(3); //1.2创建一个数组并指定长度，注意不是上限，是长度
var arrayObj3 = new Array(1,2,"abc",true); //1.3创建一个数组并赋值
var arrayObj4 = [1,2,5,6,true,new Object()]; //1.4数组直接量定义数组
//2.访问数组
console.log(arrayObj4[4]) //输出true
//3.修改数组
arrayObj4[4]=false
console.log(arrayObj4[4]) //输出false
//4.增加元素
arrayObj4[6]=6 //直接获取下标增加到尾部
console.log(arrayObj4) //输出(7) [1, 2, 5, 6, false, {…}, 6] 注意如果写arrayObj4[7]=6 有个空 输出(7) [1, 2, 5, 6, false, {…}, empty,6]
arrayObj4.push("wuyun") //push（）增加元素到尾部
console.log(arrayObj4) //输出(8) [1, 2, 5, 6, false, {…}, 6, "wuyun"]
//5.删除元素
arrayObj4.pop() //pop()删除尾部元素
console.log(arrayObj4) //输出(7) [1, 2, 5, 6, false, {…}, 6]
arrayObj4.shift() //shift()删除头部元素
console.log(arrayObj4) //输出(6) [2, 5, 6, false, {…}, 6]
//6.遍历元素
for(var x=0; x<arrayObj4.length; x++)
{
console.log(arrayObj4[x])
}
</script>
</head>
<body></body>
</HTML>
<!DOCTYPE HTML>
<HTML>
<head>
<script text="text/javascript">
//对象
//---------------------------------A内置对象-----------------------------------------------
//Object
//Number String Boolean Fucntion Array RegExp
//Global Math Date
//1.Global对象
//是一个内部对象，目的是把所有全局方法集中在一个对象中。
//Global 对象没有语法。直接调用其方法
//parseInt(numString, [radix])返回由字符串转换得到的整数。
//尽可能的转换为数字
console.log(parseInt("123")) //输出123
console.log(parseInt("123.321")) //输出123
console.log(parseInt("abc")) //输出NaN
console.log(parseInt("123abc321"))//输出123
console.log(NaN == NaN) //输出false
console.log(isNaN("abc")) //输出true
//eval(codeString) 检查 JScript 代码并执行.
var str="alert('hello')"
eval(str) //弹框输出hello
//2.Math对象
console.log(Math.ceil(3.1)) //输出4 Math.ceil()向上取整
console.log(Math.floor(3.9)) //输出3 Math.floor()向下取整
console.log(Math.round(3.1)) //输出3 Math.round() 四舍五入
console.log(Math.round(3.9)) //输出4
console.log(Math.random()) //输出0.6148109700231308 Math.random()随机数[0,1)
//3.REGEXP正则表达式
var re1=new RegExp("^\\w+@\\w+(\\.\\w+)+$") //正则定义1
var re2=/"^\\w+@\\w+(\\.\\w+)+$"/ //正则定义2
console.log(re1.test("[email protected]")) //输出true
console.log(re1.exec("[email protected]")) //输出["[email protected]", ".cn", index: 0, input: "[email protected]"]
//rgexp.test(str) 返回一个 Boolean 值，它指出在被查找的字符串中是否存在模式。
//rgExp.exec(str) 用正则表达式模式在字符串中运行查找，并返回包含该查找结果的一个数组。
//------------------------B自定义对象 其实此处所谓的构造函数就是一个普通函数-----------------------------------------
//1.构造函数定义对象 function Person(){}
function Person(){
}
var p=new Person()
//注意：可以增加属性和方法
p.name="zhangsan"
p.say=function(){return "你好"}
console.log(p.name) //输出zhangsan
console.log(p.say()) //输出你好
//注意：可以删除属性和方法
delete p.name
console.log(p) //输出Person {say: ƒ}
delete p.say
console.log(p) //输出Person {}
//2.构造函数定义对象 function Person2(name,age){}
function Person2(name,age)
{
this.name = name;
this.age = age;
this.eat=function(){return "吃饭呢"}
}
var p2 = new Person2("zhangsan",20);
console.log(p2.name) //输出zhangsan
console.log(p2.age) //输出20
console.log(p2.eat()) //输出吃饭呢
//3.对象直接量 var p3={属性：数组值，....，}
var p3 = {name:"张",age:19,addr:["北京","上海"],run:function(){return "跑的快"}};
console.log(p3.name)
console.log(p3.age)
console.log(p3.addr)
console.log(p3.run())
//------------------JS对象操作---------------------------------
/*
with语句。
格式：
with(对象)
{
}
with语句定义了某个对象的作用域，在该域中可以直接调用该对象的成员。避免”对象.”这种格式的重复书写。
*/
with(p3){
console.log(name) //避免”对象.”这种格式的重复书写。
console.log(age)
console.log(addr)
console.log(run())
}
/*
for...in语句
用于遍历对象属性。
例：
var p = new Person(“zhangsan”,20);
for(x in p)
{
alert(x);//结果是两个对话框，一个是name，一个是age。
alert(x+”:”+p[x]);
//可以得到属性与属性的值。p[x]:p对象就是个数组，要通过指定的元素名获取元素的值。
}
*/
for(x in p3)
{
console.log(x); //输出所有对象上的属性
console.log(x+":"+p3[x]);// 输出属性：属性值
}
//注意:对象既可以.点又可以[]中括号访问
</script>
</head>
<body></body>
</HTML>
<!DOCTYPE HTML>
<html>
<head>
<title>json数据格式</title>
<!-- JSON 是 JS 对象的字符串表示法，它使用文本表示一个 JS 对象的信息，本质是一个字符串。
JSON 语法是 JavaScript 对象表示语法的子集。
数据在名称/值对中
数据由逗号分隔 ,
大括号保存对象 {}
中括号保存数组 []
-->
<script type="text/javascript">
var obj1 = {name:"zs",age:19}
var arr1 = [1,"aaa",true,new Object()]
var data = {
name:"韦小宝",
age:35,
addr:["bj","sh","gz"],
wife:[
{name:"苏荃",age:40,job:["教主夫人","大大老婆"]},
{name:"建宁",age:20,job:["公主","小老婆"]}
]
}
alert(data["wife"][1]["job"][1])
</script>
</head>
<body>
</body>
</html>
<!DOCTYPE HTML>
<HTML>
<head>
<script text="text/javascript">
//DHTM-BOM 浏览器对象模型
// -DOM 文档对象模型
//BOM:WINDOW(浏览器中打开的窗口)--->Location(浏览器地址栏 跳转,刷新)
// navigator(有关浏览器的信息)
// screen（客户端显示屏幕的信息）
// history((在浏览器窗口中）访问过的 URL)
//-------------------------WINDOW(浏览器中打开的窗口)---------------------------------
//------------------------其中window代表上下文可以省去，直接写方法------------------
//1.onactivate 当对象设置为活动元素时触发。onactivate
/*
window.onactivate=function(){
alert("我被激活了")
}
*/
//2.使元素失去焦点并触发 onblur 事件。 onblur
/*
window.onblur=function(){
alert("我失去焦点")
}
*/
//3.页面加载过后触发的方法 onload
/*
window.onload=function(){
var ele = document.getElementById("div01")
console.log(ele)
}
*/
//4.浏览器改变大小 onresize
/*
window.onresize=function(){
console.log("我被改变了大小")
}
*/
//5.三种对话框
// 消息的对话框alert 确认对话框confirm 提示对话框prompt
//5.1消息的对话框alert
//alert("警告！！！您已超速，罚款200~")
//5.2确认对话框confim
/*
var flag = confirm("你确认要关闭我吗 是否确认")
if(flag){
alert("你好残忍")
}else{
alert("你真好，不忍心")
}
*/
//5.3提示对话框prompt 其中带有一条消息和一个输入框。
/*
var str = prompt("请输入您的密码","")
if("123" == str){
alert("密码正确 ")
}else{
alert("密码错误 ")
}
*/
//6.定时器 setInterval(code,millisec)循环 按照指定的周期（以毫秒计）来调用函数或计算表达式
window.setInterval(function(){
var div2 = document.getElementById("div02")
div2.innerHTML = new Date().toLocaleString(); //向div2标签对象插入内容innerHTML -> new Date().toLocaleString()获取现在时间
}, 1000);
//--定时器 setTimeout(code,millisec)只计算一次 在指定的毫秒数后调用函数或计算表达式。
/*
window.setTimeout(function(){
window.location.href="http://www.baidu.com"
}, 3000);
*/
//------------------------Location(浏览器地址栏 跳转,刷新)-------------------------
console.log(window.location.host) //host 设置或返回主机名和当前 URL 的端口号。
console.log(window.location.hostname) //hostname 返回URL的主机名
console.log(window.location.port) //port 返回一个URL服务器使用的端口号
console.log(window.location.href) //href 设置或返回完整的 URL。
//-------------------------navigator(有关浏览器的信息)---------------------------------------------
console.log(window.navigator.appName) //appName 返回浏览器的名称
console.log(window.navigator.platform) //platform 返回运行浏览器的操作系统平台。
//------------------------screen（客户端显示屏幕的信息）--------------------------------------------------
console.log(window.screen.availWidth) //availWidth 返回显示屏幕的宽度 (除 Windows 任务栏之外)。
console.log(window.screen.availHeight) //availHeight 返回显示屏幕的高度 (除 Windows 任务栏之外)
//------------------------------history((在浏览器窗口中）访问过的 URL)------------------------------
console.log(window.history.length) //length 返回浏览器历史列表中的 URL 数量。
function forward(){
window.history.forward(); //forward() 加载 history 列表中的下一个 URL。
}
function back(){
window.history.back(); //back() 加载 history 列表中的前一个 URL。
}
</script>
</head>
<body>
<div id="div01" style="font-size:50px;color:pink;"></div>
<div id="div02" style="font-size:50px;color:pink;"></div>
<br>
<input type="button" value="前进" onclick="forward()" /> <!--onclick="forward()" 前进调用forward方法 -->
<input type="button" value="后退" onclick="back()"/> <!--onclick="back()" 前进调用back方法 -->
<a href="http://www.baidu.com">百度</a>
</body>
</HTML>