Java教程

javaScript 基础语法详解 I

本文主要是介绍javaScript 基础语法详解 I,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!

01.javaScript基础语法

Js的发展历史

NetScape网景

Js的概念

Js是基于面向对象的脚本语言,依赖于html才能运行。

Js的书写位置

Js在html中以标签(<script></script>)的形式出现,可以放在网页任何一个地方,建议放在body结束之后

Js的注释

// 单行注释

/*

多行注释

*/

Js的输出

  1. 以弹窗形式输出

alert()

  1. 以文本形式输出

document.write()

  1. 控制台输出

console.log()

  1. 带提示内容的弹窗

confirm()

  1. 可输入的弹窗

prompt()

变量

变量的概念

变量存储数据的容器,存在内存中

变量名的规则:由字母、数字、下划线组成,但是不能用数字开头($也可以开头)

定义变量

显示定义

var 变量名;

var 变量名 = 值;

var 变量1,变量2;

var 变量1=值1,变量2=值2;

隐式定义

变量名=值;

变量的数据类型

数字类型:number

包含整数、小数、正数、负数

强制转换为数字类型:Number()

强制转换成整数:parseInt()

强制转换成小数:parseFloat()

字符串类型:string

任意多个任意字符组合在一起使用引号引起来就是字符串,空格是字符,引号也是字符

强转转成字符串类型:String()

功能比较多的工具:数据.toString()

布尔类型:boolean

表示事物的两面性,只有两个值:true和false

True转成数字是1,false转成数字是0

未定义型:undefined

定义过变量,但没有赋值,就是未定义型

对象类型:object

运算

数学运算

符号: + - * / %(求余数/取模)

赋值运算

= 赋值符 在编程中,”=”不代表两边相等,意义在于将右边的值赋值给左边的变量

+= -= *= /= %=

var a = 1;

a += 2; // a = a + 2

关系运算/比较运算

符号: > < >= <= ==(等于) ===(全等于)

!=(不等于) !==(不全等于)

比较运算的结果是布尔值, == ===的区别

逻辑运算

&& 并且

|| 或者

! 非

运算符

意义

比较运算1

比较运算2

整体结果

&&

并且

||

或者

非/取反

自增自减运算

自增:++

自减:--

var a = 3;

var b = a-- - --a + --a;

// 3 - 1 + 0

console.log(b); // 2

自增自减自己增减的时候,符号放在前面和后面是没有区别的,但是当碰到赋值、运算、输出的时候,符号在前面就先进行自增自减运算,符号在后面就后进行自增自减运算。

02.javaScript分支语句结构

分支结构

做判断

单分支

If(条件){ // 比较运算,逻辑运算,布尔值,能转换成布尔值的

条件结果是true的时候执行的代码段/块

}

双分支

If(条件){

条件结果是true执行的代码段

}else{

条件结果是false的时候执行的代码段

}

多分支

If(条件){

}else if(条件){

}else if(条件){

}

...

}else{

上面的条件都为false

}

Switch多路判断

实现的效果和if多分支是一样的

Switch(变量){

Case 值:

执行的代码段

Break;

Case 值:

执行的代码段

Break;

Default:

执行的代码段

}

特点:

  1. 只能判断是否相等,并且使用 === 来判断,不能判断范围/区间
  2. Switch分支大于3个的时候效率比if高
  3. 省略break的时候,穿透写法

03.javaScript循环结构

循环结构

执行重复代码

While循环

While(条件){

// 条件成立的时候执行代码段

}

例:

var i=1;

while(i<=10){

document.write(“我爱你”);

i++;

}

最开始是不知道循环多少次

For循环

For(初始值;条件;变换){

条件成立的时候执行的代码段

}

例:

For(var i=0;i<10;i++){

Document.write(“我爱你”);

}

For循环在使用的时候已经知道要循环多少次了

While循环能实现的效果,for循环也能实现,这两个可以换着用

Do while循环

do{

// 执行的代码段

}while(条件);

不管条件是否成立,先执行一次,然后再判断条件,就和while的执行流程一样了

循环中的关键字

Break continue

Break 结束整个循环的 - 电梯坏了,到4层就停了,后面的不执行了

Continue 跳过当前这一次循环,继续执行下一次的循环 -- 没有4层,其他的都能执行

循环的嵌套

先执行小循环 - 一个人跑了5圈

外面的循环 - 5个人在跑

        9*9乘法表

for(var i=1;i<=9;i++){

   for(var j=1;j<=9;j++){

        document.write(j+"*"+i+"="+i*j+"&nbsp;");

   }

    document.write("<br>");

}

        例:

for(var i=1;i<=9;i++){

    for(var j=1;j<=9;j++){

        document.write(j+"*"+i+"="+i*j+"&nbsp;");

        if(i==j){

            break; // 只能结束掉小循环,不能结束大循环

        }
    
    }

    document.write("<br>");

}

04.javaScript函数

函数

函数就是一个工具。

语法:

Function 函数名(){

代码段

}

函数写好以后,不会自动执行,需要调用才能执行

调用:

函数名()

带参数:

定义的时候

Function 函数名(参数列表){} // 形参

调用的时候,需要给形参赋值 - 实参

实参要和形参对应,数量和类型保持一致

函数返回值关键字

Return 关键字

有两个作用:

  1. 将函数的结果返回
  2. 结束函数的运行

变量的提升

Js引擎在执行代码之前,会预解析,预解析就是在代码中找var和function,找到后将变量的定义和函数的定义提升到代码的最前面

在script中可以提升,在函数内部也可以提升,提升到函数内部的最前面

函数名和变量名同名,提升的时候函数名会覆盖变量名

匿名函数不能提升

js代码的预解析,只能在当前这个script标签中

作用域

能起到作用的区域就叫做作用域。定义在不同区域的变量,他的作用域是不一样的。

不在任何一个函数中定义的变量叫全局变量。他的作用域是定义之后的所有文档区域。

变量在输出时,首先考虑当前作用域,当前作用域中就会输出当前作用域中的变量,如果当前作用域中没有,才会考虑外面的全局。

作用域链

函数是写在全局中,也就是说,局部作用域是被嵌套全局作用域中的。函数中也是可以定义函数的,也就是局部作用域中可以再有局部作用域,这样就形成了作用域的嵌套,我们将这个链式结构叫做作用域链。

作用域链有助于我们分析变量的使用以及赋值规则,规则如下:

1. 当使用变量(将变量当做值赋值,输出变量,使用变量计算)的时候,先在当前作用域中找是否定义过变量,如果定义过,就使用;如果没有定义过,就去上一级作用域中找是否定义过,定义过就使用,没有定义就继续去上级作用域中找,......直到找到全局,全局中如果定义过,使用的就是全局中的变量;**如果全局中没有定义过,报错:XXX is not defined**
2. 当给一个变量赋值的时候,先在当前作用域中找是否定义过这个变量,如果定义过,就给这个变量赋值;如果没有定义过,就去上级作用域中找是否定义过,找到就赋值,没找到就继续去上级作用域中找,......直到找到全局,全局中定义过,就给这个全局变量赋值,如果全局没有定义过,就在全局定义这个变量并赋值

练习:

function fn() {
    console.log(num)
    return
    var num = 100
}
fn()

var num = 10;
fn1();
function fn1() {
    console.log(num);
    var num = 20;
}

var a = 18;
fn2();
function fn2() {
    var b = 9;
    console.log(a);
    console.log(b);
}

fn3();
console.log(c);
console.log(b);
console.log(a);
function fn3() {
    var a = b = c = 9;
    console.log(a);
    console.log(b);
    console.log(c);
}

var a = 4;
console.log(a);
a = 6;
console.log(a);
function a() {
    console.log('哈');
}
a();
a = 10;
console.log(a);

function fn(a) {
    console.log('我是 fn 函数')
    a()
    function a() {
        console.log('我是函数 a')
    }
}
fn(10)

结论:

1. 全局中有预解析,局部中也有预解析,局部的预解析,只能在局部中进行,不会将变量提升到全局
2. 使用连等的方式定义变量并赋值,只有第一个有定义过程,其余的都是直接赋值
3. 函数定义好以后,函数名就跟变量名一样,可以使用函数名修改这个空间中的值
4. 局部的预解析会在形参赋值之后,预解析中的函数会覆盖掉形参赋的值

递归函数

        递归函数就是在函数中调用自己。

// 求10的阶和,即:10+9+8+...+1
function facSum(num){
    if(num == 1){
        return 1;
    }
    return num + facSum(num-1);
}
var res = facSum(10);
console.log(res); // 55

05.javaScript事件 - 鼠标、键盘、浏览器

js中的事件指的是用户在网页中的行为,例如:鼠标点击、鼠标移动、。。。。。。

事件通常由3个要素组成:

1. 事件源:触发事件的标签元素,例如,点击的是div、还是button 。。。
2. 事件类型:行为的类型,是单击还是双击,还是右击。。。
3. 事件处理程序:事件触发后要做的事情 - 函数

例:

<button id="btn">按钮</button>
<script type="text/javascript">
    btn.onclick = function(){
        alert("点击了按钮!");
    }
<script>

事件类型

| 事件        | 备注                             |
| ----------- | -------------------------------- |
| onclick     | 当鼠标左键单击                   |
| ondblclick  | 当鼠标左键双击                   |
| onm ouseover | 当光标在指定的内容上面           |
| onm ouseout  | 当光标离开指定的内容             |
| onkeydown   | 当键盘按下的那一刻               |
| onkeyup     | 当键盘抬起的那一刻               |
| onfocus     | 当输入框得到焦点                 |
| onblur      | 当输入框失去焦点                 |
| onchange    | 当指定的标签里面内容有变化的时候 |
| onsubmit    | 提交事件                         |
| onl oad      | 当整个网页加载完成后             |

事件的其他写法:

// 给事件赋值函数名称
btn.onclick = fn
function fn(){
    console.log('点击了按钮')
}
// 给事件赋值变量名 - 值是函数
var fn = function(){
    console.log('点击了按钮')
}

注意:如果给事件赋值函数名,千万不能加小括号调用

事件还可以写在行内,一般不用:

<!-- 直接在行内写js代码 -->
<button onclick="console.log('点击了按钮')">按钮</button>
<!-- 可以在行内调用函数 -->
<button onclick="fn()">按钮</button>
<script>
    function fn(){
        console.log('点击了按钮')
    }
</script>

注意:在行内的事件中调用函数一定要加小括号调用才行

js可以像css一样有3种写法:

- 行内写法:事件
- 内联写法:平常写的代码
- 外联写法:项目中要将js代码放在一个文件中,在html中引入js文件

 <script src="js文件路径"></script>
这篇关于javaScript 基础语法详解 I的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!