JS学习笔记

最新推荐文章于 2024-07-08 22:40:20 发布

小小巴卫

最新推荐文章于 2024-07-08 22:40:20 发布

阅读量46

点赞数

文章标签： html 前端

本文链接：https://blog.csdn.net/weixin_62144702/article/details/134443994

版权

1.js引入方式（与html代码的结合方式）

（1）内部脚本

内部脚本：将js代码定义在html页面中，javascript代码必须位于<script></script>标签之间
在html文档中可以在任意地方放置任意数量的<script>，一般把脚本放置<body>元素的底部(外面），改善显示速度

（2）外部脚本

外部脚本：将js代码定义在外部js文件中，然后引入到html页面中
外部js文件中，只包含js代码，不包含<script></script>标签

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

2.js基础语法

（1）书写语法

区分大小写
注释：单行注释//,多行注释/* */（已下载idea插件，多行注释可以使用idea快捷键cril+shift+/，单行注释ctrl+/）

（2）输出语句

    window.alert();浏览器弹出警告框
    document.write();写入html在浏览器显示
    console.log();写入浏览器控制台

（3）变量

   javascript中用var关键字（variable的缩写）来声明变量，let也可以定义变量，只在let关键字所在的代码块有效，且允许重复声明，const关键字，声明一个只读的常量，一旦声明，常量的值就不能改变（总结：var全局变量,let局部变量,const常量）
   javascript是一门弱类型的语言，变量可以存放不同类型的值，作用域为全局变量
   变量命名规则：
   组成字符可以是任何字母、数字、下划线（_）或美元符号（$）
   数字不能开头
   建议驼峰命名

（4）数据类型

（javascript：原始类型，引用类型）使用typeof运算符可以获取数据类型alert(typeof a);
         原始类型：
       number: 数字
       string:字符串
       boolean:布尔
       null:对象为空
       undefined:默认值

（5）运算符

==会进行类型转换，===不会进行类型转换（全等运算符）

（6）类型转换

字符串类型转为数字：
       parseInt将字符串字面值转为数字，如果字面值不是数字，则转为NaN
       alert(parseInt("12");//12
       alert(parseInt("12a45");//12
       alert(parseInt("1a2");//NaN(代表not a number)
其他类型转为boolean:
       Number:0和NaN为false，其他均转true
       String:空字符串为false,其他均转true
       Null和undefinde：转false

3.js函数

（1）函数

函数被设计为执行特定任务的代码块

javascript函数通过function关键字进行定义，
       方式一：
        function xx(参数1，参数2){
        //要执行的代码
        }
    eg:function add(a,b){
        return a+b;
        }
        方式二：
        var xx = function(参数1，参数2){
        //要执行的代码
        }
    eg:var add=function(a,b){
        return a+b;
        }

（1）调用

函数名称(实参);

//eg
var result = add(10,20);   
alert(result);

4.js对象

(1)重点讲解的对象

Array

array(长度可变，类型可变）

定义

方式一：var 变量名=new Array(元素列表);//var arr = new Array(1,2,3,4);
方式二：var 变量名 =[元素列表];//var arr = [1,2,3,4];（常用）

访问

arr[索引]=值;

arr[10]="Hello";

属性

（重点讲解一个）
length（设置或返回数组中元素的数量）

 //eg
var arr = [1,2,3,4];
for (let i = 0;i<arr.length;i++){
    console.log(arr[i]);
}

方法

forEach()

forEach():遍历数组中的每个有值的元素，并调用一次传入的函数
箭头函数(ES6简化之后的）：格式(..) => {..}，如果需要给箭头函数起名字：var xx=(..)=>{..}

//eg
var arr = [1,2,3,4];
arr.forEach(function(e) => {
    console.log(e);//e:遍历后的值
})

push()

push():将新元素添加到数组的末尾，并返回新的长度

// eg
arr.push(5,6,7);

splice()

splice():从数组中删除元素)(从哪个开始，删几个

//eg
arr.splice(2,2);

String

创建

String字符串对象创建方式：var 变量名=" ";

var str = "Hello";

属性

length：字符串长度

//eg
console.log(str.length);

方法

charAt():返回在指定位置的字符
       indexOf():检索字符串
       trim()->修剪，整理:去除字符串两边的空格
       substring(start,end)含头不含尾:提取字符串中两个指定的索引号之间的字符

javascript自定义对象

定义格式

var 属性名 = {
           属性名1:属性值1,
           属性名2:属性值2,
           属性名3:属性值3,
           函数名称:function(形参列表){}
       };

//eg
        var user = {
            name:"Tom",
            age:20,
            gender:"male",
            eat:function(){
                alert("用膳");
                }
            };
//简化后格式：（把函数后的：和function删掉）
//eg
        var user = {
            name:"Tom",
            age:20,
            gender:"male",
            eat(){
                alert("用膳");
                }
            };

调用格式

对象名.属性名;

//eg
console.log(user.name);

对象名.函数名();

//eg
user.eat();

JSON

JSON（javaScript Object Notation,javascript对象标记法,json是通过javaScript对象标记法书写的文本）
   json格式的数据(必须是双引号)：
       {
           "name":"tom",
           "age":"20"
       }

定义

ver 变量名 = {"key1":value,"key":value2};
       eg:var userStr = {"name":"jerry","age":20,"addr":["北京","上海","西安"]};
       value的数据类型：数字（整数或浮点数，直接写）
               字符串（双引号中）
               逻辑值（直接写true或false）
               数组（在方括号中）
               对象（在花括号中）
               null

解析

（后端数据传过来后解析）
       json字符串转为js对象
       var jsObject = json.parse(userStr);
       js对象转为json字符串
       var jsonStr = json.stringify(jsObject);

BOM

BOM(Browser Object Model,浏览器对象，允许javascript与浏览器对话，javascript将浏览器的各个组成部分封装为对象)

组成

window:浏览器窗口对象
       Navigator:浏览器对象(封装浏览器的内核以及版本等)
       Screen:屏幕对象
       History:历史记录对象
       Location:地址栏对象

（1）window:浏览器窗口对象

获取

直接使用window,其中window.可以省略
window.alert();-->alert();

属性

            history:对History对象的只读引用
           location:用于窗口或框架的Location对象
           navigator-->航海家;一个浏览器的品牌:对Navigator对象的只读引用

方法

            alert():显示带有一段消息和一个确认按钮的警告框
           confirm()-->证实:显示带有一段消息以及按钮和取消按钮的对话框
           eg:var flag = confirm("您确定要删除该记录吗？"); alert(flag);//有返回值（boolean类型）
           setInterval()-->间隔，区间:按照指定的周期（以毫秒计算）来调用函数或计算表达式

//eg
var i = 0;
setInterval(function(){
      i++;
      console.log("定时器执行了"+i+"次");
 }，2000)

setTimeout():在指定的毫秒数后调用函数或计算表达式

//eg
setTimeout(function(){
    alert();
},3000)

2）Location:地址栏对象

获取

使用window.location获取，其中window.可以省略
window.location.属性;-->location.属性;

属性

href：设置或返回完整的url
location.href = "https://www.xxx.cn";

DOM

        DOM(Doucument Object Model文档对象)
       将标记语言的各个组成部分封装为对应的对象：
           Document:整个文档对象
           Element:元素对象
           Attibute:属性对象
           Text:文本对象
           Comment:注释对象
       js通过DOM能够对html进行操作：
           改变HTML元素的内容
           改变HTML元素的样式
           对HTMLDOM事件作出反应
           添加和删除HTML元素

获取Element对象

1.根据id属性获取，返回单个Element对象
               var h1 = document.getElementById("h1");
           2.根据标签名获取，返回Element对象数组
               var divs = document.getElementsByTagName("div");
           3.根据name属性获取，返回Element对象
               var hobbys = document.getElementsByName("hobby");
           4.根据calss属性获取，返回Element对象
               var cls = document.getElementsByClassName("cls");

属性

element.innerHTML:设置或返回元素的内容
eg: div1.innerHTML("666");//改变标签1的内容

5.js事件监听

事件：HTML事件是发生在HTML元素上的“事情”比如：按钮被点击，鼠标移到元素上，按下键盘按键
事件监听：javascript可以在事件被侦测到时执行代码

事件绑定

       方式一：通过HTML标签中的事件属性进行绑定
           <input type="button" οnclick="on()" value="按钮1">
           <script>
               function on(){alert('我被点击了');}
           </script>
       方式二：通过DOM元素属性绑定
           <input type="button" id="btn" value="按钮2">
           <script>
               document.getElementById("btn").οnclick=function(){alert(.....);}
           </script>

常见事件

       onclick:鼠标点击事件
       onblur:元素失去焦点
       onfocus:元素获得焦点
       onload:某个页面或图像被完成加载
       onsubmit:当表单提交出发该事件
       onkeydown:某个键盘的键被按下
       onmouseover:鼠标被移到某元素下
       onmouseout:鼠标从某元素移开

小小巴卫

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
1
评论
JS学习笔记

方式一：var 变量名=new Array(元素列表);方式二：var 变量名 =[元素列表];（常用）var 属性名 = {属性名1:属性值1,属性名2:属性值2,属性名3:属性值3,函数名称:function(形参列表){}//egage:20,alert("用膳");//简化后格式：（把函数后的：和function删掉）//egage:20,eat(){alert("用膳");ver 变量名 = {"key1":value,"key":value2};
复制链接

扫一扫