javascript学习（入门）

wenyihuila

已于 2023-05-05 22:54:51 修改

阅读量1.2k

点赞数 29

文章标签： javascript 学习前端

于 2023-05-05 22:52:57 首次发布

本文链接：https://blog.csdn.net/m0_61871870/article/details/130516964

版权

javascript

1.快速入门

1.1编写js

1.1.1 直接在html中写

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>


<!--直接在html中写js-->
<script>
    
alert("hello")
    
</script>

</body>
</html>

1.1.2 引入js文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
        
<!--外部引入引入js  不要用自闭合写法，就写这种成对出现的标签-->
<script src="../js/qj.js" type="text/javascript"></script>

</body>
</html>

1.2 基本语法入门

定义变量都使用 var

变量名不能以数字和特殊符号开头

    //调试，也可以在页面中使用
debugger
	//定义变量
	var num = 1;
    var name = "3";
    var score = 80;
	//if判断
    if(score >70){
        alert(">70")
    }else{
        alert("<70")
    }

//在控制台中打印信息
console.log(name)

页面中debugger

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-E1L6VAG5-1683298284007)(C:\Users\31628\AppData\Roaming\Typora\typora-user-images\image-20230416184954123.png)]

js语法大致与java相同

//字符串
“abc”
'abc'

//布尔值
true
false

//逻辑运算
&&
||
!
    
//比较运算符
=
==
===(类型一样，值一样)

//坚持不要用==进行比较
//用===
//尽量避免使用浮点数进行运算，存在精度问题

null和undefined

null 空

undefined 未定义

var name = "wyz"	
var list = [1,2,3,4,true,"wyz"]	//数组用[]
var student = {		//对象用{}
    name: "zxy",
    age: 18,
    gender: "男",
    interests:["java","python","js"]
}

1.2.1严格检查模式

//严格检查模式，预防js的随意性导致产生一些问题
//必须在js的第一行
'use strict';
//局部变量都建议使用 let 定义
let i = 1;

2.数据类型

2.1 字符串

1.正常字符串我们使用单引号或双引号包裹

2.注意转义字符 \

3.多行字符串编写

var message = `
    你好
    你好啊
    你好
    你真好
`

4.模板字符串

let name = "wyz";
let age = 3;

let msg = `你好啊，${name}`

5.字符串的可变性：不可变性，即不能修改字符串中内容

6.常用方法

//大小写转换
var student = "student"
student.toUpperCase()
student.toLowerCase()

//indexOf()	通过元素获得下标索引
student.indexOf('t')

//substring
stuent.substring(1)	//从第一个字符串截取到最后一个字符串
student.substring(1,3)	//从第1个截取到第三个(不包含第三个)

2.2 数组

Array可以包含任意数据类型

var arr = [1,2,3,4,5]

//arr.length 

//length可以改变，如果赋值过小会丢失元素
arr.length(10)	//长度变为10

arr.indexOf(2)

arr.slice()	//截取arr的一部分，返回一个新数组，类似于substring

arr.push("c")	//从尾部入队

arr.pop()	//从尾部出队

arr.unshift("a")	//从头部入队

arr.shift()	//从头部出队

arr.sort()	//排序

arr.reverse()	//元素反转

arr.concat()		//传入数组，插入尾部，不修改原有数组，而是返回一个新的数组

arr.join('-')		//打印数组，每个元素之间通过传入的参数分割

2.3 对象

若干个键值对

js中所有的键都是字符串，值是任意对象

var student = {		//对象用{}
    name: "zxy",
    age: 18,
    gender: "男",
    interests:["java","python","js"]
}

2.4 map（键值对）

    //map
    var map = new Map([["wyz",90],["zxy",95]]);
    var score = map.get("wyz");
    map.set("zjl",100);
    // console.log(map.get("zjl"));
    var score1 = map.get("zjl")
    map.delete("wyz");

2.5 set(去重)

 var set = new Set([1,2,3,4,5,5,5,6,6,6]);
    set.add(6);     //添加无效，因为重复了
    set.delete(1);  //删除

2.6 iterator

//for of (更稳定)  /  for in 迭代

 var arr = [3,4,5];
    for(let a of arr){
        console.log(a);
    }

    var set = new Set([1,2,3,4,5,5]);
    for(let s of set){
        console.log(s);
    }

    var map = new Map([["wyz",90],["zxy",95]]);
    for(let m of map){
        console.log(m);
    }

3 函数

3.1 定义函数

//写法一
function 函数名(参数){
    函数体
    return 返回值;
}

//写法二
var 方法名 = function(参数){
     函数体
    return 返回值;
}

一旦执行到return代表函数结束。

如果没有return 函数执行完也会返回结果，结果就是undefined

参数问题：js可以传任意个参数，也可以不传参数（返回NaN）

传参问题：

当传入的参数多于形参数量时，多余的参数会放在arguments中，要想操作多余的参数，可以使用…rest

function aaa(a,b,...rest){
    console.log("a=>"+a);
    console.log("b=>"+b);
    console.log(rest);
}

在这里插入图片描述

3.2 变量作用域

var 定义的变量：:

如果在函数体中声明，则在函数体外不可以使用（局部变量）；

内部函数可以访问外部函数的成员，反之则不行。

 function bbb(){	//外部函数
        var x = 1;
        function ccc(){	//内部函数
           var y = x + 1;
            console.log(y);
        }
        console.log(x)
    }

所有的变量定义都放在函数的头部（也就是说要先定义后使用，不过这好像是废话，不定义还怎么使用？），不要乱放，便于代码维护。

**如果在函数外部定义，则是（全局变量） **

js实际上只有一个全局作用域，任何变量（函数也可以是一种变量）如果没有再函数作用域中找到，就会想外查找，如果在全局作用于中也没有找到，则会报错 RefrenceError ... is not defined

局部作用域 let:

function eee(){
        for(let i = 0; i< 100; i++){
            console.log(i);
        }
        console.log(i+1);	//ReferenceError i is not defined
    }

在这里插入图片描述

常量 const

三种定义方式总结

var 声明的范围是函数作用域，let 和 const 声明的范围是块作用域（一个{}内）
var 声明的变量会被提升到函数作用域的顶部，let 和 const 声明的变量不存在提升，且具有暂时性死区特征（在代码块内，使用let和const命令声明变量之前，该变量都是不可用的，语法上被称为暂时性死区）
var 允许在同一个作用域中重复声明同一个变量，let 和 const 不允许
在全局作用域中使用 var 声明的变量会成为 window 对象（浏览器内置中的全局对象）的属性，let 和 const 声明的变量则不会
const 的行为与 let 基本相同，唯一一个重要的区别是，使用 const 声明的变量必须进行初始化，且不能被修改（常量）

关键字	变量提升	块级作用域	重复声明同名变量	重新赋值
var	√	×	√	√
let	×	√	×	√
const	×	√	×	×

3.3 方法

方法就是把函数写在对象中。对象只有两个东西，属性和方法。

 var user = {
        name: "张三",
        birth: 2000,
        age: function (){
            var now = new Date().getFullYear();
            return now - this.birth;
        }
    }

其中的this默认指向调用它的对象，因此，这样写是可以的：


    var user = {
        name: "张三",
        birth: 2000,
        age: getage
    }

    function getage(){
        var now = new Date().getFullYear();
        return now - this.birth;
    }
    console.log(user.age());

要想控制this的指向，可以用apply（）

var age1 = getage.apply(user,[]);	//apply(要指向的对象名，传递的参数)
	//注意getage后不要括号
console.log(age1);

4 对象

4.1Data对象


 var now = new Date();
    now.getFullYear();  //年
    now.getMonth();     //月
    now.getDate();      //日
    now.getDay();       //星期
    now.getHours();     //小时
    now.getMinutes();      //分
    now.getSeconds();       //秒


    now.getTime()   //时间戳   从1970.1.1 0:0:00 到现在的毫秒数

    //可以将时间戳转换为时间格式
    now.toLocaleDateString(now.getTime())
    now.toISOString(now.getTime());
    now.toLocaleTimeString(now.getTime());
    now.toLocaleString(now.getTime());

4.2 json对象

json是一种轻量级的数据交换格式，在js中一切皆为对象，任何对象都可以转换为json

格式：

对象都用{}
数组都用[]
所有键值对=》 key：value

json字符串和js对象的转化

  //对象转换为json格式：'{"name":"张三","birth":2000}'
    var jsonUser = JSON.stringify(user);

    //json转换为对象：{name: '张三', birth: 2000}
    var obj = JSON.parse('{"name":"张三","birth":2000}');

要注意，json与js对象不同，对象中属性无" “，而json中的键有” ",

4.3 继承

4.3.1 原型继承

var user = {
        name: "张三",
        birth: 2000,
        age: getage,
       run: function(){
            console.log(this.name+" run...")
       }
    }

var wyz = {
        name:"wyz",
    }

    //原型继承,表示wyz继承user
    wyz.__proto__ = user;

4.3.2 class继承

 //class继承
    class Student{
        constructor(name) {
            this.name = name;
        }
        hello(){
            alert("say hello")
        }
    }

    var zhangsan = new Student("zhangsan");

    //小学生继承学生
    class Pupil extends Student{
        constructor(name,age) {
            super(name);
            this.age = age;
        }
        hello(){
            console.log("name:"+ this.name+",age:"+ this.age+"的小学生 say hello");
        }
    }

    var xiaoming = new Pupil("xiaoming",10);

5.操作BOM对象

Browser Object Model 浏览器对象模型

浏览器有很多的对象，并且可以对其进行操作

window

window对象既充当全局作用域，又是作为浏览器窗口的对象

有**innerWidth和innerHeight**可以获取浏览器内部宽度和高度（指取出菜单栏，工具栏，边框栏元素后，用于显示网页的净宽高）

还有**outerWidth和outerHeight**可以获取浏览器窗口的整个宽高

navigator

navigator对象标识浏览器的信息

常用属性有：

navigator.appName：浏览器名称；
navigator.appVersion：浏览器版本；
navigator.language：浏览器设置的语言；
navigator.platform：操作系统类型；
navigator.userAgent：浏览器设定的User-Agent字符串。

screen

screen对象表示屏幕信息

常用属性：

screen.width：屏幕宽度，以像素为单位；
screen.height：屏幕高度，以像素为单位；
screen.colorDepth：返回颜色位数，如8、16、24。

location

location对象表示当前页面的url信息

location.href：获取完整的url

//获取url各个部分
location.protocol; // 'http'
location.host; // 'www.example.com'
location.port; // '8080'
location.pathname; // '/path/index.html'
location.search; // '?a=1&b=2'
location.hash; // 'TOP'

location.assign()：加载一个新页面
location.reload()：重新加载当前页面

document

document对象表示当前页面，由于HTML在浏览器中以DOM形式表示为树形结构，document对象就是整个DOM树的根节点。

要查找DOM树的某个节点，需要从document对象开始查找，最常用的查找是根据ID和Tag Name。例如：

<dl id="drink-menu" style="border:solid 1px #ccc;padding:6px;">	//这个id就是getElementById("drink-menu")需要传入的参数
    <dt>摩卡</dt>		//这些dt，dd就是Tag名
    <dd>热摩卡咖啡</dd>
    <dt>酸奶</dt>
    <dd>北京老酸奶</dd>
    <dt>果汁</dt>
    <dd>鲜榨苹果汁</dd>
</dl>

document.getElementById(字符串)：按id获取一个DOM节点
document.getElementsByTagName(字符串)：按Tag名称获取一组DOM节点
document.cookie：获取当前页面的Cookie

history

history对象报错你了浏览器的历史记录，知道有就行了，不要使用。

操作DOM对象

更新

要想操作节点，首先要获取节点

删除

添加

遍历

操作表单

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div id="div">
  <p id="p-1">我是p1</p>
  <p id="p-2">我是p2</p>
</div>


<form action="post">
 <span>用户名：</span> <input type="text" id="input_name" placeholder="我是输入框">

  <input type="checkbox" id="checkbox" >

  <div>
    <input type="radio" name="interests" value="sing" checked id="radio-sing">唱
    <input type="radio" name="interests" value="dance" id="radio-dance">跳
    <input type="radio" name="interests" value="rap" id="radio-rap">rap
    <input type="radio" name="interests" value="basketBall" id="radio-basketBall">打篮球
  </div>
</form>



<script>
    //根据元素的id来获取该节点，然后就可以对表单进行操作
  var father = document.getElementById("div");
  var p1 = document.getElementById("p-1");
  var p2 = document.getElementById("p-2");

  var input_name = document.getElementById("input_name");
    //这可以为该元素设置value
  input_name.value = "3456";

  var radio_interests_sing = document.getElementById("radio_interests");
  var radio_interests_dance = document.getElementById("radio-dance");
  var radio_interests_rap = document.getElementById("radio-rap");
  var radio_interests_basketBall = document.getElementById("radio-basketBall");


</script>
</body>
</html>

jQuery

封装了大量方法的工具类，也就是一个库

公式：$(selector).action

 <p id="test">点我</p>

<script>
//公式: $(selector(选择器)).action(事件)
 $("#test").click(function(){
        alert("test");
    })
</script>

选择器

选择器是jquery根据传入的参数匹配一个元素，传入的可以使id,class,标签名.

$("p").click()	//标签选择器
$("#id1").click()	//id选择器
$(".class1").click()	//class选择器

示例：实现移动鼠标动态显示鼠标位置

事件

事件指jquery绑定一个元素后在触发事件条件后可以做什么事


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
mouse:<span id="mouseMove"></span>
<div id="divMove" style="width:500px; height:500px; border: red 5px solid">在这里移动鼠标试试</div>


<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script>
  //$(document).ready(function(){})可以简写为$(function(){})
  $(document).ready(function(){
    $("#divMove").mousemove(function(e){
      $("#mouseMove").text("X:"+e.pageX+" Y:"+e.pageY);
    })
  });

</script>

</body>
</html>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-pUCncB3p-1683298284010)(C:\Users\31628\AppData\Roaming\Typora\typora-user-images\image-20230424235447088.png)]
,标签名.

$("p").click()	//标签选择器
$("#id1").click()	//id选择器
$(".class1").click()	//class选择器

示例：实现移动鼠标动态显示鼠标位置

事件

事件指jquery绑定一个元素后在触发事件条件后可以做什么事


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
mouse:<span id="mouseMove"></span>
<div id="divMove" style="width:500px; height:500px; border: red 5px solid">在这里移动鼠标试试</div>


<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script>
  //$(document).ready(function(){})可以简写为$(function(){})
  $(document).ready(function(){
    $("#divMove").mousemove(function(e){
      $("#mouseMove").text("X:"+e.pageX+" Y:"+e.pageY);
    })
  });

</script>

</body>
</html>

wenyihuila

关注

29
点赞
踩
17

收藏

觉得还不错? 一键收藏
0
评论
javascript学习（入门）

/写法一 function 函数名(参数) {函数体 return 返回值;} //写法二 var 方法名 = function(参数) {函数体 return 返回值;一旦执行到return代表函数结束。如果没有return 函数执行完也会返回结果，结果就是undefined参数问题：js可以传任意个参数，也可以不传参数（返回NaN）传参问题：当传入的参数多于形参数量时，多余的参数会放在arguments中，要想操作多余的参数，可以使用…rest。
复制链接

扫一扫