第一章：JavaScript基础

最新推荐文章于 2024-10-02 05:39:15 发布

w就是不秃

最新推荐文章于 2024-10-02 05:39:15 发布

阅读量206

点赞数

分类专栏： JavaScript&JQuery 文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/NoKris/article/details/126418774

版权

JavaScript&JQuery 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

第一章：JavaScript基础

JS是一门弱类型语言，它和java语法几乎一样，我们对比着java来学就会相对容易很多。

一，为什么要学JavaScript

JavaScript是一种基于对象和事件驱动的、并具有安全性能的脚本语言。它是在HTML中使用的，使用方法类似于CSS（内部引用，外部引用，行内引用）。

JS能做什么？

1. JavaScript可以做表单验证等一些逻辑的问题，避免了任何处理都要在web项目后台处理，那服务器压力就会很大，我们把简单的，不需要数据传输的处理放在JS中，这样就不用频繁的访问后台，为后台分担了压力。

做一下动态的页面，通过绑定点击鼠标，移动鼠标等事件，做到动态的页面实现，增加了用户的体验。

JS的特点

JavaScript特点:

向HTML页面中添加交互行为
脚本语言，语法和Java类似
解释性语言，边执行边解释

二，JavaScript的使用

JavaScript的声明和CSS差不多，都是用标签包裹。

语法：

<script type="text/javascript">
    <!--
          JavaScript 语句;
    -->
</script >

位置问题：

<title>初学JavaScript</title>
</head>
<body>
</body>
<script type="text/javascript">
    document.write("初学JavaScript");
    document.write("<h1>Hello，JavaScript</h1>");
</script>
</html>

JavaScript语言的位置，是没有规定的，可以写在页面任何的位置，但我们一般习惯把JavaScript写到body标签下面，CSS写在body上面。或者写成外部文件再导入。

JavaScript的执行原理

在这里插入图片描述

引用JavaScript的方式

上面也提到了，JavaScript的引用类似于CSS，所以就有三种方式；

第一种：外部JS文件

<script src="export.js"  type="text/javascript"></script>

第二种：在HTML标签中

<input name="btn" type="button" value="弹出消息框"   
   onclick="javascript:alert('欢迎你');"/>

第三种：标签代码块

<title>初学JavaScript</title>
</head>
<body>
</body>
<script type="text/javascript">
    document.write("初学JavaScript");
    document.write("<h1>Hello，JavaScript</h1>");
</script>
</html>

三，JavaScript核心语法

我们会从一下几个方面和java对比着讲，这样会比较快一点。

在这里插入图片描述

1. 变量

变量的赋值和java有一点出入，java有两种，JS有三种。

先声明变量再赋值:

var width;
width = 5;

同时声明和赋值变量:

var catName= "皮皮";
var x, y, z = 10;

可以不声明直接赋值: （特有的）

width=5;

注意：变量可以不经声明而直接使用，但这种方法很容易出错，也很难查找排错，不推荐使用。

2. 数据类型

undefined ：var width; 变量width没有初始值，将被赋予值undefined

null ：表示一个空值，与undefined值相等

number： var iNum=23; //整数

var iNum=23.0; //浮点数

boolean： true和false

string：一组被引号（单引号或双引号）括起来的文本

var string1="This is a string";或者var string1='This is a string';

在JS里面没有int，float等数字类型，而是直接一个number类型。undefined等价于null。String类型可以用单引号，也可以用双引号。

在我们不知道一个变量是什么类型的时候，我们可以用typeof运算符获得变量类型。

typeof运算符返回值如下：

undefined：变量被声明后，但未被赋值
string：用单引号或双引号来声明的字符串
boolean：true或false
number：整数或浮点数
object：javascript中的对象、数组和null

String对象

属性：

字符串对象.length
方法
字符串对象.方法名();

var str="this is JavaScript";
var strLength=str.length;    //长度是18

方法：

在这里插入图片描述

3.数组

创建数组

语法：

var 数组名称 = new Array(size);

注意：size省略不写是可以正常运行的，因为是弱类型语言，所以也可以正常使用。

为数据元素赋值

//第一种
var fruit= new Array("apple", "orange", " peach","banana");
//第二种
var fruit = new Array(4);
fruit [0] = " apple ";
fruit [1] = " orange ";
fruit [2] = " peach ";
fruit [3] = " banana ";

数组的常用属性和方法

在这里插入图片描述

4. 运算符号

在这里插入图片描述

运算符几乎一样，JS多出来两个：’===‘，’!==‘；

最大的区别就是==会进行类型的转换之后再判断两者是否相等，而===不会进行数据类型的转换，先判断两边的数据类型是否相等，如果数据类型相等的话才会进行接下来的判断，再进行等式两边值得判断，可以理解为只有等式两边是全等（数据类型相同，值相同）的时候结果才会是true，否则全为false。

===又称全等，类似于java重写后的equals。

5. 逻辑控制语句

基础逻辑控制语句和java的完全一致，但是有一个额外的for in循环

if条件语句

if(条件)
{
   //JavaScript代码;
}
else
{
  //JavaScript代码;
}

Switch语句

switch (表达式)
{    case 常量1 : 
              JavaScript语句1;
	break;
       case 常量2 : 
 	JavaScript语句2;
 	break;
         ...
        default : 
             JavaScript语句3;    
}

for循环

for(初始化;  条件;  增量)
 {
      JavaScript代码; }

while(条件)
 {
      JavaScript代码;
}

特殊的for in循环

var fruit=[ "apple", "orange", "peach","banana"]; 
for(var i in fruit){
       document.write(fruit[i]+"<br/>");
}

注意：这里的for in循环和java中的for增强有点类似，但是声明的i是数组的下标，而不是java中for增强循环的同类型对象。

6. 注释

JavaScript是没有文档注释的，其他两种和java一致。

单行注释

alert("恭喜你！注册会员成功"); //在页同上弹出注册会员成功的提示框

多行注释

/*
使用for循环运行“document.write("<h3>Hello World</h3>");”5次
使用document.write在页面上输出“Hello World” 
*/

7. 常用的输入/输出

alert()

alert("提示信息")；//弹出提示框。

prompt()

prompt("提示信息", "输入框的默认信息");
prompt("请输入你喜欢的颜色","红色");
prompt("请输入你喜欢的颜色","");

第一个参数为提示信息，第二个参数为输入框的默认文本。

8. 语法约定

虽然JavaScript是一门弱语言，但是我们还是尽量的按照一些规范去写代码。

代码区分大小写
变量、对象和函数的名称要有意义
分号一定要加，养成好习惯

四，函数

JavaScript的函数类似于java中的方法，是完成特定任务的代码语句块，它使用更简单：不用定义属于某个类，直接使用。

函数可分为：系统函数和自定义函数。

常用系统函数：

parseInt (“字符串”)
将字符串转换为整型数字
如: parseInt (“86”)将字符串“86“转换为整型值86
parseFloat(“字符串”)
将字符串转换为浮点型数字
如: parseFloat(“34.45”)将字符串“34.45“转换为浮点值34.45
isNaN()
用于检查其参数是否是非数字

因为JavaScript数据类型是很不严格的，所以我们在进行一些数据运算的时候，我们就要用一下转换数字的方法，才能进行运算，不然是默认拼接字符串的。

自定义函数

定义函数

function 函数名(形参列表){
     //JavaScript语句
     [return 返回值]
}

调用无参函数
函数调用一般和表单元素的事件一起使用，调用格式:事件名＝ “函数名( )” ;

//JS
function study(){
        for(var i=0;i<5;i++){
            document.write("<h4>欢迎学习JavaScript</h4>");
        }
    }
//HTML
<input name="btn" type="button"
   value="显示5次欢迎学习JavaScript"  onclick="study( )" />

调用有参函数

//JS
function study(count){
        for(var i=0;i<count;i++){
            document.write("<h4>欢迎学习JavaScript</h4>");
        }
    }
//HTML
<input name="btn" type="button" value="请输入显示欢迎学习JavaScript的次数"
  onclick="study(prompt('请输入显示欢迎学习JavaScript的次数:',''))" />

五，变量的作用域

变量的作用域和java一样，声明变量后，只在本身大括号内有作用。

<body onload="second( )">
    var i=20;
    function first( ){
        var i=5;
        for(var j=0;j<i;j++){
            document.write("&nbsp;&nbsp;&nbsp;&nbsp;"+j);
        }
    }
    function second( ){
        var t=prompt("输入一个数","")
        if(t>i)
            document.write(t);
        else
            document.write(i);
        first( );
    }