Web前端-03-JavaScript(1)

fly_snail_1024

已于 2022-12-30 15:28:06 修改

阅读量87

点赞数

分类专栏： Web前端文章标签： javascript 前端 java

于 2022-12-26 16:59:15 首次发布

本文链接：https://blog.csdn.net/u010953852/article/details/128440311

版权

Web前端专栏收录该内容

3 篇文章 0 订阅

订阅专栏

1.JavaScript概述？

2.在HTML中怎么嵌入JavaScript代码？

5.4.3关于String类型的常用属性和函数

5.5.5java中的方法有重载机制，JS中的函数能重载吗？

5.6全局变量和局部变量

1.JavaScript概述？

[1]JavaScript是运行在浏览器上的脚本语言。简称JS。
JavaScript是网景公司（NetScape）的布兰登艾奇（JavaScript之父）开发的，最初叫做LiveScript。LiveScript的出现让浏览器更加的生动了，不再是单纯的静态页面了。页面更具有交互性。
[2]在历史的某个阶段，SUN公司和网景公司他们之间有合作关系，SUN公司把LiveScript的名字修改为JavaScript。JavaScript这个名字中虽然带有“Java”但是和Java没有任何关系，只是语法上优点类似。他们运行的位置不同，Java运行在JVM当中，JavaScript运行在浏览器的内存当中。
[3]JavaScript程序不需要我们程序员手动编译，编写完源代码之后，浏览器直接打开解释执行。
JavaScript的目标程序以普通文本形式保存，这种语言都叫做“脚本语言”。
Java的目标程序以.class形式存在，不能使用文本编辑器打开，不是脚本语言。
[4]HTML，CSS，JavaSript三者关系
CSS和JavaScript为HTML服务。
CSS好比是HTML的化妆品一样。修饰HTML页面，设置HTML页面中的某些元素的样式，让HTML页面更好看。
JavaScript让网页能够动起来，更加生动，页面更具有交互性。

2.在HTML中怎么嵌入JavaScript代码？

第一种方式：使用 script 标签来书写

<script type="text/javascript">
     // alert 是 JavaScript 语言提供的一个警告框函数。
    // 它可以接收任意类型的参数，这个参数就是警告框的提示信息
    //alert函数会阻塞整个HTML页面的加载
    //点击弹窗的确定键后，该行语句才执行结束，才会接着执行下一条语句
    alert("hello javaScript!");
</script>

注意：(1)可以出现多次
(2)位置可以随便，在 head 标签中，或者在 body 标签中，
(3)执行的时候遵守自上而下的顺序逐行执行。

第二种方式：使用 script 标签引入单独的 JavaScript 代码文件(推荐使用)
src 属性专门用来引入 js 文件路径（可以是相对路径，也可以是绝对路径）

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

js文件的内容如下：

alert("js文件1");

注意：(1)我们在页面中引入js文件的时候<script>标签一定要是<script></script>这种形式,如果写成了<script/>的这种形式可能会造成js文件引入不成功
(2)引入外部独立的js文件时，js文件中的代码会遵循自上而下的顺序依次逐行执行
(3)script 标签要么定义 js 代码，要么引入 js 文件，不能同时使用两个功能
<script type="text/javascript" src="my1.js">
alert("js代码块1");
</script>

第三种方式：<标签 ... 事件句柄="js代码" />

3.JS的标识符和关键字

JS的标识符命名规则和规范参照java
   命名规则(语法上的规定)：
       1.必须由数字、字母、下划线、美元符号组成
       2.不能以数字开头
       3.严格区分大小写
       4.不能使用关键字做标识符
   命名规范：
       1.类名和接口名首字母大写，后面每个字母首字母大写
       2.方法名和变量的名字首字母小写，后面每个单词首字母大写
       3.常量名要求全部大写，并且单词与单词之间以下划线_相隔
       4.驼峰命名方式
       5.见名知意

4.关于JS中的变量

[1]回顾java中怎么定义/声明变量？
数据类型变量名; int i; double d; boolean flag;
[2]java中的变量怎么赋值？
使用“=”运算符进行赋值运算（"="运算符右边先执行，将右边执行的结果赋值给左边的变量）
变量名 = 值; i = 10; d = 3.14; flag = false;
[3]java语言是一种强类型语言，强类型怎么理解？
java语言存在编译阶段，假设有代码：
int i;
i = "abc"; //编译报错，因为i变量的数据类型是int类型，不能将字符串赋给i。
所以java中要求变量声明的是什么类型，以后用的时候永远都是这种类型，不可变。这称为强类型语言。
[4]javascrip变量定义？
变量定义: var 变量名;
变量赋值：变量名 = 值;
javascript是一种弱类型语言，没有编译阶段，一个变量可以随意赋值，赋什么类型的值都行。

var i = 100;
i = false;
i = "abc";
i = new Object();
i = 3.14;

注意：在JS当中，当一个变量没有手动赋值的时候，系统默认赋值undefined

var i;
window.alert("i =" + i);

注意：undefined 在JS中是一个具体存在值

alert(undefined);
var k = undefined;
alert("k = " + k);

问题：一个变量没有声明/定义,直接用?

// alert(age); 语法错误：age is not defined (变量age不存在,不能这样写)

5.js的数据类型

[1]虽然JS中的变量在声明的时候不需要指定数据类型，但是在赋值，每一个数据还是有类型的，所以这里也需要学习一下JS包括哪些数据类型？
简单类型：number、string、boolean、function函数、undefined
引用类型：Object
ES规范(ECMAScript规范)，在ES6之后，又基于以上的6种类型之外添加了一种新的类型：Symbol

[2]JS中有一个运算符叫做typeof，这个运算符可以在程序的运行阶段动态的获取变量的数据类型。

typeof "Bill"                 // 返回 "string"
typeof 3.14                   // 返回 "number"
typeof false                  // 返回 "boolean"
typeof [1,2,3,4]              // 返回 "object"
typeof {name:'Bill', age:62}  // 返回 "object"
typeof new Date()             // 返回 "object"

 // sayHello是一个函数.
function sayHello(){      
}
alert(typeof sayHello); // "function"

typeof myCar                  // 返回 "undefined" *

JavaScript 里特殊的值：

typeof NaN                    // 返回 "number".全称是：Not a Number。非数字。非数值。
typeof null                   // 返回 "object"
typeof undefined                  // 返回 "undefined"

5.1undefined类型

var i;
console.log(i+"===="+typeof(i));
var k1=undefined;
var k2=undefined;
console.log(k1 == k2); // true
var y = "undefined"; // "undefined" 是字符串
console.log(y == k1); // false

分析：[1]undefined是一个类型，当一个变量没有手动赋值,系统默认赋值undefined
[2]undefined特殊的类型，特殊在类型和类型的值都是undefined

5.2number类型

5.2.1number类型

java中使用byte short int long float double 6个类型来表示数字
js中只使用了一个Number（整数、小数、正数、负数、不是数字NaN、无穷大Infinity)

console.log(typeof 100); // 返回 "number"
console.log(typeof 3.14); // 返回 "number"
console.log(typeof -100); // 返回 "number"
console.log(typeof NaN); // 返回 "number"
console.log(typeof Infinity); // 返回 "number"

5.2.2关于NaN

(表示Not a Number，不是一个数字，但属于Number类型)

var a = 100;
var b = "abc";
// 除号显然最后结果应该是一个数字,但是运算的过程中导致最后不是一个数字,那么最后的结果是NaN
alert(a / b);     
alert(a+b)//"100abc"(+号两边如果有字符串，会做字符串拼接，而不是做加法运算)

5.2.3Infinity

// (当除数为0的时候，结果为无穷大)
alert(10 / 0);
//思考:在JS中10 / 3 = ?
alert(10 / 3); // 3.3333333333333335

5.2.4Number类型相关内置函数

isNaN() : 结果是true表示不是一个数字，结果是false表示是一个数字。例如：isNaN("abc")
parseInt()函数， 例： alert(parseInt("3.9999")); // 3
parseFloat()函数，例：alert(parseFloat("3.14") + 1); // 4.14

5.3boolean类型

5.3.1java的布尔类型

java的布尔类型永远都只有两个值：true和false
在JavaScript 中布尔类型除了true和false这两个值之外，其它的指可以用

    var i=0;
    if (i){
      alert("零为真");
    }else {
      alert("零为假");
    }
    //同理：0 、null、 undefined、""(空串) 都是 false

总结：所有的变量，都可以做为一个 boolean 类型的变量去使用。

5.3.2逻辑运算

与运算： &&
或运算： ||
取反运算： !

    var a = "abc";
    var b = true;
    var d = false;
    var c = null；

    /*  && 且运算。
    有两种情况：
    第一种：当表达式全为真的时候。返回最后一个表达式的值。
    第二种：当表达式中，有一个为假的时候。返回第一个为假的表达式的*/
    alert(a&&b);//true
    alert(b&&a);//abc
    alert(a&&d);//false
    alert(a&&c);//null
    alert(a&&d&&c);//false
    alert(a&&c&&d);//null

    /*  || 或运算
    第一种情况：当表达式全为假时，返回最后一个表达式的值
    第二种情况：只要有一个表达式为真。就会把回第一个为真的表达式的值*/
    alert(d||c);//null
    alert(c||d);//false
    alert(a||c);//abc
    alert(b||c);//true

/* && 与运算和 ||或运算有短路。
短路就是说，当这个&&或||运算有结果了之后。后面的表达式不再执行*/

5.4String类型

5.4.1字符串表示

字符串可以使用单引号，也可以使用双引号。

var s1 = 'abcdef';
var s2 = "test";

5.4.2创建字符串对象

两种方式：
第一种：var s = "abc";
第二种：var s2 = new String("abc");需要注意的是：String是一个内置的类，可以直接用，String的父类是Object。

// 小string(属于原始类型String)
var x = "king";
alert(typeof x); // "string"
           
// 大String(属于Object类型)
var y = new String("abc");
alert(typeof y); // "object"

5.4.3关于String类型的常用属性和函数

无论小string还是大String，他们的属性和函数都是通用的。
常用属性：length 获取字符串长度,例：

alert(x.length); // 4

indexOf 获取指定字符串在当前字符串中第一次出现处的索引

alert("http://www".indexOf("http")); // 0
// 判断一个字符串中是否包含某个子字符串？  
"http://www.baidu.com".indexOf("https") >= 0 ? "包含" : "不包含"

lastIndexOf：获取指定字符串在当前字符串中最后一次出现处的索引
replace：替换

// replace函数 (注意：只替换了第一个)
// 继续调用replace方法,就会替换第“二”个.
// 想全部替换需要使用正则表达式(后面再讲).
"name=value%name=value%name=value".replace("%","&")

substr：截取子字符串

 // substring(startIndex, endIndex) 注意:不包含endIndex
alert("abcdefxyz".substring(2,4)); //cd

substring：截取子字符串

// substr(startIndex, length) 下标从0开始
alert("abcdefxyz".substr(2,4)); //cdef

toLowerCase转换小写
toUpperCase转换大写
split拆分字符串

5.5function函数类型

5.5.1函数概述

(1)JS中的函数：等同于java语言中的方法，函数一般都是可以完成某个特定功能代码片段。该片段可以被重复利用,提供代码的复用性
(2)回顾java

public static boolean login(String username,String password){
    ...
    return true;
}

5.5.2js函数定义第一种方式

function 函数名(形参列表){
函数体
}
注：如果想定义带有返回值的函数，只需要在函数体内直接使用 return语句返回值即可！

<script type="text/javascript">
    //定义一个无参函数
    function fun(){
      alert("无参函数fun()被调用了");
    }

    fun();

    //定义一个有参函数
    function fun2(a,b){
      alert("有参函数fun2()被调用了 a="+a+" b="+b);
    }

    fun2(12,"abc");


    //定义带有返回值的函数
    function sum(num1,num2){
      var res=num1+num2;
      return res;
    }
    alert(sum(100,50));
</script>

5.5.3js函数定义第二种方式

var 函数名 = function(形参列表){
函数体
}

<script type="text/javascript">
    var fun = function (){
      alert("无参函数");
    }
    fun();

    var fun2 = function (a,b){
      alert("有参函数a="+a+",b="+b);
    }
    fun2(1,2);

    var fun3 = function (num1,num2){
      return num1+num2;
    }
    alert(fun3(100,200));
</script>

5.5.4函数调用

function sum(a, b){
    return a + b;
}
sum(3,5);//8
sum();//NaN
sum("jack");//jackundefined
sum(3,4,5);//结果=7(第三个3没了)

结论：JS中的函数在调用的时候，参数的类型和个数没有限制，JS就是这么随意（弱类型）
引出有隐形参数arguments--》可变参数
隐形参数理解：就是在 function 函数中不需要定义形参，但却可以直接用来获取所有参数的变量。隐形参数特别像 java 基础的可变长参数一样。

<script type="text/javascript">
    function fun(a){
      alert(arguments.length);//3

      alert(arguments[0]);//1
      alert(arguments[1]);//ab
      alert(arguments[2]);//true

      alert("a="+a);
      alert("无参函数fun()");

    }

    fun(1,"ab",true);//形参有几个都没关系，实参想传几个都行

    //需求：编写一个函数，计算所有参数相加的和
    function sum(num1,num2){
      var res=0;
      for (var i = 0; i < arguments.length; i++) {
        if (typeof(arguments[i])=="number"){
          res+=arguments[i];
        }
      }
      return res;
    }
    alert(sum(1,2,3,4,5,6,7,8,9));//实参的个数与形参的个数无关
</script>

5.5.5java中的方法有重载机制，JS中的函数能重载吗？

java中的重载方法名或者函数名一样，形参不同（个数、类型、顺序）,而JS中的函数没有重载这个概念。
在JS当中，函数的名字不能重名，当函数重名的时候，后声明的函数会将之前声明的同名函数覆盖。

<script type="text/javascript">
    function fun() {
      alert("无参函数 fun()");
    }

    function fun(a,b) {
      alert("有参函数 fun(a,b)");
    }
    fun();//无法调用无参函数，直接调用了有参函数
</script>

5.6全局变量和局部变量

全局变量：在函数体之外声明的变量属于全局变量，
全局变量的生命周期是：浏览器打开时声明，浏览器关闭时销毁，尽量少用。因为全局变量会一直在浏览器的内存当中，耗费内存空间。

局部变量：在函数体当中声明的变量，包括一个函数的形参都属于局部变量。
局部变量的生命周期是：函数开始执行时局部变量的内存空间开辟，函数执行结束之后，局部变量的内存空间释放。

//全局变量
var i=100;
var username = "jack";
function accessI(){
    // 局部变量
    var username = "lisi";
    var age=18;
    // 访问的是全局变量
    alert("i = " + i);
    // 就近原则:访问局部变量
    alert("username = " + username);
}
accessI();
// 报错(语法不对，无法调用局部变量)
// alert("age = " + age);

注意：当一个变量声明的时候没有使用var关键字,那么不管这个变量是在哪里声明的,都是全局变量. // 以下语法是很奇怪的.

function myfun(){
    myname = "zs";
}
myfun();// 访问函数
alert("myname = " + myname); // myname = zs

fly_snail_1024

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
Web前端-03-JavaScript(1)

JavaScript是网景公司（NetScape）的布兰登艾奇（JavaScript之父）开发的，最初叫做LiveScript。LiveScript的出现让浏览器更加的生动了，不再是单纯的静态页面了。页面更具有交互性。
复制链接

扫一扫

专栏目录