JavaScript部分(还有待补充)

一、基础知识

1、hello JavaScript

A.JavaScript用于网页和用户之间的交互,比如提交的时候,进行用户名是否为空的判断。
B.显示出里面的语句

<script>
   ocument.write("Hello Javascript"); 
   </script>

C、java和DOM
οnclick="…" 表示点击button之后做的事情
document.getElementById 根据id获取指定的元素
.style.display=‘none’ 隐藏
.style.display=‘block’ 显示(准确的讲,以block的形式显示)

<button onclick='document.getElementById('text').style.display='none''>隐藏文本
   </button>  
    <button onlick='document.getElementById('text').style.display='block''>显示文本
     </button>
    <p id='text'>这是一段可以被JavaScript隐藏的文本</p>

效果如下:
在这里插入图片描述
D、JavaScript包含语言基础、DOM和bom。

2、JavaScript的标签(使用script的标签)

① script一般就是放在HTML里就可,主要在head里
主要就是script标签以及document.write

<html>
  <head>
   <script>
      document.write("it is javascript");
   </script>
  </head>
</html>

②连续执行但是不分段

<script>
      document.write("so show me");
   </script>
<script>
      document.write("i show you");
   </script>

③直接使用外部js
不写script标签

<html>
  <script src="https://bilibili.com"></script>
</html>

3、注释

单行注释多行注释均跟java相同

4、变量

①用var

<script>
      var x=10;
      document.write("变量X的值时:"+x);
   </script>

这样的效果
在这里插入图片描述
②不用var
直接上面的代码去掉var
③变量命名(和java相同)
开头只能是下划线、美元符号和字母
整体有下划线、字母、美元符号和数字组成

5、调试过程

可以一步一步注释掉
用这个//alert(1)
或者console.log(“end”);用在快要结束时
6、调试方法
A、声明了但是未赋值的
就是var了但是无赋值
在这里插入图片描述
B、布尔型(只能true和false)

<script>
  var x=true;
  var y=false;
  document.write("布尔值:"+x);
  document.write("<br>");
  document.write("布尔值:"+y);
</script>

C、数字
可以有整型浮点型
可以十进制可以八进制二进制

var a=10; //十进制
  var b=012;//第一位是0,表示八进制
  var c=0xA;//0x开头表示十六进制
  var d=3.14;//有小数点表示浮点数
  var e=3.14e2;//使用e的幂表示科学计数法

D、字符串
可以用单引号或者双引号括起来
E、变量是动态的
F、变量的类型的判定

var x=10/‘use’...;
 document.write('声明了但是未赋值的时候,类型是: '+typeof x);

6、类型转换

A、伪对象
JavaScript中即使是基本对象类型,也是伪对象,所以可以调用伪对象来得到长度和字符类型。

<script>
  var a="hello bts";
  document.write("变量"+(typeof a));
  document.write("<br>");
  document.write("长度"+a.length);
</script>

B、转为字符串类型
ps:如果是数字类型转字符串类型时顺便把进制(在to String的括号里写上2,8等即可)

<script>
  var a=10;
  document.write("数字 "+a+" 转换为字符串"+a.toString());
  document.write("<br>");
  </script>

C、转为数字
javascript分别提供内置函数 parseInt()和parseFloat(),转换为数字

<script>
  document.write("字符串的\"10\"转换为数字的:"+parseInt("10")); //转换整数
  document.write("<br>");
  document.write("字符串的\"3.14\"转换为数字的:"+parseFloat("3.14"));//转换浮点数
</script>

如果是10ABC,得到10
如果是hello world,得到NaN(not a number)
D、转为Boolean
使用内置函数Boolean() 转换为Boolean值
当转换字符串时:
非空即为true
当转换数字时:
非0即为true
当转换对象时:
非null即为true

<script>
document.write("数字 3.14 转换为布尔后的值:"+Boolean(3.14));
</script>

E、转换为数字的两种方法
Number()和parseInt()一样,都可以用来进行数字的转换
区别在于,当转换的内容包含非数字的时候,Number() 会返回NaN(Not a Number)
parseInt() 要看情况,如果以数字开头,就会返回开头的合法数字部分,如果以非数字开头,则返回NaN

<script>
 document.write("通过Number() 函数转换字符串'abc123' 后得到的数字:"+Number("123abc"));   
  document.write("<br>");
 document.write("通过parseInt() 函数转换字符串'123' 后得到的数字:"+parseInt("123abc"));   
</script>

F、String()和to String()
String()会返回字符串"null"
toString() 就会报错,无法执行

<script>
  var a = null;
  document.write('String(null) 把空对象转换为字符串:'+String(a)); 
  document.write("<br>"); 
  document.write('null.toString() 就会报错,所以后面的代码不能执行'); 
  document.write(a.toString()); 
  document.write("因为第5行报错,所以这一段文字不会显示"); 
</script>

7、java函数相关

function可以用于定义一个函数
()里面可以写参数,如果没有就是无参
{ }里面写内容
还要引用这个函数才能执行,类似java

<script>
 function print()
{
document.write("这一句话是由一个自定义函数打印");
}
print();
</script>

有带参数的如下
关注参数写的位置

<script>
 function print(a)
{
document.write(a);
}
print("pts");
print("<br>");
print("army");
</script>

有返回值的

<script>
function print(message){
  document.write(message);
}//这里不能省,否则后面的print就没用了,直接出现打印机
 function sum(a,b)
{
return a+b;
}
var su=sum(100,200);
print(su);
</script>

阶段练习1

答案

<head>
<meta http-equiv="Content-Type" content="text/html; charset=GB2312">
</head> 
 
<style>
input{
  width:50px;
}
</style>
<script>
function calc(){
var num1= document.getElementById("num1").value;
var num2= document.getElementById("num2").value;
num1 = parseFloat(num1);
num2 = parseFloat(num2);
var result = num1+num2;
document.getElementById("result").value=result;
 
}
</script>
<input type="text" id="num1"> +
 
<input type="text" id="num2" >
=
<input type="text" id="result" >
 
<input type="button" value="运算" onclick="calc()">

我自己(但是最后还没法算结果,得再改改)

<script>
function get(){
var num1=document.getElementById("num1").value;
var num2=document.getElementById("num2").value;
num1=parseFloat(num1);
num2=parseFloat(num2);
var resullt=num1+num2;
document.getElementById("result").value=result;}
}
</script>

<input type='text' id='num1' size=5>+<input type='text' id='num2' size=5>=<input type='text' id='result' size=5 >

<input type="button" value="运算" onclick="get()">

效果如下
在这里插入图片描述

8、作用域

像下面的f1里的参数只是在f1里不会到f2里用

<script>
function f1(a){
document.write('在参数作用域中值为'+a);
}
function f2(){
document.write('a不在这一个函数范围内'+a);
}
f1(5);
f2();
document.write('函数外不可访问'+a);
</script>

全局变量
(就算只是在一个参数中改变要变)

<script>
var a = 0; 
 
function f1(){
  document.write('通过函数f1 设置全局变量a的值 为 5');
  a = 5; 
}
 
function f2(){
  document.write('通过函数f2 得到 '+a); 
}
 
f1(); 
document.write('<br>');
f2(); 
</script>

9、鼠标点击弹出框

<script>
function showHello(){
   alert("Hello JavaScript");
}
</script>
 
<button onclick="showHello()">点击一下</button>

10、算数运算符

±*/%加减乘除取余
1++,先取得1再加1
++1,先加1,在得到2
赋值符号用=
x=x+1等同于x+=1
+既可以是加法也可以是连接符号

11、逻辑运算符

A、基本逻辑运算符

>
>=
==
!=

最后如果+(2!=3)返回值为false
B、==1和字符串1也等,返回true
===1和字符串1不等,返回false
C、三目运算符
跟java相同

12、条件语句

①单纯的if eise
或者加个else if

<script>
var age=35;
if(age<18)
{
document.write("如果年龄小于18,是未成年");
}
else if(age<22){
document.write("中米");
}
else
{
document.write("否则,是成年人");
}
</script>

case

<script>
var day=new Date().getDay(); //通过日期对象获取数字形式的星期几
var today;
switch (day)
{
case 0:
  today="星期天";
  break;
case 1:
  today="星期一";
  break;
case 2:
  today="星期二";
  break;
case 3:
  today="星期三";
  break;
case 4:
 today="星期四";
  break;
case 5:
  today="星期五";
  break;
case 6:
  today="星期六";
  break;
} 

document.write("今天是 : "+today);

</script>

13、循环结构

for循环

<script>
function p(s){
document.write(s);
document.write("<br>");
}
for(var i=0;i<5;i++)
{
p(i);
}
</script>

while循环

<script>
function p(s){
document.write(s);
document.write("<br>");
}
var i=0;
while(i<4)
{
p(i);
i++;
}
</script>

do while就是先do在while

<script>
function p(s){
  document.write(s);
  document.write("<br>");
}
var i = 0;
 
do{
 p(i);
 i++;
} while(i<5);
 
</script>

continue结束本次循环开启下一次
break直接全部结束

14、错误处理

①定义了f1函数,但是却调用了f2
会导致代码没法执行报错
②try catch语句找错误

<script>
  function f1( )
{
document.write("here");
}
try{
document.write("试图调用不存在的函数f2()<br>");
f2();
}
catch(err)
{
document.write("捕捉错误");
document.write(err.message);
}
document.write("<p>finally</p>");
</script>

二、对象

1、数字

1、创建数字对象

<script>
  var x=new Number(123);
  document.write("数字对象x的值:"+x);
  document.write("<br>");
  document.write("数字对象x的对象类型为:"+typeof x);
  document.write("<br>");
var y=123;
document.write("数字是"+y);
document.write("<br>");
document.write("基础类型类型"+typeof y);
</script>

2、最大最小值

<script>
document.write("数字max的值:"+Number.MIN_VALUE);
document.write("数字max的值:"+Number.MAX_VALUE);	
</script>

3、返回小数位数表达

<script>
  function p(s)
{
   document.write(s);
   document.write("<br>");
 }
   var a=new Number("123");
  p("留两位数"+a.toFixed(2));
  var b=new Number("3.1415936");
  p("留下三位小数"+b.toFixed(3));
</script>

4、科学计数法
var a=new Number(“123”);
p(“科学计数法”+a.toExponential());

<script>
  function p(s)
{
   document.write(s);
   document.write("<br>");
 }
   var a=new Number("123");
  p("科学计数法"+a.toExponential());
  var b=new Number("3.1415936");
  p("科学计数法"+b.toExponential());
</script>

5、返回值的数字类型
PS:一般 var a=new Number(“123”);得到的应该是object
它的value留下的是number

<script>
  function p(s)
{
   document.write(s);
   document.write("<br>");
 }
   var a=new Number("123");
    var b=a.valueOf();
p(typeof a);
p(typeof b);
</script>

①练习

<head>
<meta http-equiv="Content-Type" content="text/html; charset=GB2312">
</head> 
 
<style>
input{
  width:50px;
}
</style>
<script>
function calc(){
var num1= document.getElementById("num1").value;
var num2= document.getElementById("num2").value;
num1 = parseFloat(num1);
num2 = parseFloat(num2);
var result = num1*num2;
var a=result.toExponential();
document.getElementById("result").value=a;
 
}
</script>
<input type="text" id="num1"> *
 
<input type="text" id="num2" >
=
<input type="text" id="result" >
 
<input type="button" value="运算" onclick="calc()">

在这里插入图片描述
2、字符串
①字符类型

<script>
var x = "5";
var y = new String(x);
document.write("变量x的值是:"+x);
document.write("<br>");
document.write("变量x的类型是:"+(typeof x));
document.write("<br>");
document.write("变量y的值是:"+y);
document.write("<br>");
document.write("变量y的类型是:"+(typeof y));
document.write("<br>");
</script>

在这里插入图片描述
②返回指定字符
charAt 返回指定位置的字符
charCodeAt 返回指定位置的字符对应的Unicode码
重点部分

document.write('通过 charAt(0)获取位置0的字符串: '+y.charAt(0)); //返回H
document.write("<br>");
document.write('通过 charCodeAt(0)获取位置0的字符的 Unicode码 :'+y.charCodeAt(0));

③将两者连接起来
主要代码

<script>
var x = new String("mic ");
var y = new String("drop");
document.write( 'x: '+x);
document.write('<br>');
document.write( 'y: '+y);
document.write('<br>');
document.write( '通过函数concat()把x和y连接起来: ' +  x.concat(y) );
</script>

在这里插入图片描述
④字符串中出现某个字符定位
indexOf 返回该字符第一次出现的位置
lastIndexOf 返回该字符最后一次出现的位置

<script>
var y = new String("mic droping");
document.write('<br>');
document.write( y.indexOf ("i"));
document.write('<br>');
document.write( y.lastIndexOf ("i") );
</script>

⑤比较是否相同

0 表示相等
1 表示被拿来作比较的字母顺序靠后
-1 表示被拿来作比较的字母顺序靠前

<script>  
var x = new String("jk");
var y = new String("jk");
var z = new String("jm");
  
document.write( '字符串x的值: '+x); 
document.write('<br>');
document.write( '字符串y的值: '+y); 
document.write('<br>');
document.write( '字符串z的值: '+z); 
document.write('<br>');

document.write(' 用localeCompare()判断 x和y是否相等 '+x.localeCompare(y));
document.write('<br>');
document.write('用 localeCompare()判断 x和z是否相等 '+x.localeCompare(z));
document.write('<br>');


</script>

⑥截取不部分
换成这个代码+x.substring (0,3)
左开右闭,取左边
⑦split 根据分隔符,把字符串转换为数组。
注: 第二个还可以表示返回数组的长度

<script>
var x = new String("Hello This Is JavaScript");
document.write( '字符串x的值: '+x);
document.write('<br>');
 
var y =  x.split(" ");//这里是指遇到空格就撕开
document.write('通过空格分隔split(" "),得到数组'+y);
document.write("<br>");
 
var z =  x.split(" ",2);
document.write('通过空格分隔split(" ",2),得到数组,并且只保留前两个'+z);
  
</script>

⑧替换字符
replace(search,replacement)
找到满足条件的子字符串search,替换为replacement

<script>
function p(s){
  document.write(s);
  document.write("<br>");
}
  
var x = new String("bts army forever");
p('原字符串: '+x);
var y = x.replace("b","p");
p('只替换第一个 :  '+y);
var regS = new RegExp("r","g");
var z = x.replace(regS, "o");
p('替换掉所有的 :  '+z);
 
</script>

在这里插入图片描述
⑨返回类型
三种都可,按例子使用

<script>
function p(s){
  document.write(s);
  document.write("<br>");
}

var x = new String("Hello JavaScript");

var temp = x.charAt(0);
p('charAt返回的值'+temp);
p('其类型是'+ typeof temp );

var temp = x.concat("!!!");
p('concat返回的值'+temp);
p('其类型是'+ typeof temp );

var temp = x.substring(0,5);
p('substring返回的值'+temp);
p('其类型是'+ typeof temp );

</script>

在这里插入图片描述

2、数组

①、新建数组

(其实这里的p里面的东西还有点蒙)

<script>
function p(s,v){
  document.write(s+' '+v);
  document.write("<br>");
}
 
var x = new Array(); //创建长度是0的数组
p('通过 new Array()创建一个空数组:',x);
x = new Array(5); //创建长度是5的数组,,但是其每一个元素都是undefine
p('通过 new Array(5)创建一个长度是5的数组:',x);
p('像new Array(5) 这样没有赋初值的方式创建的数组,每个元素的值都是:',x[0]);
x = new Array(3,1,4,1,5,9,2,6); //根据参数创建数组
p('创建有初值的数组new Array(3,1,4,1,5,9,2,6) :',x);
 
</script>

②、数组长度

x.length跟Java类似

③遍历数组

其实for的跟java类似甚至相同
遍历有两种方式
1.结合for循环,通过下标遍历
2.使用增强for in循环遍历
需要注意的是,在增强for in中,i是下标的意思。

<script>
function p(s){
  document.write(s);
  document.write("<br>");
}
 
var x = new Array(3,1,4);
p('当前数组是:'+x);
p("way1");
for(i=0;i<x.length;i++){  //普通for循环
  p(x[i]);
}
p("way2");
for(i in x){  //for in 循环
  p(x[i]);
}
</script>

④连接两个数组

<script>
function p(s){
  document.write(s);
  document.write("<br>");
}
var x = new Array(2,0,1,3);
var y = new Array(0,6,1,3);
p('数组x是:'+x);
p('数组y是:'+y);
 
var z = x.concat(y);
p('用concat连接数组x和y');
p('数组z是:'+z);
 
</script>

⑤通过指定的字符得到数组的字符串表示

方法 join 通过指定分隔符,返回一个数组的字符串表达
像这样
y = x.join()
z = x.join("@")

<script>
function p(s){
  document.write(s);
  document.write("<br>");
}
 
var x = new Array(6,1,3);
p('数组x是:'+x);
var y = x.join();
p('y = x.join() 得到的是数组x的字符串表达,其值是'+y+" 其类型是 :" +(typeof y));
var z = x.join("@");
p('z = x.join("@");是x的字符串表达,不过分隔符不是默认的"," 而是"@" : '+z);
 
</script>

在这里插入图片描述

⑥排序

直接sort排下来

<script>
function p(s){
  document.write(s);
  document.write("<br>");
}
 
var x = new Array(2,0,1,3,0,6,1,3);
p('数组x是:'+x);
x.sort();
p('使用sort排序后的数组x是:'+x);
 
</script>

倒序
function comparator(v1,v2){
return v2-v1;
}
这里是指把大的放前小的在后

<script>
function p(s){
  document.write(s);
  document.write("<br>");
}
 
function comparator(v1,v2){
   return v2-v1;
}
 
var x = new Array(6,12,1,5,4,9,6);
p('数组x是:'+x);
x.sort(comparator);
p('使用sort 进行自定义倒排序后的数组x是:'+x);
 
</script>

在这里插入图片描述

反过来
x.reverse();
获得子数组
在数组x是:3,1,4,1,5,9,2,6
x.slice(1)获取的子数组是:1,4,1,5,9,2,6
x.slice(1,3)获取的子数组是:1,4,取不到3的部分
var x1=x.slice(1);这样既可
如果是(1,5)得到1415

⑦删除插入

x.splice (3,2);//从位置3开始 ,删除2个元素
p('x.splice (3,2) 表示从位置3开始 ,删除2个元素:'+x);
x.splice(3,0,1,5);
p('x.splice(3,0,1,5) 从位置3开始,删除0个元素,但是插入1和5,最后得到:'+x);

三、BOM部分

TBC

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
在MATLAB中,NURBS(非均匀有理B样条)是一种强大的数学工具,用于表示和处理复杂的曲线和曲面。NURBS在计算机图形学、CAD(计算机辅助设计)、CAM(计算机辅助制造)等领域有着广泛的应用。下面将详细探讨MATLAB中NURBS的绘制方法以及相关知识点。 我们需要理解NURBS的基本概念。NURBS是B样条(B-Spline)的一种扩展,其特殊之处在于引入了权重因子,使得曲线和曲面可以在不均匀的参数空间中进行平滑插值。这种灵活性使得NURBS在处理非均匀数据时尤为有效。 在MATLAB中,可以使用`nurbs`函数创建NURBS对象,它接受控制点、权值、 knot向量等参数。控制点定义了NURBS曲线的基本形状,而knot向量决定了曲线的平滑度和分布。权值则影响曲线通过控制点的方式,大的权值会使曲线更靠近该点。 例如,我们可以使用以下代码创建一个简单的NURBS曲线: ```matlab % 定义控制点 controlPoints = [1 1; 2 2; 3 1; 4 2]; % 定义knot向量 knotVector = [0 0 0 1 1 1]; % 定义权值(默认为1,如果未指定) weights = ones(size(controlPoints,1),1); % 创建NURBS对象 nurbsObj = nurbs(controlPoints, weights, knotVector); ``` 然后,我们可以用`plot`函数来绘制NURBS曲线: ```matlab plot(nurbsObj); grid on; ``` `data_example.mat`可能包含了一个示例的NURBS数据集,其中可能包含了控制点坐标、权值和knot向量。我们可以通过加载这个数据文件来进一步研究NURBS的绘制: ```matlab load('data_example.mat'); % 加载数据 nurbsData = struct2cell(data_example); % 转换为cell数组 % 解析数据 controlPoints = nurbsData{1}; weights = nurbsData{2}; knotVector = nurbsData{3}; % 创建并绘制NURBS曲线 nurbsObj = nurbs(controlPoints, weights, knotVector); plot(nurbsObj); grid on; ``` MATLAB还提供了其他与NURBS相关的函数,如`evalnurbs`用于评估NURBS曲线上的点,`isoparm`用于生成NURBS曲面上的等参线,以及`isocurve`用于在NURBS曲面上提取特定参数值的曲线。这些工具对于分析和操作NURBS对象非常有用。 MATLAB中的NURBS功能允许用户方便地创建、编辑和可视化复杂的曲线和曲面。通过对控制点、knot向量和权值的调整,可以精确地控制NURBS的形状和行为,从而满足各种工程和设计需求。通过深入理解和熟练掌握这些工具,可以在MATLAB环境中实现高效的NURBS建模和分析。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值