js基础

野性酷女 2022-06-17 14:20 137阅读 0赞

\--引入

JS特点

轻量级脚本语言

区分大小写

语句使用分号';'分隔,但使用分号并不是必须的，也可以不用。

数字，字符串类似于Python，布尔值为true、false，数组==Python中的list

===为绝对相等，即类型、数值相等。而==则表示数值相等。‘3’==3 是对的

使用函数，以花括号\{\}分隔，函数可以有多个参数，可以有返回值

变量可以使用var关键字定义，命名规则与Python相同，不使用var定义的变量为全局变量

常量可以使用const 进行声明，声明后常量值就无法改变。const a=3.14

null为空，即未声明也未赋值，undefined为未赋值

单行注释使用//     多行注释使用/\*    \*/

字符串断行需要使用反斜杠(\\)

js中的数组和对象的索引方式类似于Python中的list和字典

定义数组或者对象元素，最后不能添加逗号

所有的编程语言，包括 JavaScript，对浮点型数据的精确度都很难确定。例如：

![复制代码][copycode.gif]

var x = 0.1;
    var y = 0.2;
    var z = x + y            // z 的结果为 0.3
    if (z == 0.3)            // 返回 false
    
    //正确的方式
    
    var z = (x * 10 + y * 10) / 10;       // z 的结果为 0.3

![复制代码][copycode.gif]

JS语法

JS--JavaScript是所有浏览器以及html5中默认的脚本语言，由此看出来她十分流行！！

js脚本可以放置在  html文件  或者  外部文件中。

如需在 HTML 页面中插入 JavaScript，请使用 <script> 标签。

如需在外部文件中插入js，<script>标签则不能在外部文件中使用，外部文件的扩展名一般是 .js 。

若使用外部文件，当某个html文件需要使用该js脚本时，需要添加这样一句：

通常的做法是把函数放入 <head> 部分中，或者放在页面底部。这样就可以把它们安置到同一处位置，不会干扰页面的内容。

--------------------

js数据对象及其常用属性方法：

数字Number()

Number()  将其他类型转换为数字类型

字符串String()

![复制代码][copycode.gif]

length   返回字符串长度
    
    valueOf()  返回字符串的值
    
    indexOf  返回字符串第一次出现的位置
    
    lastIndexOf  返回字符串最后一次出现的位置
    
    split()  按指定的分隔符进行分割
    
    slice()  切片
    
    toLowerCase()  toUpperCase()   转换大小写
    
    anchor()  link()  ……格式化字符串-->html元素

![复制代码][copycode.gif]

日期Date()

![复制代码][copycode.gif]

getYear()  getMonth()  getDay()……  获取当前用户本地系统日期的年、月、日……
    
    setYear()……　　　　　　　　　　　　设置当前……
    
    getUTCYear()……　　　　　　　　获取当前协调世界时间的年……
    
    setUTCYear……　　　　　　　　……

![复制代码][copycode.gif]

数学Math()

![复制代码][copycode.gif]

+ - * / %　　　　　　加 减 乘 除 取余（这属于算术运算符，不属于math对象）
    
    Math.abs()　　　　　　绝对值
    
    Math.round()　　　　  四舍五入
    
    Math.floor()　　　　　　去尾法取整
    
    Math.pow(a,b)　　　　　　a的b次幂
    
    Math.random()　　　　随机取0-1之间的数，可以对该数*100啥的，满足自己对大的随机数的需要
    
    Math.max()　　　　　　传入2个及以上的参数，对这些参数找最大值。
    
    Math.min()
    
    cos  sin  tan……　　　　正弦 余弦 正切……

![复制代码][copycode.gif]

![ContractedBlock.gif][]  实现随机5位数

数组array()

![复制代码][copycode.gif]

length       数组长度
    
    splice(a,b,i1,i2……)     插入和删除数组元素，a:插入的索引（可以为负数），b删除的个数（可为零），i插入的项目
    
    slice()　　　　切片
    
    concat()　　　　连接两个数组
    
    reverse() 　　　　反转数组元素
    
    push()　　　　插入元素到最后面，类似于Python中的list.append()
    
    unshift()      插入元素到最前面
    
    pop()　　　　删除最后面的元素，类似于Python中的list.pop()
    
    shift()        删除最前面的元素。

![复制代码][copycode.gif]

--------------------

js常用运算符

1  算数运算符

![933924-20160901161013027-1529038779.png][]

2  赋值运算符

![933924-20160901161102590-911661460.png][]

3  比较运算符

![933924-20160901161200371-1102723554.png][]

4  逻辑运算符

![933924-20160901161247402-162799318.png][]

5  条件运算符

variablename=(condition)?value1:value2

实例：

voteable=(age<18)?"年龄太小":"年龄已达到";

解析实例：如果变量 age 中的值小于 18，则向变量 voteable 赋值 "年龄太小"，否则赋值 "年龄已达到"

--------------------

DOM document object model(文档对象模型)

当网页被加载后，整个html文档就是一个对象，而它其中的<head> <body>等元素也都是一个个对象，<head> <body>中的<p> <h1> <div> <style>……全部都是对象。这些对象的集合被称为文档对象模型DOM.

通过操作这些对象的属性或者方法,我们可以：

改变页面中的所有 HTML 元素

改变页面中的所有 HTML 元素属性

改变页面中的所有 CSS 样式

对页面中的所有 事件做出反应

document基本常用属性

document.body    //返回当前文档的主体
    document.URL     //返回当前文档的URL

document常用方法

要想改变某个html元素必须要先获取到它。DOM中有以下几个方法可以帮助我们获取html元素。

![复制代码][copycode.gif]

//查找单个唯一元素
    document.getElementById()
    
    //查找多个具有共同特质的元素
    
    document.getElementsByClassName()  //根据类名查找。
    /*在JS中getElementsByTagName()获得的是一个类似于数组的NodeList对象，但除了有个length属性和下标取值以外再也没有别的数组方法了，因为他不是一个真正的数组对象。
    下边两个方法返回的结果也是跟这个一样。
    */
    document.getElementsByName()         //根据name查找
    document.getElementsByTagName()    //根据标签查找

![复制代码][copycode.gif]

通用html元素属性：

ele_obj.innerHTML      //返回该对象的内容
    ele_obj.parentNode    //返回当前元素的父元素

对于不同的html元素，有不同的属性，比如

<a>就有a\_obj.href=''   a\_obj.target=''

<form>就有form\_obj.length(表单中元素的数目)   form\_obj.method=''

修改CSS样式

修改css属性很简单，只需要在对象后面使用style属性。

例如：修改段落的颜色:  p\_obj.style.color=''

事件

事件有很多，在这里仅仅列出较为常用的：

onclick                 //当用户点击某个对象时调用的事件句柄。
    ondblclick             //当用户双击某个对象时调用的事件句柄。
    onmousedown           //鼠标按钮被按下。
    onmouseout           //鼠标从某元素移开
    onmouseover         //鼠标移到某元素之上。
    onsubmit           //确认按钮被点击。

JS输出

输入到html元素   document.innerHTML=''

写入html文档  document.write('')

弹出警告框   windouw.alert('')

写入到浏览器控制台  console.log()

![ContractedBlock.gif][]  前三种输入方式代码实例

--------------------

JS中的函数

js中的函数也是对象。

\--定义函数

三种方式：声明式的静态函数、动态的匿名函数、直接量。

1  声明式的静态函数

function  FunctionName (para1,para2……) {
        .......
        .......
    }

声明式的静态函数在加载页面时只会解析一次，每一次调用该函数时，用的都是解析后的结果。最常使用

2  匿名函数（动态函数）

var Name=new  Function('para1','para2'……,'function body');
    //

每次调用该函数时，都要重新构造该函数。

3  直接量

var Function = function(para1,para2,……){
        ......
        ......
        }

只解析一次，适用于讲一个函数当作参数传递给另一个函数。

函数的属性

FunctionName.length　　　　参数的个数

arguments　　　　　　　　　参数数组

--------------------

js中的“类”

js中的没有类只有对象，所有js对象都继承于Object对象。创建实例则是通过new。

对象有属性、方法。而在js中，几乎所有事物皆对象，就比如var a='duang' 可以认为是仅有一个属性的对象。

对象分为内置和外置两种。（没有混合痔啊。。。。。）

内置对象---就比如说各种数据类型，像字符串、数字、日期、数组……

外置对象---也就是我们自定义的对象。

\--如何自定义对象

![复制代码][copycode.gif]

//
    
     function a(name,age,body_height){
            this.name=name
            this.age=age
            this.body_height=body_height
            this.move=move
            function move(){
                console.log('I can move')
            }
        }

![复制代码][copycode.gif]

我们定义了一个对象a，她有属性name，age，body\_height   还有方法：move()

访问对象属性有两种方法：

a.age        //第一种
    
    a["age"]     //第二种，注意要加引号！

访问方法：

a.move()   //运行函数
    
    a.move     //返回定义函数的字符串

[copycode.gif]: /images/20220617/811c30c678af4a2ea2191ab54149150e.png
[ContractedBlock.gif]: /images/20220617/0a845c929afd49069bb5c14852d526c2.png
[933924-20160901161013027-1529038779.png]: /images/20220617/fe08e9228142476bbe55bbe2ca096ac9.png
[933924-20160901161102590-911661460.png]: /images/20220617/f1984b7846824db689f55f6cb77d0452.png
[933924-20160901161200371-1102723554.png]: /images/20220617/17f2c08838774850bc29734808b6d95f.png
[933924-20160901161247402-162799318.png]: /images/20220617/34a6a6343caa48998c275d4516f3880b.png