JavaScript基础应用

最新推荐文章于 2022-08-08 00:06:16 发布

彬小二

最新推荐文章于 2022-08-08 00:06:16 发布

阅读量196

点赞数

分类专栏：前端文章标签： js

本文链接：https://blog.csdn.net/qq_39884947/article/details/90728248

版权

前端专栏收录该内容

3 篇文章 0 订阅

订阅专栏

引入的方式

直接编写

<script>
        <!--js代码-->
</script>

导入文件

  <script src="hello.js"></script>

变量、常量、标识符

声明变量时不用声明变量类型. 全都使用var关键字;一行可以声明多个变量，并且可以是不同类型

var a;<br>a=3;
var name="yuan", age=20, job="lecturer";

声明变量时可以不用var. 如果不用var 那么它是全局变量
常量：直接在程序中出现的数据值
标识符由不以数字开头的字母、数字、下划线(_)、美元符号( $组成常用于表示函数、变量等的名称例如：_abc,$ abc,abc,abc123是标识符，而1abc不是
JavaScript语言中代表特定含义的词称为保留字，不允许程序再定义为标识符号

数字类型

不区分整型数值和浮点型数值;
所有数字都采用64位浮点格式存储，相当于Java和C语言中的double格式
能表示的最大值是±1.7976931348623157 x 10308
能表示的最小值是±5 x 10 -324

NaN:属于Number类型的一个特殊值,当遇到将字符串转成数字无效时,就会得到一个NaN数据

字符串类型

是由Unicode字符、数字、标点符号组成的序列；字符串常量首尾由单引号或双引号括起；JavaScript中没有字符类型；常用特殊字符在字符串中的表达；
字符串中部分特殊字符必须加上右划线\；常用的转义字符 \n:换行 ':单引号 ":双引号 \:右划线

布尔类型(boolean)

Boolean类型仅有两个值：true和false，也代表1和0，实际运算中true=1,false=0
布尔值也可以看作on/off、yes/no、1/0对应true/false
Boolean值主要用于JavaScript的控制语句
- Null & Undefined类型

Undefined类型

Undefined 类型只有一个值，即 undefined。当声明的变量未初始化时，该变量的默认值是 undefined。
当函数无明确返回值时，返回的也是值 “undefined”;

Null类型

另一种只有一个值的类型是 Null，它只有一个专用值 null，即它的字面量。值 undefined 实际上是从值 null 派生来的，因此 ECMAScript 把它们定义为相等的。

尽管这两个值相等，但它们的含义不同。undefined 是声明了变量但未对其初始化时赋予该变量的值，null 则用于表示尚未存在的对象（在讨论 typeof 运算符时，简单地介绍过这一点）。如果函数或方法要返回的是对象，那么找不到该对象时，返回的通常是 null。

运算符

++递增 --递减

++i 直接加变成+1
i++ 先赋值再加

var a=‘1’
b=+a
a会自动转换成numbe类型

&& || ！与或非

左移右移
3<<2 转换成2进制然后左移补0
4>>2 转换成2进制然后右移补0

全等于=== 不会进行类型转换直接比较
2==‘2’ 会true 但是2==='2就会false

关系运算符
比较运算符两侧如果一个是数字类型，一个是其他类型，会将其他类型转换为数字类型
两侧如果都是字符串类型，比较的是最高为的acs码，如果最高位相等继续取第二位比较

控制语句

if语句

if (表达式1) {
    语句1;
}else if (表达式2){
    语句2;
}else if (表达式3){
    语句3;
} else{
    语句4;
}

switch-case结构

switch基本格式
switch (表达式) {
    case 值1:语句1;break;
    case 值2:语句2;break;
    case 值3:语句3;break;
    default:语句4;
}

for 循环

  for(初始表达式;条件表达式;自增或自减)
    {
            执行语句
            ……
    }

for( 变量 in 数组或对象)
    {
        执行语句
        ……
    }

while循环

while (条件){
    语句1；
    ...
}

异常处理

try{
    代码从上往下执行，之间有异常就抛出到catch
}catch(e){
    有异常执行的代码
}finally{
    无论是否有异常都会执行
}

JavaScript的对象

array string date math boolean number function global error regexp object

部分对象方法
数组joi方法数组内的字符串拼接成一个字符串

 var s =['hello','xiaomi'].join("+++")
 hello+++xiaomi
 array.push（t） 数组末尾加数据
 array.pop()默认删最后一个 指定位置删除指定数字
 array.unshift()首部加一个元素
    array.shift()首部移除一个元素
    array.reverse()反转数组
    array.sort()把数字以字符串排序比较asc码

正则对象

   var re=new RegExp('\d+','g');后者g只是全局参数 还有一个是i
    alert(re.test('sadsds'))#返回的是tru或者false
    
      var s ='helloo2323sd'
    alert(s.match(/\d+/g))//取出所有匹配的内容放到数组里
    alert(s.search(/\d+/g))//取出第一个结果的索引值
    alert(s.split(/\d+/g))//取出分割后的数据
    alert(s.replace(/\d+/g,'**'))//取出对应数据替换为指定

函数对象

function 函数名 (参数){
<br>    函数体;
    return 返回值;
}
 命名函数
  var func=function(){
      alert(111)
    };
    func()
    
自执行函数
     (function (a) {
        alert(a);
    })("123")

window对象
所有浏览器都支持 window 对象。
概念上讲.一个html文档对应一个window对象.
功能上讲: 控制浏览器窗口的.
使用上讲: window对象不需要创建对象,直接使用即可.

alert()            显示带有一段消息和一个确认按钮的警告框。
confirm()          显示带有一段消息以及确认按钮和取消按钮的对话框。
prompt()           显示可提示用户输入的对话框。

open()             打开一个新的浏览器窗口或查找一个已命名的窗口。
close()            关闭浏览器窗口。

setInterval()      按照指定的周期（以毫秒计）来调用函数或计算表达式。
clearInterval()    取消由 setInterval() 设置的 timeout。
setTimeout()       在指定的毫秒数后调用函数或计算表达式。
clearTimeout()     取消由 setTimeout() 方法设置的 timeout。
scrollTo()         把内容滚动到指定的坐标。

history对象

三种方法
forward back go
来回的跳转页面
增强用户体验

location对象

location.reload()整个页面刷新
location.href='http://www.baidu.com'跳转到指定页面

DOM对象

HTML Document Object Model（文档对象模型）

HTML DOM 定义了访问和操作HTML文档的标准方法

HTML DOM 把 HTML 文档呈现为带有元素、属性和文本的树结构（节点树)
节点查找

document.getElementById(“idname”)
document.getElementsByTagName(“tagname”)
document.getElementsByName(“name”)
document.getElementsByClassName(“name”)[i] 拿到的是数组
var ele=document.getElementByXXX();
ele.parentNode 元素的父节点
ele.firstChild 节点下的第一个子元素
ele.lastChild 节点下的最后一个子元素
ele.childNodes 节点的子节点
parentElement           // 父节点标签元素

children                // 所有子标签

firstElementChild       // 第一个子标签元素

lastElementChild        // 最后一个子标签元素

nextElementtSibling     // 下一个兄弟标签元素

previousElementSibling  // 上一个兄弟标签元素

创建节点：

createElement(标签名) ：创建一个指定名称的元素。
例：var  tag=document.createElement(“input")
            tag.setAttribute('type','text');

添加节点：

追加一个子节点（作为最后的子节点）
somenode.appendChild(newnode)
把增加的节点放到某个节点的前边
somenode.insertBefore(newnode,某个节点);

删除节点：

removeChild()：获得要删除的元素，通过父元素调用删除

替换节点：

somenode.replaceChild(newnode, 某个节点);

节点属性操作

1、获取文本节点的值：innerText    innerHTML

2、attribute操作

     elementNode.setAttribute(name,value)    

     elementNode.getAttribute(属性名)        <-------------->elementNode.属性名(DHTML)

     elementNode.removeAttribute(“属性名”);
3、value获取当前选中的value值
        1.input   
        2.select （selectedIndex）
        3.textarea  
4、innerHTML 给节点添加html代码：
        该方法不是w3c的标准，但是主流浏览器支持    
        tag.innerHTML = “<p>要显示内容</p>”;

5、关于class的操作：
elementNode.className
elementNode.classList.add
elementNode.classList.remove
 6、改变css样式：
<p id="p2">Hello world!</p>
document.getElementById("p2").style.color="blue";
                             .style.fontSize=48px

DOM Event事件

onclick        当用户点击某个对象时调用的事件句柄。
ondblclick     当用户双击某个对象时调用的事件句柄。

onfocus        元素获得焦点。               练习：输入框
onblur         元素失去焦点。               应用场景：用于表单验证,用户离开某个输入框时,代表已经输入完了,我们可以对它进行验证.
onchange       域的内容被改变。             应用场景：通常用于表单元素,当元素内容被改变时触发.（三级联动）

onkeydown      某个键盘按键被按下。          应用场景: 当用户在最后一个输入框按下回车按键时,表单提交.
onkeypress     某个键盘按键被按下并松开。
onkeyup        某个键盘按键被松开。

onload         一张页面或一幅图像完成加载。

onmousedown    鼠标按钮被按下。
onmousemove    鼠标被移动。
onmouseout     鼠标从某元素移开。
onmouseover    鼠标移到某元素之上。
onmouseleave   鼠标从元素离开

onselect       文本被选中。
onsubmit       确认按钮被点击。

绑定事件的方式两种

<div id="div" onclick="foo(this)">点我呀</div>

<script>
    function foo(self){           // 形参不能是this;
        console.log("点你大爷!");
        console.log(self);   
    }
</script>


<p id="abc">试一试!</p>

<script>

    var ele=document.getElementById("abc");

    ele.onclick=function(){
        console.log("ok");
        console.log(this);    // this直接用
    };

</script>

阻止事件延伸

<div id="div1" onclick="alert(111)">
    <div id="div2" onclick="fun1(event)">
    </div>
</div>
<script>
    function fun1(e) {
        alert('div2')
        e.stopPropagation()
    }
</script>

增删改查演示

增createElement('p');创建元素
appendChild(son);元素添加
减 获得要删除的元素，使用removeChild(）方法删除

改： son.innerHTML='<em>hello ppp</em>'修改元素内容
改变css样式   son.style.color='yellow'
添加标签属性 son.setAttribute("name",'123')(class )

<input type="button" value="添加p" onclick="adds()">
<input type="button" value="删除p" onclick="remove()">
<script>
    function remove() {
        var ele=document.getElementById('div1');
        var last =ele.lastElementChild;
        ele.removeChild(last)
    }
    function adds() {
        var ele= document.getElementById('div1');
        var son=document.createElement('p');
        son.innerHTML='hello ppp'
        ele.appendChild(son);
    }

this

 //this：当前触发标签对象，可以不通过idclass进行查找
        <div onclick="shows(this)" value="123">aaa</div>
        <div onclick="shows(this)" value="4563">aaa</div>
  function shows(self) {
        console.log(self.getAttribute('value'));
    }

作用域

全局作用域
最外层函数和在最外层函数外面定义的变量拥有全局作用域
所有末定义（var）直接赋值的变量自动声明为拥有全局作用域
所有window对象的属性拥有全局作用域

局部作用域
局部作用域一般只在固定的代码片段内可访问到，最常见的例如函数内部，所有在一些地方也会看到有人把这种作用域成为函数作用域.

彬小二

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript基础应用

引入的方式直接编写<script> </script>导入文件 <script src="hello.js"></script>变量、常量、标识符声明变量时不用声明变量类型. 全都使用var关键字;一行可以声明多个变量，并且可以是不同类型var a;<b...
复制链接

扫一扫