JS初试

最新推荐文章于 2023-03-08 10:16:17 发布

270年前

最新推荐文章于 2023-03-08 10:16:17 发布

阅读量80

点赞数

文章标签： js

本文链接：https://blog.csdn.net/weixin_49344258/article/details/108296187

版权

一、为何学习JS（JavaScript)

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

HTML是定义网页内容--【制作网页】--单纯使用HTML制作的网页缺少美感

CSS是规定了网页的布局和样式--【美化网页】

但HTML+CSS制作的网页缺乏动态效果【界面无动态，数据无动态】

所以，需要JavaScript对网页进行编程【添加动态效果，数据动态加载】

二、什么是JavaScript?

1.JavaScript和java是两种完全不同的语言，不论概念上还是设计上。

1.1JavaScript来源

起初为网景公司为自己公司的浏览器添加动态效果而开发出的语言-【LiveScript】,后改为JavaScript。

后因各个公司标准不一，后经ECMA【欧洲计算机厂家协会】出台ECMA262标准后统一，

所以也被叫ECMAScript。

2.JavaScript是面向对象的脚本程序设计语言。

面向对象-编程思想

2.2什么是脚本程序

脚本程序-依据一定的格式编写的可执行文件-可以在浏览器直接运行。

3.JavaScript的使用

3.1标记事件中的使用

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<h1>1.标记的事件中使用</h1>
		<input type="button" value="测试javascript的使用" onclick="alert('欢迎使用JavaScriept!');"/>
	</body>
</html>

效果如下：

3.2script标记中的使用

script标记-<script>-JavaScript程序-<script>

位置-<head>标记中<body>标记中【最后】

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script>
			function test1(){
				alert("欢迎使用javascript！");
			}
		</script>
	</head>
	<body>
		<h1>script标记的中使用</h1>
		<h1>script标记出现在head标记中</h1>
		<input type="button" value="测试javascript的使用" onclick="test1();"/>
	</body>
</html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<h1>script标记的中使用</h1>
		<h1>script标记出现在body标记中</h1>
		<input type="button" value="测试javascript的使用" onclick="test1();"/>
		<script>
			function test1(){
				alert("欢迎使用javascript！");
			}
		</script>
	</body>
</html>

3.外部脚本

将JavaScript程序编写到独立文件【.js】，通过<script>标记提供的src属性将独立文件【.js】导入到html文件中。

可以在<head>或<body>中放置外部脚本引用。

格式为：<script src="js 文件路径"></script>

独立的js文件【myscript1.js】

function test1(){

alert("欢迎使用javascript！");

}

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="myscript1.js"></script>
	</head>
	<body>
		<h1>script外部脚本使用</h1>
		<input type="button" value="测试javascript的使用" onclick="test1();"/>
	</body>
</html>

4.JavaScript输出

JavaScript能够以以下不同的方式“显示”数据：

4.1使用window.alert（）写入警告框

4.2使用document.write()写入HTML元素

4.3使用innerHTML写入Html元素

4.4使用console.log()写入浏览器控制台【F12】

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<h1>1.使用 window.alert() 写入警告框</h1>
		<!--
		<script>
			window.alert("测试window.alert() 写入警告框");
		</script>
		-->
		<h1>2.使用 document.write() 写入 HTML 输出</h1>
		<!--
		<script>
			document.write("测试document.write() 写入 HTML 输出");
		</script>
		-->
		<h1>3.使用 innerHTML 写入 HTML 元素</h1>
		<p id="p1"></p>
		<!--
		<script>
			document.getElementById("p1").innerHTML="<font size='7'>测试 innerHTML 写入 HTML 元素</font>";
		</script>
		-->
		<h1>4.使用 console.log() 写入浏览器控制台</h1>
		<script>
			console.log("console.log() 写入浏览器控制台");
		</script>
	</body>
</html>

5.JavaScript语句

JavaScript语句由以下构成：

值、运算符、表达式、关键词和注释。

document.getElemenByld("demo").innerHTML="Hello World";

"Hello World"就是值

“=”就是赋值运算符

关键词-常通过某个关键词来标识需要执行的JavaScript动作

注释-解释说明代码的含义/调试程序【注释的内容不会被执行】

//单行注释【保证一行代码被注释掉不会被执行】

多行注释【保证多行代码被注释掉不会被执行】

//可以包含单行注释

 <script>
			/*
			//console.log("console.log() 写入浏览器控制台");
			console.log("console.log() 写入浏览器控制台");
			console.log("console.log() 写入浏览器控制台");
console.log("console.log() 写入浏览器控制台");
			*/
		</script>

分号；表示一条JavaScript语句的结束

可以将有分号的语句写在同一行，通常我们都不会这么写，不方便出错后查找。所以一般情况下，一行一句。

JavaScript 代码块 【{代码块}】

function myFunction() {
    document.getElementById("demo").innerHTML = "Hello Kitty.";
    document.getElementById("myDIV").innerHTML = "How are you?";
}

6.JavaScript的语法

JavaScript值

JavaScript语句定义两种类型的值：混合值和变量值。

混合值被称为字面量（literal）---常量值。

写数值有无小数点均可，例如：12.5、1001

写字符串：”myname"

变量值被称为变量【程序运行的最小单位】保存数据值。

需要通过var-关键词来定义变量

用法1：var a;//定义变量

a=1001;//变量赋值

用法2：var b="hello";

JavaScript运算符

JavaScript使用算数运算符（+、-、*、/）来计算值。

JavaScript使用（=）赋值运算符。

JavaScript使用（>、<、==、>=、<=、！=）比较运算符。

JavaScript使用（||、&&、！）逻辑运算符。

等等

JavaScript表达式

表达式是值、变量和运算符的组合，计算结果是值。

100+123【算术表达式】

var b=“hello”；【赋值表达式】

12>23【关系表达式】

（12>23)&&(23<12) 【逻辑表达式】

6.JavaScript标识符

标识符就是为JavaScript元素【函数、变量、对象等等】起名字的字符串。

6.1可以由字母，下划线“_”或美元符号“$”，数字组成，数字不能开头。

6.2不能用关键词

6.3不区分大小写。

驼峰式命名规则：首字母大写【FirstName, LastName, MasterCard, InterCity.】

JavaScript程序员倾向于使用以小写字母开头的驼峰大小写。

firstName, lastName, masterCard, interCity

7.JavaScript变量

JavaScript变量式存储数据值的容器。

JavaScript数据类型

在编程中，文本值被称为字符串

JavaScript可处理多种数据类型，但现在，我们只关注数值和字符串值。

字符串被包围在双引号或者单引号中。数值不用引号。

如果把数值放在引号中，会被视作文本字符串。

true/false 布尔型

null null 型

声明（创建）JavaScript变量

在JavaScript中创建变量被称为“声明”变量。

可以通过var关键词来声明JavaScript变量：var carName；

声明之后，变量式没有值的。（在技术上，他的值式undefined)，在使用变量的时候要赋予初始值，否则被视为未定义。

通过“=”给变量赋值。

var carName;

carName=BRZ

var car Name=BRZ;

一条语句，多个变量

var person=Bill Gates,carName="porsche",price=15000;

7.JavaScript运算符

JavaScript使用（=）赋值运算符

JavaScript使用算数运算符（+、-、*、/、%、++、--)来计算值。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>变量-运算符-表达式</title>
		<script>
			function  suanshu(){
				//声明变量
				var num1=10;
				var num2=3;
				document.getElementById("h1").innerHTML=num1+"+"+num2+"="+(num1+num2);
				document.getElementById("h2").innerHTML=num1+"-"+num2+"="+(num1-num2);
				document.getElementById("h3").innerHTML=num1+"*"+num2+"="+(num1*num2);
				document.getElementById("h4").innerHTML=num1+"/"+num2+"="+(num1/num2);
				document.getElementById("h5").innerHTML=num1+"%"+num2+"="+(num1%num2);
				// ++ [自动加1]
				// 变量++  [先用后加]
				//num1++;  //10
				//document.getElementById("h6").innerHTML=num1; //11
				// ++变量  [先加后用]
				//++num1;  //11
				//document.getElementById("h6").innerHTML=num1; //11
				// -- [自动减1]
				// 变量-- [先用后减]
				//num1-- ; //10
				//document.getElementById("h6").innerHTML=num1; //9
				//  -- 变量
				--num1;  // 9
				document.getElementById("h6").innerHTML=num1; //9
			}
		</script>
	</head>
	<body>
		<input  type="button"  value="测试算数运算符" onclick="suanshu()"/><br>
		<h1 id="h1"></h1>
		<h1 id="h2"></h1>
		<h1 id="h3"></h1>
		<h1 id="h4"></h1>
		<h1 id="h5"></h1>
		<h1 id="h6"></h1>
	</body>
</html>

JavaScript 使用(>  <  ==  >=  <=  != )比较运算符运算符。

JavaScript 使用(||   &&  !  )逻辑运算符运算符。

270年前

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JS初试

一、为何学习JS（JavaScript)JavaScript：是web开发者必学的三种语言之一；HTML是定义网页内容--【制作网页】--单纯使用HTML制作的网页缺少美感CSS是规定了网页的布局和样式--【美化网页】但HTML+CSS制作的网页缺乏动态效果【界面无动态，数据无动态】所以，需要JavaScript对网页进行编程【添加动态效果，数据动态加载】二、什么是JavaScript?1.JavaScript和java是两种完全不同的语言，不论概念上还是设计上。1.1Jav
复制链接

扫一扫