黑马程序员技术交流社区

标题: 【石家庄校区】Javascript [打印本页]

作者: 林志博 时间: 2018-10-25 21:02
标题: 【石家庄校区】Javascript
本帖最后由小石姐姐于 2018-10-26 09:21 编辑

Day09
js的基本语法

1. 在网页里面引入javascript
第一种：内部方式（推荐js代码放在</body>下面）
比如：

[Java] 纯文本查看 复制代码

<!DOCTYPE html>

<html>

        <head>

                <meta charset="UTF-8">

                <title></title>

                </head>

        <body>

                <input  type="text" id="t1" name="username" />

        </body>

        <script type="text/javascript">

                        //js代码

                        var inputObj = document.getElementById("t1");

                        var name = inputObj.name;

                        alert(name);

  </script>

</html>

第二种：外部方式（解耦合，部署（交付代码时）推荐这种方式）
<script  type="text/javascript" src="js/a.js"></script>
2.js数据类型
2.1 原始类型：
       *number类型：比如 var a=1;
       *string 类型：比如 var b=”学习认真点”；
       *boolean类型：比如 var flag =true;
       *null 类型：       比如 var c = null;
       *undefinded类型: 比如 var d=undefined;  var f ;
      结论：
1.       js所有类型变量用 var 定义
2.       js的类型变量如果没有赋值,默认undefined
js和java区别：
1.       java一门编程语言，并且是强类型语言，就是变量都有严格的类型规定
2.       java语言，先编译，后运行，依赖jvm虚拟机
3.       js一门客户端脚本语言，并且是弱类型语言，就是变量都用var定义。
4.       js语言可以直接运行（只要电脑上有浏览器即可）
3. 运算符
       一元运算符
       二元运算符
       == 比较运算符
       == 逻辑运算符
       三元运算符：
语法：条件? 值1：值2；
注意：
1.       如果值为null或者值为undefined ,进行条件判断返回boolean为false
2.       如果值为“”空串，进行条件判断返回boolean为false
3.       比较运算符 ==  和 ===  区别。
       == ：进行条件判断，不考虑类型，直接进行数值的比较
       === ：进行条件判断时，先比较类型，然后再比较值
三．javaScript的常用对象（掌握）
1. Function方法对象
==原则：先创建方法，然后再调用方法。
==常用的创建方法的两种方式：
       第一种方式：普通方法的创建
               function 方法名称（形参列表）{方法体}；
            比如：
            第一步：创建方法：

[Java] 纯文本查看 复制代码

function get(name){

                                                alert(name);

}

            第二步：调用方法：
                                    get（“jack”）;
       第二种方式：匿名方法的创建
                     var  方法名称= function(形参列表){方法体}。
         比如：var setName= function(name){alert(name)};
               setName(“jack”);
注意：内置对象arguments(可以不用创建，直接使用)，同时它也是一个数组对象。
2.Array对象
1.创建数组有四种方式：

[HTML] 纯文本查看 复制代码

a)        var  arr1= new Array();

b)        var  arr2 =new Array(size);

c)        var  arr3=new Array(element0, element1, ..., elementn);

d)        var   arr4 =[“a”,1,2,”boolean”,true,flase]

2.数组的特点：1.长度不固定，数组的最大长度=最大索引+1
                        2.元素类型任意的
3.数组的长度：length
数组的练习题：
1.       定义一个数组var  arr= new Array(6)  arr[5]=”abc”,数组长度是6;
2.       定义一个数组var  arr= new Array(6)  arr[10]=”abc”,数组长度是11;
3.       定义一个数组var  arr= new Array(6,5)  arr[2]=”abc”,数组长度是3,数组元素：5,6,”abc”;
3.Math对象
常见的方法：
       random():  随机数0-1，包含0，不包含1.
       ceil(): 向上取整。

[AppleScript] 纯文本查看 复制代码

比如 var a= Math.ceil(0.0); a=0

                var b=Math.ceil(0.1); b=1

                var c=Math.ceil(2.0); c=2

[Java] 纯文本查看 复制代码

        floor():向下取整。

比如：var a= Math.floor(9.9999) a=9;

                  var b = Math.floor(0.1)  b=0;

Day10
一．       BOM
== BOM: browser object model(浏览器对象模型)
BOM对象是由浏览器的各个部分组成。
== 浏览器：
       窗口：比如操作：打开窗口，关闭窗口
对应的对象：Window
       地址栏：比如操作：在地址栏输入访问的地址
对应的对象：Location
       屏幕：比如：缩放窗口，获取窗口的宽和高
对应的对象象：Screen
       历史记录：比如点击后退前进箭头，访问的网页会发生变化
对应的对象: History
       浏览器：比如获取浏览器的版本，浏览器的引擎
对应的对象：Navigator
== Window对象
      注意：调用Window对象方法或者属性时，可以省略window对象。
常用的方法：
      第一类方法：弹出窗口方法
            alert() ; confirm(); prompt();
      第二类方法：打开一个新的窗口或者关闭一个新的窗口
            *var newWindow= open(参数);
               参数：第一种可以打开其它网站的资源，参数写具体的网址
               参数：第二种打开自己网站的资源，直接写资源路径
            *close（）
               newWindow.close(); newWindow对象表示新打开的窗口
第三类方法：定时器方法
      ==开启定时器
            一次性定时器：var stid= setTimeout(js代码，时间);
            循环定时器：var siid=setInterval(js代码，时间);
      ==清除定时器：
            clearTimeout(stid);
            clearInterval(ssid);
二．       DOM
==概述：文档对象模型，文档对象是由文档的各个部分组成的对象。
         文档指的html网页（根标签，标签，属性，文本等等）。
==常见对象：
  注意：操作元素的原则：通过父元素操作子元素。
       document对象：代表整个标记性文档（比如：html）
方法：
            创建一个元素（标签）： var ele = document.createElement(“标签名称”);
            创建一个文本（文本元素）var text = document.createTextNode(“文本”);
      获取元素对象的方法：
1.       根据id获取元素：getElementById(“id属性的值”);
2.       根据标签名称获取元素数组：

[Java] 纯文本查看 复制代码

getElementsByTagName(“标签名称”);

3. 根据class属性的值获取元素数组：

[Java] 纯文本查看 复制代码

getElementsByClassName(“class属性的值”);

       Element对象
方法：
            添加一个子元素：父元素.appendChild(子元素);
            移除一个子元素：父元素.removeChild(子元素);

欢迎光临黑马程序员技术交流社区 (http://bbs.itheima.com/)

黑马程序员IT技术论坛 X3.2