前端基础-JavaScript

JavaScript

1.简介

JavaScript 是脚本语言，可用于 HTML 和 web，更可广泛用于服务器、PC、笔记本电脑、平板电脑和智能手机等设备。
JavaScript 是一种轻量级的编程语言。
JavaScript 是可插入 HTML 页面的编程代码。
JavaScript 插入 HTML 页面后，可由所有的现代浏览器执行。
JavaScript 语句向浏览器发出的命令。语句的作用是告诉浏览器该做什么。

作用：直接写入html输出流。对事件做出反应。改变HTML内容。改变HTML图像。改变HTML样式。验证输入。等

JavaScript 与 Java 是两种完全不同的语言，无论在概念上还是设计上。

Java（由 Sun 发明）是更复杂的编程语言。

JavaScript 由 Brendan Eich 发明。它于 1995 年出现，被 ECMA（一个标准协会）采纳。。

2.用法

(1)内部方式

脚本必须位于 <script> 与 </script> 标签之间。
脚本可被放置在 HTML 页面的 <body> 和 <head> 部分中。

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>标题</title> 
</head>
<body>
	
<h1>我的第一段 JavaScript</h1>
<p id="demo">
JavaScript 能改变 HTML 元素的样式。
</p>
<script>       //可以在body，也可以在head
function myFunction()       //函数作用：捕获元素之后改变样式
{
	x=document.getElementById("demo") // 找到元素  getElementById函数捕获id选择器
	x.style.color="#ff0000";          // 改变样式
}
</script>
<button type="button" onclick="myFunction()">点击这里</button>  //使用函数
	
</body>
</html>

(2)外部方式

以把脚本保存到外部文件中。外部文件通常包含被多个网页使用的代码。外部 JavaScript 文件的文件扩展名是 .js。

导入方式：在 <script> 标签的 "src" 属性中设置该 .js 文件：

<body>
<script src="myScript.js"></script>
</body>

3.JavaScript输出

JavaScript 可以通过不同的方式来输出数据：
使用 window.alert() 弹出警告框。

使用 document.write() 方法将内容写到 HTML 文档中。

使用 innerHTML 写入到 HTML元素。

<script>
document.getElementById("demo").innerHTML="段落已修改。";
</script>

使用 console.log() 写入到浏览器的控制台。

4.JavaScript语法

var points = 10;     // Number 通过表达式字面量赋值
var lastName = "Johnson";   // String 通过字符串字面量赋值
var cars = ["Saab", "Volvo", "BMW"];    // Array  通过数组字面量赋值
var person = {firstName:"John", lastName:"Doe"};  // Object 通过对象字面量赋值
使用：对象是拥有属性和方法的数据。对象键值对的形式。
name=person.lastname;
name=person["lastname"];

JavaScript 是脚本语言，浏览器会在读取代码时，逐行地执行脚本代码。而对于传统编程来说，会在执行前对所有代码进行编译。

值类型(基本类型)：字符串（String）、数字(Number)、布尔(Boolean)、对空（Null）、未定义（Undefined）、Symbol。
引用数据类型：对象(Object)、数组(Array)、函数(Function)。
JavaScript 拥有动态类型。这意味着相同的变量可用作不同的类型。
JavaScript 只有一种数字类型。数字可以带小数点，也可以不带。

5.JavaScript事件

HTML 事件是发生在 HTML 元素上的事情。
当在 HTML 页面中使用 JavaScript 时， JavaScript 可以触发这些事件。
HTML 事件可以是浏览器行为，也可以是用户行为。
以下是 HTML 事件的实例：
HTML 页面完成加载
HTML input 字段改变时
HTML 按钮被点击

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>标题</title> 
</head>
<body>
<button onclick="displayDate()">点这里</button>  
//事件，onclick属性对应了script里的函数，点击运行script里的函数
<script>
function displayDate(){
	document.getElementById("demo").innerHTML=Date();
}      //写入html元素
</script>
<p id="demo"></p>  //id选择器找元素

</body>
</html>

6.JavaScript数据类型

(1)字符串与对象

var x = "John";
var y = new String("John");
(x === y) // 结果为 false，因为 x 是字符串，y 是对象

两个数字相加，返回数字相加的和，如果数字与字符串相加，返回字符串

你可以使用 typeof 操作符来检测变量的数据类型。
typeof "John" // 返回 string

(2)undefined 和 null 的区别

null 和 undefined 的值相等，但类型不等：
typeof undefined // undefined
typeof null // object
null === undefined // false
null == undefined // true
在严格的比较运算中，=== 为恒等计算符，同时检查表达式的值与类型

1、定义
 （1）undefined：是所有没有赋值变量的默认值，自动赋值。
 （2）null：主动释放一个变量引用的对象，表示一个变量不再指向任何对象地址。
2、何时使用null?
当使用完一个比较大的对象时，需要对其进行释放内存时，设置为 null。
3、null 与 undefined 的异同点是什么呢？
共同点：都是原始类型，保存在栈中变量本地。
不同点：
（1）undefined——表示变量声明过但并未赋过值。
它是所有未赋值变量默认值，例如：
var a;    // a 自动被赋值为 undefined
（2）null——表示一个变量将来可能指向一个对象。
一般用于主动释放指向对象的引用，例如：
var emps = ['ss','nn'];
emps = null;     // 释放指向数组的引用
4、延伸——垃圾回收站
它是专门释放对象内存的一个程序。
 （1）在底层，后台伴随当前程序同时运行；引擎会定时自动调用垃圾回收期；
 （2）总有一个对象不再被任何变量引用时，才释放。

(3)类型转换

JavaScript 数据类型：
在 JavaScript 中有 6 种不同的数据类型：string、number、boolean、object、function、symbol
3 种对象类型：Object、Date、Array
2 个不包含任何值的数据类型：null、undefined

Number() 转换为数字， String() 转换为字符串， Boolean() 转换为布尔值。

(4)声明提升

JavaScript 中，函数及变量的声明都将被提升到函数的最顶部。
JavaScript 中，变量可以在使用后声明，也就是变量可以先使用再声明。
声明提升：函数声明和变量声明总是会被解释器悄悄地被"提升"到方法体的最顶部。
但是：只有声明会提升，初始化不会。

7.正则表达式

正则表达式：使用单个字符串来描述、匹配一系列符合某个句法规则的字符串搜索模式。
搜索模式可用于文本搜索和文本替换。

正则表达式可用于所有文本搜索和文本替换的操作。

var patt = /runoob/i
实例解析：
/runoob/i  是一个正则表达式。
runoob  是一个正则表达式主体 (用于检索)。
i  是一个修饰符 (搜索不区分大小写)。

在 JavaScript 中，正则表达式通常用于两个字符串方法 : search() 和 replace()。

search() 方法 用于检索字符串中指定的子字符串，或检索与正则表达式相匹配的子字符串，并返回子串的起始位置。
replace() 方法 用于在字符串中用一些字符替换另一些字符，或替换一个与正则表达式匹配的子串。

正则表达式修饰符：
i 执行对大小写不敏感的匹配。
g 执行全局匹配（查找所有匹配而非在找到第一个匹配后停止）。
m 执行多行匹配。

test() 方法用于检测一个字符串是否匹配某个模式，如果字符串中含有匹配的文本，则返回 true，否则返回 false。
var patt = /e/;
patt.test("The best things in life are free!");

exec() 方法用于检索字符串中的正则表达式的匹配。
该函数返回一个数组，其中存放匹配的结果。如果未找到匹配，则返回值为 null。
/e/.exec("The best things in life are free!");
字符串中含有 "e"，所以该实例输出为:e

8.JavaScript错误

try 语句测试代码块的错误。
catch 语句处理错误。
throw 语句创建自定义错误。
finally 语句在 try 和 catch 语句之后，无论是否有触发异常，该语句都会执行。

实现一个输入框，输入5-10之间数字，如果错误则报错，每次输入完自动清空输入框

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
<p>不管输入是否正确，输入框都会再输入后清空。</p>
<p>请输入 5 ~ 10 之间的数字：</p>

<input id="demo" type="text">    //输入框
<button type="button" onclick="myFunction()">点我</button>  //按钮触发函数

<p id="p01"></p>    //用来输出错误信息的段落

<script>
function myFunction() {
  var message, x;
  message = document.getElementById("p01");   //输出错误信息用
  x = document.getElementById("demo").value;     //获得输入框的东西
  try {                                   //判断，抛出错误
    if(x == "") throw "值是空的";
    if(isNaN(x)) throw "值不是一个数字";
    x = Number(x);
    if(x > 10) throw "太大";
    if(x < 5) throw "太小";
  }
  catch(err) {
    message.innerHTML = "错误: " + err + ".";     //错误信息写入元素中
  }
  finally {
    document.getElementById("demo").value = "";  //清空输入框
  }
}
</script>
</body>
</html>

9.JavaScript表单

HTML 表单验证可以通过 JavaScript 来完成。

//实现：输入一个东西，弹出新页表，提示输入的是什么

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script>
function validateForm() {       //进行验证的函数
    var x = document.forms["myForm"]["fname"].value;
    if (x == null || x == "") {
        alert("需要输入名字。");
        return false;
    }
}
</script>
</head>
<body>

<form name="myForm" action="demo_form.php"      //表单，有一些属性
onsubmit="return validateForm()" method="post">
名字: <input type="text" name="fname">      //一个文本输入框
<input type="submit" value="提交">       //一个提交按钮
</form>

</body>
</html>

posted @ 2021-08-18 10:20 HexagonMan 阅读(71) 评论(0) 收藏举报

刷新页面返回顶部

六边形侠