js入门学习（打卡01）

最新推荐文章于 2020-11-10 16:52:17 发布

高鸡丝

最新推荐文章于 2020-11-10 16:52:17 发布

阅读量473

点赞数 1

分类专栏：前端开发文章标签： js入门学习

本文链接：https://blog.csdn.net/weixin_42363675/article/details/88867080

版权

前端开发专栏收录该内容

5 篇文章 0 订阅

订阅专栏

JavaScript入门学习

作者自述
学习原因
怎样学习
学习第一天打卡
最后注明

作者自述

大三学生，代号“jsGo”

学习原因

在大学这段时间的学习发现自己并不是特别适合学习一些后台语言的开发，
对Html5+Css3 和wx小程序等前端语言产生了兴趣，于是着手学习前端语言。
在进行微信小程序开发的基础上所用的语言就是有JavaScript、TypeScript。
所以转手进入学习JavaScript便于毕业以后进行工作。同时也希望一些想要学习js的未来大牛们
可以一块进行学习，便于互相监督，互相成长。

怎样学习

1.由于是从头开始学习所以要先将其中的一些基础概念摸清楚，便于后期学习，
2.多练习，多利用闲暇时间进行学习。
3.进行博客的更新，便于检测自己的学习成果。
**如果出现错误也希望各位大牛进行批评指正！谢谢。**

学习第一天打卡

今天的学习就从最基础的一些基本信息开始。
**第一：（基础认识）**
JavaScript 是脚本语言
JavaScript 是一种轻量级的编程语言。
JavaScript 是可插入 HTML 页面的编程代码。
JavaScript 插入 HTML 页面后，可由所有的现代浏览器执行。
**第二：（js学习的实现）**
1.进行写入Html的输出
首先创建个Html页面在<body> <script></script></body>标签中写如代码段所示：

document.write("<h1>The heading</h1>");
document.write("<p>The paragraph</p>");

在此处强调Html中不区分大小写。

2.对事件做出反应，进行Html内容改变

(1)创建内容片段

<p id="demo"> JavaScript 原始内容</p>

（2）设置改变按钮

<button type="button" onClick="myday01()")">改变</button>

（3）设置改变函数

<script>
function myday01(){
   x=document.getElementById("demo");
   x.innerHTML="hello js";
}	
</script>

运行结果自行分析。

第三：改变Html图片

(1)放入两张图片、灯亮和灯灭
lightoff
lighton
（2）设置改变函数

<script>
function changedday01()
{
element=document.getElementById('myimage')
if (element.src.match("bulbon"))
 {
 element.src="images/eg_bulboff.gif";
 }
else
 {
 element.src="images/eg_bulbon.gif";
 }
}
</script>

代码解释：
element.src.match("bulbon")意思是 Src路径里有bulbon匹配则为true.如果一开始的图片是/i/eg_bulbon.gif，
那么就会匹配到bulbon，if语句为ture，执行if语句，图片转换为/i/eg_bulboff.gif；
如果没匹配到bulbon，执行else语句，图片为/i/eg_bulbon.gif。
这样就实现了用js对html图片的改变。
（3）设置图片，并且通过onclick进行改变函数的调用

<img id="myimage" onclick="changeday01()" src="images/eg_bulboff.gif">

演示效果：通过进行点击图片以达到图片的改变。

 第四：改变Html的样式
 （1）设置目标代码段

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

（2）设置改变函数

<script>
function myday01()
{
x=document.getElementById("demo") // 找到元素
x.style.color="#efe121";          // 改变样式
}
</script>

(3)设置改变按钮

<button type="button" onclick="myday01()">点击这里</button>

第五：验证输入
(1)设置相对应的函数、按钮。

<p>请输入数字。如果输入值不是数字，浏览器会弹出提示框。</p>

<input id="demo" type="text">

<script>
function myday01()
{
var x=document.getElementById("demo").value;
if(x==""||isNaN(x))
	{
	alert("Not Numeric");
	}
}
</script>
<button type="button" onclick="myday01()">点击这里</button>

注释：	isNaN() 函数用于检查其参数是否是非数字值。
		input：是输入框，通过输入框的文本--->x,进行判断是否为数字
		alert:为弹出的对话框。

最后注明

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

Java是由 Sun 发明的，是一种更复杂的编程语言。

JSP是一种技术。通过JAVA语言实现的。

JavaScript 由 Brendan Eich 发明。它于 1995 年出现在 Netscape 中（该浏览器已停止更新），并于 1997 年被 ECMA（一个标准协会）采纳。

ECMA-262 是 JavaScript 标准的官方名称。

JS是JavaScript 的缩写，是客户端脚本语言，开发WEB程序的辅助语言之一

Javascript被归类为直译语言，因为主流的引擎都是每次运行时加载代码并解译。

第一天打卡: 2019年3月28日

高鸡丝

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js入门学习（打卡01）

JavaScript入门学习作者自述学习原因怎样学习学习第一天打卡最后注明作者自述民办大学大三学生，代号“枫”学习原因在大学这段时间的学习发现自己并不是特别适合学习一些后台语言的开发，对Html5+Css3 和wx小程序等前端语言产生了兴趣，于是着手学习前端语言。在进行微信小程序开发的基础上所用的语言就是有JavaScript、TypeScript。所以转手进入学习JavaScri...
复制链接

扫一扫