JS基础-优快云博客

本篇博客深入浅出地介绍了JavaScript的基础知识，涵盖语言特性、变量使用、数据类型、运算符及提示框应用等内容，适合初学者快速掌握核心概念。

第一章 JavaScript基础

本章内容

js基本语法
运算符的使用

第一节

1.javascript的介绍

JavaScript一种直译式脚本语言，是一种动态类型、弱类型、基于原型的语言，内置支持类型。它的解释器被称为JavaScript引擎，为浏览器的一部分，广泛用于客户端的脚本语言，最早是在HTML（标准通用标记语言下的一个应用）网页上使用，用来给HTML网页增加动态功能。

2. javascript的作用

嵌入动态文本于HTML页面。
对浏览器事件做出响应。
读写HTML元素。
在数据被提交到服务器之前验证数据。
检测访客的浏览器信息。
控制cookies，包括创建和修改等。
基于Node.js技术进行服务器端编程。

3.使用javascript

使用内部js

<!DOCTYPE html>
<html>
 <head>
  <title> 这是我的页面 </title>
  <style type="text/css">
 
  </style>
  <!--定义内部的js脚本-->
  <script type="text/javascript">
    //写js代码,弹出消息框
    alert(123);
  </script>

 </head>

 <body>
  
 </body>
</html>

使用外部js

定义外部的js文件:test.js

/*定义js函数*/
function show()
{
    alert(456);
}

alert(789);

在js-2.html中引用test.js

<!DOCTYPE html>
<html>
 <head>
  <title> 这是我的页面 </title>
  <style type="text/css">
 
  </style>
  <!--引用外部js文件-->
  <script type="text/javascript" src="test.js"></script>
  <!--定义内部js块-->
  <script type="text/javascript">
    show();

  </script>
 </head>

 <body>
  
 </body>
</html>

第二节 javascript 变量使用

1.变量的概念

变量来源于数据，在程序语言中是指通过变量来存储数据，并使用变量名来引用，是一个抽象概念。变量中的数据可以被改变。

2.变量的定义和使用

变量的定义有三种方式:var , let, const

语法:

var 变量名 = 数据;

var: 定义变量的关键字

变量名: 变量名是变量的标识,引用变量中的数据。命名规则:字母，数字，下划线，$，注意数字不能打头。

变量命中有多个单词时，用小驼峰命名法(minAge)。

=：赋值符号，用于将右边的数据存入左边的变量中

数据:"张三",'李四', 100,2.234, true,false, null ,new Date(),undefined

字符串类型的数据(string): “张三”,'李四'

数值类型的数据(number): 100, 2.234

布尔值类型数据(boolean):true,false

对象类型的数据(object):null, new Date()

undefined类型的数据：undefined

  <script type="text/javascript">

     /*定义变量
     变量名为num1*/
     var num1 = 1234;

     //定义另外一个变量 num2
     var num2 = 567;

     alert(num1);
     alert(num2);
     alert(num1+num2);

  </script>

typeof函数:用于测试数据类型，返回数据类型的字符串
  <script type="text/javascript">
    //定义一个变量
    var bliang;
    alert(bliang+" "+typeof(bliang));
    bliang = "张三";
    alert(bliang+" "+typeof(bliang));
    bliang = 100;
    alert(bliang+" "+typeof(bliang));
    bliang = 2.234;
    alert(bliang+" "+typeof(bliang));
    bliang = null;
    alert(bliang+" "+typeof(bliang));
    bliang = true;
    alert(bliang+" "+typeof(bliang));
  </script>

使用let关键字定义变量

语法：

let 变量名 = 数据;

let 和 var的区别

都可以定义变量存储数据和使用数据
var是js5以下版本用的关键字，所有浏览器都支持。let是js6中加入的新关键字，只有高版本浏览器才支持
var可以重复定义变量，但是let不可以重复定义变量
var声明的变量都是全局变量，而let定义的变量如果在子级代码块中，则作用范围只存在于子级代码块中，在外部无法使用

使用const定义的变量称为常量，也就是一旦存储数据之后，就不能改变其中的内容。

语法:

const 变量名 = 数据;

  <script type="text/javascript">
    /*定义一个常量,const只在高版本浏览器可用*/
    const num = 10;
    alert(num);
    /*对于常量再次赋值，则会报错*/
    num = "张三";
    alert(num);
  </script>

3.数据类型转换

将字符串转为数值

  <script type="text/javascript">
    let num1 = "100.123";
    let num2 = "200.456";
    //alert(num1+num2);
    //字符串转为数值:
    //1.parseInt 将字符串转为整数
    //2.parseFloat 将字符串转为小数
    //3.Number 将字符转为数值
    num1 = Number(num1);
    num2 = Number(num2);
    alert(num1);
    alert(num2);
    //alert(num1+" "+typeof(num1));
    alert(num1+num2);

  </script>

  <script type="text/javascript">
    var s = "abc";
    //如果字符串无法转为数值，会返回NaN:Not a number
    s  = parseInt(s);
    alert(s);
  </script>

将数值转为字符串

  <script type="text/javascript">
    let num = 100;
    //将数值转为字符串:
    //1.用toString()方法
    //2.String()
    //3.数据+""
    //num = num.toString();
    num = String(num);
    alert(num+" "+typeof(num));
  </script>

4. javascript常用提示框

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>Document</title>
  <script type="text/javascript">
  window.alert("你好");
  var check=window.confirm("有女朋友吗");
  alert(check+" "+typeof(check));
  var height=window.prompt("你的身高是多少？",180);
  alert(height+" "+typeof(height));
  console.log("控制台");
  document.write("嘿嘿嘿");
  
  </script>

 </head>
 <body>
  
 </body>
</html>

5.javascript的注释

//单行注释
/**/多行注释

第三节运算符

1.算术运算符

+(加),-(减),*(乘),/(除),%(求余),++(自增),--(自减)

算数运算:针对数值进行四则运算，结果是是数值。

<!DOCTYPE html>
<html>
 <head>
  <title> 这是我的页面 </title>
  <style type="text/css">
 
  </style>

  <script type="text/javascript">
    var num1 = 10;
    var num2 = 3;
    /*document.write((num1+num2)+"<br/>");
    document.write((num1-num2)+"<br/>");
    document.write((num1*num2)+"<br/>");
    document.write((num1/num2)+"<br/>");
    document.write((num1%num2)+"<br/>");*/

    var i = 1;
    //i++; //自增 等价于 i = i+1;
    //++i;//自增 等价于 i = i+1;
    //alert(i);
    //在表达式中，有多种运算时
    //++在后，先使用变量赋值,再自增
    //++在前, 先自增再赋值
    //var x = i++;
    //var x = ++i;
    //--在后，先使用变量赋值,再自减
    //--在前, 先自减再赋值
    var x = --i;
    alert(x+" "+i);

  </script>
 </head>

 <body>
  
 </body>
</html>

注意:加法的二义性

  <script type="text/javascript">
    var n = "100";
    var x = '200';
    //加号用于字符串就是做拼接
    alert(n+x);

    var a = 100;
    var b = 200;
    //加号用于数值就是做加法运算
    alert(a+b);

  </script>

2.关系运算符(比较运算符)

关系运算:用于比较两个数值的大小关系，运算结果是布尔值(true/false)

>,>=,<,<=,==,===,!=

<script type="text/javascript">
    var num1 = 10;
    var num2 = 3;
    document.write(num1>num2);
    document.write("<br/>");
    document.write(num1>=num2);
    document.write("<br/>");
    document.write(num1<num2);
    document.write("<br/>");
    document.write(num1<=num2);
    document.write("<br/>");
    document.write(num1==num2);
    document.write("<br/>");
    document.write(num1!=num2);
    document.write("<br/>");
  </script>

==和===的区别

    var x = 100;
    var y = "100";
    //两个等，只判断数值是否相等
    //alert(x==y);
    //三等除了判断数值是否相等，还要判断数据的类型是否相同
    alert(x===y);

3.逻辑运算符

&&,||,!

4.赋值运算符

=,+=,-=,*=,/=,%=

5.三目运算符

? :