19-javaScript基础

最新推荐文章于 2022-10-29 08:27:09 发布

yololee_

最新推荐文章于 2022-10-29 08:27:09 发布

阅读量269

点赞数

分类专栏： JavaWeb

本文链接：https://blog.csdn.net/weixin_43296313/article/details/112300343

版权

JavaWeb 专栏收录该内容

26 篇文章 0 订阅

订阅专栏

快速入门

1. Javascript概述和分类

概述

Javascript是一门客户端脚本语言。

运行在客户端浏览器中的。每一个浏览器都有JavaScript的解析引擎

脚本语言：不需要编译，直接就可以被浏览器解析执行了

2. javascript的引入方式(重要)

方式1:内部js

在html页面将js代码写到一组<script>标签中

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>js的两种引入方式</title>
  </head>
  <body>
    <!--方式1：内部js-->
    <script>
      alert("hello js");
    </script>
  </body>
</html>

方式2:外部文件

【第一步】将js代码写到一个xxx.js文件。

alert("hi js");

【第二步】在html页面的script标签中使用src属性引入xxx.js文件

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>js的两种引入方式</title>
  </head>
  <body>
    <!--方式2：引入js文件-->
    <script src="js/my.js"></script>
    <script src="js/my.js"/>//错误
  </body>
</html>

注意：如果script标签中使用了src属性引入了外部js文件，那么这组script标签体中就不能再写js代码，不会执行，只能重新在使用一组script标签写js代码。

基本语法

1. 注释

js中的注释只有两种，和Java中的注释一样

1.1 单行注释：快捷键ctrl+/

//单行注释内容

1.2 多行注释：快捷键ctrl+shift+/

/*
	多行注释内容
*/

2 输入输出语句

2.1 输入语句

//输入框
var num = prompt("请输入一个整数：");  //var 表示声明变量的关键字
//弹出警告框
alert(num);

2.2 输出语句

alert(num);  //以弹框的方式输出
console.log("接收到的整数是："+num);// 展示到浏览器的控制台中，需要使用F12或者fn+F12打开浏览器的控制台
document.write("接收到的整数是："+num+"<br>");  //展示到浏览器的页面上，<br>标签表示换行

3. 变量和常量【重要】

3.1变量，使用let关键字

js属于弱类型语言，定义变量时不区分具体的数据类型。

//1.定义局部变量
let name ="张三";
let age = 21;
document.write(name+","+age+"<br>");

//2.定义全局变量
{
  l2="bb";
}
document.write(l2+"<br>");

3.2常量，使用const关键字

//定义常量，使用const关键字
const PI=3.1415926
console.log("PI="+PI);

PI=10;  //常量不能被修改

4 .数据类型和typeof(重要)

4.1 原始数据类型

数据类型	说明
boolean	布尔类型，true或者false
null	声明null值的特殊关键字
undefined	代表变量未定义
number	整数或浮点数
string	字符串
bigint	大整数，例如let num =10n;

typeof 用于判断变量的数据类型

let l4 = 10;
document.write(typeof(l4) + "<br>");    // number

代码实现

<script>
    let l1 = true;
    document.write(typeof (l1)+"<br>");//boolean

    let l2 = null;
    document.write(typeof (l2)+"<br>");//object  js原始的一个错误

    let l3;
    document.write(typeof (l3)+"<br>");//undefined

    let l4 = 100;
    document.write(typeof (l4)+"<br>");//number

    let l5 = "hello";
    document.write(typeof (l5)+"<br>");//string

    let l6 = 100n;
    document.write(typeof (l6)+"<br>");//bigint
</script>

4.2 引用数据类型，就是对象

//引用类型
let date = new Date();
document.write(date);  //Thu Aug 13 2020 11:17:01 GMT+0800 (中国标准时间)
document.write(date.getFullYear()); //2020
document.write(typeof(date) + "<br>"); //object

拓展:强制类型转换和自动类型转换

 强制类型转换
     * String():将参数转成字符串
     * Number():将参数转成数值
     *       注意:null可以和数值进制转换,而undefined不可以
     * Boolean():将参数转成boolean类型的值
     *       Boolean()可以将任意类型转成boolean类型,0.null.undefined可以被转成false,非0,非null,非undefined会被转成true

自动类型转换
    任意类型的数据加上字符串都会执行字符串的拼接
    true,false,null和数值类型进行运算都会转成数值

    规律
    如果+两端有一端是字符串,就会执行字符串的拼接
    如果+两端没有一个是字符串,就会使用Number()强转,然后进行加法运算

5. 运算符

5.1 比较运算符

<script>
    let m=10;
    document.write("m="+m+"<br>");//m=10
    document.write(m+10+"<br>");//20
    document.write(m+"10"+"<br>");//1010
    document.write(m*10+"<br>");//100

    let n="10";
    document.write("n="+n+"<br>");//n=10
    document.write(n+10+"<br>");//1010
    document.write(n+"10"+"<br>");//1010
    document.write(n*10+"<br>");//100 //string类型是10会自动转成number类型的10，然后做乘法运算
    document.write(n-5+"<br>");//5 //string类型是10会自动转成number类型的10，然后做减法运算

    document.write((m==n)+"<br>"); //true,只比较值，值一样结果就是true
    document.write((m===n)+"<br>"); //false，比较值和类型，值和类型都相同结果才是true。(判断数据类型和值是)
</script>

总结：==仅仅比较值，值相同结果就是true。===比较值和类型，值和类型都相同结果才是true

5.2 三元运算符

let result=m>5?10:20; //result=10
document.write(result+"<br>");

6. 流程控制语句

if、switch、for循环、while循环、do…while循环和Java中的相同

7. 数组(重要)

特点：数组的长度动态可变，类似于Java中的集合

7.1 数组的定义

let arr1=[];//定义了一个长度为0的数组
let arr2=[10,true,"hello",200]; //数组中的元素可以是任意类型

7.2 数组遍历(重要)

let arr = [10,20,30];
//方式1：fori的方式遍历，快捷键：itar+回车
for (let i = 0; i < arr.length; i++) {
  document.write(arr[i]+"<br>");
}
document.write("==============<br>");
//方式2：forof方式遍历:for(let 变量名 of 数组对象){}，快捷键：iter
for (let el of arr) {
  document.write(el+"<br>");
}

7.3 扩展运算符：…

复制数组

//复制数组
let arr2 = [...arr];

合并数组

//合并数组
let arr3 = [40,50,60];
let arr4 = [...arr , ...arr3];

将字符串拆成数组

//将字符串转成数组
let arr5 = [..."heima"];

8. 函数(重点)

注意

-1 js中函数没有重载 同名的函数，后声明的，会把先声明的给覆盖

-2 js中函数调用的时候，你可以传值，也可以不传值，传进来了就有，没传就没有 
    
    function f(num) {
        alert(num);
    }
    function f() {
        alert("============");
    }
    f(20);

方式1：普通函数

/*
        方式1：普通函数
        function 方法名(变量名1,变量名2,...){
            方法体;
            return 返回值;
        }
        调用方法：
        let 变量=方法名(参数值1,参数值2,...);  //如果有返回值就使用变量接收
     */
//定义无返回值函数
function show(str) {
  alert("hello "+str);
}
//调用函数
show("周衡");

//定义有返回值函数
function add(a,b) {
  return a+b;
}
let sum=add(10,20);
document.write("sum="+sum+"<br>")

方式2：匿名函数

/*
        方式2：匿名函数
        let 变量名=function (变量名1,变量名2,...){
                    方法体;
                    return 返回值;
                }
        调用方法：
        let 返回值变量=变量名(参数值1,参数值2,...);  //如果有返回值就使用变量接收
     */
let sub=function (a,b) {
  return a-b;
};
let result=sub(10,20);// -10
document.write("result="+result+"<br>");

DOM操作和事件

1. DOM操作

1.1 概述

document object model 文档对象模型，浏览器会将页面的标签、属性、文本等都封装成一个个对象，这些对象都存在于一个叫document的对象身上，然后我们可以操作这些对象。

1.2 DOM操作的基本思路(重要)

【第一步】：通过document获取标签/元素对象。
【第二步】：操作标签的属性、文本、样式、以及添加子元素或者删除子元素

【第一步】：获取标签/元素对象

传统方式（ES5方式）

方法名	说明
getElementById(id属性值)	根据id获得一个元素
getElementByTagName(标签名称)	根据标签名称获得多个元素
getElementByName(name属性值)	根据name属性获得多个元素
getElementByClassName(Class属性值)	根据Class属性获得多个元素
子元素对象.parentElement属性	获取当前元素的父元素

<body>
    <div id="div1">div1</div>
    <div id="div2">div2</div>
    <div class="cls">div3</div>
    <div class="cls">div4</div>
    <input type="text" name="username"/>

<script>
    //1. getElementById()   根据id属性值获取元素对象
    let div1 = document.getElementById("div1");
    alert(div1);

    //2. getElementsByTagName()   根据元素名称获取元素对象们，返回数组
    let divs = document.getElementsByTagName("div");
    alert(divs.length);

    //3. getElementsByClassName()  根据class属性值获取元素对象们，返回数组
    let cls = document.getElementsByClassName("cls");
    alert(cls.length);

    //4. getElementsByName()   根据name属性值获取元素对象们，返回数组
    let username = document.getElementsByName("username");
    alert(username.length);

    //5. 子元素对象.parentElement属性   获取当前元素的父元素
    let cls2 = document.getElementsByClassName("cls")[1];
    let parentElement = cls2.parentElement;
    alert(parentElement);

</script>
</body>

新的方式（ES6方式）了解

document.querySelector(“css选择器”); 根据css选择器查询一个元素

document.querySelectorAll(“css选择器”); 根据css选择器查询一组元素

//es6中的新方式
let div1=document.querySelector("#div1"); //根据css选择器查询一个元素
alert(div1);

let input=document.querySelector("input[name='username']");
alert(input);

let divs=document.querySelectorAll("div"); //根据css选择器查询一组元素
alert(divs.length); //4

let cls=document.querySelectorAll(".cls");
alert(cls.length); //2

【第二步】：操作这些对象

操作属性和样式

方法名	说明
setAtrribute(属性名，属性值)	设置属性
getAtrribute(属性名)	根据属性名获取属性值
removeAttribute(属性名)	根据属性名移除指定的属性
style属性	为元素添加样式

操作属性

//1. setAttribute()    添加属性
let a = document.getElementsByTagName("a")[0];
a.setAttribute("href","http://www.baidu.com");//对象名.setAttribute(属性名,属性值);
//2. getAttribute()    获取属性
alert(a.getAttribute("href"));//let 变量名=对象名.getAttribute(属性名);
//3. removeAttribute()  删除属性
a.removeAttribute("href");


//1. setAttribute()    添加属性
let a = document.getElementsByTagName("a")[0];
a.href="http://www.baidu.com";//对象名.属性名=属性值
//2. getAttribute()    获取属性
alert(a.href);//let 变量名=对象名.属性名;
//3. removeAttribute()  删除属性
a.href="";

操作样式

//让超链接的字体大小为30px，颜色为绿色
el.style.fontSize="30px";
el.style.color="green";

el.className="cls";  //先写好样式
--------------------
<style>
  .cls{
    font-size: 60px;
    color: yellowgreen;
    background-color: yellow;
  }
</style>

操作文本

/*
innerHTML属性【重要】：获取/设置标签内容体html代码的，如果包含标签，浏览器会解析成对应的html元素
innerText属性【了解】：获取/设置标签内容体文本的，如果包含标签，浏览器不会解析，原模原样展示。
value属性【重要】：用来获取/设置输入框中的内容
*/
document.getElementById("d1").innerHTML="<a href='http://www.itheima.com'>黑马程序员</a>";

// document.querySelector("#div").innerText="<a href='http://www.itheima.com'>黑马程序员</a>"

let value=document.querySelector("#username").value; //获取输入框中的内容
document.write(value);//打印

document.querySelector("#username").value="刘曲"; //设置输入框中的内容

添加或者删除子元素【了解】

添加元素：select.innerHTML+="<option>武汉</option>";

<body>
    <select id="s">
        <option>---请选择---</option>
        <option>北京</option>
        <option>上海</option>
        <option>广州</option>
    </select>
<script>
    //1. createElement()   创建新的元素
    let option = document.createElement("option");
    //为option添加文本内容
    option.innerText="深圳";

    //2. appendChild()     将子元素添加到父元素中
    let s = document.getElementById("s");
    s.appendChild(option);

    //3. removeChild()     通过父元素删除子元素
    // s.removeChild(option);
    //4. replaceChild()    用新元素替换老元素
    let option2 = document.createElement("option")
    option2.innerText="武汉";
    s.replaceChild(option2,option);
</script>
</body>

2. 常用事件

事件的概念

事件指的是某些组件执行了某些操作后，会触发某些代码的执行

常见的事件

常见的事件：
	1. 点击事件：
		1. onclick：单击事件
		2. ondblclick：双击事件
	2. 焦点事件
		1. onblur：失去焦点，用于表单输入框校验
		2. onfocus:元素获得焦点。

	3. 加载事件：
		1. onload：一张页面或一幅图像完成加载。

	4. 鼠标事件：
		1. onmousedown	鼠标按钮被按下。
		2. onmouseup	鼠标按键被松开。
		3. onmousemove	鼠标被移动。
		4. onmouseover	鼠标移到某元素之上。
		5. onmouseout	鼠标从某元素移开。
	5. 键盘事件：
		1. onkeydown	某个键盘按键被按下。	
		2. onkeyup		某个键盘按键被松开。
		3. onkeypress	某个键盘按键被按下并松开。

	6. 选择和改变
		1. onchange	域的内容被改变，用于下拉列表选中值，例如：省市区联动
		2. onselect	文本被选中。

	7. 表单事件：
		1. onsubmit	确认按钮被点击，表单提交事件，当submit按钮被单击之后出发。用于表单校验，可以提交表单或者阻止表单提交。(很特殊)
		2. onreset	重置按钮被点击。
    8. 页面加载完成事件：
    	页面加载完成指的是整个html页面的代码都加载完成

绑定事件的方式

方式一：通过标签中的事件属性进行绑定
方式二：通过DOM元素属性绑定

方式1:行内绑定

直接给html标签添加事件属性，属性值就是要执行的方法

【第一步】：给html标签添加事件属性

<button id="up" onclick="up()">上一张</button> 

<button id="down" onclick="down()">下一张</button>

【第二步】：声明要执行的方法

//显示第一张图片的方法
function up(){
  let img = document.getElementById("img");
  img.setAttribute("src","img/01.png");
}

//显示第二张图片的方法
function down(){
  let img = document.getElementById("img");
  img.setAttribute("src","img/02.png");
}

方式2:动态绑定

<script>
//为上一张按钮绑定单击事件
document.getElementById("up").onclick = function () {
       document.getElementById("img").setAttribute("src","img/01.png");
};
//为下一张按钮绑定单击事件
document.getElementById("down").onclick = function () {
       document.getElementById("img").setAttribute("src","img/02.png");
};
</script>

4. 作业:

请描述js 的分为几个部分

基础语法，文档对象模型(DOM)，浏览器对象模型(BOM)

js中的基本语法要搞会 ,

注释，变量，输入输出，运算符，if ，for ，数组，函数

js 数组如何声明, 如何遍历, 取出数组中元素 .

let arr = [10,20,30];

for (let i=0;i<arr.length;i++){

	document.write(arr[i]+"<br>");

}

js 中如何声明函数 , 如何调用, js 中函数有没有重载

function getSum(a,b){
	return a+b;
}

let sum = getSum(10,20);

document.write(sum)
    
js中函数没有重载，后声明的函数会被覆盖

js的引入方式 , (js的标签 script 可以不可以写成自闭和标签 )
```
俩种引入方式，内部引入，还有外部引入，
```
js 中常见的事件, 以及如何绑定 (会两种方式 )
```
点击事件，焦点事件   行类绑定，动态绑定
```

js 中绑定调用 js 函数的时候,如果传常量字符串需要注意什么

function show(str) {
    alert("hello"+str);
}
//调用函数
show("黄磊");

yololee_

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
19-javaScript基础

快速入门1. Javascript概述和分类概述Javascript是一门客户端脚本语言。运行在客户端浏览器中的。每一个浏览器都有JavaScript的解析引擎脚本语言：不需要编译，直接就可以被浏览器解析执行了分类ECMAScript：主要讲述javascript的基础语法。DOM：document object model 文档对象模型，有一些api用来操作html页面的标签BOM：browser object model 浏览器对象模型，有一些api用来和浏览器打交道。2. ja
复制链接

扫一扫

专栏目录