JS的学习与使用

在这里插入图片描述

一什么是Javascript？

Javascript是一门跨平台，面向对象的脚本语言，是用来控制网页行为的，它能使网页可以交互
java与Javascript是完全不同的语言，不论是概念还是设计，但是基础语法类似
ECMA国际定义了ECMAScript标准,JS是遵守这一标准的

二 JS引入方式

内部脚本：将JS代码定义再HTML页面中
- JS必须位于标签之间
- 在HTML文档中，可以在任意地方，放置任意数量的script
- 一般会把脚本至于元素的底部，可以改善显示速度
外部脚本：将JS代码定义在外部JS文件中，然后引入到HTML页面中
- 外部JS文件中，只能包含JS代码，不包含Script标签
- Script标签不能自闭合导致引入的JS文件无法使用

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>JS-引入方式</title><!-- 内部脚本 --><!-- <script>alert('Hello JS');</script> --><!-- 外部脚本 --><script src="../js/demo.js"></script>
</head>
<body></body>
</html>

三 JS基础语法

书写语法
- 区分大小写：与Java一样，除变量名，函数名以及其他一切东西都是区分大小写的
- 每行结尾的分号可有可无
- 注释

变量

使用var关键字声明变量
可以存放不同类型的值
命名规则
- 不能以数字开头
- 使用驼峰命名
- 字母数字下划线

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>JS-基本语法-变量</title>
</head>
<body></body>
<script>javascript">// var定义变量var a = 10;a = "张三"; // 变量可以重新赋值alert(a);// 特点1:作用域比较大 全局变量// 特点2:可以重复定义{var x = 1;// alert(x);var x = "a";}alert(x);// 特点3:可以不声明直接使用// alert(y); // undefinedy = 100;alert(y);// let定义变量// 特点1:作用域比较小 局部变量{let x = 1;// alert(x);}// alert(x); // 报错// 特点2:不能重复定义// let x = 1;// let x = "a"; // 报错// const定义常量const PI = 3.14;// PI = 3.1415926; // 报错
</script>
</html>

数据类型，运算符，流程控制语句

数据类型

原始类型：number（整数小数 NaN） string boolean null underfined（变量未初始化默认值）
引用类型
typeof运算符可以获取数据类型

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>JS-数据类型</title>
</head>
<body></body>
<script>javascript">// 原始数据类型alert(typeof 123); // numberalert(typeof(3.14)); // numberalert(typeof 'hello'); // stringalert(typeof true); // booleanalert(typeof(null)); // objectvar a;alert(typeof a); // undefined
</script>
</html>

运算符
- 算数运算符
- 赋值运算符
- 比较运算符
- 逻辑运算符
- 三元运算符
- 全等运算符===
  - ==会进行类型转换 ===不会进行类型转换

类型转换

其他类型转为boolean

number：0和NaN为false
string：空字符串为false
null和undefined：false

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>JS-运算符</title>
</head>
<body></body>
<script>javascript">// ==会进行类型转换 ===不会进行类型转换var age = 20;var _age = '20';var $age = 20;alert(age == _age); //truealert(age === _age); //falsealert(age === $age); //true// 类型转换 - 其他类型转为数字alert(parseInt("12"));alert(parseInt("12a45"));alert(parseInt("a12a45"));// 类型转换 - 其他类型转换为booleanif (0){alert("0转换为false");}if (NaN){alert("NaN转换为false");}if (""){alert("空字符串转换为false");}if (" "){alert("空格转换为true");}if ("abc"){alert("非空字符串转换为true");}if(null){alert("null转换为false");}if(undefined){alert("undefined转换为false");}   
</script>
</html>

流程控制

四 JS函数

介绍：函数是被设计为执行特定任务的代码块
定义：通过function关键字进行定义
注意：
- 形参不需要类型
- 返回值也不需要定义类型可以在函数内部直接使用return返回即可

五 JS对象

Array

用来定义数组
定义：var arr = new Array();
```
          ` var arr = [1,2,3,4];`
```
属性
- length
方法
- foreach()
- push()
- splice()

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>JS-对象-Array</title>
</head>
<body></body>
<script>javascript">// // 定义数组// var arr = new Array(1,2,3,4);// // var arr2 = [1,2,3,4];// console.log(arr[0]);// console.log(arr[1]);// // 特点:长度可变 类型可变// var arr2 = [1,2,3,4];// arr2[10] = 50;// console.log(arr2[10]);// console.log(arr2[9]);// console.log(arr2[8]);// arr2[9] = "a";// arr2[8] = false;// console.log(arr2);var arr2 = [1,2,3,4];for (let i = 0; 2< arr2.length; i++) {console.log(arr2[i]);}// foreach:遍历数组中有值的元素arr2.forEach(function(e){console.log(e);})// ES6 箭头函数：(...) => {...}arr2.forEach((e) => {console.log(e);})// push:添加元素到数组末尾arr2.push(5);console.log(arr2);// splice:删除元素arr2.splice(2,2);
</script>
</html>

String

定义
- var str = new String("HelloString");
- var str = "hello String";
属性
- length
方法
- charAt()
- indexOf()
- trim()
- subString()\

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>JS-对象-Array</title>
</head>
<body></body>
<script>javascript">// 创建字符串对象// var str = new String("hello world");var str = " hello world ";console.log(str);// length属性console.log(str.length);// charAt()方法console.log(str.charAt(0));// indexOf()方法console.log(str.indexOf("lo"));// trim()方法var s = str.trim();console.log(s);// substring()方法 用于截取子字符串console.log(s.substring(0, 5));
</script>
</html>

JSON

自定义对象
定义
- var user = {
  - name = ?;
  - age = ?;
- }

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>JS-对象-Array</title>
</head>
<body></body>
<script>javascript">
//    自定义对象
var user = {name: "张三",age: 10,gender: "男",sayHi(){alert("hi");}
}alert(user.name);
user.sayHi();// 定义JSON
// 多用于作为数据载体，在网络中进行数据传输
var jsonstr = '{"name":"Tom","age":18,"gender":"男"}';
alert(jsonstr.name); // undefined// JSON字符串转化为js对象
var obj = JSON.parse(jsonstr);
alert(obj.name);// js对象转化为JSON字符串
alert(JSON.stringify(obj));</script>
</html>

BOM
- 概念：Browser Object Model 浏览器对象模型，允许JavaScript与浏览器对话，JS将浏览器的各个组成部分封装为对象
- 组成：
  - Window：窗口对象
  - Location：地址栏对象
  - Navigator：浏览器对象
  - Screen：屏幕对象
  - History：历史记录对象
- Window：
  - 获取：直接使用window，其中window可以省略，例如：alert（）
  - 属性
    - history：对history对象的只读引用
    - location：用于窗口或框架的Location对象
    - navigator：对navigator对象的只读引用
  - 方法
    - alert（）：显示带有一段消息和一个确认按钮的警告框
    - comfirm（）：显示带有一段消息以及确认按钮和取消按钮的对话框
    - setinterval（）：按照指定的周期（ms）来调用函数或计算表达式
    - setTimeout（）：在指定的毫秒数后调用函数或计算表达式
- Location
  - 获取：使用window.location或location
  - 属性：
    - href：设置或返回完整的url
- ```
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>JS-对象-BOM</title>
</head>
<body></body>
<script>javascript">//获取window.alert('hello BOM');alert('hello BOM window');//方法//confirm 弹出对话框 确认：true 返回：falsevar flag = confirm('您确认删除该记录吗？');alert(flag);//定时器 -- setInterval -- 周期性执行某一函数var i = 0;setInterval(function(){i++;console.log('定时器执行了' + i + '次');},2000);//定时器 -- setTimeout -- 延迟执行某一函数，只执行一次setTimeout(function(){console.log('延迟执行');},3000);//locationalert(location.href);location.href = 'http://www.baidu.com';
</script>
</html>
```

DOM

将标记语言的各个组成部分封装为对应的对象
- Doucument：整个文档对象
- Element：元素对象
- Attribute：属性对象
- Text：文本对象
- Comment：注释对象
Core DOM – 所有文档类型的标准模型
- - Doucument：整个文档对象
  - Element：元素对象
  - Attribute：属性对象
  - Text：文本对象
  - Comment：注释对象
XML DOM – XML文档的标准模型
HTML DOM – HTML文档的标准模型
- Image：< img >
- Button：< input type=“button” >

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>JS-对象-DOM</title>
</head>
<body><div id="tb1">课程表</div><table><tr><th>学号</th><th>姓名</th><th>分数</th><th>评语</th></tr><tr class="data"><td>001</td><td>张三</td><td>90</td><td>很优秀</td></tr><tr class="data"><td>002</td><td>李四</td><td>92</td><td>优秀</td></tr><tr class="data"><td>003</td><td>王五</td><td>83</td><td>很努力</td></tr><tr class="data"><td>004</td><td>赵六</td><td>98</td><td>666</td></tr></table><br><div style="text-align: center;"><input id="b1" type="button" value="改变标题内容" onclick="fn1()"><input id="b2" type="button" value="改变标题字体颜色" onclick="fn2()"><input id="b3" type="button" value="删除最后一个" onclick="fn3()"></div>
</body>
<script>javascript">function fn1(){document.getElementById('tb1').innerHTML="学员成绩表";}function fn2(){document.getElementById('tb1').style="font-size: 30px; text-align: center;  color: red;"}function fn3(){var trs = document.getElementsByClassName('data');trs[trs.length-1].remove();}
</script>
</html>

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>JS-对象-DOM</title>
</head>
<body><img src="" id="h1"><br><br><div class="cls">14公寓421</div><br><div class="cls">黑科技惩虚员</div><br><input type="checkbox" name="hobby">电影<input type="checkbox" name="hobby">旅游<input type="checkbox" name="hobby">游戏</body>
<script>javascript">//1 获取Element元素//1.1 获取元素--根据id获取var img = document.getElementById('h1');alert(img);//1.2 获取元素--根据标签名获取var divs = document.getElementsByTagName('div');for (let i = 0;i < divs.length;i++){alert(divs[i]);}//1.3 获取元素--根据类名获取var cls = document.getElementsByClassName('cls');for (let i = 0;i < cls.length;i++){alert(cls[i]);}//1.4 获取元素--根据name属性获取var hobbies = document.getElementsByName('hobby');for (let i = 0;i < hobbies.length;i++){alert(hobbies[i]);}//2.查询参考手册，完成属性，方法的获取var cls = document.getElementsByClassName('cls');cls[0].innerHTML = '14公寓421状元阁';</script>
</html>

六 JS事件监听

什么是事件？

HTML事件是发生在HTML元素上的事情，比如：

按钮被点击
鼠标移动到元素上
按下键盘按键

事件监听

JS可以在事件被侦测时执行指定的代码

事件绑定

使用HTML标签中的事件属性进行绑定
使用DOM对象属性进行绑定

常见事件
在这里插入图片描述

JS的学习与使用

JS的学习与使用

一什么是Javascript？

二 JS引入方式

三 JS基础语法

四 JS函数

五 JS对象

六 JS事件监听

相关文章

Unity插件NodeCanvas之行为树的详细教程

前端开发快速进行 Mock 数据的方法

Python网络爬虫与数据采集实战——网络协议与HTTP

Android关机流程知多少？

操作系统之基本分段存储管理

做的图表配色太丑，怎么办？

HTMLCSS：实现可爱的冰墩墩

【C语言刷力扣】13.罗马数字转整数

JS的学习与使用

JS的学习与使用

一 什么是Javascript？

二 JS引入方式

三 JS基础语法

四 JS函数

五 JS对象

六 JS事件监听

相关文章

一什么是Javascript？