html笔记

javascript概述:
是一种基于对象和事件驱动的解释性脚本语言,应用于网页的编程处理.

alert

<input type="button" value="第一个按钮"
           onclick='alert("Hello world");'>

head封装

<script type="text/JavaScript" language="JavaScript">
        function firstMethod()
        {
            alert("second hello");
        }
    </script>

js文件先导入

<script src="js.js" type="text/javascript">

文件

function secondMethod() {
    alert("function in file")
}

调用

<input type="button" value="第三个按钮" onclick="secondMethod();">

js的书写方式

• 直接写在onxxx事件中
• <script>块中,onxxx事件中调用—当前页面的重用
• js文件中,页面上先使用<script src="">引入,onxxx事件中调用–建议使用

var声明变量

var s="mary";
var n="12"
alert(s);

JavaScript数据类型

• 基本类型

1. Number
2. String
3. Boolean

• 特殊类型

1. null
2. undefined

• 复杂类型

1. Array
2. Math
3. Object
4. …

var s1;
alert(s1);

s1就是undefined,未赋值

数据类型的隐式转换

• javascript属于松散类型的程序语言
• 变量在声明时不需要指定数据类型
• 变量由赋值操作确定数据类型
• 不同类型数据在计算过程中会自动进行转换

var a=1;
var b="b"
var c="true"
var d="false"

• 数字+字符串:数字转换为字符a+b=1b
• 数字+布尔值:true转换为1,false为0.a+c=2
• 字符串+布尔值:b+c=btrue
• 布尔值+布尔值:c+d=1

显式转换

boolean isNaN():看是否是不是数字,不是就返回true,但是132fjif可以被认为是数字,返回false

var a=10;
var b="10";
if(a==b){a};
if(a===b){b};

返回a.if(a===b){b};严格相等.if(a==b){a};值相等
三元运算符

function judgeNumber(){
    var s=document.getElementById("txtN").value;
    var data=parseInt(s);
    var result=data>10?"大了":(data==10?"对了":"小了");
    alert(result);
}

常用内置对象

• 简单数据对象 String number boolean
• 组合对象 array math date
• 高级对象 function RegExp

concat数组合并

var a=[1,2,3];
    var b=[4,5];
    var a=a.concat(b); 
    alert(a);

输出1,2,3,4,5

slice数组截取

var a=[1,2,3,4,5];
var b=a.slice(1,3);
alert(b);

输出2,3

求随机整数

function getRandom(a,b) {
    alert(Math.floor(Math.random()*(b-a)+a));

}

number对象的常用方法

• toString 数值转换为字符串
• toFixed(n) 数值转换为字符串,并且保留小数点后n位数

正则表达式对象
正则表达式本身就是一个纯文本的表达式,用来表示对文本的匹配,比如\d{3}

date的常用方法

• 读取日期的相关信息
  getDate(); getDay(); getYear();
• 修改日期
  setDate(); setMonth(); setHour();
• 转换为字符串
  toString toLocaleTimeString(); toLocaleDateString();

js不可以实现传统意义上的重载
js中方法重名以最后一次为主

全局函数概述

• 全局函数可用于所有内建的JavaScript对象
• 常用的全局函数有:
• parseInt/parseFloat
• isNaN
• eval
• decodeURI/encodeURI
• 等等

DHTML简介

• 操作html以创造各种动态视觉效果
  一种浏览器端的动态网页技术
• DHTML的功能
  动态改变页面元素
  事件响应机制制作动态折叠的树状结构和菜单
  与用户进行交互等
  DHTML对象模型包括浏览器对象模型和dom对象模型

DHTML应用dynamic

• 什么是dhtml应用:动态网页效果
• 对象模型

对话框
alert(str)

• 提示对话框,显示str字符串的内容
  confirm(str)
• 确认对话框,显示str字符串的内容
• 按"确定"按钮返回true,其他操作返回false
  prompt(str,value)
• 输入对话框,采用文本框输入信息
• str为提示信息,value为初始值
• 按"确认"按钮返回输入值,其他返回undefined

定时器

function xians() {
    document.getElementById("times").value=new Date().toLocaleTimeString();
}
var timer;
function star() {
    timer=setInterval(xians,1000)
}
function stop(){
    clearInterval(timer);
}

需要一个var timer全局变量

对话框
window.alert();
window.confirm();
window.prompt();
打开新窗口
window.open(url,name,配置)open("http://www.baidu.com","a","toolbar=yes,location=no,width=500,height=300")
window.close();
定时器相关
周期性
window.setInterval(func,time);
window.clearInterval();
一次性
window.setTimeout(func,time);
window.clearTimeOut();

DOM:文档对象模型

function Doms1(){
    var img1=document.getElementById("img1");
    img1.src="2.jpg";
    var p1=document.getElementById("p1");
    p1.innerText="才那个风貌"
    p1.style.color="red";
    p1.style.backgroundColor="blue";
}

<input type="button" value="更改" onclick="Doms1();">
<img src="image/close.png" id="img1">
<p id="p1">到付</p>

改样式可行但是麻烦;

复杂的样式
建议在样式表中定义好
obj.className="";

动态创建信息

function addNewNode() {
    var f=document.getElementById("form1");
    var n=document.createElement("input");
    n.type="text";
    n.value="mary";
    f.appendChild(n);
    var a=document.createElement("a");
    a.href="http://www.baidu.com";
    a.innerHTML="百度";
    a.target="_self";
    f.appendChild(a);
}

function addRows() {
    var t=document.getElementById("t1");
    var row=t.insertRow(t.rows.length);
    var cell1=row.insertCell(0);
    cell1.innerHTML=document.getElementById("textName").value;
    var cell2=row.insertCell(1);
    cell2.innerHTML=document.getElementById("textPrice").value;
}

3种封装

function testObject() {
    var cc=new Object();
    cc.name="marry";
    cc.age=18;
    cc.sing=function () {
     alert("sing sing sing");
    }
    alert(cc.name);
    alert(cc.age);
    cc.sing();
}


function Student(n,a) {
    this.name=n;
    this.age=a;
    this.introduceSelf=function () {
        alert("i am"+this.name+','+this.age+"years old");
    }
}
function testClass() {
    var p1=new Student("mary",18);
    alert(p1.name);
    p1.introduceSelf();
    var p2=new Student("jack",20);
    alert(p2.age);
    p2.introduceSelf();
}
function testJSON() {
    var obj={
        "name":"marry",
        "age":18,
        "sing":function (){alert("aaa")}
    }
    alert(obj.age);
    alert(obj.sing());
}