JavaScript

1     JavaScript简介

基于对象(非面向对象)

1.1 JavaScript概述

一个完整的JS实现由一下3部门组成,核心(ECMAScript)、文档对象模型(Document Objrct Model,简称DOM)、浏览器对象模型(Browser Object Model,简称BOM)。

DOM树:文档对象,JS操作DOM

1.2 JS Hello World

<!DOCTYPE html>
<html>
<head>
         <meta charset="UTF-8">
<title>JavaScript引入方式</title>
<script type="text/javascript">
         alert("JS Hello World");//弹窗输出
         //文档对象
         document.write("learn javascript now")//页面输出
</script>
</head>
<body>
</body>
</html>

1.3 JavaScript基础语法

JavaScript 引入方式

内部;外部;

JavaScript 注释

单行: // ;

多行: /* */ ;

JavaScript 变量

JavaScript 是弱类型语言,统一用var 来定义变量;

JavaScript基本数据类型

数值类型;

字符串类型;

布尔类型;

Undefined(表示变量不含有值);

Null(置空变量));

JavaScript运算符

1,算术运算符;

2,赋值运算符;

3,比较运算符;

4,逻辑运算符;

5,三目运算符;

6,字符串连接“+”

JavaScript选择与循环

1,if...else 语句;

2,switch 语句;

3,for 循环语句;

4,while/do..while 语句;

JavaScript函数

function fun1() {
                   // body...
                   alert("第一个函数");
         }
         fun1();

注意区分Break和Continue

2     JavaScript操作DOM节点

2.1 JavaScript 处理DOM 事件

<!DOCTYPE html>
<html>
<head>
         <meta charset="utf-8">
         <title>JavaScript处理DOM事件</title>
<script type="text/javascript">
         function fuck(){
                   alert("点我干嘛?");
         }
</script>
</head>
<body>
<input type="button" value="点我一下" onclick="fuck()"/>
</body>
</html>

2.2 JavaScript 操作DOM 节点 

1,JavaScript 修改DOM 节点

2,JavaScript 添加DOM 节点

3,JavaScript 删除DOM 节点

function modifyDOM1(){
        document.getElementById('text1').value="这里输入ID";
        document.getElementById('pwd1').value="这里输入密码";
    }
    function modifyDOM2() {
        document.getElementById("sp1").innerHTML="用户名";
        document.getElementById("sp2").innerHTML="密码";
    }

  

<script type="text/javascript">
    function addDOM1() {
        /* 创建p标签,里面加入内容 */
        var p=document.createElement("p");
        var nodeText=document.createTextNode("文本框前面的文字内容");
        p.appendChild(nodeText);
        /* 找到父节点,插入DOM */
        var parent=document.getElementById("parent");
        var child=document.getElementById("child");
        parent.insertBefore(p,child);
    }
function addDOM2() {
        /* 在后面插入节点 */
        var h4=document.createElement("h4");
        var nodeText=document.createTextNode("游戏新闻");
        h4.appendChild(nodeText);
        var parent=document.getElementById("parent");
        parent.appendChild(h4);
    }
</script>

appendChild()函数作用

(1)向双标签内部添加内容

(2)父节点下的子节点后面添加DOM

function removeDOM() {
        /* 获取父节点 */
        var parent=document.getElementById("parent");
        var child=document.getElementById("child");
        /* 父节点remove */
        parent.removeChild(child);
    }

2.3 JavaScript修改DOM 节点CSS 样式

document.getElementById("boy").style.color="red";

3     JavaScript对象

3.1 JavaScript对象定义

1,JavaScript 对象定义

2,JavaScript 动态的添加属性和方法

3,JavaScript 动态的删除属性和方法

4,JavaScript 对象构造方法

var p=new Object();
p.name="Java and Oracle"; // 动态的添加属性
p.func=speak;  // 动态的添加方法
//delete 属性、方法
//赋值为undefined
 function person(name,age){
        this.name2=name;
        this.age2=age;     
    }

3.2 JavaScript字符串对象

1,字符串对象实例化方法

2,字符串length 属性

3,字符串indexOf 方法使用indexOf() 来定位字符串中某一个指定的字符首次出现的位置

4,字符串replace()方法使用replace() 方法在字符串中用某些字符替换另一些字符

var s1="直接定义字符串";

var s2=new String("使用new关键字定义字符串");

3.3 JavaScript日期对象

1,日期对象实例化

2,getTime()方法,返回1970 年1 月1 日至今的毫秒数。

3,getFullYear() 从Date 对象以四位数字返回年份。

4,getMonth() 从Date 对象返回月份(0 ~ 11)。

5,getDate() 从Date 对象返回一个月中的某一天(1 ~ 31)。

6,getHours() 返回Date 对象的小时(0 ~ 23)。

7,getMinutes() 返回Date 对象的分钟(0 ~ 59)。

8,getSeconds() 返回Date 对象的秒数(0 ~ 59)。

9,getDay() 从Date 对象返回一周中的某一天(0 ~ 6)。

var date=new Date();

 3.4 JavaScript数组

1,数组的声明;

2,数组的遍历;

3,数组元素排序sort()方法;

4,数组元素组合成字符串join()方法;

5,合并数组元素concat()方法;

6,颠倒数组元素reverse()方法;

var arr=new Array();
var arr2=new Array(3);

4     JavaScript常用函数 

4.1 JavaScript 全局函数

全局函数不属于任何一个内置对象。

JS 包含以下7 个全局函数,用于一些常用的功能:escape(),eval(),isNan(),isFinite(),parseFloat(),paaseInt(),unescape();

Eval()方法:执行代码;

<script type="text/javascript">
         var str="1+2+3";
         alert(eval(str));
</script>

4.2 window对象常用方法及事件

alert();弹出消息框confirm() prompt()

window.alert("太简单了,整理啥?");
window.confirm("简单到爆炸");
window.prompt("观察prompt、基本不会使用,呵呵");

 setTimeout();执行一次

setinterval();执行多次

open();打开窗口

window.onload 发生在文档全部下载完毕的时候。(HTML onload事件)

window.onresize 发生在窗口大小发生变化的时候。(了解)

function tuan() {
         alert("xxxxx");
}
window.setTimeout("tuan()",3000);
var n=1;
function q() {
         document.write("xxxxx");
         n++;
}

window.setInterval("q()",1000);

window.open();        打开窗口

window. onload();    发生在文档全部下载完毕的时候

<script type="text/javascript">

                   window.onload=function(argument) {

                            alert("window对象提供的加载完成");

                   };
                   function loadInfo(argument) {

                            alert("HTML提供的加载完成");
                   }

</script>

  暂时先到这里

 

oraclepeixun
原文地址:https://www.cnblogs.com/dldrjyy13102/p/7502842.html