JavaScript学习01：快速入门

其他 2020-01-19 16:44:49 阅读次数: 0

JavaScript` 简介

JavaScript 是互联网上最流行的脚本语言，这门语言可用于 HTML 和 web，更可广泛用于服务器、PC、笔记本电脑、平板电脑和智能手机等设备。
JavaScript 是脚本语言

  • JavaScript 是一种轻量级的编程语言。
  • JavaScript 是可插入 HTML 页面的编程代码。
  • JavaScript 插入 HTML 页面后，可由所有的现代浏览器执行。
  • JavaScript 很容易学习。

JavaScript：直接写入 HTML 输出流

document.write("<h1>这是一个标题</h1>");
document.write("<p>这是一个段落。</p>");

JavaScript：对事件的反应

<button type="button" onclick="alert('欢迎!')">点我!</button>

alert() 函数在 JavaScript 中并不常用，但它对于代码测试非常方便。

onclick 事件只是您即将在本教程中学到的众多事件之一。

JavaScript：改变 HTML 内容

x=document.getElementById("demo");  //查找元素
x.innerHTML="Hello JavaScript";    //改变内容

JavaScript：改变 HTML 图像

<!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：改变 HTML 样式

改变 HTML 元素的样式，属于改变 HTML 属性的变种。

x=document.getElementById("demo")  //找到元素 
x.style.color="#ff0000";           //改变样式

JavaScript：验证输入

if isNaN(x) {
    alert("不是数字");
}

前端架构分析

开发流程
设计页面样板–>前端工程师将样板做成静态网页–>后端工程师将静态网页修改为动态网页

C/S架构
B/S架构
B/S架构顾名思义就是 B代表浏览器，则S代表服务器的意思
2.B/S架构就是说以网址的形式使用，将运算 操作等储存到远程服务器

W3C标准
**W3C标准是由万维网联盟所制定及修改

1.结构（HTML）

用于描述页面结构

2.表现（CSS)

用于控制页面中元素的样式
在前端中起美化页面的作用

3.行为（JavaScript）

用于响应用户的操作
在前端中起网页布局修改的作用

网站协议
协议就是一种加密方式 别名（超文本传输协议） 目前世界通用HTTP协议相对安全，如果网站涉及密码安全与支付安全的同时，在此诞生了HTTPS协议

HTML语言（超文本标记语言）
HTMl语言有多种版本而我就不一一列举了，今天我主要介绍HTML5 第五代超文本标记语言，（编写过程中是不分行的当然为了代码好区分还是缩进为好）

超文本
顾名思义就是超链接的意思，可以实现页面间的对接

标记
又名标签用来识别网页中的不同组成部分

HTML页面基本代码

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>网页标题</title>
    </head>
    <body>
        <h1>网页正文</h1>
    </body>
</html>

HTML中的标记指的就是标签用来描述网页

<title>网页标题</title>

<标签名/>
常用标签

<html>

作用：标签用于告诉浏览器这个文档中包含的信息是用HTML编写的
用法：所有的网页内容都需要编写到html标签中，一个网页中html标签只能有一个
html标签中有两个子标签head和body

<head>

作用：标签用来表示网页的元数据，head中包含了浏览器和搜索引擎使用的其他不可见信息
用法：head标签作为html标签的子元素出现，一个网页中只要有一个head

<title>

作用：标签表示网页的标题，显示在标题栏上，是搜索引擎最先看到的醒目内容

<body>

作用：标签用来设置网页的主体，所有可视页面都编写在body标签中
用法：body标签作为html的子标签使用

<p>

作用：

标签表示网页中的一个段落，一般浏览器会在段落的前后各加上一个换行，段落会在页面中自成一行

作用：
标签表示一个换行标签，使用br标签可以使标签后的内容另起一行
作用：
标签是水平线标签，使用hr标签可以在页面中打印一条水平线，水平线可以将页面分为上下两个部分

<img/>

作用：标签是图片标签，可以用来向页面中引入一些外部的图片
属性：src指向一个外部的图片路径
alt图片的描述

<a/>

作用：<a/>标签是超链接标签，通过a标签，可以快速跳转到其他页面
属性：href指向一个链接地址
target设置打开目标页面的位置，可选值：_blank新窗口，_self当前窗口
元素
一个完整的标签称为元素

<h1>网页正文</h1>
h1和/h1是一个完整的元素

子元素和父元素
<p>我是一个<em>段落</em></p>
p也是一个元素，em是p的子元素，p是em的父元素

祖先元素和后代元素
<body>
    <p><em>段落</em></p>
</body>
body也是一个元素
body是p和em的祖先元素
p和em是body的后代元素

标题
标题分为一到六级分别写法为

一级标题

二级标题

三级标题

四级标题

五级标题
六级标题
**属性**

可以为标签设置属性
通过属性为元素添加附加信息
属性总是以名称/值对的形式出现 比如：name=“value”
-有些属性可以是任意值

<img src=""alt="" />

有些属性是指定值

<h1 title="我是一个标题">标题</h1>

常见属性

id

id属性作为标签的唯一标识，在同一个网页中不能出现相同的id属性值

class

class属性用来为标签分组，拥有相同属性的标签视为一组，就像python中的类，可以出现相同的class属性，可以为一个元素指定多个class

title

title属性用来指定标签的标题，指定title以后，鼠标移入到元素上方时，会显示提示文字

注释
注释就是解释的意思 为了方便记忆可以使用注释

<!-- 注释内容 -->

解决显示乱码问题
在头标题中添加

<meat charset="utf-8" />

实体（转义字符）
在编写过程中我遇到必须使用的大于或小于符号这时浏览器会将它解析为标签，这时候就用到转义字符

javascript变量

变量就是用于储存信息的容器。

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title></title> 
</head>
<body>

<script>
var x=5;
var y=6;
var z=x+y;
document.write(x + "<br>");
document.write(y + "<br>");
document.write(z + "<br>");
</script>

</body>
</html>

与代数一样，JavaScript 变量可用于存放值（比如 x=5）和表达式（比如 z=x+y）。
变量可以使用短名称（比如 x 和 y），也可以使用描述性更好的名称（比如 age, sum, totalvolume）。

  • 变量必须以字母开头
  • 变量也能以 $ 和 _ 符号开头（不过我们不推荐这么做）
  • 变量名称对大小写敏感（y 和 Y 是不同的变量）

JavaScript变量的创建
在下面的例子中，我们创建了名为 carname 的变量，并向其赋值 “Volvo”，然后把它放入 id=“demo” 的 HTML 段落中：

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title></title> 
</head>
<body>

<p>点击这里来创建变量，并显示结果。</p>
<button onclick="myFunction()">点击这里</button>
<p id="demo"></p>
<script>
function myFunction(){
	var carname="Volvo";
	document.getElementById("demo").innerHTML=carname;
}
</script>

</body>
</html>

JavaScript 数据类型
值类型(基本类型)：

  • 字符串（String）、
  • 数字(Number)、
  • 布尔(Boolean)、
  • 对空（Null）、
  • 未定义（Undefined）、
  • Symbol
    引用数据类型：
  • 对象(Object)、
  • 数组(Array)、
  • 函数(Function)。

JavaScript 变量还能保存其他数据类型，比如文本值 (name=“Bill Gates”)。
在 JavaScript 中，类似 “Bill Gates” 这样一条文本被称为字符串。
JavaScript 变量有很多种类型，但是现在，我们只关注数字和字符串。
当您向变量分配文本值时，应该用双引号或单引号包围这个值。
当您向变量赋的值是数值时，不要使用引号。如果您用引号包围数值，该值会被作为文本来处理。

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title></title> 
</head>
<body>

<script>
var pi=3.14;
var name="Bill Gates";
var answer='Yes I am!';
document.write(pi + "<br>");
document.write(name + "<br>");
document.write(answer + "<br>");
</script>

</body>
</html>

JavaScript 拥有动态类型
JavaScript 拥有动态类型。这意味着相同的变量可用作不同的类型：
实例

var x;               // x 为 undefined
var x = 5;           // 现在 x 为数字
var x = "John";      // 现在 x 为字符串

JavaScript 字符串

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title></title> 
</head>
<body>

<script>
var carname1="Volvo XC60";
var carname2='Volvo XC60';
var answer1='It\'s alright';
var answer2="He is called \"Johnny\"";
var answer3='He is called "Johnny"';
document.write(carname1 + "<br>")
document.write(carname2 + "<br>")
document.write(answer1 + "<br>")
document.write(answer2 + "<br>")
document.write(answer3 + "<br>")
</script>

</body>
</html>

JavaScript 数字

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title></title> 
</head>
<body>

<script>
var x1=34.00;
var x2=34;
var y=123e5;
var z=123e-5;
document.write(x1 + "<br>")
document.write(x2 + "<br>")
document.write(y + "<br>")
document.write(z + "<br>")
</script>

</body>
</html>

JavaScript 数组
下面的代码创建名为 cars 的数组：
var cars=new Array();

  1. cars[0]=“Saab”;
  2. cars[1]=“Volvo”;
  3. cars[2]=“BMW”;
    或者 (condensed array):
var cars=new Array("Saab","Volvo","BMW");

<!DOCTYPE html>
<html>
<body>

<script>
var i;
var cars = new Array();
cars[0] = "Saab";
cars[1] = "Volvo";
cars[2] = "BMW";

for (i=0;i<cars.length;i++)
{
document.write(cars[i] + "<br>");
}
</script>

</body>
</html>

JavaScript 对象
对象由花括号分隔。在括号内部，对象的属性以名称和值对的形式 (name : value) 来定义。属性由逗号分隔：

var person={firstname:"John", lastname:"Doe", id:5566};

上面例子中的对象 (person) 有三个属性：firstname、lastname 以及 id。
空格和折行无关紧要。声明可横跨多行：

var person={
firstname : "John",
lastname  : "Doe",
id        :  5566
};

对象属性有两种寻址方式：

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 

</head>
<body>

<script>
var person=
{
	firstname : "John",
	lastname  : "Doe",
	id        :  5566
};
document.write(person.lastname + "<br>");//1
document.write(person["lastname"] + "<br>");//2
</script>

</body>
</html>

可以通过将变量的值设置为 null 来清空变量。

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
</head>
<body>

<script>
var person;
var car="Volvo";
document.write(person + "<br>");
document.write(car + "<br>");
var car=null
document.write(car + "<br>");
</script>

</body>
</html>
砍柴人。
发布了30 篇原创文章 · 获赞 0 · 访问量 545
私信 关注

猜你喜欢

转载自blog.csdn.net/weixin_44202489/article/details/102648236
今日推荐
Arc Browser for Windows 1.0 正式 GA
90后程序员开发视频搬运软件、不到一年获利超 700 万，结局很刑！
《美国对全球网络空间安全与发展的威胁和破坏》报告发布
火速冲上 GitHub 热榜 —— 开源编程语言、框架哪有这么可爱？
北京人形机器人创新中心发布全球首个纯电驱拟人奔跑的全尺寸人形机器人“天工”
周排行
rbac——界面、权限
Apache CXF + SpringMVC 整合发布WebService
so插件化
Vue.js实战系列---图标字体制作（svg格式）
PAT乙级 1007 素数对猜想(孪生素数对) (20分) ---（C语言 + 详细注释）
被IRM保护的文档，打开失败
Calendar和Date计算日期差的小问题
win10子系统ubuntu18.4安装docker
利用Wrap Shell Script定位Android Native内存泄漏
MySQL: Transaction (Part I - Basic Concept)
每日归档
更多
2024-05-03(19)
2024-05-02(0)
2024-05-01(4)
2024-04-30(1)
2024-04-29(40)
2024-04-28(0)
2024-04-27(56)
2024-04-26(39)
2024-04-25(22)
2024-04-24(36)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022