30分钟带你掌握js基础（JavaScript基础）

最新推荐文章于 2024-06-16 09:35:05 发布

木子Link

最新推荐文章于 2024-06-16 09:35:05 发布

阅读量455

点赞数 1

分类专栏： JavaScript 文章标签： js javascript

本文链接：https://blog.csdn.net/li1441853031/article/details/118104805

版权

JavaScript 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

一、 JavaScript简介

为何学习 JavaScript？

JavaScript 是 web 开发者必学的三种语言之一：

HTML 定义网页的内容
CSS 规定网页的布局
JavaScript 对网页行为进行编程

JavaScript 是互联网上最流行的脚本语言，这门语言可用于 HTML 和 web。

（脚本语言是为了缩短传统的编写-编译-链接-运行（edit-compile-link-run）过程而创建的计算机编程语言。）

JavaScript 是一种轻量级的编程语言。

JavaScript 是可插入 HTML 页面的编程代码。

JavaScript 插入 HTML 页面后，可由所有的现代浏览器执行。

在 HTML 中，JavaScript 代码位于 <script> 与 </script> 标签之间。
旧的 JavaScript 例子也许会使用 type 属性：<script type="text/javascript">。

alert("561321");

document.write("--------");让计算机在页面输出一个内容

console.log("sgsgsg");

二、js的编写位置

1、写在body标签（不推荐）

2、写在head标签

3、引用外部文件（推荐）

<script src="myScript.js"></script>
/*外部 JavaScript 的优势
在外部文件中放置脚本有如下优势：

分离了 HTML 和代码
使 HTML 和 JavaScript 更易于阅读和维护
已缓存的 JavaScript 文件可加速页面加载*/

三、js基本语法

1.声明变量

var a ;
var b = 123;//数值number类型
var b2 = 123.456//数值为number类型
var c = "12346";// 字符串
var d = ture;
var cars = ["Porsche", "Volvo", "BMW"]; // 数组cars[0]=Porsche
var x = {firstName:"Bill", lastName:"Gates"};    // 对象
var person;          // 值是 undefined，类型是 undefined

typeof 运算符
您可使用 JavaScript 的 typeof 来确定 JavaScript 变量的类型：
console.log(typeof a)

2.标识符

可以含有字母、数字、_ 、$ //不能以数字开头

一般采用驼峰命名//首字母小写，每个单次的开头字母大写

3.运算符

+、-、*、/
	var x=5+5;//10
	var y="5"+5;//55
	var z="Hello"+5;//Hello5
x = "8" + 3 + 5;//835如果把要给数值放入引号中，其余数值会被视作字符串并被级联
var x = 3 + 5 + "8"//88

四、js 函数

function *functionname*()
{
  *// 执行代码*
}

<p>点击这个按钮，来调用带参数的函数。</p>
<button onclick="myFunction('Harry Potter','Wizard')">点击这里</button>
<script>
function myFunction(name,job){
    alert("Welcome " + name + ", the " + job);
}
</script>

五、*js事件

getElementById(’’)

getElementsByName(’’)

getElementsByTagName(“TagName”)

1.能够改变HTML

<button onclick="getElementById('demo').innerHTML=Date()">现在的时间是?   </button>
<p id="demo"></p>

2.能够改变CSS

<p id="demo">JavaScript 能够改变 HTML 元素的样式。</p>

<button type="button" onclick="document.getElementById('demo').style.fontSize='35px'">
点击我！
</button>

例子：

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>灯泡点亮</title> 
</head>
<body>
	
<script>
function changeImage()
{
	element=document.getElementById('myimage')
	if (element.src.match("bulbon"))
	{
		element.src="/images/pic_bulboff.gif";
	}
	else
	{
		element.src="/images/pic_bulbon.gif";
	}
}
</script>
<img id="myimage" onclick="changeImage()" src="/images/pic_bulboff.gif" width="100" height="180">
<p>点击灯泡就可以打开或关闭这盏灯</p>
	
</body>
</html>

在这里插入图片描述

六、JavaScript 类型转换

在 JavaScript 中有 6 种不同的数据类型：

string
number
boolean
object
function
symbol

3 种对象类型：

Object
Date
Array

2 个不包含任何值的数据类型：

null
undefined

//将数字转换为字符串
String(x) +<br> +   // 将变量 x 转换为字符串并返回
String(123) +<br> +  // 将数字 123 转换为字符串并返回
String(100 + 23) // 将数字表达式转换为字符串并返回

x.toString()
(123).toString()
(100 + 23).toString()
//将布尔值转换为字符串
String(false)        // 返回 "false"
String(true)         // 返回 "true"

	//Boolean 方法 toString() 也有相同的效果。
false.toString()     // 返回 "false"
true.toString()      // 返回 "true"

//将字符串转换为数字
Number("3.14")    // 返回 3.14
Number(" ")       // 返回 0
Number("")        // 返回 0
Number("99 88")   // 返回 NaN

七、js注释

单行注释以 // 开头。

多行注释以 /* 开头，以 */ 结尾。

八、JavaScript 对象

真实生活中的对象、属性和方法

在真实生活中，汽车是一个对象。

汽车有诸如车重和颜色等属性，也有诸如启动和停止的方法：

对象	属性	方法
car	car.name = porsche；car.model = 911；car.length = 4499mm；car.color = white；	car.start()；car.drive()；car.brake()；car.stop()；

所有汽车都拥有同样的属性，但属性值因车而异。

所有汽车都拥有相同的方法，但是方法会在不同时间被执行。

var person = {
  firstName: "Bill",
  lastName : "Gates",
  id       : 678,
  fullName : function() {
    return this.firstName + " " + this.lastName;
  }
};

//this 关键词
在函数定义中，this 引用该函数的“拥有者”。

在上面的例子中，this 指的是“拥有” fullName 函数的 person 对象。

换言之，this.firstName 的意思是 this 对象的 firstName 属性。


//访问对象属性
person.lastName;
//访问对象方法
name = person.fullName();

九、正则表达式

正则表达式是构成搜索模式的字符序列。

该搜索模式可用于文本搜索和文本替换操作。

/pattern/modifiers;

实例

var patt = /abc/i;
abc 是模式（pattern）（在搜索中使用）。
i 是修饰符（把搜索修改为大小写不敏感）。

search()

<script>
var str = "Visit abc!"; 
var n = str.search("abc");//在字符串中搜索“abc”，并显示匹配的位置
document.getElementById("demo").innerHTML = n;
</script>

replace()

var str = "Visit Abc!";
var res = str.replace("/abc/i", "efg");

test()

test() 是一个正则表达式方法。

它通过模式来搜索字符串，然后根据结果返回 true 或 false。

下面的例子搜索字符串中的字符 “e”：实例

var patt = /e/;
patt.test("The best things in life are free!");

由于字符串中有一个 “e”，以上代码的输出将是：

true

十、js异常

try 语句使您能够测试代码块中的错误。

catch 语句允许您处理错误。

throw 语句允许您创建自定义错误。

finally 使您能够执行代码，在 try 和 catch 之后，无论结果如何。

<p id="demo"></p>

<script>
try {
    adddlert("欢迎访问！");
}
catch(err) {
    document.getElementById("demo").innerHTML = err.message;
}
</script>

错误总会发生！

当执行 JavaScript 代码时，会发生各种错误。

错误可能是程序员的编码错误，由错误输入引起的错误，或者由于其他不可预见的问题。

十一、js调试

1.console.log();

2.debugger

var x = 15 * 5;
debugger;
document.getElementbyId("demo").innerHTML = x;

十二、js表单验证

数据验证

数据验证指的是确保干净、正确和有用的用户输入的过程。

典型的验证任务是：

用户是否已填写所有必需的字段？
用户是否已输入有效的日期？
用户是否在数字字段中输入了文本？

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript 能够验证输入</h2>

<p>请输入 1 与 10 之间的数：</p>

<input id="numb">

<button type="button" onclick="myFunction()">提交</button>

<p id="demo"></p>

<script>
function myFunction() {
  var x, text;

  // 获取 id="numb" 的输入字段的值
  x = document.getElementById("numb").value;

  // 如果 x 不是数字或小于 1 或大于 10
  if (isNaN(x) || x < 1 || x > 10) {
    text = "输入无效";
  } else {
    text = "输入有效";
  }
  document.getElementById("demo").innerHTML = text;
}
</script>

</body>
</html>

木子Link

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
打赏
0
评论
30分钟带你掌握js基础（JavaScript基础）

一、 JavaScript简介为何学习 JavaScript？JavaScript 是 web 开发者必学的三种语言之一：HTML 定义网页的内容CSS 规定网页的布局JavaScript 对网页行为进行编程JavaScript 是互联网上最流行的脚本语言，这门语言可用于 HTML 和 web。（脚本语言是为了缩短传统的编写-编译-链接-运行（edit-compile-link-run）过程而创建的计算机编程语言。）JavaScript 是一种轻量级的编程语言。JavaScript 是
复制链接

扫一扫