javaScript快速入门(仅需一天)
js入门 OneDay
最近学习了一些简单的js入门知识，拿出来分享一下，不喜勿喷！
js的特点：
①主要用来向htnl页面添加动态效果
②直接嵌套再html界面中，建议写在js文件中，有利于结构和行为的分离
③脚本语言可以不用进行预编译直接执行
④弱类型，对使用的数据没有严格的要求
⑤基于对象，不仅可以创建对象，还可以拥有现有的对象
⑥跨平台性，绝大多数浏览器都支持
介绍完js的特点，来看看js中注释//是用来注释单行（多行也是没有问题的）的，/* */是用来注释代码块的。
js代码有时会出错，所以我们要学会如何调试：
<script>alert("alert弹出");//弹出框console.log("console.log控制台输出");//控制台输出prompt("prompt提示用户进行输入的对话框");//提示，对话框的形式，//prompt传入的任何数据都会变成字符串confirm("confirm先是一个带取消按钮的对话框");//显示一个带有取消按钮的对话框document.write("<p>这里的内容由document.write输出</p>");//内容输出在文档中
</script>
注意：
js代码严格区分大小写
每个语句结尾都需要分号（最好加上分号，以免引擎自动补齐造成语义改变）
js引用方式：
方法一：
<!--js引用方式1：外部引用可以放在head body之中，用script标签来引用-->
<script type="text/jscript" charset="UTF-8" src="js/js.js"></script>
方法二：
<!--js引用方法2 内部标签 可以放在head body之中用<script></script>包起来-->
<script> alert("2333"); </script>
方法三：
<!--js引用方法3 放在标签内部 不需要使用script标签，不触发不执行-->
<button onclick="alert(2345667)">点击</button>
<!--语法格式<开始标签 on+事件类型=“js代码”></结束标签>-->
变量的命名：
必须以下划线或者字母开头，后面可以跟字母、下划线、数字，不可以有空格和特殊字符
var str_1 = 0;//声明一个变量并赋值
alert (str_1);//弹出变量
//变量名区分大小写
var a = 1;
alert (A);//会报错，无法找到A，js严格区分大小写
不能使用js中的关键字和保留值作为变量名
关键字
break、case、catch、continue、default、delete、do、else、finally、for、function、if、 return、switch、this、in、 instanceof、new、throw、try、typeof、var、void、 while、with…
保留字
abstract、boolean、byte、char、class、const、debugger、double、enum、export、extends、final、float、goto、 implements、import、int、interface long、native、package、private、protected、public、 short、super、static、synchronized、throws、transient、volatile …
切记： 改变关键字和保留字的中字母的大小写也是一样不行的
命名的时候一定要贴近所需变量的意思或意义，方便以后查找和维护
例如：名字 name、年龄 age、性别 sex…
命名规范
Camel标记法（小驼峰）：采用第一个字符首字母小写，其他字符首字母大写
Pascal标记法（大驼峰）：所有首字母大写
匈牙利标记法：i代表整数 iMyAge s代表字符串 sMyName
变量的声明与赋值
es5：使用关键字 var， var 变量名
例如：var a = 2；定义一个变量a，并给它赋值2
es6： let（定义变量） const（定义常量）
var num = 3;//声明变量并赋值
var num;
num = 2;
//先声明后赋值
var myName,myAge,mySex,Toast;
myName = "小明";
myAge = 18;
mySex = "男"；
Toast="我的名字是："+myName+"，今年"+myAge+"岁，我的性别是："+mySex；
变量的作用域
全局变量
如其名，是全局的，它定义在函数之外，作用范围是整个函数，在声明变量的时候，凡是没有带var关键字自接赋值的都是全局变量
局部变量
定义在函数体之内，只对该函数起作用其他函数不可见
访问规则：
函数体内的可以访问父函数的变量，父函数不可以访问子函数的变量
可以使用闭包的方式改变变量的作用域
<script>var str_father="im am boy！"//定义一个全局变量function my(){//定义一个函数，名为my，命名是自定义var str = "this is my !";//声明变量并赋值var num = "3";//声明变量并赋值console.log(str_father);//控制台输出全局变量console.log(str);//控制台输出局部变量if(num==1){//if条件判断，符合条件执行，否则不执行var str_child = "gun";alert(str);//弹出变量console.log(str_father);//控制台输出全局变量}else{alert("if不行")}}
</script>
变量的覆盖
var str_long = "this is long!";//定义变量console.log(str_long);//输出变量var str_long;console.log(str_long);//直接声明不赋值，变量不会改变var str_long = "this is short!";//声明并赋值，变量会被覆盖console.log(str_long);//省略关键字varstr_short = 123;console.log(str_short);//直接赋值，全局变量，建议不要使用//str_num;//console.log(str_num);//不使用var，不赋值，会报错
基础算术符号计算
<script>var int_num = 10;//定义一个变量，并赋值var float_num = 20.2;//定义一个变量，赋一个浮点型数字//+ - * / 先加减后乘除 先括号里的后外面（说实话，感觉和数学区别不大）var a=10;var b=20;var c= a+b;console.log(c);var d = a-b ;console.log(d);var e=a*b;console.log(e);var f = a/b;console.log(f);var g = a*(a+b)-(a-b);console.log(g);</script>
非数字
NaN（not a number）
var str="你好";var str_change= Number(str);//Number（） 把括号里的变量转为数值console.log(str_change);//NaN，因为文字是无法转换为数字的function my(){//封装成了函数，需要调用if(isNaN(str_change)){//isNaN 判断一个值是否为NaNalert("not");}else{alert("yes");}}
写在html代码中（函数名一定要对应，否则会调用失败）
<button onclick="my()">请点击</button>
isNaN的使用
var num1 = "147";var str00 = "hllow";var num2 = Number(num1);var str3= Number(str00);console.log(isNaN(num2));//falseconsole.log(isNaN(str3));//true//isNaN判断一个值是否是非数字//是就返回true 不是就返回false
字符串的输出与拼接
//string字符串，字符串是以单引号或者双引号括起来的任意文本，//单引号或者双引号成对出现var str_string="123";//定义一个变量var str_01 = "他说：'明天'";//双引号包单引号var str_02 = '他说："晚上"';//单引号包双引号console.log(str_01);console.log(str_02);var str_03= "他说：'听天书\"明天\"'";//Unexpected identifier 意外的标识符//\ \转义，单引号里包双引号再包单引号时，需要使用转义符console.log(str_03);var str_04 = "小明";var sAge = "18";var sLoaction = "广州";var info = "他的名字叫"+str_04+"，他今年"+sAge+"岁，是"+sLoaction+"本地人";//ES5字符串用+拼接并赋值var info01 = `他的名字叫${str_04},他今年${sAge}岁,是${sLoaction}本地人`;//ES6字符串用``拼接，使用${}包变量console.log(info);console.log(info01);
操作字符串①
//length返回字符串的长度var str_len="wasdsafsddfssd";console.log(str_len.length);//length 返回字符的长度，包括空格console.log(str_len[4]);//返回指定字符//toUpperCase()把字符串全部变成大写console.log(str_len.toUpperCase());var str_case = str_len.toUpperCase();//把表达式中的结果赋值给变量//toLowerCase()把字符串全部变成小写console.log(str_case.toLowerCase());/*indezOf()和lastIndexOf()indexOf从前往后搜索lastIndexOf()从后往前搜索* */console.log(str_len.indexOf("a",3));/*indexOf从前往后搜索，返回第一个符合参数的指定位置indexOf(a,b)a,b是index的两个参数，第二个参数可选；第一个参数是指定的要搜索的字符，第二个是搜索的起始位置，它返回下标* */console.log(str_len.lastIndexOf("a",5));/*lastIndexOf从后往前搜索，返回第一个符合参数的指定字符的位置lastIndexOf(a,b)a,b是lastIndexOf的两个参数，第二个参数可选；第一个参数是指定的要搜索的字符，第二个是搜索是指定字符的个数（从前往后搜索），返回最后一个符合条件的字符的下标* */console.log(str_len.indexOf("v"));//搜索不到返回-1
操作字符串②（截取）
var str_len="wasdsafsddfssd";console.log(str_len.charAt(3,9));//chartAt（）返回指定下标所代表的字符串/*返回子字符串：slice（），substring（），substr（），从某个字符串中获取一段字符串第二个参数是字符串的终止位置，不包括终止位置的那个字符，如果只有一个参数，是起始位置的参数，默认获取从起始位置到最后的所有字符作为子字符串，不改变原来的字符串* */var str_slice = str_len.slice(3,8);console.log(str_slice);var str_string = str_len.substring(3,9);console.log(str_string);var str_other = str_len.slice(3);//slice（）只有一个参数，是起始位置console.log(str_other);//默认是获取从起始位置到结尾的所有字符/*slice（）和substring（）的区别，在对于负数的处理，slice（）是从字符串的结尾往前计数，substring（）对负数直接忽略，作为0来处理，并把最小的作为起始位置，大的作为结束位置* */var str_an = str_len.slice(3,-5);//参数二为负数，表示从字符串的末尾往前计数console.log(str_an);var str_sub = str_len.substring(3,-5);//相当于str_len.substring（3,0）； 也就是str_len。substring（0,3）；console.log(str_sub);//substr（），接受两个参数，第一个是起始位置，第二个子字符串是长度var str_str = str_len.substr(0,9);//从第一个字符开始，截取9个字符长度console.log(str_str);
算术运算符
//算术运算符：+、-、*、/、%
//+ 用于加法var sum_jia = 1+1;console.log(sum_jia);//加法运算//+用于字符串拼接，任意类型的数据和字符串拼接后都会是字符串var num = 18;console.log(typeof(num));//typeof（）检测数据类型var str = "他的年龄是：";console.log(typeof(str));var totle = str+num;//任意类型的数据和字符串拼接后都会是字符串console.log(typeof(totle));console.log(totle);//-用于减法var sum_jian = 1-2;console.log(sum_jian);//*用于乘法var sum_cheng = 1*2;console.log(sum_cheng);// /用于除法，被除数不能为零，为零则会得到无穷大，也不建议用小数var sum_chu = 1/2;console.log(sum_chu);//%求余var sum_yu = 5%3;console.log(sum_yu);
变量的自加减①
var a = 1;var b = a++;console.log(b);//1console.log(a);//1var c=++b;console.log(c);//2var sum_a = 4;var sum_b = --sum_a;console.log(sum_b);//3console.log(sum_a);//3var sum_c = sum_a++;console.log(sum_c);//3console.log(sum_a);//4var sum_d=sum_b--;console.log(sum_d);//3console.log(sum_b);//2var sum_e = sum_b;console.log(sum_b);//2console.log(sum_e);//2
例子一：
var num_a = 10;var num_b = 20;if(num_a*num_b){num_a++;num_b--;var sum_num1 = num_a+num_b;//num_a 已经是自增过后的，11//num_b 已经是自减过后的，19console.log(sum_num1);//30}else{num_a--;++num_b;var sum_num2 = num_a+num_b;//num_a 已经自减过后，9//num_b 已经自增过后，21console.log(sum_num2);}
例子二：
//+= 相加后再赋值var sum_num3 = 3;var sum_num4 = 4;sum_num4+=sum_num3;//相当于sum_sum4 = sum_4+sum_3;console.log(sum_num4);var sum=0;for(var i=o;i<=100;i++){//for()循环，满足条件一直执行sum+=i;//相当于sum = sum + i;console.log(sum);console.log(i);}
变量的自加减②
//+=相加后再赋值var sum_str = "这个数字为：";sum_str += sum_num3;//拼接字符console.log(sum_str);console.log(typeof(sum_str));//String类型//-=相减后再赋值var sum_num5 = 6;sum_num5-= sum_num4;console.log(sum_num5);//*=相乘后再赋值var sum_num6 = 7;sum_num6 *= sum_num6;console.log(sum_num6);// /=相除后再赋值var sum_num7 = 8;sum_num7 /=sum_num6;console.log(sum_num7);// %=求余后再赋值var sum_num8 %= sum_num6;console.log(sum_num8);console.log(sum_num6);//=、==、===的区别/*= 赋值，将右边的赋值给左边== 全等，数值类型相等，先自动换数据类型再比较=== 绝对等于，数值、类型严格相等* */
以上是我一个星期的入门基础学习，后续补全。
欢迎各位大神前来指教，也欢迎想要学习的伙伴一起探讨！！！
javaScript快速入门(仅需一天)相关推荐
- JavaScript快速入门（四）——JavaScript函数
函数声明 之前说的三种函数声明中(参见JavaScript快速入门(二)--JavaScript变量),使用Function构造函数的声明方法比较少见,我们暂时不提.function func() { ...
- JavaScript快速入门(1)
JavaScript快速入门 详情百度百科 1. 什么是javaScript 2.快速入门 2.1.js引入方法 2.2. javaScript 的基本语法入门 2.3.数据类型 2.4.严格检查模式 ...
- 前端三大技术 HTML、CSS、JavaScript 快速入门手册
听到前端技术,不少朋友一定会感到有些陌生.但其实,前端,你每天都在接触. 你正在使用的APP,你正在浏览的网页,这些你能看到的界面,都属于前端. 而前端最重要的三大技术,HTML,CSS,JavaSc ...
- 狂神JavaScript快速入门学习笔记
狂神视频地址 1什么是JavaScript JavaScript是一门世界上最流行的脚本语言 2快速入门 2.1 引入JavaScript 1 内部标签 <script>alert('he ...
- 3.JavaScript快速入门
1.什么是JavaScript 1.概述 是一门世界上最流行的脚本语言 Java和 JavaScript 一个合格的后端人员 必须精通JavaScript 2.历史 ECMAScript是JavaSc ...
- 三：JavaScript快速入门(脚本开发方向)
跳转总目录 文章目录 1.js简介 2.js入门 2.1 变量 介绍 变量的声明 2.2 运算符 2.3 数据类型 3.js判断 4.js循环 for循环 While循环 do while循环 5.j ...
- javaScript快速入门(笔记)
该笔记大部分搬运B站遇见狂神说的javaScript,顺便把图文合并记录,便于回顾 视频地址:[狂神说Java]JavaWeb入门到实战_哔哩哔哩_bilibili记得三连 目录 1 ...
- JavaScript 快速入门教程
文章目录 1.JavaScript 简介 2.JavaScript 用法 2.1.在 `<head>` 或者 `<body>` 的 JavaScript 2.2.外部的 Jav ...
- 2、JavaScript快速入门
2.1 引入JavaScript 内部标签 <!-- 在script标签内写JavaScript(简称js)代码,代码块可以放在head中,也可以放在body中--> <script ...
最新文章
- 大一c语言大作业课题大全,昆明理工大学大一C语言大作业题目.doc
- keras 模型用于预测时的注意事项
- [转]MyBatis的foreach语句详解
- Matrix Studio LeetCode 刷题指南
- vscode安装sftp控制文件自动上传
- 钉钉一个人怎么多部门 钉钉一个人加入多个部门的技巧
- vlookup使用步骤_使用vlookup出错，看看原因多为这几个！快来看看！
- 一行 Python 代码能实现什么丧心病狂的功能？ | CSDN博文精选
- 通过putty进行端口映射并且启动jupyter notebook
- oracle列表分区ADD VALUES或DROP VALUES包含数据变化
- 干货收藏 | Python语音识别终极指南
- 《Redis视频教程》（p6）
- css td 宽度百分比设置,css怎么设置td的宽度
- 【无人机组装与调试】第一章 概述
- 现代公关无需遮遮掩掩，明火执仗开干就行
- 自由职业者：提高效率的6个简单方法
- marvin java_java-与MarvinFramework比较图像
- 麒麟操作系统之光盘刻录
- Java 中 switch 的用法
- 计算机领域的术语与缩写,计算机和生活常用缩写与术语