Web 基础 3 JavaScript 入门

2018-03-23  本文已影响19人  小熊先生很不开心

1.1JavaScript的概述

1.1.1什么是JavaScript

  JavaScript是web上一种功能强大的编程语言，用于开发交互式的web页面。它不需要进行编译，而是直接嵌入在HTML页面中，由浏览器执行。

1.1.2 JavaScript的作用

  使用JavaScript添加页面动画效果，提供用户操作体验。主要应用有：嵌入动态文本于HTML页面、对浏览器事件做出响应、读写HTML元素、验证提交数据、检测访客的浏览器信息等。

1.1.3 JavaScript的引入

  在HTML文件中引入JavaScript有两种方式，一种是在HTML文档直接嵌入JavaScript脚本，称为内嵌式，另一种是链接外部JavaScript脚本文件，称为外联式。对他们的具体讲解如下：

<script type="text/javascript">
    //此处为JavaScript代码
</script>

<script src="1.js" type="text/javascript" charset="utf-8"></script>

1.2 JavaScript语法及规则

  JavaScript的语法和Java的语法有很多相似之处，这里就进行简明的介绍

1.2.1 注释

-单行注释

//
Hbuilder快捷键 ctrl+/

/* */
Hbuilder快捷键 ctrl+shift+/

1.2.2 变量

1.2.3 运算符

1.2.4正则对象

1.2.5 JS数组对象

方法摘要
length() 设置或返回数组中元素的数目。
join() 把数组的所有元素放入一个字符串。元素通过指定的分隔符进行分隔。
pop() 删除并返回数组的最后一个元素
push() 向数组的末尾添加一个或更多元素，并返回新的长度。
reverse() 颠倒数组中元素的顺序。

物理翻转：就是把元素下标进行互换

1.2.6全局函数（global）

http://www.itcast.cn/           是URL
/a.html                     是URI
http://www.itcast.cn/a.html     既是URL，也是URI

1.2.7 自定义函数/自定义方法

function 方法名(参数列表){
    函数体
}

1.2.8 自定义对象（扩展）

无參格式
    function 对象名(){
        函数体
    }
    

function Person(){
    alert("hahah")
}

var p = new Person();


带参数格式
    function 对象名(参数列表){
        函数体
    }


function Person(a,b){
    alert(a + "--" + b);
}

var p = new Person(1,2);

有属性格式：
    function 对象名(){
        this.属性名1=属性值1;
        this.属性名2=属性值2;
        …….
}
this表示当前对象。

function Person(){
    this.name = "小米";
    this.age = 18;
}

function Student(a,b){
    this.name = a;
    this.age = b
}

function Person(){
    
}

var p = new Person();
p.name = "aa";
p.age = 16;

应用场景：适用于对象构建及代码复用。

格式：
    var 对象名 = {属性名1:”属性值1”, 属性名2:”属性值2”, 属性名3:”属性值3”……};

注：该方式直接创建出实例对象，无需构建函数，无需再new创建实例对象，直接使用即可

var p = {name:"小米",age:18}

应用场景：适用于快速创建实例对象及数据封装。

1.3 BOM对象

1.3.1 BOM对象简述

1.3.2 BOM ：Window对象

函数名 描述
setInterval() 按照指定的周期（以毫秒计）来调用函数或计算表达式
clearInterval() 取消由 setInterval() 设置的 timeout。
setTimeout() 在指定的毫秒数后调用函数或计算表达式
clearTimeout() 取消由 setTimeout() 方法设置的 timeout 
格式
    setInterval(调用方法,毫秒值);
    //毫秒值：  循环周期



function run1(){
    alert("我是run1");
}
//执行下句后，每隔1秒就会调用一次run1方法
setlnterval("run1()",1000)

格式：
    clearInterval(定时器ID);


function run1(){
    alert("我是run1");
}
//设置一个定时器，定时器ID保存在变量i中
var i = setlnterval("run1()",1000);
//取消这个ID对应的定时器
clearInterval(i);

格式
setTimeout(调用方法,毫秒值);


function run1(){
    alert("我是run1");
}
//设置一个定时器，定时器执行一次
setTimeout("run1()",1000)
函数名 描述
alert() 显示带有一段消息和一个确认按钮的警告框。
confirm() 显示带有一段消息以及确认按钮和取消按钮的确认框。
prompt() 显示可提示用户输入的提示框 ，点击确定获得用户输入数据 
alert("你好")
alert.png

注：不同浏览器显示的组件样式不同，这里我们无需关注组件样式。

confirm("确定或者取消");
comfirm.png

该方法有返回值，用户通过选择“确定”或者“取消”，方法结束会返回boolean类型的值。

1.3.3BOM ：Location对象

header 1 header 2
row 1 col 1 row 1 col 2
row 2 col 1 row 2 col 2 
<script type="text/javascript">
    function change(){
        location.href = "http://www.itheima.com";
    }
</script>

<input type="button" value="点我" onclick="change()"/>

1.3.4BOM ：History对象（了解）

上一篇下一篇

猜你喜欢

热点阅读