javascript入门

javascript

1.javascript:弱类型语言,简称就是

2.js中的注释

//单行注释
/*多行注释*/

3.js中一些常用的函数

(1)向浏览器写入内容

document.write();

(2)在控制台打印内容

console.log();

(3)window出窗口,顶级对象,经常使用,可以省略window不写

window.alert();

4.js中的数据类型

(1)number类型:包含整数与小数;Number是js的内置对象

(2)string类型:包含字符串与字符;String是js的内置对象

(3)boolean类型:true/false;Boolean是js的内置对象

(4)object类型;Object是js的内置对象

(5)undefined类型:未定义类型,当前变量没有赋值,没有意义

5.js中变量的定义:无论是什么类型都用var来定义

(1)变量定义的注意事项

a.不存在重复定义,后面定义的变量会将前面的变量名覆盖掉

b.使用var可以定义任何数据类型,var可以省略不写

(2)查看当前变量的数据类型,js通过值判定数据类型

typeof(变量名)

6.运算符

(1)算数运算符:+,-,*,/,%

(2)赋值运算符:=,+=,-=,*=,/=,%=

注意事项:赋值运算符的后四个在定义时不能使用.

var e = 10 ;
var a = 20 ;
var a += e;//错误的赋值方式
f+=e ;//正确的赋值方式

(3)比较运算符:>,<,>=,<=,==

(4)逻辑运算符:&&,||

(5)三元运算符:(表达式)?执行成立的结果:执行不成立的结果

7.选择结构语句

(1)if语句

if(条件表达式){
    执行语句1;
}else if(){  
         执行语句2;
}
...
else{
    执行语句n;
}
//注意事项:if语句中的条件表达式,如果是string类型与number类型比较,会默认将string类型转换为number类型进行比较

(2)switch语句

switch(表达式){
       case 值1:
            语句1;
            break;
       case 值2:
            语句2;
            break;
       ...
       default:
            语句n;
            break;
}
​
/*注意事项:
(1)switch语句中的case语句既可以是变量,也可以是常量
(2)在使用switch语句之前需要将表达式转换为与case值数据类型

(3)for循环语句

for(初始化语句;条件表达式;控制体语句){
    循环体语句;
}

(4)while语句

初始化语句;
while(条件表达式){
    循环体语句;
    控制体语句;
}

(5)do-while语句

初始化语句;
do{
    循环体语句;
    控制体语句;
}while{条件表达式};

8.js函数的定义及调用

//函数(方法)的定义格式:
function 方法名(形式参数1,形式参数2,形式参数3...){
    业务操作;
}
//函数(方法)的调用:
//(1)定义函数的里面有return语句时,采用赋值调用:
    var 变量名 = 方法名(实际参数列表);
//定义函数的时候里面没有return语句时,单独调用"
    方法名(实际参数列表);
/*定义函数的注意事项:
(1)函数中的形式参数不能带var
(2)函数式可以有return语句,不需要返回值,格式始终为:
    function 方法名(形式参数列表){}
(3)js是弱类型语句,没有重载,后面定义的方法会将前面定义的方法覆盖
(4)如果函数的形式参数个数小于实际参数个数,结果为NaN(没有值,有一个形式参数没有赋值),但是函数依然调用了,只是将多余的实际爱参数去除了
(5)函数里面存在默认的数组arguments名称,目的就是将实际参数绑定给形式参数,进行赋值.

9.js中的for-in语句:类似于java中的增强for循环语句

//格式
for(var 变量名 in 对象名称){
    输出变量名;
}

10.js事件编程三要素

(1)事件源,一般都指定的是html标签

(2)编写事件监听器(编写一个函数)

(3)绑定时间监听器

11.自定义对象

//方式1:类似java中的有参构造函数
    function 对象(形式参数列表){//定义一个函数
        this.属性名称1= 形式参数1;
        ...
        this.方法名 = function(){
            业务操作
        }
    }
    var 对象名 = new 对象(实际参数) ; //创建对象
//方式2:类似java中的无参构造方法
     function 对象(){
         var 对象名 = new 对象();
         对象名.属性 = 值;  //追加属性
         ...
         对象名.方法名 = function(){
             业务操作;
         }
     }
//方式3:利用Object,及所有的js对象的模板
var 对象名 = new Object();
对象名.属性 = 值;
..
对象名.方法名=function(){
    业务操作;
}
//方式4:字面量值的方式---json数据格式
var 对象名 = {
    "属性1" : 值1 ;
    "属性2" : 值2 ;
    ...
    "方法名" : function(){
        业务操作;
    }
}

12.js内置对象值String

//创建字符串对象
var 对象名 = new String("XXX") ;
​
//字符串的比较
==    //比较地址值是否相等
valueOf()   //比较内容是否相等
​
//js中的String常用的内置方法
charAt(var index)   //获取指定索引处的字符
concat(var str)     //拼接功能,在尾部连接新的字符串
split(var str)      //使用特定字符号将字符串拆分成字符数组
substr(var begin,var length)    //从指定位置开始,截取指定长度的字符串
substring(start,end)  //从start开始,截取到end-1处的字符
fontcolor(red/green.....) //给字符串加上颜色

12.js内置对象之Date

//创建日期对象
var 对象名 = new Date() ;
对象名.getYear()       //获取当前年份与1900年的差值
对象名.getFullYear()   //获取当前年份
对象名.getMonth()      //获取年份中的月份
对象名.getDate()       //获取月份中的日期
对象名.getHour()       //获取小时数
对象名.getMinutes()    //获取分钟数
对象名.getSeconds()    //获取秒数

13.正则表达式:是一种规则,约束用户在表单中输入的数据

(1)数量词相关的语法

//X表示任意字符
X+          //代表X字符出现一次或多次
X?          //代表X字符出现0次或一次
X*          //代表X字符出现0次或多次

(2)范围相关的语法

//X代表任意字符
X{n,m}      //X字符至少出现n次但是不超过m次
X{n,}       //X字符至少出现n次
X{n}        //X字符出现n次

(3)其他

\d      //等价与[0,9]
\w      //等价于[A-za-z0-9_]

(4)正则表达式的定义

var reg = /正则表达式/;
​
//正则表达式的内置方法
test(用户输入的数据)       //结果时boolean
​
//边界匹配符号
^   //以..字符开头
$   //以..字符结尾

14.js的DOM编程:基于文档对象模型编程

(1)dom操作:获取标签对象来改变标签对象的属性

(2)dom获取标签对象的方式:

方式1:document对象的集合属性获取标签对象

all属性:获取页面中的所有标签对象,返回节点列表
forms属性:获取当前页面中的所有form表单对象
imags属性:获取当前页面中的所有img对象
links属性:获取当前页面中所有带有href属性的标签

方式2:节点关系获取标签对象

parentNode  //获取节点对象的父节点
childNodes  //获取所有的子节点
firstChild  //获取第一个子节点
lastChild   //获取最后一个子节点
previousSibling     //获取上一个兄弟节点
nextSibling         //获取下一个兄弟节点

方式3:document对象的方法获取(推荐使用)

document.getElementById("id属性值")            //前提条件:id不能重复,必须唯一
document.getElementsByClass("所有同名的class属性值")  
document.getElementsByTagName("所有同名的标签名称")  
document.getElementsByName("所有的同命的name属性")

15.事件编程的分类

(1)点击相关的事件

click       //单击事件
dbclick     //双击事件

(2)焦点相关的事件

focus       //获取焦点
blur        //失去焦点

(3)选项卡发生变化的事件

change      //下拉菜单:select

(4)鼠标经过事件

mouseover

(5)鼠标移出事件

mouseout

(6)页面载入事件

load