网页基础学习 day02_综合

网页基础学习

JavaScript
JavaScript是运行在浏览器端的脚步语言, 是由浏览器解释执行的, 简称js, 它能够让网页和用户有交互功能, 增加良好的用户体验效果。
前段开发的三大模块HTML：负责网页结构 2、CSS：负责网页样式 3、JavaScript：负责网页行为，比如:网页与用户的交互效果
JavaScript的使用方式
三种使用的方式：行内式、内嵌式、外链式

    <!-- 内嵌式 --><script>alert("内嵌式的显示");</script>
</head>
<body><!-- 行内式 --><input type="button" name="button" value="按钮" onclick="alert('行内式的显示');"><!-- 外链式 --><script type="text/javascript" src="js/index.js"></script>
</body>

变量和数据类型：
JavaScript 是一种弱类型语言，也就是说不需要指定变量的类型，JavaScript的变量类型由它的值来决定，定义变量需要用关键字 ‘var’, 一条JavaScript语句应该以“;”结尾
五种基本的javascript类型：
1、number 数字类型
2、string 字符串类型
3、boolean 布尔类型 true 或 false
4、undefined undefined类型，变量声明未初始化，它的值就是undefined
5、null null类型，表示空对象，如果定义的变量将来准备保存对象，可以将变量初始化为null,在页面上获取不到对象，返回的值就是null
变量的基本的类型：
1、区分大小写
2、第一个字符必须是字母、下划线（_）或者美元符号（$）
3、其他字符可以是字母、下划线、美元符或数字

<body><script type="text/javascript">// 单行注释/*script 的多行的注释写法*///定义变量的格式var string ="Tom and jerry";var number=12;// object 表示的对象的类型var aObj={
      //在此处使用的并不是分号,并且在赋值的时候使用的同样不是等号name:"隔壁老王",age:12}alert(string);alert(number);var type=typeof(aObj);alert(type);alert(aObj.name);</script>
</body>

函数定义和调用

函数的定义： function 函数名(参数[参数可选]){
// 函数的代码实现
… }
函数的调用：
函数名(参数[参数可选])

<body><script type="text/javascript">//函数的简单的实现：function fnAlert(){
      alert("使用函数实现的弹窗的功能");}// 函数的简单的调用：fnAlert();//定义有参数有返回值的函数function fnAdd(num1,num2){
      var sum=num1+num2;return sum;}var Addsum=fnAdd(1,2);alert(Addsum);</script>
</body>

变量作用域
局部变量：局部变量就是在函数内使用的变量，只能在函数内部使用。
全局变量：全局变量就是在函数外定义的变量，可以在不同函数内使用。
条件语句的实现：
比较运算符号：
条件语句
if 语句 - 只有当指定条件为 true 时，使用该语句来执行代码
if…else 语句 - 当条件为 true 时执行代码，当条件为 false 时执行其他代码
if…else if…else 语句 - 使用该语句来判断多条件，执行条件成立的语句

<body><!-- 条件语句的实现 --><script>var num1=12;var num2='12';if (num1==12){
      alert("两个数据相同")}else{
      alert("两个数据不同")}// "==" 符号默认会将符号两边的变量转换成数字再进行对比，这个叫做隐式转换if (num1==12){
      alert("两个数据相同")}else{
      alert("两个数据不同")}// "===" 符号不会转换符号两边的数据类型if (num1===num2){
      alert("两个数据相同")}else{
      alert("两个数据不同")}// 多条件判断var sFruit = "鸭梨";if (sFruit == "苹果") {
      alert("您选择的水果是苹果");} else if (sFruit == "鸭梨") {
      alert("您选择的水果是鸭梨");} else {
      alert("对不起，您选择的水果不存在!")}</script>
</body>

逻辑运算符号：代码实现

<body><!-- 条件语句的实现 --><script>var num1=12;var num2='12';if (num1==12){
      alert("两个数据相同")}else{
      alert("两个数据不同")}// "==" 符号默认会将符号两边的变量转换成数字再进行对比，这个叫做隐式转换if (num1==12){
      alert("两个数据相同")}else{
      alert("两个数据不同")}// "===" 符号不会转换符号两边的数据类型if (num1===num2){
      alert("两个数据相同")}else{
      alert("两个数据不同")}// 多条件判断var sFruit = "鸭梨";if (sFruit == "苹果") {
      alert("您选择的水果是苹果");} else if (sFruit == "鸭梨") {
      alert("您选择的水果是鸭梨");} else {
      alert("对不起，您选择的水果不存在!")}var x = 6;var y = 3;if(x < 10 && y > 1){
      alert('都大于');}else{
      alert('至少有一个不大于');}if(x > 5 || y > 7 ){
      alert('至少有一个大于');}else{
      alert('都不大于');}if(!(x == y)){
      alert('等于')}else{
      alert('不等于')}</script>
</body>

获取标签元素：
可以使用内置对象 document 上的 getElementById 方法来获取页面上设置了id属性的标签元素，获取到的是一个html对象，然后将它赋值给一个变量，比如：

    <!-- 解决方法二:onload是页面所有元素加载完成的事件，给onload设置函数时，当事件触发就会执行设置的函数。 --><script type="text/javascript">window.onload = function(){
      var oDiv = document.getElementById('div1');alert(oDiv);}</script>
</head>
<body><!-- 获取标签的元素 --><div id="div1">这是一个简单的div元素</div><!-- 上面的代码，如果把javascript写在元素的上面，就会出错，因为页面上从上往下加载执行的，javascript去页面上获取元素div1的时候，元素div1还没有加载。--><!-- 解决方法一 --><script type="text/javascript">var oDiv=document.getElementById('div1');alert(oDiv);</script>

操作标签元素属性
属性的读取，和属性的设置，具体的操作以代码的形式展示

    <title>Document</title><style>.sty01{
      font-size: 20px;color: red;}.sty02{
      font-size: 30px;color: pink;text-decoration:none;}</style><script>window.onload=function(){
      var oInput=document.getElementById('input1');var oA=document.getElementById('sty01');// 读取属性的值,再书写的时候一定要注意格式，就是将数据及时的输出var oValue=oInput.value;alert(oValue);var sType=oInput.type;alert(sType);var sName=oInput.name;alert(sName);var sLinks=oA.herf;alert(sLinks);// 操作class属性的时候，需要改写为classnameoA.className='sty02';// 写(设置)属性oA.style.color = 'red';oA.style.fontSize = sValue;}</script>
</head>
<body><input type="text" name="setsize" id="input1" value="20px"><a href="#" id="link1" class="sty01">这是一个简单的链接的内容</a>
</body>

innerHTML可以读取或者设置标签包裹的内容

    <script>window.onload=function(){
      var oDiv=document.getElementById('div1');//读取var sText=oDiv.innerHTML;alert(sText);//在div中写入我们的数据元素oDiv.innerHTML='<a href="http://www.itcast.cn">传智播客<a/>';}</script>
</head>
<body><!-- innerHTML可以读取或者设置标签包裹的内容 --><div id="div1">这是一个简单的div元素</div>
</body>

数组及操作方法
数组就是一组数据的集合，javascript 中，数组里面的数据可以是不同类型的数据，好比 python 里面的列表。
js中数组的基本的增删改查。

<script>//数组的定义,实例化对象方式创建var aList=Array(1,2,3,4);// 字面量方式创建，推荐使用var aList2=[1,3,4,'and'];alert(aList);//多维数组指的是数组的成员也是数组，把这样的数组叫做多维数组。var aList3= [[1,2,3],['a','b','c']];//数组的操作-获取数组的长度alert(aList3.length)//根据下标获取元素alert(aList3[0][1]);//从数组最后添加和删除数据aList3.push(5);alert(aList3); //添加后的数据直接存放在数组的后面，添加之后的形式是另外开一个数组的元素，长度变为3alert(aList3.length);//数据的删除aList3.pop();//删除最后面的一个元素alert(aList3);//根据下标添加和删除元素 arr.splice(start,num,element1,.....,elementN)//代码之间含义：start：必需，开始删除的索引。num：可选，删除数组元素的个数。elementN：可选，在start索引位置要插入的新元素。//此方法会删除从start索引开始的num个元素，并将elementN参数插入到start索引位置var colors = ["red", "green", "blue"];colors.splice(0,1); //删除第一项alert(colors); //green,bluecolors.splice(1, 0, "yellow", "orange"); //从第一个索引位置插入两项数据alert(colors); //green,yellow,organge,bluecolors.splice(1, 1, "red", "purple"); //删除一项，插入两项数据alert(colors); //green,red,purple,orange,blue</script>

循环语句
三种普通的循环实现：

<script>//for循环var aList1=[1,2,3,4];for (var i=0;i<aList1.length;i=i+1){
      alert(aList1[i]);}//while循环:当条件成立的时候, while语句会循环执行var aList2=['Tom','jerry'];var index=0;while(index<aList2.length){
      alert(aList2[index]);index=index+1;}// do-while循环的的实现:当条件不成立的时候do语句也会执行一次var list3=['dog','cat'];var index=0;do{
      var result=list3[index];alert(result);index=index+1;}while(index<list3.length);</script>

12.字符串拼接
可以使用‘+’号实现字符之间的拼接的操作：

    <!-- 数字和字符串拼接会自动进行类型转换(隐士类型转换)，把数字类型转成字符串类型进行拼接 --><script>var iNum=11;var iNum2='22';var sStr='abc';var result=iNum+iNum2;alert(result);var result2=iNum+sStr;alert(result2);</script>

定时器