初识javaScript-CSDN博客

本文链接：https://blog.csdn.net/m0_71349739/article/details/128643568

js全称是JavaScript，一种具有函数优先的轻量级，脚本语言，JavaScript是一种解释型的脚本的语言，C,C++等语言先编译后执行，而JvaScript是在程序的运行过程中逐行进行解释。

js的组成

ECMAScript 基准基础标准 ECMA欧洲计算机制造协会

DOM Document Object Model 文档对象模型

BOM Browser Object Model 浏览器对象模型

js在html的位置，同css一样

行内写在标签里

<input type="button" value="点击" onclick="alert（‘我是行内’）">

内部写在title下

<script>
    alert('我是内部’)
</script>

3.外部新建一个js文件，在页面title下引进js文件

<script src="文件路径"></script>

注意：script标签里不可以写任何东西

//单行注释 Ctrl+/

输入输出

输入

<script>
    prompt("请输入你的名字");
    prompt("请输入你的名字", "张三")
</script>

输出

 <script>
    alert("我是弹框")     // 弹框
    console.log("我是控制台输出")     // 控制台输出，在页面按F12，找到console(控制台)
</script>

转移符

\n 换行如果想让\n显示在前面加\

\t 空格如果想让\n显示在前面加\

变量的使用

- 变量声明

var age;

赋值

age = 10;

2. 初始化

var age = 10;

3. 变量名的命名规范

/** 1.变量名是由数字、字母、_、$、组成，数字不能开头 

    2.变量名不能用关键字、保留字、也就是不能是红色的单词

    3.严格区分大小写

    4.如果存在两个或以上单词，从第二个单词开始，首字母大写（驼峰命名法）

    5.见名知意  **/

4. 变量的多声明多赋值

var  myName='李四',

        age=18,

        address=‘江苏’，

        tel=200454,

        gender='男';

console.log(`我是${myName},今年${age}了，来自${address},手机号码是${tel},性别${gender}`);
// 我是里斯，今年18了，来自江苏，手机号是200454，性别男

特殊性

1.只声明未赋值结果是undefinned

2.只赋值未声明可以正常输出（不推荐）

数据类型

数字型    Number  包含了整数和小数（浮点数）
字符串    String    如果出现引号的嵌套外单内双或外双内单   字符串的长度   变量名：length()
布尔型    Boolean    值只有两个    真 true    假 false
underfined    只声明    未赋值
判断是否是数字    is NaN();   is Not a Number
// 检测类型，typeof（变量名）

数字类型转换

转换数字型

1.Number(变量名或值)

    字符串转换    如果不是纯数字    则为NaN    not a number

    true 转换成1，false 转换成 0，null 转换成0，underfined 转换成 NaN

2.parseInt()  转换为整数

    字符串转换    若干不是纯数字    数字在最前时 转换到非数字结束  非数字在前    转换成NaN

    true    false    null    underfined转换成NaN

    parseFloat();    原理同上

3. 转换成字符串

    1.String()    主要是将数字转换为字符串

    2.to String()    使用方法：变量名 .to String()

    3.+空字符串

转换为Boolean类型

    1.Boolean();

            数字转换为布尔类型    除0外都是true   0为false

            字符串转换为布尔类型    除了''(空字符串)外都为true    ''为false

            null    为false

            under fined    为false

            length    字符串的长度

运算符

1.算术运算符    +    -    *    /    %

2.一元运算符

    运算：++    --

    ++    --    在前    先加减    在运算

    ++    --    在后    先运算    在加减

    理解：++相当于    自身+1    --相当于    自身-1

        var a=10;

        b=a++ + ++a;

        console.log(b);   // b=22   10+11+1

        console.log(a);   // b=12   11+1

    运用最多的是

        var a=10;

        a++    或    a--

    3.比较运算符    >    <    >=    <=    ==    ===    !=    !==

           // >=满足一个即可

          //  ==只要值相等就是true    除了 null undefined

         // ===只有值和类型都一致时，才是true

    4.赋值运算符    =    +=    -=    /=    %=

        =是将右边的值给左边

            var a=10；

            a+=10    // a=a+10    a=20

            console.log(a);

    5.逻辑运算符    && 和    || 或    ！ 非 （取反）

        // &&    和    表达式1&&表达式2    都为真时 结果为真    其他情况都为假

        // ||       或    表达式1||表达式2    都为假时 结果为假    其他情况都为真

        // ！      非    取反

    6.运符的优先级

        1.()优先级最高

        2.一元运算符 ++ -- ！

        3.算数运算符    先 * / % 后 + -

        4.关系运算符  >    >=    <    <=

        5.相等运算符    == !=    ===    !==

        6.逻辑运算符     先&&后||

        7.赋值运算符

分支结构 if

if(条件){    // 条件    可以是比较越算    逻辑越算    布尔类型

    输出语句;    // 只有真的情况下  才执行

}

if    else

if(条件){    // 条件    可以是比较越算    逻辑越算    布尔类型

    输出语句;    // 只有真的情况下  才执行

} else {

    输出语句;    // 只有假的情况下  才执行

}

var age = prompt("请输入您的年龄");

if  (age > 18){

        alert("可以喝酒了");

} else {

        alert("回家写作业");

}

if(条件1){    //条件    可以是比较越算    逻辑越算    布尔类型

    输出语句;    // 只有满足条件1情况下  才执行

} else if(条件2){

    输出语句;    // 不满足条件1，只有满足条件2的情况下  才执行

} else if(条件3){

    输出语句;    // 不满足以上条件，只有满足条件3的情况下  才执行

} else if(条件4){

    输出语句;    // 不满足以上条件，只有满足条件4的情况下  才执行

} else{

    输出语句；   // 以上都不满足

}

小练习

// 闰年
var year = prompt("请输入您的年份");

if (year%4 === 0 && year%100 === 0 || year%400 === 0){ 
    alert("是闰年");
} else { 
    alert("是平年");
}

// 判断与7有关
var num = prompt("请输入1-100以内的一个数：");

if (num%7 == 0 || num%10 == 7 ||parseInt(num/10) == 7){
    alert("与7有关")
} else{  
    alert("与7无关")
}

// 100米成绩是否进10秒  进10秒    输入男还是女  男进男子组   女进女子组
var score=prompt("请输入百米成绩");

//判断是否10秒
if (score < 10){
    alert("恭喜你进入决赛");  
}
//判断男女 
var gender=prompt("请输入你的性别");

if (gender = "男"){  
    alert("进入男子组");   
} else {     
    alert("进入女子组");  
}

随机数

// Math.random() 小数

parseInt(Math.random() * 10)  // 取值范围  0-9        整数

三元运算符

// 条件 ？ 表达式1 ：表达式2      如果条件为真执行表达式1     否则执行表达式2

var age = prompt("请输入年龄");
var resul t= age > 18 ? "买车" : "学习去";
console.log(result);

switch语句

在switch中，有严格的类型比较，只有类型一致才能比较

常量的值不能相同

break 不能省略否则会形成击穿

default 一般在最后

// 声明
var number=prompt("请拨打手机号：选择备注（1、2、3、4）");     //手机号

// 输出
switch (number) {
    case "1": 
        alert("爸爸的手机号：123"); 
        break; 
    case "2":     
        alert("妈妈的手机号：456");  
        break; 
    case "3":  
        alert("爷爷的手机号：789");  
        break;   
    case "4":   
        alert("奶奶的手机号：000"); 
        break;   
    default:
        alert("输入错误");
        break;
}

循环

for循环

// 初始化    循环条件    迭代

for（var i = 0; i < 100; i++;）{
     // 循环体
     cosnole.log（i）； // 0,1,2,3,4,5,6,7,8....99

}

while循环

while（循环条件）{ //结果为：真或假  只有在真的情况下才执行

        //循环体

         //迭代
}

// 在while循环中迭代一定要有否则就是死循环，点击Sources，点击右下部分网页代码，迭好循环刷新，watch + 回车

for循环与while的区别

// for循环一般用于次数固定的循环

// while一般用于次数不固定的循环

// for 循环的执行顺序    初始化    循环条件    循环体    迭代

for循环的注意事项

1.各部分之间用；隔开
2.初始化部分如果省略  结果会出现i is not defined    未声明
3.循环条件如果省略，会出现死循环
4.迭代条件如果省略，会出现死循环
5.只剩；结果会出现死循环
break  是中止整个循环
continue  跳过本循环    进行下一个循环
适用范围
break  swith和if和循环（while  do while  for）
continue  if  和循环  （while  do while  for）