前端_Js学习笔记

TreeNewKing

已于 2022-07-07 17:48:52 修改

阅读量163

点赞数

分类专栏：前端文章标签：前端 javascript 学习

于 2022-07-05 22:59:04 首次发布

本文链接：https://blog.csdn.net/qq_53600812/article/details/125629056

版权

前端专栏收录该内容

2 篇文章 0 订阅

订阅专栏

随笔

1.onclick（）

属性的值可以加入js语法。和css的嵌套css很像。在里面直接写js

2.语法特性

const常量
使用const定义常量常量的值被保护后无法被修改（idea提示错误但是其实是可以改的），const。
变量可以被重复声明且不会清空之前变量的值（let不能但var可以）。
var是全局的，let是局部的。

var存在变量提升现象，变量从局部变为全局，但是这针对单纯的代码块里面时。如果是某个函数的代码块。这种提升不存在，他还是局部的。let变量可以和for循环等配合使用

通过对象调用函数时要带（）不然返回的是函数的定义。
js标签
break和label混用可以跳出循环。

cars=["BMW","Volvo","Saab","Ford"];
list: 
{
   document.write(cars[0] + "<br>"); 
   document.write(cars[1] + "<br>"); 
   document.write(cars[2] + "<br>"); 
   break list;
   document.write(cars[3] + "<br>"); 
   document.write(cars[4] + "<br>"); 
   document.write(cars[5] + "<br>"); 
}

undefined和null是两种对象
null可以用来清空某个值，undefined一般是某个变量声明了但是没赋值的情况。使用==时undefined和null是相等的但是===不等
script的执行有先后顺序
放在head里面的script会在html被解析前执行，这个时候如果直接绑定html标签会绑定不上。正确的做法应该是把js写在一个函数内然后覆盖掉window.onload属性

window.onload=function (){
}

onload可以当作一个时间。html加载完成的时间触发这个js。页面主要的js可以写在里面。（需要绑定标签的js可以写在这里）。还有另外一种做法就是在body的html后面直接写上script做相应的处理。这个样子感觉可以提高可读性。但是后期的维护可能比较麻烦。对于一些前两种情况都需要用到的公用函数。同时又不需要绑定标签的脚本可以另外在head里面写个<script>。

变量提升
js变量会被提升。但是不能被初始化。否则不会被提到代码块的最前面。可能会出现undefined的情况。
判断值转换
0代表false，其他数字代表true。
精度问题
浮点数的乘除
js不支持哈希表
如果通过名字操作了数值之后。数组会被转换成标准对象。而不能在使用数组的方法

var person = [];
person["firstName"] = "John";
person["lastName"] = "Doe";
person["age"] = 46;
var x = person.length;         // person.length 返回 0
var y = person[0];             // person[0] 返回 undefined

显示绑定

var person1 = {
  fullName: function() {
    return this.firstName + " " + this.lastName;
  }
}
var person2 = {
  firstName:"John",
  lastName: "Doe",
}
person1.fullName.call(person2);  // 返回 "John Doe"

javascript:用法
执行a标签前会执行javascript:，和void配合使用可以取得和监听类似的效果。

 <div title="内部的js和上面的js是相通的">
        将js行为写入html中（使用void阻止返回）<br>
        <a href="javascript:void(alert(text))">aa</a>
    </div>

3.数据类型

值类型(基本类型)：字符串（String）、数字(Number)、布尔(Boolean)、空（Null）、未定义（Undefined）、Symbol。

引用数据类型（对象类型）：对象(Object)、数组(Array)、函数(Function)，还有两个特殊的对象：正则（RegExp）和日期（Date）。

函数是一种数据类型
所以函数也可以放在js的对象中，函数名作为K函数定义作为Value。

常用函数

indexOf函数
String 字符串的函数。如果字符串中能匹配到子串则字串最早出现的位置。若没有匹配到子串就返回-1;

问题集

window属性

值赋给尚未声明的变量
-非严格模式下给未声明变量赋值创建的全局变量，是全局对象的可配置属性，可以删除。

var var1 = 1; // 不可配置全局属性
var2 = 2; // 没有使用 var 声明，可配置全局属性

console.log(this.var1); // 1
console.log(window.var1); // 1
console.log(window.var2); // 2

delete var1; // false 无法删除
console.log(var1); //1

delete var2; 
console.log(delete var2); // true
console.log(var2); // 已经删除 报错变量未定义

失败案例

通过id写入值失败

<!
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        input[type="text"]{
            width: 10%;
            border: grey solid 1px;

        }
    </style>
</head>
<body>
<script>
    const str=123+'我的';
    alert(str);
    document.write("<h1>这是一个文本</h1>");
    var a=0;
document.getElementById('types').value=a;
    function getName(){
        var cc='12';
    if (a==0){document.getElementById('myname').value='杜明松';a++;}
  else if (a==1){document.getElementById('myname').value='';a--;}
    }
</script>
<button type="button" onclick="alert('现在的时间是'+Date())">查询时间</button>
name:<input  id="myname" type="text">
类型:<input  id="types" type="text">
<button onclick="getName()">获取姓名</button>
</body>
</html>