简介
鸿蒙是最近几年比较新的一种前端开发语言,其中集成了大量的组件与函数,在原有的前端基础上进行更加完美的扩展与升级。
所以在学习鸿蒙之前,我们需要知道它是怎么来的,这样有助于我们的扩展学习与转型。
发展历程
我们鸿蒙所使用的开发语言,名为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 之间所有的闰年,要求四个一行
- 在控制台输出 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
}