Harmony鸿蒙开发0基础入门到精通Day01--JavaScript篇

简介

鸿蒙是最近几年比较新的一种前端开发语言,其中集成了大量的组件与函数,在原有的前端基础上进行更加完美的扩展与升级。

所以在学习鸿蒙之前,我们需要知道它是怎么来的,这样有助于我们的扩展学习与转型。

发展历程

我们鸿蒙所使用的开发语言,名为ArkTs,也被叫做ArkUI

他是由前端开发语言JS(JavaScript)一步步升级完善升级而推出的新语言。

JavaScript ------->TypeScript --------> ArkTs

入门

所以在学习鸿蒙开发之前,我们需要学习JavaScript,将这个基础打好之后,我们才会进一步继续推进。

这样一来,我们不仅能够简单掌握鸿蒙开发语言,还能够对前端其他语言的转型提供方便。

我不会耽误大家太多的时间,直接开始学习。

JavaScript(基础)

是一种前端开发语言,常常搭配html,css一起使用,相信大家在学习阶段已经对此有过了解,我就不在这里过多赘述,就带大家简单的回顾一下。

JS的组成:ECMAScript(语法规范) BOM(浏览器对象模型) DOM(文档对象模型)

变量声明方式 ,一般用var定义变量,在后续版本中还会有其他的方式,例如let const

基本数据类型:number boolean string null undefined

引用数据类型:function(函数) Array(数组)Object(对象)

注释://单行注释 /**/多行文本注释

控制台打印:console.log()

script的三种引入方式:

外联式:<script src="路径"></script> 【路径:当前路径**./** 上一级**../下一级/**】

内联式:<script></script>

行内式:一般搭配事件结合去使用

【规范:建议写在html中body下面,页面从上往下执行,否则出错过后可读性不好。】

定义变量: var 名 = 值 ------->【无需指定值的类型,系统会自动区分。】

javascript 复制代码
// 定义数字
var num = 10;
// 控制台打印
console.log(num)
// 定义字符串
var str = "hello world!"

// 定义布尔值
var b1 = true
var b2 = false

// 定义数组
var arr = [1, 2, 3, false,{},[],8.9]
console.log(arr[2])
// 定义对象
var obj = {
    name: '张三',
    age: 18,
    sex: '男'
}
console.log(obj.name)
// 定义函数
function fn() {
    var x = 50
    console.log(x)
    // return 20
}
fn()//打印50
console.log(fn())//undefined  ----------->当没有返回值的时候,默认是这个值
//函数中的return: 1.函数的返回值  2.终止程序执行

js中的类型转换

非字符串类型转字符串

两种转换方式:1.String() 2.toString方法

注意:undefined,null不能使用toString方法进行转换。

举个栗子,其他类型转String照葫芦画瓢。

javascript 复制代码
var n1 = 18;
var r1 = String(n1)
console.log(r1)

var n2 = 180;

// toString(进制)
var r2 = n2.toString(2)// 计算机存储的进制最大是36进制  常用的就是2,8,10,16进制
console.log(r2)

小技巧:在控制台打印的时候,颜色与其他的不同

非数字类型转数字类型

三种转换方式:

Number()

ParseInt() 取整数部分,从变量左侧开始依次向右判断遇到非数字就会停止转换

ParseFloat() 取整数+小数部分,从变量左侧开始依次向右判断遇到非数字就会停止转换

注意:Number当一个无法转成数字想要使用方法,结果为NaN---->not a number 但属于数字类型。

值得注意的错误:

javascript 复制代码
console.log(Number(null))//0
console.log(parseInt(null))//NaN
console.log(parseFloat(null))//NaN

console.log(Number(undefined))//NaN
console.log(parseInt(undefined))//NaN
console.log(parseFloat(undefined))//NaN

非布尔值转换为布尔值

Boolean()

注意: 0,'',false,null,undefined,NaN 转换为布尔值都是false,其余都是true

typeof

判断元素类型,仅仅支持基本数据类型

用法:typeof 变量名

运算符

算数运算符: + - * / % 【加减乘除】

逻辑运算符:|| && ! 【与或非】

比较运算符:> < >= <= != !== == ===

赋值运算符:= += -= *= /= %=

一元运算符:i++ ++i i-- --i

【注意:当其他类型与字符串相加时,会发生字符串拼接。】

javascript 复制代码
var n1 = 10;
var n2 = '20';
// 此时这里是字符串拼接
console.log(n1+n2)//'1020'

【%表示取余,取余数。】

javascript 复制代码
// % 取余 
var n1 = 7
var n2 = 3
console.log(n1%n2)//1
console.log(n2%n1)//3

==和===的区别:

==只比较数值,而===比较数值和类型。

if与switch

if 语句

if (condition )

{
当条件为 true 时执行的代码

}

if...else 语句

if (condition )

{
当条件为 true 时执行的代码

}

else

{
当条件不为 true 时执行的代码

}

if...else if...else 语句

if (condition1 )

{
当条件 1 为 true 时执行的代码

}

else if (condition2 )

{
当条件 2 为 true 时执行的代码

}

.......

else

{
当条件 1 ,条件 2..... 都不为 true 时执行的代码

}

switch 语句

switch(n)

{

case 1:

执行代码块 1

break;

case 2:

执行代码块 2

break;

default:

与 case 1 和 case 2 不同时执行的代码

}

【注意:没有break的时候,会出现穿透现象,不会跳出。】

案例:90-100分为优 80-90 良 60-80 可 0-60 差

javascript 复制代码
/***
 * 使用switch实现范围的匹配
 * 比如分数为93分,switch中的case:10  case 9 case 8....
 * 如何拿到93中的9?
 * 93/10=9.3-> parseInt(93/10)
 * 
 * ***/

// 需求:90-100分为优  80-90 良  60-80 可 0-60 差
// 使用if实现分支
var sc = 88;
if (sc >= 90 && sc <= 100) {
    console.log('优')
} else if (sc >= 80 && sc < 90) {
    console.log('良')
} else if (sc >= 60 && sc < 80) {
    console.log('可')
} else if (sc >= 0 && sc < 60) {
    console.log('差')
} else {
    console.log('错误数据!!!')
}



let score = 93;
let value = parseInt(score / 10);
// console.log(value);

// let value = prompt("请输入分数:")

switch (value) {
    case 10:
        console.log("满分");
        break;
    case 9:
        console.log("优");
        break;
    case 8:
        console.log("良");
        break
    case 7:
    case 6:
        console.log("可");
    case 5:
    case 4:
    case 3:
    case 2:
    case 1:
    case 0:
        console.log("差");
        break;
    default:
        console.log("请输入正确的分数!!!");

        break;




}

循环结构

循环分为三大类:for循环 while循环 do......while循环

for (语句 1 ;语句 2 ;语句 3 )

{
被执行的代码块

}

举例子:

for (var i=0; i<5; i++)

{

x=x + "该数字为 " + i + "<br>";

}
while (条件 )

{
需要执行的代码

}

例:

lei i=0;

while (i<5)

{

x=x + "The number is " + i + "<br>";

i++;

}
do

{
需要执行的代码

}while (条件)

例:

lei i=0;

{

x=x + "The number is " + i + "<br>";

i++;

}while (i<5)

break与continue语句

break 语句可用于跳出循环。

for (i=0;i<10;i++)

{

if (i==3)

{

break;

}

x=x + "The number is " + i + "<br>";

}

当i=3时,结束循环。

continue 语句中断当前的循环中的迭代,然后继续循环下一个迭代。

for (i=0;i<=10;i++)

{

if (i==3) continue;

x=x + "The number is " + i + "<br>";

}

当i=3时,跳过本次循环,继续下一次循环。

函数

语法:function 函数名(){}

匿名函数:let 变量名 = function(){}

举个栗子:

javascript 复制代码
var x = function (a, b) {return a * b};
var z = x(4, 3);

函数声明后不会立即执行,会在我们需要的时候调用到。

在使用var,function关键字的时候,会有代码提升的能力。

javascript 复制代码
myFunction(5);

function myFunction(y) {
    return y * y;
}

正因为function有代码提升的能力,所以即便是代码从上往下执行,上方的代码是能够正常执行的。

注意事项:

当匿名函数使用var关键字的时候,会出现问题。

myFunction(5);

var myFunction = function(y) {

return y * y;

}

这里错误的原因是,当var关键生效,则var myFunction 被提升了,而后面的内容不会提升,只有当代码执行到这里,myFunction才会被函数赋值。

作业

1.利用循环在控制台输出 1-100之和

2.利用循环求 1 ~100 之间所有 3 的倍数的和

求: 3 + 6 + 9 + ... + 99

3.在控制台输出 1000 ~ 2000 之间所有的闰年,要求四个一行

  1. 在控制台输出 20 ~ 40 之间所有的质数
javascript 复制代码
console.log("-----1.利用循环在控制台输出 1-100之和---------------------");
// 1.利用循环在控制台输出 1-100之和
let sum = 0;
for (let i = 1; i <= 100; i++) {
    sum += i;
}
console.log(sum);
console.log("----------2.利用循环求 1 ~100 之间所有 3 的倍数的和----------------");
// 2.利用循环求 1 ~100 之间所有 3 的倍数的和
// 求: 3 + 6 + 9 + ... + 99
let s = 0;
for (let i = 1; i <= 100; i++) {
    if (!(i % 3)) {
        s += i;
    }
}
console.log(s);

console.log("-----3.在控制台输出 1000 ~ 2000 之间所有的闰年,要求四个一行---------------------");
// 3.在控制台输出 1000 ~ 2000 之间所有的闰年,要求四个一行

let str = ""
let cnt = 0;
for (let i = 1000; i <= 2000; i++) {
    if (y(i)) {
        str += i + " "
        cnt++;
    }
    if (cnt == 4) {
        console.log(str);
        cnt = 0;
        str = ''
    }
}

function y(n) {
    if ((n % 4 == 0 && n % 100 != 0) || n % 400 == 0)
        return true
    return false
}

console.log("-----4. 在控制台输出 20 ~ 40 之间所有的质数---------------------");
// 4. 在控制台输出 20 ~ 40 之间所有的质数
for (let i = 20; i <= 40; i++) {
    if (ff(i)) {
        console.log(i);
    }
}

function ff(n) {
    for (let i = 2; i < n; i++) {
        if (n % i == 0) {
            return false
        }
    }
    return true
}
相关推荐
1379号监听员_5 小时前
嵌入式软件架构--按键消息队列3(测试)
开发语言·stm32·单片机·嵌入式硬件·架构
还是大剑师兰特5 小时前
TypeScript 面试题及详细答案 100题 (61-70)-- 泛型(Generics)
typescript·大剑师·typescript教程·typescript面试题
阿登林5 小时前
C# iText7与iTextSharp导出PDF对比
开发语言·pdf·c#
Fantastic_sj5 小时前
JavaScript 数组方法和属性详解
javascript
qq_433554545 小时前
C++ 双向循环链表
开发语言·c++·链表
JA+5 小时前
vue 实时数据表格组件 (stk-table-vue)
前端·javascript·vue.js
一只侯子5 小时前
Tuning——CC调试(适用高通)
开发语言·图像处理·笔记·学习·算法
丁浩6665 小时前
Python机器学习---1.数据类型和算法:线性回归
开发语言·python·机器学习·线性回归
那年窗外下的雪.5 小时前
鸿蒙ArkUI布局与样式进阶(十二)——自定义TabBar + class类机制全解析(含手机商城底部导航案例)
开发语言·前端·javascript·华为·智能手机·harmonyos·arkui