web-03-js

1、js是什么(给页面添加动作)

    javascript是一个脚本语言,由浏览器执行,不进行预编译,由浏览器直接执行

    1)操作DOM元素(Document)及html元素

    2)操作BOM元素及操作浏览器窗口对象

2、js特点

    1)解析执行:事先不编译,逐行执行

    2)基于对象:有大量的内置对象

    3)浏览器适合做哪些运算

        * 客户端的简单(逻辑)数据计算

        * 客户端表单的合法性验证

        * 浏览器的时间触发

        * 网页的特殊效果

        * 服务器的异步数据交互

3、js规范

    1)严格区分大小写

    2)字母数字_$组成,数字不能开头

    3)驼峰命名

4、基本用法(与css类似)

    1)行内(直接写在某行的内部)

        在html元素上添加事件属性,如:onclick=alert("点我干嘛?");

    2)嵌入式

        .1. 通常在script标签中写js代码

        .2. 调用

    3)文件调用方式

        .1. 写js文件

        .2. 在对应的html中引入js文件

5、基本组成部分

    1)注释

    2)变量

        -1. js是弱类型语言,不同的变量类型会根据具体数值自动给定类型(赋值了的变量都有类型,通过typeof+变量名,查看变量类型)

var a=1;
等同于
var a;
a=1;

        -2. js中存在变量声明提升,在js中声明但是未初始化,该变量的值就是underfined

var b;  //声明变量
console.log(b);
b=4; //初始化

        -3. 声明变量的方式

var:存在变量的提升(变量可以重复定义)
let:声明的变量不存在变量提升
const:定义一个常量方式

    3)数据类型

        -1)特殊类型

undefined
如:声明但没有初始化的为 null

        -2)Number类型(在js中变量类型可以自动转换,不区分整数和小数)

var age=34;
数值运算:+-*/%
如:1+"2"; //这里的加号具有拼接效果
true+true; //结果为2,true自动转换为1;false转换为0

        -3)String(字符串类型)

特殊字符需要转义
单引号混用
常用方法:
str.indexOf(a); //返回字符串出现的位置
str.replace(a,b); //将字符串中a变量替换成b变量

         -4)Boolean(布尔类型)

*可以自动转换成数值参与运算,运算时将true=1,false=0
*变量是不需要指定数据类型的,不同的数据类型之间就自动转换(只有在计算的时候)
number+string=string
number+boolean=number
boolean+string=string
boolean+boolean=number
*类型转换函数
toString() 将任何类型都可以转换成String,a.toString();
parseInt(); //强转(截取),若不能转换会返回“NaN(Not a Number)”
parseFloat(); //若不能转换会返回“NaN(Not a Number)”
isNaN(); //判断内容是否为非数字

        -5)Array(数组类型)

        -6)对象

    4)运算符

算术运算符:+-*/%;++;--
赋值运算符,关系运算符:=;>;<;>=;<=;==(是否相等);!=;===
==:比较数值是否相等
===(全等):比较的是数值和类型都相等
!=:不全等
逻辑运算符:!;&;|;&&;||
三目运算符:表达式?成立:不成立
onblur:失去焦点
document.getElementById(id值); //从页面中根据id的值查找指定的节点
document.getElementById(id值).value=值; //给页面中根据id找到的节点进行赋值

    5)流程控制语句

        -1. if...else...

if(表达式){执行语句1}else if(表达式){}..else{}

      js中的表达式可以为任意表达式,可以为任何数据类型

      转换规则如下:true/1/非空字符串--->都会转成true,其他所有的都转成false

         0/null/""/undefined/NaN--->false

        -2. switch...case

        -3. while(表达式){执行语句}   /    do{}while(表达式);

        -4. for

for(var i=0;i<5;i++){}

6、js中常用内置对象

    Number/String/RegExp/Array/Math/Data/Function

    1)Number

         * 创建

            var num=12;

         * 常用方法

             toFixed(num)  --将数字转成字符串,并保留小数点后num位(够位数就四舍五入),若位数不够就用0补

    2)String

        * 创建

var str="张三";
var str1=new String("lisi");

         * 常用方法

1. var len=str.length;  //返回长度
2. toUpperCase/toLowerCase //转大写转小写
3. charAt(index) //返回index位置的字符
console.log(str.charAt(0)); //结果为“张”
4. indexOf(findStr,[index])
.findStr:需要查找的字符串
.index:(可选)从index位置开始找,返回findStr第一次出现的位置,若没有,则返回-1
如:var index=str3.indexOf("a"); //从str3的0位置开始查找,找a字符在str3中第一次出现的位置
5. lastIndexOf(findStr); //查找findStr最后一次出现的位置
6. replace(findStr,toStr)
.findStr:需要查找的字符串,可以直接写字符串或跟正则表达式 /正则/
.toStr:将findStr替换成toStr(需要替换的字符串,返回替换后的字符串)
如:将str3中“a”全部替换成“g”
错误:console.log(str3.replace("a","g")); //不能全部替换
方案一:
var str3="sasdfsasdfasafsdf";
for(var i=0;i<str3.length;i++){
var find=str3.charAt(i);
if(find=="a"){
//保存a前面的内容
var prev=str3.substring(0.i);
//将当前的字符替换
find="g";
var after=str3.substring(i+1);
str3=prev+find+after;
}
}
方案二:正则表达式 RegExp
console.log(str3.replace(/a/g,"g"));

    3)RegExp (正则表达式)

        -1)正则表达式创建

var rg=/正则表达式/[范围];
var reg=new RegExp("正则表达式",[范围]);

        -2)正则表达式写法

ab:匹配ab(找ab)
[0-9]:表示数字
[a-zA-Z]:英文字母
{5}:表示出现的次数
{1,5}:1-5次
/^a/:表示以字母a开头
/a$/:以字母a结尾
/^a$/:只能是字母a

  注意:范围:

          g  --->global  全局

          i   ---->ignore 忽略大小写

    正则对象.test(str);   //判断一个字符串是否匹配该正则

  如:

var str4="asdabcsdfsfasdfa";
var reg=/^abc/; //用于规定必须是以abc开头,才为true
var result=reg.test(str4); //结局为false
var reg=/abc{2,}/; //规定以a开头以b结尾且c必须出现2次
var reg=/^abc$/; //必须是abc,完全匹配
如:将字符串中的狗字替换成“*”
var str5="一只小狗在快乐的奔跑着";
console.log(str5.replace(/狗)/g,"*");

   提示:String字符串对正则的支持

replace(reg.toStr);  //将符合正则的部分替换成toStr
match(regExp); //字符串的方法,用于返回字符串匹配正则的数组。找字符串中国有没有匹配正则的内容
search(regExp); //返回匹配的第一次出现的位置
如:
var str="aaasdf456sd1321";
console.log(str.match(/[0-9]/g)); //返回结果["4","5","6","1","3","2","1"]
console.log(str.search(/[0-9]/g)); //返回结构为6(表示数字第一次出现的位置)

    4)Math

      常用方法:

Math.sin() Math.cos() Math.tan()
Math.florr() -向下取整
Math.cail() -向上取整
Math.random() -随机生成0-1的小数

如:

console.log(Math.random()*1000+999);//[999-1999)
console.log(Math.floor(2.9)); //结果为2
console.log(Math.ceil(2.1)); //结果为3
例:随机生成1-10的整数
var num=Math.floor(Math.random()*10+1);

    5)Array

        -1)创建方法:

数组中的类型可以是任意的
var arr1=[1,"a",true,{"name":"张三"}]
数组的长度是可变的
var arr2=new Array();
arr2[0]="张三"; //arr2.length.返回结果为1

           注:二维数组

var arr3=[["南京","苏州","扬州"],["青岛","日照"]];
console.log(arr3[0][1]); //找到扬州

       -2)数组常用方法

reverse():反转,将数组内容反转过来
sort([function]):数组排序
-默认使用数组自己定义的排序规则
-function:自定义排序规则(可选参数)
如:var arr4=[30,255,7,50];
arr4.sort(); //按数字的首数字进行排序,将原数组排序

       -3)数组和字符串之间的转换

console.log(arr4.toString());  //数组转字符串
//字符串转数组
var str="1,45";
var arr=str.split(",");
console.log(arr);
for(var i=0;i<arr.length;i++){
var new_arr=arr[i].split("=");
arr[i]=new_arr;
}

    6)Date

      创建方式(跟参数与不跟参数)

var date=new Date();
var date=new Date("2017/6/22 15:32");

     日期常用方法:

toLoaleString()  --本机当前时间
getTime() --获取毫秒数(11115154841561秒)
getDate() --获取几号 如:23号
getDay() --获取星期的周几
getFullYear() --2018

    7)function

        常用写法:

function f(){}
var f=function(){}
var f=new Function(){};

   注意:js中没有方法重载的概念,调用时能找到方法名,则执行方法,如:

function f(a){
alert(111);
}
f();f(1); //这两种调用执行结果都一样

var f=new Function("a","b","return a+b");
f(2,3);

    8)其他

* arguments对象 --存在函数的代码中,用于表示函数的参数数组,如:

function cal(){
if(arguments.length==1){
return arguments[0]*arguments[0];
}else if(arguments.length==2){
return arguments[0]+arguments[0];
}
}//单数乘积,双数求和

* 箭头函数

let f2=(a,b=2)=>{return a+b;}
f2(3); //结果为5

* 变量作用域

    1、用var声明的变量是有作用域的

       定义在函数内部->称为私有变量->整个函数体

       定义在函数外部->整个js->并且存在变量提升的(声明)

    2、let/const   //不存在提升问题

如:

hi="哈喽"; //作用域最大(作用范围广),属于全局变量
//在外部方法中使用内部方法的私有变量
function outer(){
var x=1;
function inner(){
var y=2;
return y;
}
}

* 全局函数:所有js对象都可以使用

parseInt();
parseFloat();
isNaN()
eval() //执行表达式的字符串(用于计算)
-接收合法的表达式和语句
-只接收原始的字符串
如:
var str="12+34";
eval(str); //46
console.log("console.log(str)"); //输出  console.log(str)
eval("console.log(str)"); //输出46  
原文地址:https://www.cnblogs.com/xslzwm/p/9602948.html