JavaScript学习(1)--Hello World

105 阅读1分钟

基本介绍

前端有HTML,CSS,JS,HTML负责的便是基本的元素内容,CSS在基础上对HTML做一些修饰,确保网页是看起来舒适的,而涉及到一些交互,行为上的东西,便交由JS来进行实现。

HELLO WORLD

内部标签样式

<script>
    alert('hello world');
</script>

外部引入

在文件夹中添加个test.js,那么对其进行外部引入如下所示

//test.js文件中的内容:
alert('hello,world');
//html文件中内容:
<script src="js/test.js">
</script>

测试代码

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

    <script src="js/test.js">
    </script>
    
</head>
<body>

</body>
</html>

基本语法

<script>
    
    // 变量定义
    var num = 1;
    var name = "hello";
    
    // 条件控制
    if(num > 60 && num <70){
        alert("60-70");
    }else if(num >= 70 && num < 80){
        alert("70-80");
    }else{
        alert("other");
    }
    
    //输出到F12控制台
    console.log("hello world");
    
    /*
    多行注释
    */

</script>

数据类型--基本介绍

  1. js不区分小数和整数,Number
123 //整数
123.1 //浮点数
1.23e3// 科学计数法
-99 // 负数
NaN // not a number
Infinity //表示无限大
'abc'//字符串
"abc"
true // BOOL类型
false
&& || ! //与或非
> < = >= <=
== //等于(类型不一样,但是数值一样也会判断为True)
=== //绝对等于(类型一样,值一样,结果为True)

TIPS1:NaN===NaN,这个与所有的数值都不相等,包括自己。可以通过isNaN(NaN)进行判断。

  1. 浮点数问题

TIPS2:尽量避免使用浮点数进行运算,存在精度问题。通过两数相减获取到绝对值判断绝对值是否小于0.00000001进行判断。

  1. null与undefined
  • null 空
  • undefined 没有定义
  1. 数组 java的数组必须是相同类型的对象,但是JS中不需要。
//保证代码的可读性尽量使用[]
var arr = [1,2,3,4,"hello"];

//也可以通过下面这种方式进行创建
new Array(1,2,3,4,"hello");

//console.log(arr[0]) => 1
//console.log(arr[5]) => undefined
//取数组下表,如果越界了就会undefined
  1. 对象
var person = {
    name:"hello",
    age:12,
    arr:[1,2,3]
}

取对象的值

person.name
> "hello"
person.age
> 12

严格检查模式strict

<script>
'use strict';//严格检查模式,防止JavaScript的随意性产生的一些问题。
i1 = 1;
var i2 = 1;
//var => 全局变量 let =>局部变量
</script>