JavaScript教程之web前端篇：JavaScript基础篇（易懂小

当前位置:

首页 > 网站开发 > JavaScript >

JavaScript教程之web前端篇：JavaScript基础篇（易懂小

详细内容：

0.JavaScript的引入

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

</head>
<body>
<!--行内js-->
    <p id="" class="" style="" onclick="console.log(2);">mjj</p>
<!--内嵌-->
<script type="text/javascript">

    //js代码


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

</body>
</html>

1.第一个JavaScript

1.alert语句

用途：弹出警告框。

    <script>
        alert('你好')
    </script>

2.注释：

JavaScript对换行，缩进，空格不敏感。
单行注释(ctrl +/)
```
//我是单行注释
```
多行注释（ctrl+shift+/）
```
/*
多行注释1
多行注释2
*/
```

3.console.log('')

控制台输出。

    <script>
        console.log('hello world!');
    </script>

4.prompt()语句

弹出能够让用户输入的对话框

    <script>
        prompt('今天天气如何？')
    </script>

prompt()语句中，用户不管输入什么内容，都是字符串。

alert和prompt的区别

alert('今天天气如何？');//直接使用，不需要变量
var a = prompt("请输入一个数字");//必须用一个变量，来接收用户输入值

2.变量

1.变量的定义

var是英语“variant”变量的缩写。后面要加一个空格，空格后面的东西就是“变量名”。
- 定义变量：var就是一个关键字，用来定义变量。所谓关键字，就是有特殊功能的小词语。关键字后面一定要有空格隔开。
- 变量的赋值：等号表示赋值，将等号右边的值，赋给左边的变量。
- 变量名：我们可以给变量任意的取名字。

2.变量的写法：

var a = 100;
console.log(a);//输出100

3.变量命名规范：

变量名有命名规范：只能由英语字母、数字、下划线、美元符号$构成，且不能以数字开头，并且不能是JavaScript保留字，如下：

abstract、boolean、byte、char、class、const、debugger、double、enum、export、extends、final、float、goto
implements、import、int、interface、long、native、package、private、protected、public、short、static、super、synchronized、throws、transient、volatile

3.变量的类型

1.数值型：number

<script>
    var a= 100;
console.log(typeof a);
</script>
//number

通过typeof()表示“获取变量的类型”，语法：typeof 变量

2.字符串型：string

    <script>
        var a = "abcde";
        var c= '1234';
        var d = '哈哈';
        var e = '';   //空字符串
        
        console.log(typeof a);//string
        console.log(typeof c);//string
        console.log(typeof d);//string
        console.log(typeof e);//string

    </script>

3.Boolean布尔值

为JS中的Boolean的值也只有2中：true和false。他们通常被用于在适当的代码之后，测试条件是否成立，比如 3 > 4。这是个表达式，我们都知道3是不会大于4的，所以返回了false。
```
3>4;//false
4>=3;//true
```

4.字符串拼接

通过+拼接：

<script>
console.log('我'+"爱"+"吃"+"饭")
</script>
//我爱吃饭

通过$和tab上面键拼接

    <script>
        var name = 'jk' , age = 20;
        var str = `${name}今年是${age}岁数了`;
        console.log(str);
    </script>
//jk今年是20岁数了

5.数学运算符

Javascript有一套可用的全功能的数学功能，接下来我们就重点来学习Javascript中的数学运算吧。
算数运算符

运算符	名称	作用	示例
`+`	加法	两个数相加。	`6 + 9`
`-`	减法	从左边减去右边的数。	`20 - 15`
`*`	乘法	两个数相乘。	`3 * 7`
`/`	除法	用右边的数除左边的数	`10 / 5`
`%`	求余(有时候也叫取模)	在你将左边的数分成同右边数字相同的若干整数部分后，返回剩下的余数	`8 % 3`(返回 2，将8分成3份，余下2 。)

5 + 4 * 3;
num % 8 *num;

运算符优先级
Javascript中的运算符优先级与数学运算符优先级相同—乘法和除法总是先完成，然后再算加法和减法。
递增和递减运算
- 增量（++）或递减（--）
```
var x = 3;
x++;//相当于x = x + 1
```
- 常见如下：

运算符	名称	作用	示例	等价于
`+=`	递增赋值	右边的数值加上左边的变量，然后再返回新的变量。	`x = 3;x += 4;`	`x = 3;x = x + 4;`
`-=`	递减赋值	左边的变量减去右边的数值，然后再返回新的变量。	`x = 6;x -= 3;`	`x = 6;x = x - 3;`
`*=`	乘法赋值	左边的变量乘以右边的数值，然后再返回新的变量。	`x = 2;x *= 3;`	`x = 2;x = x * 3;`
`/=`	除法赋值	左边的变量除以右边的数值，然后再返回新的变量。	`x = 10;x /= 5;`	`x = 10;x = x / 5;`

//第一题：
<script>
        var a = 4;
    var c = a ++;
    console.log(c);//4
    console.log(a);//5
</script>
//先让a的值赋值给c,再对a++

//第二题：
<script>
    var a = 4;
    var c = ++a;
    console.log(c);//5
    console.log(a);//5
</script>
//想让a加法运算，再将a赋值给c

//第三题：
<script>
    var a = 2;
    var b = '2';
    console.log(a == b);//true
    console.log(a === b); //false
</script>
//== 比较的是值 console自动将a转换字符串进行比较，===比较是值和数据类型。

6.数字和字符串之间的转换

数字转字符串

<script>
    var myNum = "" +234;
    console.log(typeof myNum);
</script>
//string

var myNum = 123;
var myStr = myNum.toString();

var num  = 1233.006;
// 强制类型转换
console.log(String(num));
console.log(num.toString());
// 隐式转换
console.log(''.concat(num));
// toFixed()方法会按照指定的小数位返回数值的字符串 四舍五入
console.log(num.toFixed(2));

字符串转数字

<script>
    var myStr = '123';
    var myNum = Number(myStr);
    console.log(typeof myNum);
</script>
//number

var str = '123.0000111';
console.log(parseInt(str));//123
console.log(typeof parseInt(str));//number
console.log(parseFloat(str));//123.0000111
console.log(typeof parseFloat(str));//number
console.log(Number(str));//123.0000111

4.数组

1.数组的创建

var shop = ['apple','milk','banana','orange']

2.访问和修改数组

shop[0];//访问数组
shop[0] = 'pen'；

3.获取数组长度

shop.length;

5.条件语句

1.if...else语句

语法：
```
if (判断条件) {
  //结果1
}else{
    //结果2
}
```
- 关键字 if，并且后面跟随括号。
- 测试的条件，放到括号里。这个条件会利用比较运算符进行比较，并且返回true或者false。
- 一组花括号，在里面我们有一些代码——可以是任何我们喜欢的代码，并且只会在条件语句返回true的时候运行
- 关键字else
- 另一组花括号，在里面我们有一些代码——可以是任何我们喜欢的代码，并且当条件语句返回值不是true的话，它才会运行。

2.else...if语句

上述例子提供我们两种选择或结果，但我们如果想要多个选择和结果可以用else if.

var weather = 'sunny';
if(weather == 'sunny'){
    //天气非常棒，可以出去玩耍了
}else if(weather == 'rainy'){
    //天气下雨了，只能在家里呆着
}else if(weather == 'snowing'){
    //天气下雪了，可以出去滑雪了
}

3.if ...else的嵌套

var weather = 'sunny';
if(weather == 'sunny'){
    if(temperature > 30){
        //还是在家里吹空调吧
    }else if(temperature<=30){
        //天气非常棒，可以出去玩耍了
    }
}

4.逻辑运算符：&&，||，！

&& — 逻辑与; 使得并列两个或者更多的表达式成为可能，只有当这些表达式每一个都返回true时，整个表达式才会返回true.
|| — 逻辑或; 当两个或者更多表达式当中的任何一个返回 true 则整个表达式将会返回 true.
! — 逻辑非; 对一个布尔值取反, 非true返回false,非false返回true。

var mathScore = 88;
var enlishScore = 90;
if(mathScore > 70 || enlishScore > 95){
    console.log('才可以玩游戏');
}else{
    console.log('在家里写作业');
}

5.switch语句

var weather = 'sunny';
switch(weather){
    case 'sunny':
        //天气非常棒，可以出去玩耍了
        break;
    case 'rainy':
       //天气下雨了，只能在家里呆着
        break;
    case 'snowing':
        //天气下雪了，可以出去滑雪了
        break;
    default:
        //哪里也不出去
}

6.三元运算符

三元运算符它解决了像if..else块较少的代码。如果你只有两个通过true/false条件选择。

(codition) ? run this code : run this code instead;

<script>
    var a = '';
    (1 > 2)? a='真的' : a='假的';
    console.log(a)

</script>
//假的

7.循环

1.for循环

Javascript的循环有两种，一种是for循环，通过初始化条件、结束条件和递增条件来循环执行语句块，语法如下：

for (初始化条件;结束条件;递增条件){
    run this code
}

示例：

    <script>
        var total = 0;
        var i;
        for (i = 1;i <= 1000; i++){
            total = total + i;
        }
        console.log(total);//500500
    </script>

2.使用Break退出循环

for循环的3个条件都是可以省略的，如果没有退出循环的判断条件，就必须使用break语句退出循环，否则就是死循环：

    <script>
        var x = 0;
        for (;;){
            if (x>100) {
                break;
            }
            x ++;
            console.log(x)
        }
    </script>
//1.....101

3.continue语句

continue语句中断循环中的迭代,如果出现了指定的条件,然后继续循环中的下一个迭代。

    <script>
        var x;
        for (var i = 0; i<=10; i++){
            if (i==3) continue;
            x ='这个数字是' + i;
            console.log(x)
        }
    </script>
//这个数字是0......这个数字是10

4.while循环

Javascript中的另一种循环则是while循环，使用它最佳。

语法：

while (判断循环结束条件){
  //code to run
  递增条件
}

示例：

<script>
    var a = 1;
    while (a <=100){
        console.log(a);
        a += 1;
    }
</script>
//1 2 3 .....100

5.do...while

最后一种循环是do { ... } while()循环，它和while循环的唯一区别在于，不是在每次循环开始的时候判断条件，而是在每次循环完成的时候判断条件：
```
var n = 0;
do {
    n = n + 1;
} while (n < 100);
n; // 100
```
用do { ... } while()循环要小心，循环体会至少执行1次，而for和while循环则可能一次都不执行。

8.函数

在Javascript中另一个基本概念是函数，它允许你在一个代码块中存储一段用于处理一个任务的代码，然后在任何你需要的时候用一个简短的命令来调用，而不是把相同的代码写很多次。

1.函数定义

一个函数定义(也称为函数声明，或函数语句)由一些列的function关键字组成。例如，以下代码是一个简单的计算多组数的和的函数，我们给它命名为sum。
```
function sum(a,b) {
  //函数体
}
```

2.函数的调用

函数定义好后，它是不能自动执行的，需要调用它，直接在需要的位置写函数名。
```
<script>
    function sum(a,b){
        console.log(a+b);
    }
    sum(3,5);
</script>
```
我们把定义函数时传入的两个参数a和b叫形参(形式参数，一个将来被代替的参数)，调用函数时传入的两个参数叫实参(实际的参数)。
如果向在定义函数时添加多个形参。可以在后面添加多个，注意参数之间用逗号隔开。

3.函数的返回值

我们在计算两个数之和的时候，可以给函数一个返回值，每次调用该函数，你就能计算出两个数之和。

<script>
    function sum(a,b){
        return a+b
    }
    var result = sum(3,5);
    console.log(result);
</script>

4.函数表达式

虽然上面的函数定义在语法上是一个语句，但函数可以由函数表达式创建。这样的函数可以是匿名的;它不必有一个名称。例如，函数sum也可以这样去定义：
```
var sum = function(a,b){
    return a + b;
}
sum(4,5);
```

5.函数作用域冲突

处理函数时，作用域是非常重要的一个概念。当你创建函数时，函数内定义的变量和其它东西都在它们自己的单独的范围内，意味着它们被锁在自己独立的房间内。

所有的函数的最外层被称为全局作用域。在全局作用域内定义的值可以任意地方访问。

<!-- my HTML file -->
<script src="first.js"></script>
<script src="second.js"></script>
<script>
  hello();
</script>

//first.js
var name = 'Tom'


  
  
   
    共3页: 
上一页
1
2
3
下一页


 
 
  
 
 
  

  
 
 
 
栏目列表
  
      
      css
      
      JSP
      
      JavaScript
      
      ASPnet
      
      ASP.net 4.0教程
      
      HTML
      
      
      
      
    
    
    

    
    
    


 




 





 



 






 




 
  
 
         
    最新更新
        

    
                      
              python爬虫及其可视化
     
使用python爬取豆瓣电影短评评论内容
     
nodejs爬虫
     
Python正则表达式完全指南
     
爬取豆瓣Top250图书数据
     
shp 地图文件批量添加字段
     
爬虫小试牛刀（爬取学校通知公告）
     
【python基础】函数-初识函数
     
【python基础】函数-返回值
     
HTTP请求：requests模块基础使用必知必会
     



    
                  SQL SERVER中递归
     
2个场景实例讲解GaussDB(DWS)基表统计信息估
     
常用的 SQL Server 关键字及其含义
     
动手分析SQL Server中的事务中使用的锁
     
openGauss内核分析：SQL by pass & 经典执行
     
一招教你如何高效批量导入与更新数据
     
天天写SQL，这些神奇的特性你知道吗？
     
openGauss内核分析：执行计划生成
     
[IM002]Navicat ODBC驱动器管理器 未发现数据
     
初入Sql Server 之 存储过程的简单使用
     



              uniapp/H5 获取手机桌面壁纸 (静态壁纸）
     
[前端] DNS解析与优化
     
为什么在js中需要添加addEventListener（）？
     
JS模块化系统
     
js通过Object.defineProperty() 定义和控制对象
     
这是目前我见过最好的跨域解决方案！
     
减少回流与重绘
     
减少回流与重绘
     
如何使用KrpanoToolJS在浏览器切图
     
performance.now() 与 Date.now() 对比






 




相关教程





python基础教程
软件开发
PHP教程
sql教程
vb.net教程
sql语句大全
asp.net教程
dreamweaver教程
javascript教程
flash教程
vb教程
计算机二级vfp
access教程
html5教程
C#教程
web前端 
python入门教程 





关于我们--广告服务--免责声明--本站帮助-友情链接--版权声明--联系我们

  
  
黑ICP备07002182号