web进阶之十九：JavaScript 基础语法02——js操作
2018-09-18 本文已影响4人
甚得朕心
js的语法块和书写位置
在JS中可以使用{ }来为语句进行分组,同一个{ }中的语句我们称为是一组语句，它们要么都执行，要么都不执行，一个{ }中的语句我们也称为叫一个代码块在代码块的后边就不用再编写;了JS中的代码块，只具有分组的的作用，没有其他的用途,代码块内容的内容，在外部是完全可见的,所以也是可以输入和调用的，因为只是分组的作用，并没有隔离的作用。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>代码块</title>
<script type="text/javascript">
/*
我们的程序是由一条一条语句构成的
语句是按照自上向下的顺序一条一条执行的
*/
{
var a = 10;
alert("hello");
console.log("你好");
document.write("语句");
}
console.log("a = "+a);
</script>
</head>
<body>
</body>
</html>
js编写位置补充
可以将js代码编写到外部js文件中，然后通过script标签引入写到外部文件中可以在不同的页面中同时引用，也可以利用到浏览器的缓存机制这是推荐使用的方式。
当然还要切记一点：
script标签一旦用于引入外部文件了，就不能再编写代码了，即使编写了浏览器也会忽略，如果需要则可以再创建一个新的script标签用于编写内部代码。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>js编写位置</title>
<!--很好的一个例子-->
<!--外部引用-->
<script type="text/javascript" src="js/script.js"></script>
<!--内部重新书写一个-->
<script type="text/javascript">
alert("我是内部的JS代码");
</script>
</head>
<body>
<!--
可以将js代码编写到标签的onclick属性中
当我们点击按钮时，js代码才会执行
虽然可以写在标签的属性中，但是他们属于结构与行为耦合，不方便维护，不推荐使用
-->
<button onclick="alert('讨厌，你点我干嘛~~');">点我一下</button>
<!--
可以将js代码写在超链接的href属性中，这样当点击超链接时，会执行js代码
-->
<a href="javascript:alert('让你点你就点！！');">你也点我一下</a>
<a href="javascript:;">你也点我一下</a>
</body>
</html>
js操作属性
我们在刚才是学习的时候，会把标签和输出的值，都写出<script>标签中，这样会直接返回一个值，但是，当我们在<body>标签中书写时，如果不改变之前书写<script>的书写方法，就是遇到不输出任何值，因为代码自上而下执行，所以会出现，未定义的现象，这时候我们就需要一个匿名函数来执行。
window.onload = function(){ }意思就是在整个页面加载完成之后，才会执行函数内部的代码。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>js操作属性</title>
<script type="text/javascript">
/*
DOM是为了操作文档（网页）的API，document是它的一个对象
BOM是为了操作浏览器的API，window是它的一个对象
常用BOM对象还有：alert、定时器等
*/
//整个文档加载完之后执行一个匿名函数
window.onload = function(){
document.getElementById('div1').title = "我看到了！";
//变量oA代表整个id为link1的a标签
var oA = document.getElementById('link1');
<!--当赋值的时候一定要用引号-->
oA.href = "http://www.tencent.com";
oA.title = "跳转到腾讯网"
<!--当有变量的时候，如果直接写oA.style.b
那么将会去id为link1中寻找一个属性为b
但是却没有，所以只能用[]来赋值，然后才行。
-->
var b = 'background';
oA.style[b]='red';
alert(oA.id);
alert(oA.title);
}
</script>
</head>
<body>
<div id="div1" class="div1" title="这是div元素，看到了吗？">这是一个div元素</div>
<a href="#" id="link1">腾讯网</a>
<!-- <script type="text/javascript">
document.getElementById('div1').title = "我看到了！";
</script> -->
</body>
</html>
js中括号操作属性和document.write和innerHTML的区别
通过[]操作属性可以写变量。在下面代码的var attr = 'color';处可以看出，如果不加[]，则就是变量本身，并不是变量所代表的值。
document.write和innerHTML的区别:
- document.write只能重绘整个页面
- 比如之前有个盒子DIV，在重写时我们可以写一个超链接或者其他的，这样页面的内容就会替换。
- innerHTML可以重绘页面的一部分
- 如在某个标签中添加一个值，或者再加一个标签，其实也是内容。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>js中括号操作属性</title>
<script type="text/javascript">
window.onload = function(){
var oDiv = document.getElementById('div1');
//oDiv.style.color = 'red';//red必须加引号，否则会认为它是一个变量，引起来会认为它是一个值，赋值给=号左边
var attr = 'color';
// oDiv.style[attr] = 'red';
/* 通过[]操作属性可以写变量 */
oDiv['style'][attr] = 'red';
/* 通过innerHTML可以读写元素包括的内容 */
alert(oDiv.innerHTML);//读取标签里面包裹的元素，即“这是一个div元素”
var oDiv2 = document.getElementById('div2');
// oDiv2.innerHTML = '这是第二个div元素';//向div标签中插入内容
oDiv2.innerHTML = "<a href='http://www.baidu.com'>百度网</a>";//向div标签中插入超链接标签
}
</script>
</head>
<body>
<div id="div1">这是一个div元素</div>
<div id="div2"></div>
</body>
</html>
js函数
js中函数，使用关键字function+函数名(){ }来使用。中括号中写函数的内容。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>js函数</title>
<script type="text/javascript">
function aa(){
alert('hello!');
}
/*
//直接调用
aa();
*/
</script>
</head>
<body>
<!-- button按钮，如果不写value值，就啥都不会有 -->
<!-- 这个按钮的意思也就是，当我点击的之后，会调用aa()函数
即:我们在<script>标签中所写的值。
-->
<input type="button" name="" value="弹框" onclick="aa()" />
</body>
</html>
升级版本的换肤
上面我们在进行修改属性的时候，只要一刷新，就直接改变了，现在我们通过按钮和函数，一起进行控制，这样就会实现像网页或者qq一样，点击某个皮肤就会换个样式或者颜色。
下面的代码中主要理解两个:
- 为什么不写行间样式
- 为什么在windon.onload中不，调用函数的时候不直接加();
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>js换肤</title>
<!-- 调用外部样式表 -->
<link rel="stylesheet" type="text/css" href="css/1.css" id="link1">
<!--书写js内容-->
<script type="text/javascript">
window.onload = function(){
/* 提取行间事件 */
var oBtn01 = document.getElementById('btn01');
var oBtn02 = document.getElementById('btn02');
oBtn01.onclick = skin01;//这里不能写skin01()，这样写就马上执行了
oBtn02.onclick = skin02;
}
// 如果调用函数就会修改link1中的href属性，这样样式也就可以改变了。
function skin01(){
var oLink = document.getElementById('link1');
oLink.href = "css/1.css";
}
// 如果调用函数就会修改link1中的href属性，这样样式也就可以改变了。
function skin02(){
var oLink = document.getElementById('link1');
oLink.href = "css/2.css";
}
</script>
</head>
<body>
<!--
行间调用函数
<input type="button" name="" value="皮肤01" onclick="skin01()" />
<input type="button" name="" value="皮肤02" onclick="skin02()" /> -->
<input type="button" name="" value="皮肤01" id="btn01" />
<input type="button" name="" value="皮肤02" id="btn02" />
<div class="box01"></div>
<div class="box02"></div>
</body>
</html>
变量和函数的预解析
函数的预解析，不一样的就在，会提前申明，这样也是方面写代码，也方便调用。在代码块中，完全可以上面调用函数，下面依次写出每个函数的代码。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>变量和函数预解析</title>
<script type="text/javascript">
/*变量预解析*/
/*alert(a);//只把变量a的声明提前，赋值不提前，所以弹出undefined，表示它的值未定义
// alert(c);//报错，c没有声明，这是真正的未定义
var a = 123;
/*函数预解析*/
myalert();//弹出hello!
function myalert(){
alert('hello!');
}
</script>
</head>
<body>
</body>
</html>
匿名函数
匿名函数，即：没有给函数命名就调用。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>匿名函数</title>
<script type="text/javascript">
window.onload = function(){
var oDiv = document.getElementById('div1');
/*有名字的函数*/
// 在网页中，你想点击谁，出现什么活着调用什么，就给谁设置一个onclick
// oDiv.onclick = myalert; //同样不能加()。
// 定义函数，并且给函数起了一个名字myalert
// function myalert(){
// alert('hello');
// }
/*去除函数名，直接调用*/
/*匿名函数*/
oDiv.onclick = function(){
alert('hello');
}
}
</script>
</head>
<body>
<div id="div1">这是一个div元素</div>
</body>
</html>
函数的传参
函数传参，就是往函数内部传入参数，这个由在定义函数的时，由函数的样式决定，这样也方便了我们为满足各种要求的使用。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>函数传参</title>
<script type="text/javascript">
window.onload = function(){
var oDiv = document.getElementById('div1');
/*上面我们说过，可以把函数调用写在前面，因为这里会预解析*/
changeStyle('color', 'gold');
changeStyle('background', 'red');
changeStyle('width', '300px');
changeStyle('height', '300px');
changeStyle('fontSize', '30px');
/*可以在函数中传入参数，这个和其他的编程语言是一样的。*/
function changeStyle(styl, val){
oDiv.style[styl] = val;
}
}
</script>
</head>
<body>
<div id="div1">这是一个div元素</div>
</body>
</html>
函数return关键字
return在大多的编程语言中都有用到，返回函数的值或者没有返回值，同时结束函数，在js中也是如此。下面通过一个计算器来描述了，在下面的代码中，我们如果去了return 后的c，那么就没有返回值。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>函数return关键字</title>
<script type="text/javascript">
window.onload = function(){
var oInput01 = document.getElementById('input01');
var oInput02 = document.getElementById('input02');
var oBtn = document.getElementById('btn');
/*
写入值
oInput01.value = 10;
oInput02.value = 5;
*/
/*我们通过函数来控制写入的值*/
oBtn.onclick = function(){
var val01 = oInput01.value;
var val02 = oInput02.value;
var rs = add(val01, val02);
alert(rs);
}
function add(a, b){
var c = parseInt(a) + parseInt(b);
// alert('计算完成');//执行
return c;//返回函数设定的值，同时结束函数的运行
// return;//不返回值，仅结束函数的运行
// alert('计算完成');//不执行
}
}
</script>
<style>
#input01,#input02{
/*display: inline-block;*/
width: 150px;
line-height: 25px;
border:1px solid;
}
#btn{
width: 40px;
height: 30px;
background-color: red;
}
</style>
</head>
<body>
<h1>计算器</h1>
<input id="input01" type="text" name="">
<input id="input02" type="text" name="">
<input id="btn" type="button" name="" value="相加">
</body>
</html>
内容有点多，不过代码也多，也容易理解。
