Javascript入门学习笔记

最新推荐文章于 2024-05-21 21:29:52 发布

LXY9812

最新推荐文章于 2024-05-21 21:29:52 发布

阅读量111

点赞数

分类专栏：学习文章标签： web HTML Javascript 脚本语言

本文链接：https://blog.csdn.net/LXY9812/article/details/98508400

版权

学习专栏收录该内容

9 篇文章 0 订阅

订阅专栏

@JavaScript

Javascript入门

Javascript是弱类型，脚本语言，在运行的时候不需要编译

JS的代码写在哪里

Javascript的代码写在哪里？有三种方式
1.行内式
在标签对应的属性里写要执行的Javascript的代码
eg:

<a href="javascript:console.log(666)">xxxx</a>
<a href="javascript:console.log(999)">lalala</a>

2.嵌入式
使用标签，可以嵌入在head或者body任何地方
eg:

          <script >
			var a=20
			console.log(a)
	    	</script>

3.引入式
建立一个js文件，在html文件中使用标签引入js文件
src的值式js文件的路径
eg:

<script src="01DAY/01day.js" >
		</script>

注意
错误用法既有嵌入式又有引入式，虽然它不会报错但是只会执行一个
eg：

<script src="src/01DAY/01day.js">
		</script>

变量

变量名的写法：
1.变量名可以说大小写字母，数字，下划线和$的组合
2.变量名不能用数字开头
3.变量名不能取名为javascript的关键字，例如if,while,for
4.变量名也可以用中文，但是一般不用
5.取变量名时一般用英文单>拼音>连接，不能取缩写否则别人看不懂你的代码
声明变量
声明一个变量用var语句
eg:

        var a = 100;//声明了一个变量a,a保存的数据是数字100
		console.log(a)

1.变量是保存数据用的（保证编程数据的复用性）
2.存数据时，当变量没有过数据，叫初始化；当变量已经有数据了时，这叫赋新值给变量
3.取数据时，取的是最后一次保存的数据
eg:

var a;
a=100;//初始化
a=50;//赋新值

注意
声明变量有显示声明和隐式声明
eg：

var a=20;//显示声明，脚本加载初期会提前声明变量
b=30;//隐式声明，运行到这里的时候系统自动帮你创建一个变量
console.log(a,b);//打印变量a和b的值

数据类型

数据类型分为原始数据类型和引用数据类型
原始数据类型（基本数据类型）
1.数字number类型
eg:

var a=20;//整数
var b=20.66;//小数
var c=1F;//进制数

数字不分类型，全部为number类型

2.字符串类型String

var a="hello word";//字符串类型

3.布尔类型booloean表示判断

var a =true/false;

4.undefined类型，表示未定义的,没有数据的一种描述

var a=undefined;

5.null类型，表示空,没有数据

var a=null;

注意undefined不等于null
6.ES6新出的数据类型symbol

var a=symbol("es6_data")

引用数据类型
引用数据类型（对象数据类型）
1.引用数据有对象，函数，数组，类数组，object

var a={};

2.引用数据类型分为：函数类型function 对象object

数字

数字的基本计算：+，-，*，%

var num1=10;
var num2=25;
var num3=num1+num2;
var num4=num3-num2;
var num5=num4*num1;
var num6=num2%2;//num2%2是取余数，表达式的结果永不会超过%number的number值，例如这个变量里不会超过2

数字难点：++与 - -

var a=100;
a=a+100;//=是赋值运算符，从左右往左，把右边的数据赋值给左边的变量

区别：a++,++a
1.a++是先把a的值取出来用后，再加1
2.++a是先把a的值加1后再使用
综上- -a与a- -同理
eg:

             var a=20;
			 var b=30;
			 (a++)-(--b)+(a++)+(b++);
			var c=b--;
			var d=(--a);
			console.log(a,b,c,d);

非数字NaN
eg:

var a=10;
var b=a*"hello";
console.log(b);

字符串

1.字符串用双引号或单引号，一般外面用单引号里面用双引号

            var str1="hello1"
			var str2='hello2'
			 var str3='<a href="xxx">xxx</a>'//单引号在外双引号在内
			 console.log(str1,str2,str3)

2.拼接功能
eg:

            var width=100;
			var width1=100+"px"//拼接
			console.log(width1)

3.模板字符串用反引号

            var r=98;
			var g=12;
			var b=19;
			var color1="rgb("+r+","+g+","+b+")";//很麻烦
			var color2=`rgb(${r},${g},${b})`;//模板字符串
			console.log(color2);

调试Javascript的方法

1.断点（浏览器里用source使用断点）
2.控制台（常用）
console和source
3.系统提供的方法（最常用）
console.log()最常用
alert（弹窗）
console.error() //与log的区别是颜色不一样，error显示的是红色
console.table()
XXX属性/方法 of undefined/null
等等方法

了解DOM操作

1.获取元素

<div id="div1">777</div>
<script type="text/javascript">
 var div1=document.querySelector("#div1")；//通过选择器获取了元素
 </script>

2.给元素写内容: innerHTML尖括号的内容 src:图片的路径 style.xxx

<div id="div1">777</div>
<script type="text/javascript">
 var div1=document.querySelector("#div1")；//通过选择器获取了元素
 div1.innerHTML="66666";//给元素写内容
 </script>

3.给元素添加事件（三要素：事件源，事件类型，处理程序）

<body>	
			<img id="img1" src="https://openfile.meizu.com/group1/M00/07/2A/Cgbj0FzvOLqASrUfAAksP05vyhs545.png"/>
			<img id="img2" src="https://openfile.meizu.com/group1/M00/01/3A/CnQOjVjJ-m2AQ1LxAAE3Ze4d72s837.png"/>	
			<img  id=img3 src="https://openfile.meizu.com/group1/M00/03/59/Cgbj0Vqwv3SAKEs9AAeZO9uMlbg447.png"/>		
		<script type="text/javascript">
			var img1=document.querySelector("#img1")	
			img1.onclick=function(){
				var body1=document.querySelector("body")
				body1.style.backgroundImage="url(https://openfile.meizu.com/group1/M00/07/2A/Cgbj0FzvOLqASrUfAAksP05vyhs545.png)"
			}
		</script>
	</body>

Typeof

1.typeof是检测一个数据的类型
2.它的返回值是单词，只会是number,string,boolean,undefined,null,object,symbol
3.它的返回值的数据类型是字符串

布尔值

1.布尔值只有true和false

             var a=true;
			 var b=20;
			 var c=b>100;//false
			 console.log(a,c);//true,false

2.if的小括号里面填的是正确的js语法,它会帮我们转化为布尔值
表示false的有: +0 -0 0 “” undefined NaN [] ![]

NULL

1.=代表从左右到左，右边的值赋给左边的变量
2.==代表数据的值相等
3.===代表数据的值相等而且类型一样
eg:

null==undefined;
"200"==200;//值相等

JS引擎

JS 引擎分类：
1.老版本IE使用Jscript引擎
2.IE9之后使用Chakra引擎
3.edge浏览器仍然使用Chakra引擎
4.firefox使用monkey系列引擎
5.safari使用的SquirrelFish系列引擎
6.Opera使用Carakan引擎
7.chrome使用V8引擎。

2019.8.5星期一

LXY9812

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Javascript入门学习笔记

@JavaScriptJavascript入门Javascript是弱类型，脚本语言，在运行的时候不需要编译JS的代码写在哪里Javascript的代码写在哪里？有三种方式1.行内式在标签对应的属性里写要执行的Javascript的代码eg:<a href="javascript:console.log(666)">xxxx</a><a href="...
复制链接

扫一扫