JavaScript基础使用

原创已于 2022-05-20 19:24:20 修改 · 223 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #sass #前端

于 2022-05-14 11:49:17 首次发布

本文详细介绍了JavaScript的基础知识，包括运算符如算术、赋值、比较和逻辑运算符，以及流程控制语句如顺序、选择和循环结构。深入讲解了函数的定义和调用，强调了函数的特性及参数处理。此外，还涵盖了变量的定义、数据类型，以及Date对象的使用。JavaScript的执行方式、常用函数、DOM操作和事件处理也进行了阐述，最后提到了正则表达式和表单校验的重要性。

javascript里面的运算符
算术运算符
+,-,*,/,%
++,--
赋值运算符
=:基本赋值
+=,-=,*=,/=,%=
比较(关系运算符)
<,<=,>,>=,==
逻辑运算符
实际开发中:逻辑双与&&,逻辑双或||
三元(三目)运算符
(表达式)?执行true的结果:false的结果

javascript里面的流程控制语句
三大类
1)顺序结构:js代码从上而下依次加载
2)选择结构
if结构
if(表达式){
语句
}

if(表达式){

}else{

}

if(表达式1){
语句1;
}else if(表达式2){
语句2 ;
...
...
}else{
语句n;
}

switch结构

switch(表达式){
case 可以变量/也可以常量:
语句1;
break ;
...
...
default:
语句n;
break ;
}
3)循环结构

for(使用居多),while(其次while),do-while
for in
for-in类似于增强for循环
应用场景:
1)遍历数组
2)遍历对象的属性

JavaScript函数的定义以及调用

定义函数的格式1 形式参数列表
function 函数名称(参数名称1,参数名称2....){
函数的里面业务逻辑
直接在这输出document.write("xxx") ;
}
格式1调用:
单独调用
函数名称(实际参数列表) ;


格式2:(推荐)
function 函数名称(参数名称1,参数名称2....){

函数的里面的业务逻辑
return 结果;
}
格式2调用:
赋值调用
var 最终结果变量 = 函数名称(实际参数列表) ;

定义函数的注意事项:
1)js是弱类型语言,定义函数的时候,参数名称不能携带var
2)js定义时候,没有返回值类型,但是函数中可以携带return语句,代表方法结束!
3)Js中没有函数重载的概念,如果方法名相同,后面定义的函数将前面定义的函数覆盖了
4)
实际参数列表 < 形式参数列表,函数依然会被调用,不过值是"NaN",有一个形式参数没有赋值
实际参数列表 > 形式参数列表,将实际参数的值赋值给形式参数,多余的实际参数,直接省略不计!

5)隐藏一个数组名称:arguments,作用:将实际参数绑定给形式参数

setTimeout和setInterval的区别

setInterval (function , 毫秒值 ) 在一定时间内执行function 可以循环执行

setTimeout(function ，毫秒值 ) 在一定时间内执行 function 只执行一次

Js定义变量如何定义以及数据类型有哪些

Js中定义变量使用var定义,var可以定义任何类型的数据!
数据类型:
        1)无论是整数还是小数,都是number类型        ---会提升为Number类型
        2)无论是字符还是字符串,都是string类型        ---会提升为String类型
        3)boolean类型                            ---会提升为Boolean类型
        4)object类型                             ---会提升为Js所有对象的模板Object类型
        未定义类型(没有意义)

Js中的函数定义以及调用

Js定义函数的格式1:
    function 函数名称(参数名称,参数名称2...){   -- 类似Java中没有具体返回类型的方法使用
        //完成自己功能逻辑
        直接输出   
    }
调用
    上面这种方式 :单独调用
        函数名称(实际参数1,实际参数2...) ;
    
Js定义函数的格式2:
     function 函数名称(参数名称1,参数名称2...){  
                        -- 类似Java中有具体返回值类型的使用,js中不需要返回值类型
        //完成自己功能逻辑
        return 结果;
        
    }
调用:
    上面这种格式2:
        赋值调用
        var 结果变量 = 函数名称(实际参数1,实际参数2...) ;

Js使用函数,没有方法重载的概念,方法名相同,后面函数将前面的函数进行覆盖!

Js中的Date对象创建以及获取年月日的方法

//js中定义变量/创建对象,都是var
var date = new Date() ; //创建js日期对
//获取年份
var year = date.getFullYear()  ; 
//获取年中月
var month = date.getMonth()+1  ; //getMonth() :0-11之间的整数
//获取月中的日期
var monthWidhDate = date.getDate() ;//getDate():1-31之间的整数

javascript的使用方式有几种,列举

两种方式:
    1)内部方式
            标准格式,在head标签体中使用
            <script>
                //书写js代码
            </script>
            
            弊端:js代码和html标签混合使用,不利于后期维护管理
    2)外部方式:前端人员使用这种方式
        在js文件夹下 有很多.js文件
        在html页面中引入xx.js文件
        
        在head标签体中
        <script src="js/xxx.js"></script>

javascript中常用的函数列举

    document.write("xxx") ;//浏览器中打印内容
    alert("消失对话提示框") ; 
    paseInt("数字字符串") ;---->将string---number(数字字符串---整数类型)
    typeof(变量名) :查看变量的数据类型
    console.log("xxx") ;在浏览器中的控制台打印内容
    
    Js的String 对象
            charAt(index):获取指定索引处的字符
            concat(str) :字符串拼接功能
            substring(beginIndex,endIndex):截取,从指定位置开始截取到指定位置接收(不包含endIndex,而是endIndex-1)

Js内置对象String

Js的String 对象
            charAt(index):获取指定索引处的字符
            concat(str) :字符串拼接功能
            substring(beginIndex,endIndex):截取,从指定位置开始截取到指定位置接收(不包含endIndex,而是endIndex-1)
            其他功能

Js的自定义对象

使用js这种方式如何定义Person对象 ,还需要使用Js创建Person对象;
四种方式
    1)类似于Java中有参构造
    2)类似于Java中的无参构造
    3)使用Object对象(代表所有js对象)
    4)字面值的方式: "Json数据格式"  (后期的重点)

Js中DOM操作 (重点)

什么是DOM,核心思想 :获取元素对象(标签对象),改变标签对象属性
            举例:
                    img src属性
                    input type="text" value属性
                    div/span常见的标签都有 innerHTML或者innerText属性
                    ....
                    
                    推荐的方式: (原生Js)
                        使用document的方法来获取标签对象
                                document.getElementById("id属性值") ;  推荐
                                document.getElementsByClassName("所有的同名的class属性值") 



JavaEE中有一种技术:dom4j ---- dom for java
就是后期处理xml文件读取使用dom4j(基于面向对象编程思想)

Js的常见的事件

 点击相关的 
   单击事件 (重点)

    双击事件


 焦点事件 (重点)
    获取焦点
    失去焦点
 选项卡发生变化的事件 (重点)
    select标签 下拉菜单
            option 下拉选项
 鼠标经过事件
 鼠标移出事件
 
 页面载入事件 (重点)

Js正则表达式以及原生 Js的表单校验!(重点)

常用的语法---正则表达式是Js的内置对象---内置一个方法  var flag= test(用户输入的表单中的字符串内容)

JavaScript内置对象
Js内置对象:Date日期,String字符串,Array数组,正则表达式对象..
浏览器在解析javascript的时候,能够识别这个对象,使用里面的方法!

获取年月日

date.getfullyear

date.getmonth

date.getdate(获取月份的日)

date.getday(获取星期的日)

Js的dom

DOM编程:Document Object Model,基于文档对象模型编程 
在解析html标签的时候,浏览器的js引擎将html的每一个标签,封装标签对象(节点对象/元素对象),形成树结构,
使用一些方式获取节点对象,改变它的特有属性!

获取标签对象,通过document方法有几种方式,列举

document.getElementById("id属性值") ; //id属性值获取标签对象
document.getElementsByClassName("所有同名的class属性值") ;//通过class属性值获取标签对象
document.getElementsByTagName("所有同名的标签名称") ; //通过标签名称获取标签对象
document.getElementsByName("同名的name属性值");//通过name属性值获取标签对象

获取焦点和失去焦点事件,选项卡发生变化的事件,列举

onfocus ;---- focus事件
onblur ;------ blur事件
onchange ; ----change事件

表单标签中 onsubmit事件指的是什么?

onsubmit:表单是否提交成功 ;
如果返回结果false,不能提交;true,可以提交

js中自定义对象有哪些方式?

4种方式
        1)function 对象(形参列表){
            //追加属性
            this.属性= 形参名称;
            //追加方法
            this.方法名 = function(){
                ...
            }
        }
        var 对象名  = new 对象(实际参数列表) ;
        
        2)function 对象(){
            
        }
        //创建对象
        var 对象名  = new 对象() ;
        
        //追加属性
        对象名.属性名= 值;
        
        //追加方法
        对象名.方法名 = function(){
                ...
            }
        
        
        
        3)使用Object对象:代表所有js对象的模板
        var 对象名 = new Object() ;
        //追加属性
        对象名.属性名= 值;
        
        //追加方法
        对象名.方法名 = function(){
                ...
            }
            
            
         4)字面量值的方式,json(轻量级数据交互格式) {"key":value}
         类似Java的实体
         var student = {
                 "name":"张三",
                 "age" :20,
                 "gender":"男",
                 "birthday":"1989-02-28"
         }
         
        数组或者集合格式
         var students = [
              {
                 "name":"张三",
                 "age" :20,
                 "gender":"男",
                 "birthday":"1989-02-28"
         },
          {
                 "name":"李四",
                 "age" :20,
                 "gender":"男",
                 "birthday":"1989-02-28"
         },
          {
                 "name":"王五",
                 "age" :20,
                 "gender":"男",
                 "birthday":"1989-02-28"
         }
         ] ;