web学习之-JavaScript笔记

最新推荐文章于 2024-03-16 13:21:00 发布

奋斗的小跳蛙

最新推荐文章于 2024-03-16 13:21:00 发布

阅读量165

点赞数

分类专栏： web 文章标签： js

本文链接：https://blog.csdn.net/qq_43735092/article/details/106811401

版权

web 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

JavaScriptb笔记

JavaScipt是什么
- JavaScipt基础

JavaScipt是什么

JavaScipt是运行在浏览器上的脚本语言，主要用于解决的是前端与用户交互的问题，包括使用交互与数据交互，JavaScipt是由浏览器来执行的。

JavaScipt基础

JavaScipt嵌入页面的方式

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>js01基本使用</title>
 </head>
 <body>
  <!-- 
   JavaScipt是浏览器解释执行的。
   1、轻量级脚本语言
   2.可以嵌套到html语言
   3.是解释性语言、
   使用方式：
    1.页面script标签嵌入。  放到body中
    2.外部引用      通过body中的   <script src="./1.js" ></script>   如果使用src属性，那么改标签内的就无效
    3.行间事件。
   -->
  <!-- <script type="text/javascript">
   //单行注释       /* 多行注释*/
   //弹框
   alert("js使用成功")
  </script>
   -->
   通过script标签的src属性来引入外部js文件。
   <script type="text/javascript" src="./1.js"> 	
   注意：如果使用srcipt标签外部引入js文件，那么此标签中就不能再写js程序，
   它会不执行。
   

</script>
    行间样式：
    <div oneclick="alert('行间样式生效')"></div>
     <div onclick="alert('行间样式初')"></div>

 </body>
</html>

js每行结束要加分号，js默认以换行符为语句结束，但是一般还是要注意加;

JavaScipt变量命名

定义变量用关键字var，不使用var关键字定义全局变量在严格模式下将会执行错误“use strict".

 <body>
    <script type="text/javascript">
     var test=1;
     js同时声明多个变量，中间用,号隔开
    var test1=1, test2=3
    </script>
   </body>
变量命名规范与一般的编程语言一样：
	由数字字母下划线$组成
	不能以数字开头
	区分大小写。
	不能用关键字。

JavaScipt数据类型及类型转换

js一共有六种基本数据类型：
typeof函数获取一个变量的类型。

boolean:   true false
number :  数值类型
string：  字符串类型
object    对象类型
function： 函数类型
undefined:  

 <body>
  <script type="text/javascript">
   var B=true;  //js中的布尔值是小写。
   // alert(typeof(B));   
   // 将结果打印到控制台
   console.log(typeof(B));
   //数值类型： 包含整数 小数 二进制数 八进制数 十六进制
	  var num=12;
	  var num1=12.1;
	  //二进制数是以0b开头。
	  //十六进制是以0x开头 //八进制是以0开头
	 // var num2=0b10; //var numn=0b10;
	  var num2=NaN;  //NaN 不是数 。
//字符串类型： 只要是用单引号或者双引号引起来的字符，都是字符串类型。.
//单双引号可以相互嵌套使用
	var str=‘123’；
	var str1="true"；

//对象类型。 对象 数组 null
var obj={name:"leb",sex:18};
   console.log(obj);
   var list=[1,2,3,4];  //数组  也是属性对象类型
   
   //函数数据类型：  function 
   var Func=function(){
	console.log("这是一个函数");
}
//undefind  未定义 当我们定一个变量不给值的时候，他的类型就是unfined类型
	var un=undefind;
	

	   
   console.log(num,typeof(num));
  </script>
 </body>

数据类型转换：

<body>
  <script type="text/javascript">
    //数值类型转换  Number() praseInt() 和 praseFloat()
  //注意： 当字符串中包含任意一个非数据值表示的字符时。
  // Number() 返回NaN   praseInt praseFloat() 从头往后读，如果碰到非
  //数值表示的字符串，后面的内容就会舍去。
  //当字符串一开始就是非数值类型的时候，那么返回NaN;
  
    var num="123";
    //把字符串转换为整形
    var res=Number(num);
    var res1=parseInt(num)
    var res2=parseFloat(num)
    console.log(res,typeof(res))
    
  //isNaN（）检测一个数据是否是一个数。 如果是数返回false 如果不是数
  //返回true.
  var num="1";
  console.log(num,isNaN(num))
  //boolean类型
  // Boolean()转换成布尔值为false的情况
  //字符串转布尔值     字符串转布尔值 为false 空字符串
  //数值类型转布尔值:    0的时候为false NaN  0.0  
  //对象类型转布尔值     null 
  //string(value)  把给定的值转为字符串
  var str="1";
  console.log(Boolean(str));
  //所有类型都能转字符串
    </script>
 </body>

JavaScript运算符

+ - *  /  a++ a--
+ 字符串连接，当两边的值都为数值类型的时候做算数运算’ 当两边有一个为字符串的时候就做字符串链接。  

= += /=   < > >=　＜＝　＝＝＝　！＝　！＝＝
＝＝＝全等 var B = 1==‘1’  true  系统帮我们自己做了数据类型转换。 
=== 在比较时候，两边除了值相等，类型也必须相等。
！==  
&& || ！
？：

JavaScript条件判断

if (time<20)
{
    x="Good day";
}
else
{
    x="Good evening";
}



 for (var i=0;i<cars.length;i++)
  { 
      document.write(cars[i] + "<br>");
  }
    var list1=[1,2,3]
  for(i in list1){
   console.log(i,list1[i])
  }
  arr={name:"leb”，age:18,sex:"man"}
  for(i in arr){
  console.log(i，arr[i])
}


while跟c语言的用法一样。

for - 循环代码块一定的次数
for/in - 循环遍历对象的属性
while - 当指定的条件为 true 时循环指定的代码块
do/while - 同样当指定的条件为 true 时循环指定的代码块

JavaScript元素获取与操作

一般把script标签写到body中最后的位置，获则用window.οnlοad=function(){}; 来包含 js代码
window是js中最大的对象，代表窗口
on 当，，，，时候
onload 当页面加载完成之后，才会调用后面函数。

<body>
  <!--
   可以使用内置对象document上的getElementById 方法来获取页面上
   设置了id属性的元素，获取到的是一个html对象，然后将它赋值给
   一个变量。
       //js可以通过style属性来给元素设置样式。 样式是加在行间的（js添加的样式优先级高） 
   
   // oDiv.style.width="200px";
   oDiv.style.height="200px";
   oDiv.style.background="red";
   oDiv.style.fondSize="30px";
   // 注意在设置样式的时候，如如果有些属性属于双拼词。font-size要把中横杆去掉，第二个单词首字母大写。
     
  
 //通过js获取元素的样式。  只能获取行间样式
   -->
//js操做元素的文本内容    innerHTML   注意会覆盖原来内容   一般用来设置内容可以解析标签， 获取内容时会连同标签一起获取。
 //innerText  解析不了标签。   获取元素的时候获取纯文本，一般获取文本内容// oDiv.innerHTML="222"
 //oDiv.innerHTML="<h1>666</h1>"
 //innerHTML 获取元素中的内容    
//表单中元素的操作  
//获取表单的值

JavaScript定时器

通过js我们有能力做到在一个设定的时间间隔之后来执行代码，而不是在函数被调用后立即执行。我们称为计时事件

定时器在javascript中的作用
1制作动画
2.异步操作
<body>
 
 
 <script type="text/javascript">
  /*1.单次定时器： setTimeout(回调函数，时间毫秒)  1s后执行这个函数
   setTimeout(function(),1000)  只执行一次
   指定等待时间之后执行特定的代码块。
  2.循环定时器：
   setInterval()   不会停止。
   格式：setInterval(回调函数，时间毫秒)
   间隔指定时间执行一次特定的代码块。
   
  3.清除定时器： 我们启动定时器之后，会返回一个标识符，通过这个标识符来清除定时器。
  var cc=setInterval(demo,1000) 
   clearInterval(cc) 清除多次定时器
   clearTime(cc) 清除一次定时器
  
  
  */
    function demo(){
     console.log("定时器执行")
    }
    //setTimeout(demo,3000)
  // setTimeout(function(){
  //  console.log("单次定时器启动")
  // },5000)
  setInterval(demo,3000)
  
 </script>
  
</body>

JavaScript的动画

 <body>
 
 
 <script type="text/javascript">
  /*1.单次定时器： setTimeout(回调函数，时间毫秒)  1s后执行这个函数
   setTimeout(function(),1000)  只执行一次
   指定等待时间之后执行特定的代码块。
  2.循环定时器：
   setInterval()   不会停止。
   格式：setInterval(回调函数，时间毫秒)
   间隔指定时间执行一次特定的代码块。
   
  3.清除定时器： 我们启动定时器之后，会返回一个标识符，通过这个标识符来清除定时器。
  var cc=setInterval(demo,1000) 
   clearInterval(cc) 清除多次定时器
   clearTime(cc) 清除一次定时器
  
  
  */
    function demo(){
     console.log("定时器执行")
    }
    //setTimeout(demo,3000)
  // setTimeout(function(){
  //  console.log("单次定时器启动")
  // },5000)
  setInterval(demo,3000) 
 </script> 
 </body>

JavaScript的函数

<script type="text/javascript">
   //1.使用function关键字来定义函数，
   //2,。函数不调用不执行，     
    //这种方式优先级比较高，在哪个位置调用都没问题。
   function demo(){
    alert("函数被调用了")
   }
   //js先扫描一次，可以把调用放在定义前面。 
   demo()  
   //2。匿名函数
   var demo1= function(){
    alert("这是匿名函数")
   }
   demo();//匿名不可以的放在上面。  函数只能在函数体下方去调用。
   //函数参数问题
   //在函数调用的时候，不传实参函数依然可以执行，形参返回undifiend
   //多串参数，多余的参数会被省略，
   //可以在函数内部可以通过arguments这个属性来获取所有参数，类型为数组
   function demo(a,b){
    console.log(a,b);
    console.log(arguments);  //是个数组，可以得到所有的参数
    for (i in arguments){
     console.log(i,arguments[i])  //0 1
    }
   }
   var a=1,b=2;
   demo(a,b,3,4)
// 变量作用域：
   /*   
    全局变量： 在函数外部声明的变量是全局变量，
    局部变量：　在函数内部声明的变量是局部变量。 跟c语言的一样，不跟python一样， 就近原则 ，
    如果函数内部有同名的局部变量，那么函数内部优先使用局部变量的值。
    全局变量的作用域发生了改变，变成了局部变量，局部变量的值发生变化不会影响我们的全局变量。
   */
   `

JavaScript的对象

 <script type="text/javascript">
   //1.通过系统内置的object()去 定义自己的对象
   var ob=nwe Object();
   ob.name="张三"；
   ob.sex="李四"
   ob.say=function(){
    
   }
   
   //2，直接定义对象。
   var Obj={
    name='张三',
    sex:"男",
    age:18,
    say:function(){
      console.log("你吃了吗")
    }
   }
   //3.通过构造函数来自定义对象。
   function pen(name,sex){
    //this代表当前对象，
    this.name=name;
    this.sex=sex;
    this.say=function(){
     
    }
   }
   //实例化对象
   var zhang=new pen("zhang","男");  
   for ( i in zhang){
    console.log(i,zhang[i])
    
   }
   console.log(zhang.constructor)
   var arr=[1,2,3];
   console.log(arr.constructor);
   
   //数组类型， 数组里面的数据可以是不同类型的。
   
   //1.定义一个数组。
   var arr=new Array(1,2,3,4);
  
   //2、var arr=['2'.4,6];
   //获取数组中的数据的方法：  arr.length;
   //获取数组索引为1的元素， 
   console.log(arr1[1]);
   //修改arr数组当索引为1的元素。
   arr[0]=1;
   //push(9，8) pop(）后面加删
   
   //unshift() 和 shift()从数组前面增加或删除成员，
   
   //unshift（1,2）是增加，
   
   //splice（） z在数组中增加或删除元素。
   arr.splice(1)  // 如果只有一个参数，那就是从第一个元素之后开始删除剩下、所有的元素
   // （1,2）如果传了两个参数，那就是从指定个元素之后删除几个元素，第二个参数就是指定删除的个数，
   //第三个参数是用来替换删除之后的元素。 之后的所有参数都是用来替换删除的元素的，
   
   //多维数组:  多维数组  
   var arr2=[1,23,['1','2'],['a','c']]
   
  
  </script>
   <script type="text/javascript">
   //四舍五入
   var res=Math.round(5.87);
   
   //获取最大值 最小值也一样
   var res=Math.max(120,3,453,53);
   
   //获取最小值
   
   //获取绝对值
   var res=Math.abs(-1);
   
   //向下取整
   var res=Math.floor(1.3);
   //向上取整。
   var res=Math.ceil(1.1);
   //密运算
   //pow(2,3);  sqrt（9）  开平方。
   
   //random 返回一个0-1之间的随机数
   //但是不会取到0.
   // Math.floor(Math.random() *6)
   var res=Math.random();
   
   
  </script>

js的基本用法这些就足够用了，下面学习jquery

奋斗的小跳蛙

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
web学习之-JavaScript笔记

JavaScriptb笔记JavaScipt是什么JavaScipt基础JavaScipt嵌入页面的方式JavaScipt变量命名JavaScipt数据类型及类型转换JavaScipt是什么JavaScipt是运行在浏览器上的脚本语言，主要用于解决的是前端与用户交互的问题，包括使用交互与数据交互，JavaScipt是由浏览器来执行的。JavaScipt基础JavaScipt嵌入页面的方式<!DOCTYPE html><html> <head> <m
复制链接

扫一扫

专栏目录