由于之前学过Java，因此Javascript中和Java相同的特性及用法在此我会略过。
一、Javascript输出
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>js输出</title>
</head>
<body>
<p id="one"></p>
<script type="text/javascript">
/**
window.alert() 警告框
document.write() 写到 HTML 文档中
innerHTML 写到 HTML 元素
console.log() 写到浏览器的控制台
**/
alert('helloworld');//弹出警告框，显示内容为helloworld，点击确定后才会执行下面的代码
//将内容直接写到整个HTML文档
document.write('helloworld');
//改变p元素内容
document.getElementById('one').innerHTML = "this is p";
//在控制台输出内容
console.log(123)
</script>
</body>
</html>二、Javascript数据类型
注意，var可以代表上面任意数据类型。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>js数据类型</title>
</head>
<body>
<script type="text/javascript">
/**
* 字符串 (String)
* 数字 (Number)
* 布尔 (Boolean)
* 数组 (Array)
* 对象 (Object)
* 空 (Null)
* 未定义 (Undefined)
*/
// var可以声明各种类型
var x; // x 为 undefined
var y = 5; // y 为数字
var z = "John"; // z 为字符串
// 字符串
var carname="Volvo XC60";
var carname='Volvo XC60';
// 数字
var x1=34.00; //使用小数点来写
var x2=34; //不使用小数点来写
// 布尔
var x=true;
var y=false;
// 数组
var cars=new Array();
cars[0]="Saab";
cars[1]="Volvo";
var cars=new Array("Saab","Volvo","BMW");
var cars=["Saab","Volvo","BMW"];
// JavaScript 对象 键值对
var person={
firstname:"John",
lastname:"Doe",
id:5566
};
console.log(person.firstname)
console.log(person["firstname"])
// Undefined 和 Null
// Undefined 这个值表示变量不含有值。
// 可以通过将变量的值设置为 null 来清空变量
var persons;
var car="Volvo";
car=null
</script>
</body>
</html>三、Javascript函数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>js函数</title>
</head>
<body>
<script>
/**
• 函数是由事件驱动的或者当它被调用时执行的可重复使用的代码块
• function a( 参数 ){} 声明会前置
• var a = function( 参数 ){} 匿名函数
• 函数中的 return
*/
//无参函数a的声明和调用
function a()
{
console.log(1111);
console.log(2222);
console.log(3333);
console.log(4444);
console.log(5555);
console.log(6666);
}
a();
//带参函数b的声明和调用
function b(cs1,cs2)
{
console.log(cs1+cs2);
}
b("Hello,","world");
//匿名函数的声明和调用
var c=function (cs1,cs2,cs3)
{
console.log(cs1+""+cs2+""+cs3);
};
c(1,2,3);
//函数的return
function d()
{
return "This is return function";
}
var d1=d();
console.log(d1);
</script>
</body>
</html>四、Javascript比较和逻辑运算符
基本和Java中的一致，JS特有的比较符是===和!==，前者是严格相等（即值和数据类型均相等），后者是完全不相等。例如var c = 5 ; var b = ‘5’；若用==判断则结果为true，若用===判断结果为false，因为数据类型一个为number一个为String
五、Javascript中的switch
与Java不同的是，JS中的swith是可以和字符串匹配的，这点需要注意，例如下面代码中，从prompt输入的number均为字符串类型，因此在switch中是case “1”到case “3”。
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<script>
var number=prompt("请输入您要查询的业务编号");
switch (number)
{
case "1":
{
document.write("账户余额为:。。。。。。")
break;
}
case "2":
{
document.write("转账余额为:。。。。。。")
break;
}
case "3":
{
document.write("信用额度为:。。。。。。")
break;
}
default:console.log("退出银行系统");
}
</script>
</body>
</html>六、Javascript中的循环
唯一与Java不同的是JS中有一个特殊的循环for/in，它可以循环遍历对象
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>js中for循环与while循环</title>
</head>
<body>
<script type="text/javascript">
/**
*
* for - 循环代码块一定的次数
for/in - 循环遍历对象
while - 当指定的条件为 true 时循环指定的代码块
*/
for( var i = 0; i < 10 ; i++ ){
console.log('i:'+ i);
}
//声明并给对象赋值
var person = {
name : 'json',
age : 25,
sg: 170
}
//循环输出对象person内的键值对的值
for( key in person ){
console.log(person[key])
}
var count = 1;
while( count < 10 ){
count++ ;
console.log('执行while循环');
}
</script>
</body>
</html>七、DOM
（1）、DOM树模型
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="intro">HelloWorld</div>
<div id="main">
<p>The Dom is useful.</p>
</div>
<div class="content">1</div>
<div class="content">2</div>
<div class="content">3</div>
<div class="content">4</div>
<script>
//通过js获取html标签
var intro=document.getElementById("intro");//通过id找html元素，id是唯一的
//通过元素名找到元素
var main=document.getElementById("main");//先找到p元素的父元素
var p=main.getElementsByTagName("p")[0];//利用父元素和标签名找到p元素，但注意这里找到的p元素的数组，因为一个父元素下可能有很多p标签
//通过class名找到元素
var content = document.getElementsByClassName("content")[0];//由于一个可以有很懂相同class名的元素，因此返回的也是一个数组
</script>
</body>
</html>（2）、DOM HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<a id="goURL" href="">百度</a>
<img src="1.jpg" id="image">
<!--data属性是自定义的-->
<div id="main" data="你好">123</div>
<script>
var main = document.getElementById("main");
main.innerHTML = "HelloWorld";
//alert(main.getAttribute("data"));//获取元素属性的值
main.setAttribute("data","你也好");//修改元素自定义data属性
main.setAttribute("dd","dada");//为元素增加元素
var image = document.getElementById("image");
//修改img标签的图片
image.src = "2.jpg";
//修改a标签的href属性的两种方法
var guURL = document.getElementById("goURL");
goURL.setAttribute("href","http://www.baidu.com");
goURL.href = "http://www.baidu.com";
</script>
</body>
</html>（3）、DOM CSS
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="main">Hello,World</div>
<script>
var main = document.getElementById("main");
//通过js修改元素的CSS样式
main.style.color = "blue";//修改main元素内部字体颜色
main.style.fontSize = "100px";//修改main元素内部字体大小
</script>
</body>
</html>（4）、DOM 事件
和Android的监听器非常类似。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--
DOM事件：
1、元素
2、动作
3、触发的结果
-->
<!--注意alert的参数若还是双引号会报错...
一种事件添加方式：事件内嵌元素中
-->
<div onclick="alert('Hello World')">按钮</div>
<div id="main">我是main</div>
<div id="btn">我是btn</div>
<script>
var main = document.getElementById("main");
/*第二种事件添加方式*/
main.onclick = function()
{
alert("main被触发了~");
};
var btn = document.getElementById("btn");
/*第三种事件添加方式，也是最推荐的方式*/
btn.addEventListener("click",function ()
{
alert("btn被触发了~");
});
</script>
</body>
</html>（5）、DOM 节点
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="div1">
<p id="p1">我是第一个p</p>
<p id="p2">我是第二个p</p>
</div>
<script>
var p = document.createElement("p");//创建标签<p></p>
var word = document.createTextNode("我是新增的p标签");//创建的p标签的内容
p.appendChild(word);//<p>我是新增的p标签</p>
/*将新建的p标签放入div1中*/
var div1 = document.getElementById("div1");
div1.appendChild(p);
/*删除div1中的p1节点*/
var p1 = document.getElementById("p1");
div1.removeChild(p1);
</script>
</body>
</html>八、JS中的window对象
（1）、window概念
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
/**
• window.open() - 打开新窗口
• window.close() - 关闭当前窗口
• window.moveTo() - 移动当前窗口
• window.resizeTo() - 调整当前窗口的尺寸
*/
//根据window的概念，变量a和函数b都会成为window对象的成员
var a = 1;
function b()
{
}
//输出window对象的属性a和方法b
alert(window.a);
window.b();
var w;
//创建一个大小为300x300的新窗口，第一个参数是默认访问的网址，第二个参数是名字
function openWindow()
{
w = window.open('', '', 'width=300,height=300');
}
//调整窗口大小为500x500
function myFunction()
{
w.resizeTo(500,500);//调整窗口大小
w.focus();//聚焦
}
//移动窗口到(x,y)为(700,500)的位置
function moveFunction()
{
w.moveTo(700,500);
w.focus();
}
//关闭窗口
function closeFunction()
{
w.close(700,500);
w.focus();
}
</script>
<button onclick="openWindow()">创建窗口</button>
<button onclick="myFunction()">调整窗口</button>
<button onclick="moveFunction()">移动窗口</button>
<button onclick="closeFunction()">关闭窗口</button>
</body>
</html>（2）、window-screen
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
/**
* screen.availWidth - 获取可用的浏览器宽度
* screen.availHeight - 获取可用的浏览器高度
*/
//显示整个浏览器的长和宽，宽（横向）和屏幕相等，但是长度（纵向）由于浏览器不包括最底部的那一栏，因此和屏幕的长度不相等。
alert(screen.availWidth+" × "+screen.availHeight);
</script>
</body>
</html>（3）、window-location
假设我们当前页面为http://www.imooc.com/a/b
进入浏览器控制台，在控制台中输入location.hostname，回车，会发现控制台输出了当前网址的域名：http://www.imooc.com；输入location.pathname，控制台会输出/a/b；输入location.protocol会输出http；输入location.href会输出http://www.imooc.com/a/b
（4）、window-history
history对象用来记录当前标签访问过的页面。
例如我首先访问百度，再访问谷歌，最后访问搜狐。那么这时在浏览器控制台执行window.history，会出现history的属性，其中有一条Length属性为3，这就是当前页面访问过的页面数；这时我再执行history.back()就会返回上一页即谷歌，接着执行history.forward()就会前进到下一页即搜狐，那么如果我想从搜狐直接返回百度的话就执行history.go(-2)即可，它表示回退两个页面，同理，从百度直接访问搜狐就执行history.go(2)，它表示前进两个页面。
扫一扫
1284
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
