JavaScript入门篇

最新推荐文章于 2024-05-03 11:08:18 发布

置顶 z_z_Autum

最新推荐文章于 2024-05-03 11:08:18 发布

阅读量497

点赞数 2

本文链接：https://blog.csdn.net/z_z_Autum/article/details/51151343

版权

前端开发专栏收录该内容

2 篇文章 0 订阅

订阅专栏

改文章是通过在慕课网学习的关于前端开发中，对javascript的学习总结。

静态网页：HTML+CSS;

动态网页：HTML+CSS+javaScript;

为什么学习JavaScript？

1. 所有主流浏览器都支持JavaScript。

2. 目前，全世界大部分网页都使用JavaScript。

3. 它可以让网页呈现各种动态效果。

JavaScript能做什么？

1.增强页面动态效果(如:下拉菜单、图片轮播、信息滚动等)

2.实现页面与用户之间的实时、动态交互(如:用户注册、登陆验证等)

怎么写JS代码？

方法1：使用<script>标签在HTML网页中插入JavaScript代码。注意， <script>标签要成对出现，并把JavaScript代码写在<script></script>之间。

开始编写第一个代码，,依旧是用代码中最经典的hello world!为例：document.write("hello wrold!");

<html> 
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>sj 第一个代码</title>
</head>
<body>
  //<p id="p1">我是第一段文字</p>
 // <p id="p2">我是第二段文字</p>
  
  <script type="text/javascript">
	document.write("hello world!");

  </script>
</body>
</html>

<script type="text/javascript">表示在<script></script>之间的是文本类型(text),javascript是为了告诉浏览器里面的文本是属于JavaScript语言。

注意：1.一行的结束就被认定为语句的结束，通常在结尾加上一个分号";"来表示语句的结束。

2. “;”分号要在英文状态下输入，同样，JS中的代码和符号都要在英文状态下输入。

3. 虽然分号“;”也可以不写，但养成好的编程习惯，记得在语句末尾写上分号。

方法2：除了可以把JS代码写在HTML文件中以外，还可以单独创建一个文件后缀为.js的JavaScript的文件。

在JS文件中，不需要<script>标签,直接编写JavaScript代码就可以了,以hello.js为文件名的代码如下：

document.write("hello world!");

JS文件不能直接运行，需嵌入到HTML文件中执行，需在HTML中添加如下代码，就可将JS文件嵌入HTML文件中。

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>引用JS文件</title>
<script src="hello.js"></script>
</head>
<body>
</body>
</html>

JS代码究竟放在HTML页面中的哪个位置？

可以将JavaScript代码放在html文件中任何位置，但是一般放在网页的head或者body部分。
放在<head>部分：
最常用的方式是在页面中head部分放置<script>元素，浏览器解析head部分就会执行这个代码，然后才解析页面的其余部分。
放在<body>部分：
JavaScript代码在网页读取到该语句的时候就会执行。

<span style="font-size:12px;"><!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>JS代码的位置</title>
<script type="text/javascript">
  document.write(" 在head中<br/>");
</script>
</head>
<body>
<script type="text/javascript">
 document.write("在body中");
</script>
</body>
</html></span>

注意: javascript作为一种脚本语言可以放在html页面中任何位置，但是浏览器解释html时是按先后顺序的，所以前面的script就先被执行。比如进行页面显示初始化的js必须放在head里面，因为初始化都要求提前进行（如给页面body设置css等）；而如果是通过事件调用执行的function那么对位置没什么要求的。

代码的注释，在任何一种编程语言中为了提高代码的可读性，帮助自己和别人阅读和理解你所编写的代码，都会在代码周围加上许多注释。

注释可分为单行注释与多行注释两种。单行注释，在注释内容前加符号 “//”，多行注释以"/*"开始，以"*/"结束。

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>隐藏的注释</title>
 <script type="text/javascript">
    document.write("hello world"); // 我是单行注释
   /*我
     是
     多
     行
     注
     释
    */
 </script>
</head>
<body>
</body>
</html>

现在从对变量、数组、函数、语法、对象、事件、DOM操作进行了解，制作简单的网页动态效果。

什么是变量，从字面来说就是指可以改变值得量叫变量。从编程的角度上讲，变量是用于存储数值的容器，就像生活中的箱子、盒子一样。

在JS中定义变量的关键字为var,语法如下：

var 变量名

可以同时声明两个变量

var num1,mun2 ;

变量要先声明再赋值，如下：

var mychar;
mychar="javascript";
var mynum = 6;

变量可以重复赋值，如下：

var mychar;
mychar="javascript";
mychar="hello";

可以把任何东西存储在变量里，如数值、字符串、布尔值等，例如：

var num1 = 123;       // 123是数值
var num2 = "一二三";    //"一二三"是字符串
var num3=true;    //布尔值true（真），false(假)

注意：

1.必须以字母、下划线或美元符号开头，后面可以跟字母、下划线、美元符号和数字。如下:

正确:           
    mysum            
    _mychar         
    $numa1

错误:
  6num  //开头不能用数字
  %sum //开头不能用除(_ $)外特殊符号,如(%  + /等)
  sum+num //开头中间不能使用除(_ $)外特殊符号，如(%  + /等)

2.变量名区分大小写，如:A与a是两个不同变量。

3.不允许使用JavaScript关键字和保留字做变量名。

4.:变量也可以不声明，直接使用，但为了规范，需要先声明，后使用。

特别注意：

1. JS是区分大小写的，如：classname和ClassName是不一样的。同时注意方法、属性、变量等的大小写吆。

2. JS中的字符、符号等一定要在英文状态下输入吆。

表达式

表达式与数学中的定义相似，表达式是指具有一定的值、用操作符把常数和变量连接起来的代数式。 一个表达式可以包含常数或变量。

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>表达式</title>
<script type="text/javascript">

 var num1=10;
 var num2=num1-5+6;              <span style="color:#FF6666;">//数值表达式，值为数值</span>
 var str ="i"+"love"+"you";                         <span style="color:#FF6666;">   //字符串表达式，值为字符串</span>
 var isTrue=num1>num2;            <span style="color:#FF6666;"> //布尔值表达式，值为true或者false</span>

 document.write("小明还剩:"+num1+"元"+"<br>");
  document.write("小红花:"+num2+"元买个铅笔盒"+"<br/>");
  document.write(str+"<br/>");
  document.write(isTrue);
</script>
</head>
<body>
</body>
</html>

判断语句（if...else）

if...else语句是在指定的条件成立时执行代码，在条件不成立时执行else后的代码。不多解释，代码如下：

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>判断语句</title>
  <script type="text/javascript">
	var score =80; //score变量存储成绩，初值为80
	 if(score>=60) 
	{
     document.write("很棒，成绩及格了。");
	}
  else
	{
	 document.write("加油，成绩不及格。");
	}
  </script>
</head>
<body>
</body>
</html>

什么是函数（可以看做成java中的方法）

函数是完成某个特定功能的一组语句，可以把完成特定功能的代码块放到一个函数里，直接调用这个函数，就可以避免重复输入大量代码。

如何定义一个函数呢？基本语法如下:

function 函数名()
{
     函数代码;
}

说明:

1. function定义函数的关键字。

2. "函数名"你为函数取的名字。

3. "函数代码"替换为完成特定功能的代码。

function add2(){
   var sum = 3 + 2;
  document.write(sum);
}

add2();

还可以有我把它叫做带有参数的函数，举例如下：

function add2(a,b){
sum = a + b;
 document.write(sum);
} //  只需写一次就可以add2(3,2);add2(7,8);

z_z_Autum

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript入门篇

改文章是通过在慕课网学习的关于前端开发中，对javascript的学习总结。静态网页：HTML+CSS;动态网页：HTML+CSS+javaScript;为什么学习JavaScript？1. 所有主流浏览器都支持JavaScript。2. 目前，全世界大部分网页都使用JavaScript。3. 它可以让网页呈现各种动态效果。JavaScript能做什么？
复制链接

扫一扫